diff --git a/src/canvas/components/ErrorDisplay.tsx b/src/canvas/components/ErrorDisplay.tsx
index 5600db4b..bef439da 100644
--- a/src/canvas/components/ErrorDisplay.tsx
+++ b/src/canvas/components/ErrorDisplay.tsx
@@ -1,6 +1,11 @@
+import { css } from "@emotion/react";
 import { Box, Code, Dialog, ScrollArea, Text } from "@radix-ui/themes";
 import { memo } from "react";
 
+const styles = {
+  trigger: css({ cursor: "pointer" }),
+};
+
 interface ErrorDisplayProps {
   id: string;
   error: string;
@@ -11,25 +16,29 @@ const ErrorDisplay = memo(({ id, error, message }: ErrorDisplayProps) => {
   return (
     <Dialog.Root>
       <Dialog.Trigger>
-        <Box width="100%" height="100%" p="2" css={{ cursor: "pointer" }}>
-          <Text size="2" color="red">
+        <Box width="100%" height="100%" p="2" css={styles.trigger} asChild>
+          <Text size="2" as="div" color="red">
             An error occurred in widget <Code variant="ghost">{id}</Code>. Click
             anywhere to check the details.
           </Text>
         </Box>
       </Dialog.Trigger>
-      <Dialog.Content size="2" maxWidth="60vw">
-        <Dialog.Title size="3" color="red" mb="1">
+      <Dialog.Content size="1" maxWidth="60vw">
+        <Dialog.Title size="3" color="red" mt="2" mb="1">
           Error in widget <Code variant="ghost">{id}</Code>
         </Dialog.Title>
-        <Dialog.Description size="2" color="red" mb="2">
+        <Dialog.Description size="2" color="red" mb="4">
           {error}
         </Dialog.Description>
         <ScrollArea asChild>
-          <Box pb="3" pr="3" maxHeight="50vh">
-            <Code size="2" variant="ghost" css={{ whiteSpace: "pre" }}>
-              {message}
-            </Code>
+          <Box px="3" pb="3" maxHeight="50vh">
+            <Box asChild m="0">
+              <pre>
+                <Code size="2" variant="ghost">
+                  {message}
+                </Code>
+              </pre>
+            </Box>
           </Box>
         </ScrollArea>
       </Dialog.Content>
diff --git a/src/canvas/components/WidgetContainer.tsx b/src/canvas/components/WidgetContainer.tsx
index 8fe8bc44..0c46b478 100644
--- a/src/canvas/components/WidgetContainer.tsx
+++ b/src/canvas/components/WidgetContainer.tsx
@@ -1,4 +1,4 @@
-import { RefObject, memo, useCallback, useRef } from "react";
+import { RefObject, memo, useRef } from "react";
 import Draggable, { DraggableData, DraggableEvent } from "react-draggable";
 import { ErrorBoundary } from "react-error-boundary";
 import ErrorDisplay from "./ErrorDisplay";
@@ -6,6 +6,23 @@ import { stringifyError } from "../utils";
 import { LuGripVertical } from "react-icons/lu";
 import { Box } from "@radix-ui/themes";
 import { updateWidgetSettings, useWidgetsStore } from "../hooks";
+import { css } from "@emotion/react";
+
+const styles = {
+  wrapper: css({
+    "&:hover": { ".handle": { opacity: 1 } },
+  }),
+  handle: css({
+    cursor: "grab",
+    opacity: 0,
+    zIndex: 2,
+    transition: "opacity 200ms ease-in-out",
+  }),
+  container: css({
+    color: "var(--gray-12)",
+    zIndex: 1,
+  }),
+};
 
 interface WidgetContainerProps {
   id: string;
@@ -15,69 +32,59 @@ const WidgetContainer = memo(({ id }: WidgetContainerProps) => {
   const { Component, width, height, x, y, opacity } = useWidgetsStore(
     (state) => state.widgets[id],
   );
-  const containerRef = useRef<HTMLDivElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
-  const onStop = useCallback(
-    (_: DraggableEvent, data: DraggableData) => {
-      updateWidgetSettings(id, { x: x + data.x, y: y + data.y }, true);
-    },
-    [id, x, y],
-  );
+  const onStop = (_: DraggableEvent, data: DraggableData) => {
+    updateWidgetSettings(id, { x: x + data.x, y: y + data.y }, true);
+  };
 
   return (
     <Draggable
       // TODO: remove the `as` part which is workaround for React 19:
       // https://github.com/react-grid-layout/react-draggable/issues/768
-      nodeRef={containerRef as RefObject<HTMLDivElement>}
+      nodeRef={wrapperRef as RefObject<HTMLDivElement>}
       onStop={onStop}
       bounds="body"
-      handle=".draggable-handle"
+      handle=".handle"
       position={{ x: 0, y: 0 }}
     >
       <Box
-        ref={containerRef}
+        ref={wrapperRef}
         overflow="hidden"
         position="absolute"
-        left={`${x}px`}
-        top={`${y}px`}
-        width={width ?? "300px"}
-        height={height ?? "150px"}
-        css={{
-          color: "var(--gray-12)",
-          backgroundColor: "var(--gray-surface)",
-          borderRadius: "var(--radius-2)",
-          boxShadow: "0 0 2px var(--gray-8)",
-          opacity: `${opacity}%`,
-        }}
+        css={styles.wrapper}
+        style={{ left: x, top: y }}
       >
-        <LuGripVertical
-          className="draggable-handle"
-          size={20}
-          css={{
-            position: "absolute",
-            top: "var(--space-1)",
-            right: "var(--space-1)",
-            cursor: "grab",
-            opacity: "0",
-            zIndex: 9999,
-            transition: "opacity 200ms ease-in-out",
-            "&:hover": {
-              opacity: "1",
-            },
-          }}
-        />
-        <ErrorBoundary
-          resetKeys={[Component]}
-          fallbackRender={({ error }) => (
-            <ErrorDisplay
-              id={id}
-              error="Error in the widget component [React error boundary]"
-              message={stringifyError(error)}
-            />
-          )}
+        <Box
+          className="handle"
+          position="absolute"
+          top="1"
+          right="1"
+          css={styles.handle}
+          asChild
+        >
+          <LuGripVertical size={20} />
+        </Box>
+        <Box
+          position="relative"
+          width={width ?? "300px"}
+          height={height ?? "150px"}
+          css={styles.container}
+          style={{ opacity: opacity / 100 }}
         >
-          <Component id={id} />
-        </ErrorBoundary>
+          <ErrorBoundary
+            resetKeys={[Component]}
+            fallbackRender={({ error }) => (
+              <ErrorDisplay
+                id={id}
+                error="Error in the widget component [React error boundary]"
+                message={stringifyError(error)}
+              />
+            )}
+          >
+            <Component id={id} />
+          </ErrorBoundary>
+        </Box>
       </Box>
     </Draggable>
   );
diff --git a/src/canvas/index.html b/src/canvas/index.html
index 90785065..eb6e88ac 100644
--- a/src/canvas/index.html
+++ b/src/canvas/index.html
@@ -8,7 +8,7 @@
   </head>
 
   <body style="overflow: hidden; margin: 0">
-    <div id="root"></div>
+    <div id="root" style="width: 100vw; height: 100vh"></div>
     <script type="module" src="main.tsx"></script>
   </body>
 </html>
diff --git a/src/custom.css b/src/custom.css
index ea5ea476..f5e3c6b7 100644
--- a/src/custom.css
+++ b/src/custom.css
@@ -1,4 +1,9 @@
 .radix-themes {
   --em-font-family: var(--default-font-family);
   --em-font-size-adjust: 1;
+
+  &[data-is-root-theme="true"] {
+    height: 100%;
+    width: 100%;
+  }
 }
diff --git a/src/manager/App.tsx b/src/manager/App.tsx
index 5942385c..89be4e50 100644
--- a/src/manager/App.tsx
+++ b/src/manager/App.tsx
@@ -25,12 +25,7 @@ const App = () => {
   useUpdateSettingsListener();
 
   return (
-    <RadixTheme
-      appearance={theme}
-      accentColor="indigo"
-      grayColor="slate"
-      css={{ height: "100vh" }}
-    >
+    <RadixTheme appearance={theme} accentColor="indigo" grayColor="slate">
       <Toaster
         position="bottom-center"
         theme={theme}
diff --git a/src/manager/components/About/index.tsx b/src/manager/components/About/index.tsx
index a266bce6..d85a231d 100644
--- a/src/manager/components/About/index.tsx
+++ b/src/manager/components/About/index.tsx
@@ -3,22 +3,28 @@ import ExternalCopyLink from "../ExternalCopyLink";
 import Logo from "/deskulpt.svg";
 import { memo } from "react";
 import { FaGithub } from "react-icons/fa";
+import { css } from "@emotion/react";
+
+const styles = {
+  logo: css({
+    ".dark &": {
+      filter: "invert(90%) hue-rotate(170deg)",
+      opacity: 0.9,
+    },
+  }),
+  table: css({
+    "--table-cell-padding": "var(--space-1) 0",
+    "--table-cell-min-height": 0,
+    "& tr": { "--table-row-box-shadow": "none" },
+    "& th": { color: "var(--gray-11)", width: "100px" },
+  }),
+};
 
 const AboutTab = memo(() => {
   return (
     <Flex height="100%" pb="8" justify="center" align="center">
       <Flex align="center" justify="center" flexGrow="1">
-        <Avatar
-          src={Logo}
-          fallback="D"
-          size="8"
-          css={{
-            ".dark &": {
-              filter: "invert(90%) hue-rotate(170deg)",
-              opacity: 0.9,
-            },
-          }}
-        />
+        <Avatar src={Logo} fallback="D" size="8" css={styles.logo} />
       </Flex>
       <Box flexGrow="1">
         <Heading size="6" mb="1">
@@ -27,15 +33,7 @@ const AboutTab = memo(() => {
         <Heading size="3" mb="4" weight="regular" color="gray">
           A cross-platform desktop customization tool
         </Heading>
-        <Table.Root
-          size="1"
-          css={{
-            "--table-cell-padding": "var(--space-1) 0",
-            "--table-cell-min-height": 0,
-            "& tr": { "--table-row-box-shadow": "none" },
-            "& th": { color: "var(--gray-11)", width: "100px" },
-          }}
-        >
+        <Table.Root size="1" css={styles.table}>
           <Table.Body>
             <Table.Row align="center">
               <Table.RowHeaderCell>Version</Table.RowHeaderCell>
diff --git a/src/manager/components/IntegerInput.tsx b/src/manager/components/IntegerInput.tsx
index 1c3db743..24c60b32 100644
--- a/src/manager/components/IntegerInput.tsx
+++ b/src/manager/components/IntegerInput.tsx
@@ -1,6 +1,15 @@
+import { css } from "@emotion/react";
 import { Box, BoxProps, Reset } from "@radix-ui/themes";
 import { ChangeEvent, KeyboardEvent, useCallback } from "react";
 
+const styles = {
+  root: css({
+    backgroundColor: "var(--gray-5)",
+    borderRadius: "var(--radius-2)",
+    lineHeight: "1.6",
+  }),
+};
+
 type IntegerInputProps = BoxProps & {
   value: number;
   onValueChange: (value: number) => void;
@@ -78,16 +87,7 @@ const IntegerInput = ({
   };
 
   return (
-    <Box
-      pl="2"
-      css={{
-        backgroundColor: "var(--gray-5)",
-        borderRadius: "var(--radius-2)",
-        lineHeight: "1.6",
-      }}
-      {...boxProps}
-      asChild
-    >
+    <Box pl="2" css={styles.root} {...boxProps} asChild>
       <Reset>
         <input
           type="number"
diff --git a/src/manager/components/Settings/SectionTable.tsx b/src/manager/components/Settings/SectionTable.tsx
index 43b91c3c..e52b6a85 100644
--- a/src/manager/components/Settings/SectionTable.tsx
+++ b/src/manager/components/Settings/SectionTable.tsx
@@ -1,6 +1,21 @@
+import { css } from "@emotion/react";
 import { Box, Heading, Table } from "@radix-ui/themes";
 import { PropsWithChildren } from "react";
 
+const styles = {
+  root: css({
+    border: "1px solid var(--gray-a6)",
+    borderRadius: "var(--radius-2)",
+  }),
+  title: css({ backgroundColor: "var(--gray-1)" }),
+  table: css({
+    "--table-cell-padding": "var(--space-1) var(--space-2)",
+    "--table-cell-min-height": 0,
+    "& tr": { "--table-row-box-shadow": "none" },
+    "& th": { width: "120px" },
+  }),
+};
+
 interface SectionTableProps {
   title: string;
 }
@@ -10,38 +25,20 @@ const SectionTable = ({
   children,
 }: PropsWithChildren<SectionTableProps>) => {
   return (
-    <Box
-      position="relative"
-      mt="2"
-      pt="4"
-      pb="2"
-      px="1"
-      css={{
-        border: "1px solid var(--gray-a6)",
-        borderRadius: "var(--radius-2)",
-      }}
-    >
+    <Box position="relative" mt="2" pt="4" pb="2" px="1" css={styles.root}>
       <Box
         position="absolute"
         top="calc(-0.5 * var(--heading-line-height-2))"
         left="2"
         px="2"
-        css={{ backgroundColor: "var(--gray-1)" }}
+        css={styles.title}
         asChild
       >
         <Heading size="2" color="gray" weight="medium">
           {title}
         </Heading>
       </Box>
-      <Table.Root
-        size="1"
-        css={{
-          "--table-cell-padding": "var(--space-1) var(--space-2)",
-          "--table-cell-min-height": 0,
-          "& tr": { "--table-row-box-shadow": "none" },
-          "& th": { width: "120px" },
-        }}
-      >
+      <Table.Root size="1" css={styles.table}>
         <Table.Body>{children}</Table.Body>
       </Table.Root>
     </Box>
diff --git a/src/manager/components/Settings/Shortcut.tsx b/src/manager/components/Settings/Shortcut.tsx
index a56f83d7..9ea7af77 100644
--- a/src/manager/components/Settings/Shortcut.tsx
+++ b/src/manager/components/Settings/Shortcut.tsx
@@ -20,9 +20,21 @@ import { Shortcuts } from "../../../types";
 import { updateShortcut, useAppSettingsStore } from "../../hooks";
 import { toast } from "sonner";
 import { INVALID_KEYCODES, KEYCODES, MODIFIERS } from "./keyboard";
+import { css } from "@emotion/react";
 
 const INITIAL_PLACEHOLDER = "Shortcut disabled";
 
+const styles = {
+  input: css({
+    width: "240px",
+    fontSize: "var(--font-size-2)",
+    paddingLeft: "var(--space-1)",
+    "> input": { cursor: "text" },
+    "--text-field-focus-color": "var(--accent-8)",
+  }),
+  inputInvalid: css({ "--text-field-focus-color": "var(--red-8)" }),
+};
+
 interface Props {
   shortcutKey: keyof Shortcuts;
 }
@@ -165,15 +177,7 @@ const ShortcutAction = ({ shortcutKey }: Props) => {
               onFocus={handleFocus}
               onBlur={handleBlur}
               onKeyDown={handleKeyDown}
-              css={{
-                width: "240px",
-                fontSize: "var(--font-size-2)",
-                paddingLeft: "var(--space-1)",
-                "> input": { cursor: "text" },
-                "--text-field-focus-color": isValid
-                  ? "var(--accent-8)"
-                  : "var(--red-8)",
-              }}
+              css={[styles.input, !isValid && styles.inputInvalid]}
             >
               <TextField.Slot side="right">
                 <IconButton
diff --git a/src/manager/components/Widgets/Config.tsx b/src/manager/components/Widgets/Config.tsx
index b4b4b2d5..980d77c1 100644
--- a/src/manager/components/Widgets/Config.tsx
+++ b/src/manager/components/Widgets/Config.tsx
@@ -3,6 +3,16 @@ import { WidgetConfigType } from "../../../types";
 import { useWidgetsStore } from "../../hooks";
 import { memo } from "react";
 import Dependencies from "./Dependencies";
+import { css } from "@emotion/react";
+
+const styles = {
+  table: css({
+    "--table-cell-padding": "var(--space-1) var(--space-2)",
+    "--table-cell-min-height": 0,
+    "& tr": { "--table-row-box-shadow": "none" },
+    "& th": { color: "var(--gray-11)", width: "120px" },
+  }),
+};
 
 interface ConfigProps {
   id: string;
@@ -15,16 +25,7 @@ const Config = memo(({ id }: ConfigProps) => {
     <ScrollArea asChild>
       <Box height="200px" pr="3" pb="3">
         {config.type === WidgetConfigType.VALID ? (
-          <Table.Root
-            size="1"
-            layout="fixed"
-            css={{
-              "--table-cell-padding": "var(--space-1) var(--space-2)",
-              "--table-cell-min-height": 0,
-              "& tr": { "--table-row-box-shadow": "none" },
-              "& th": { color: "var(--gray-11)", width: "120px" },
-            }}
-          >
+          <Table.Root size="1" layout="fixed" css={styles.table}>
             <Table.Body>
               <Table.Row align="center">
                 <Table.RowHeaderCell>Name</Table.RowHeaderCell>
diff --git a/src/manager/components/Widgets/Dependencies.tsx b/src/manager/components/Widgets/Dependencies.tsx
index 9e6011d6..850fff4f 100644
--- a/src/manager/components/Widgets/Dependencies.tsx
+++ b/src/manager/components/Widgets/Dependencies.tsx
@@ -1,6 +1,16 @@
+import { css } from "@emotion/react";
 import { Code, Inset, Link, Popover, Table, Text } from "@radix-ui/themes";
 import { memo } from "react";
 
+const styles = {
+  table: css({
+    "--table-cell-padding": "var(--space-1) var(--space-2)",
+    "--table-cell-min-height": 0,
+    "[data-radix-scroll-area-viewport]": { maxHeight: "150px" },
+    "& tr:last-child": { "--table-row-box-shadow": "none" },
+  }),
+};
+
 interface DependenciesProps {
   dependencies: Record<string, string>;
 }
@@ -17,15 +27,7 @@ const Dependencies = memo(({ dependencies }: DependenciesProps) => {
       </Popover.Trigger>
       <Popover.Content size="1">
         <Inset side="all">
-          <Table.Root
-            size="1"
-            css={{
-              "--table-cell-padding": "var(--space-1) var(--space-2)",
-              "--table-cell-min-height": 0,
-              "[data-radix-scroll-area-viewport]": { maxHeight: "150px" },
-              "& tr:last-child": { "--table-row-box-shadow": "none" },
-            }}
-          >
+          <Table.Root size="1" css={styles.table}>
             <Table.Body>
               {dependenciesArray.map(([name, version]) => (
                 <Table.Row key={name}>
diff --git a/src/manager/components/Widgets/Settings.tsx b/src/manager/components/Widgets/Settings.tsx
index ec305d63..f2ef3b1b 100644
--- a/src/manager/components/Widgets/Settings.tsx
+++ b/src/manager/components/Widgets/Settings.tsx
@@ -3,6 +3,16 @@ import { LiaTimesSolid } from "react-icons/lia";
 import { updateWidgetSettings, useWidgetsStore } from "../../hooks";
 import { memo, useCallback } from "react";
 import IntegerInput from "../IntegerInput";
+import { css } from "@emotion/react";
+
+const styles = {
+  table: css({
+    "--table-cell-padding": "var(--space-1) var(--space-2)",
+    "--table-cell-min-height": 0,
+    "& tr": { "--table-row-box-shadow": "none" },
+    "& th": { color: "var(--gray-11)", width: "100px" },
+  }),
+};
 
 const X = ({ id }: SettingsProps) => {
   const x = useWidgetsStore((state) => state.widgets[id].settings.x);
@@ -68,16 +78,7 @@ interface SettingsProps {
 
 const Settings = memo(({ id }: SettingsProps) => {
   return (
-    <Table.Root
-      size="1"
-      layout="fixed"
-      css={{
-        "--table-cell-padding": "var(--space-1) var(--space-2)",
-        "--table-cell-min-height": 0,
-        "& tr": { "--table-row-box-shadow": "none" },
-        "& th": { color: "var(--gray-11)", width: "100px" },
-      }}
-    >
+    <Table.Root size="1" layout="fixed" css={styles.table}>
       <Table.Body>
         <Table.Row align="center">
           <Table.RowHeaderCell>Position (px)</Table.RowHeaderCell>
diff --git a/src/manager/components/Widgets/Trigger.tsx b/src/manager/components/Widgets/Trigger.tsx
index b184f994..8b7681cb 100644
--- a/src/manager/components/Widgets/Trigger.tsx
+++ b/src/manager/components/Widgets/Trigger.tsx
@@ -2,6 +2,28 @@ import { Box, Flex, Tabs, Text } from "@radix-ui/themes";
 import { WidgetConfigType } from "../../../types";
 import { useWidgetsStore } from "../../hooks";
 import { memo } from "react";
+import { css } from "@emotion/react";
+
+const styles = {
+  trigger: css({
+    justifyContent: "start",
+    height: "35px",
+    // Move the active bar indicator from bottom to left
+    "&::before": {
+      top: "10%",
+      bottom: "10%",
+      left: 0,
+      right: "unset",
+      height: "unset",
+      width: "2px",
+    },
+  }),
+  indicator: css({
+    borderRadius: "var(--radius-thumb)",
+    backgroundColor: "var(--green-10)",
+  }),
+  indicatorInvalid: css({ backgroundColor: "var(--red-10)" }),
+};
 
 interface TriggerProps {
   id: string;
@@ -12,34 +34,15 @@ const Trigger = memo(({ id, value }: TriggerProps) => {
   const config = useWidgetsStore((state) => state.widgets[id].config);
 
   return (
-    <Tabs.Trigger
-      value={value}
-      css={{
-        justifyContent: "start",
-        height: "35px",
-        // Move the active bar indicator from bottom to left
-        "&::before": {
-          top: "10%",
-          bottom: "10%",
-          left: 0,
-          right: "unset",
-          height: "unset",
-          width: "2px",
-        },
-      }}
-    >
+    <Tabs.Trigger value={value} css={styles.trigger}>
       <Flex align="center" gap="3">
         <Box
           width="6px"
           height="6px"
-          css={{
-            borderRadius: "var(--radius-thumb)",
-            backgroundColor:
-              config.type === WidgetConfigType.VALID
-                ? "var(--green-10)"
-                : "var(--red-10)",
-            opacity: 1, // TODO: decrease opacity when widget unloaded
-          }}
+          css={[
+            styles.indicator,
+            config.type === WidgetConfigType.INVALID && styles.indicatorInvalid,
+          ]}
         />
         <Text>{config.content.dir}</Text>
       </Flex>
diff --git a/src/manager/components/Widgets/index.tsx b/src/manager/components/Widgets/index.tsx
index 611784a0..02e5b6a1 100644
--- a/src/manager/components/Widgets/index.tsx
+++ b/src/manager/components/Widgets/index.tsx
@@ -7,6 +7,12 @@ import GlobalActions from "./GlobalActions";
 import Config from "./Config";
 import Settings from "./Settings";
 import Header from "./Header";
+import { css } from "@emotion/react";
+
+const styles = {
+  tabList: css({ width: "25%", height: "100%", boxShadow: "none" }),
+  tabContent: css({ boxShadow: "inset 1px 0 0 0 var(--gray-a5)" }),
+};
 
 const WidgetsTab = memo(() => {
   const ids = useWidgetsStore(
@@ -16,7 +22,7 @@ const WidgetsTab = memo(() => {
   return (
     <Tabs.Root orientation="vertical" defaultValue="tab0" asChild>
       <Flex height="100%">
-        <Tabs.List css={{ width: "25%", height: "100%", boxShadow: "none" }}>
+        <Tabs.List css={styles.tabList}>
           <Flex direction="column" width="100%" gap="4">
             <ScrollArea scrollbars="vertical" asChild>
               <Flex direction="column">
@@ -30,15 +36,13 @@ const WidgetsTab = memo(() => {
           </Flex>
         </Tabs.List>
         {ids.map((id, index) => (
-          <Tabs.Content key={id} value={`tab${index}`} asChild>
-            <Flex
-              height="100%"
-              direction="column"
-              pl="2"
-              gap="2"
-              width="75%"
-              css={{ boxShadow: "inset 1px 0 0 0 var(--gray-a5)" }}
-            >
+          <Tabs.Content
+            key={id}
+            value={`tab${index}`}
+            css={styles.tabContent}
+            asChild
+          >
+            <Flex height="100%" direction="column" pl="2" gap="2" width="75%">
               <Header id={id} />
               <Config id={id} />
               <Separator size="4" />
diff --git a/src/manager/index.html b/src/manager/index.html
index cd5c98ce..60199aa2 100644
--- a/src/manager/index.html
+++ b/src/manager/index.html
@@ -9,7 +9,7 @@
   </head>
 
   <body style="overflow: hidden; margin: 0">
-    <div id="root"></div>
+    <div id="root" style="width: 100vw; height: 100vh"></div>
     <script type="module" src="main.tsx"></script>
   </body>
 </html>