made it transparent I think?

packages/desktop/src/components/header/index.tsx

@@ -43,8 +43,9 @@ export default function NirvanaHeader({
   }, []);
 
   useEffect(() => {
-    if (userVideoStream && outputMode === "video")
+    const videoElem = document.querySelector("video");
-      document.querySelector("video").srcObject = userVideoStream;
+    if (userVideoStream && outputMode === "video" && videoElem)
+      videoElem.srcObject = userVideoStream;
   }, [userVideoStream, outputMode]);
 
   const menuOpen = useMemo(() => Boolean(anchorEl), [anchorEl]);

packages/desktop/src/electron/constants.ts

@@ -30,7 +30,7 @@ export const DimensionPresets = {
   // todo: typically just send whatever dimensions are needed
   overlayOnlyMode: {
     height: 800,
-    width: 300,
+    width: 400,
   },
 };
 

packages/desktop/src/index.ts

@@ -48,6 +48,11 @@ const createWindow = (): void => {
     roundedCorners: false,
   });
 
+  browserWindow.setBackgroundColor("#00000000");
+
+  browserWindow.setIgnoreMouseEvents(true);
+  browserWindow.setFocusable(false);
+
   // and load the index.html of the app.
   browserWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
 
@@ -91,7 +96,7 @@ app
 
         // move window/overlay to top right
 
-        browserWindow.setPosition(display.bounds.width - 300, 0, true);
+        browserWindow.setPosition(display.bounds.width - width, 0, true);
 
         browserWindow.setSize(width, height, true);
       } else {

packages/desktop/src/styles/index.css

@@ -25,3 +25,11 @@ button {
 .ant-avatar-group .ant-avatar {
   border: none;
 }
+
+body {
+  background-color: #00000000;
+}
+
+html {
+  background-color: #00000000;
+}