diff --git a/app/src/assets/icon-tablet.svg b/app/src/assets/icon-tablet.svg
new file mode 100644
index 000000000..d8e544126
--- /dev/null
+++ b/app/src/assets/icon-tablet.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.89885 1.78968C2.89885 1.57167 3.07558 1.39494 3.29359 1.39494H11.7146C11.9326 1.39494 12.1094 1.57167 12.1094 1.78968V13.2107C12.1094 13.4287 11.9326 13.6055 11.7146 13.6055H3.29359C3.07558 13.6055 2.89885 13.4287 2.89885 13.2107V1.78968ZM3.29359 0.605469C2.63956 0.605469 2.10938 1.13566 2.10938 1.78968V13.2107C2.10938 13.8648 2.63956 14.3949 3.29359 14.3949H11.7146C12.3687 14.3949 12.8988 13.8648 12.8988 13.2107V1.78968C12.8988 1.13566 12.3687 0.605469 11.7146 0.605469H3.29359ZM6.00041 12.2241C5.84781 12.2241 5.7241 12.3478 5.7241 12.5004C5.7241 12.653 5.84781 12.7767 6.00041 12.7767H9.00041C9.15302 12.7767 9.27673 12.653 9.27673 12.5004C9.27673 12.3478 9.15302 12.2241 9.00041 12.2241H6.00041Z" fill="black" style="fill:black;fill-opacity:1;"/>
+</svg>
diff --git a/app/src/components/AppBar/index.tsx b/app/src/components/AppBar/index.tsx
index 7a1008de7..f2b1fe1f8 100644
--- a/app/src/components/AppBar/index.tsx
+++ b/app/src/components/AppBar/index.tsx
@@ -27,7 +27,7 @@ const AppBar = observer(() => {
                 'flex flex-row items-center pl-20 h-10 border-b bg-background dark:bg-background-active transition-colors duration-300 ease-in-out',
                 routeManager.route === Route.SIGN_IN && 'bg-transparent border-b-0',
                 updateManager.updateAvailable &&
-                    'bg-red-950 transition-opacity duration-300 ease-in-out',
+                    'bg-red-950 dark:bg-red-950 dark:text-red-300 text-red-300 transition-opacity duration-300 ease-in-out',
             )}
         >
             <div className="appbar w-full h-full"></div>
@@ -36,7 +36,10 @@ const AppBar = observer(() => {
                     <Button
                         size="sm"
                         variant="ghost"
-                        className={clsx(updateManager.updateAvailable && 'hover:bg-red-800')}
+                        className={clsx(
+                            updateManager.updateAvailable &&
+                                'hover:bg-red-800 hover:text-red-100 dark:hover:text-red-100',
+                        )}
                         onClick={() => {
                             setTheme(nextTheme);
                         }}
@@ -53,7 +56,10 @@ const AppBar = observer(() => {
                     <Button
                         size="sm"
                         variant="ghost"
-                        className={clsx(updateManager.updateAvailable && 'hover:bg-red-800')}
+                        className={clsx(
+                            updateManager.updateAvailable &&
+                                'hover:bg-red-800 hover:text-red-100 dark:hover:text-red-100',
+                        )}
                         onClick={() => {
                             window.open(Links.DISCORD, '_blank');
                         }}
@@ -68,7 +74,10 @@ const AppBar = observer(() => {
                     <Button
                         size="sm"
                         variant="ghost"
-                        className={clsx(updateManager.updateAvailable && 'hover:bg-red-800')}
+                        className={clsx(
+                            updateManager.updateAvailable &&
+                                'hover:bg-red-800 hover:text-red-100 dark:hover:text-red-100',
+                        )}
                         onClick={() => {
                             window.open(Links.GITHUB, '_blank');
                         }}
diff --git a/app/src/routes/editor/TopBar/ProjectSelect/ProjectNameInput.tsx b/app/src/routes/editor/TopBar/ProjectSelect/ProjectNameInput.tsx
index 848b276fb..d32df7115 100644
--- a/app/src/routes/editor/TopBar/ProjectSelect/ProjectNameInput.tsx
+++ b/app/src/routes/editor/TopBar/ProjectSelect/ProjectNameInput.tsx
@@ -65,7 +65,7 @@ const ProjectNameInput = observer(() => {
                     }
                     onKeyDown={handleKeyDown}
                     onBlur={handleRenameProject}
-                    className="mx-0 max-w-[200px] px-1 py-0 h-6 text-foreground-onlook text-small"
+                    className="mx-0 max-w-[200px] px-1 py-0 h-6 text-foreground-onlook text-small caret-red-500 selection:bg-red-500/50 placeholder:hover:text-red-500 selection:text-red-900 dark:selection:bg-red-500/50 dark:selection:text-red-200"
                 />
             ) : (
                 <span
diff --git a/app/src/routes/editor/WebviewArea/BrowserControl.tsx b/app/src/routes/editor/WebviewArea/BrowserControl.tsx
index 749a373c6..21bf4f433 100644
--- a/app/src/routes/editor/WebviewArea/BrowserControl.tsx
+++ b/app/src/routes/editor/WebviewArea/BrowserControl.tsx
@@ -10,6 +10,8 @@ import {
     DesktopIcon,
     ExclamationTriangleIcon,
     ExternalLinkIcon,
+    LaptopIcon,
+    MobileIcon,
     MoonIcon,
     ReloadIcon,
     SunIcon,
@@ -35,6 +37,7 @@ interface SizePreset {
     name: string;
     width: number;
     height: number;
+    icon: React.ReactNode;
 }
 
 function BrowserControls({
@@ -54,9 +57,9 @@ function BrowserControls({
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
     const PRESETS: SizePreset[] = [
-        { name: 'Desktop', width: 1280, height: 832 },
-        { name: 'Tablet', width: 834, height: 1194 },
-        { name: 'Mobile', width: 320, height: 568 },
+        { name: 'Desktop', width: 1440, height: 1024, icon: <DesktopIcon /> },
+        { name: 'Laptop', width: 1280, height: 832, icon: <LaptopIcon /> },
+        { name: 'Mobile', width: 320, height: 568, icon: <MobileIcon /> },
     ];
 
     useEffect(() => {
@@ -163,7 +166,7 @@ function BrowserControls({
         >
             <Button
                 variant="outline"
-                className="bg-background-secondary/60"
+                className="bg-background-secondary/60 px-3"
                 onClick={goBack}
                 disabled={!canGoBack()}
             >
@@ -171,13 +174,13 @@ function BrowserControls({
             </Button>
             <Button
                 variant="outline"
-                className="bg-background-secondary/60"
+                className="bg-background-secondary/60 px-3"
                 onClick={goForward}
                 disabled={!canGoForward()}
             >
                 <ArrowRightIcon />
             </Button>
-            <Button variant="outline" className="bg-background-secondary/60" onClick={reload}>
+            <Button variant="outline" className="bg-background-secondary/60 px-3" onClick={reload}>
                 <ReloadIcon />
             </Button>
             <Input
@@ -191,15 +194,15 @@ function BrowserControls({
                 <PopoverTrigger asChild>
                     <Button
                         variant="outline"
-                        className="bg-background-secondary/60 flex items-center space-x-1"
+                        className="bg-background-secondary/60 flex items-center space-x-1 p-3"
                         size="default"
                     >
                         <DesktopIcon />
                         <ChevronDownIcon />
                     </Button>
                 </PopoverTrigger>
-                <PopoverContent className="backdrop-blur text-sm overflow-hidden bg-background/90 rounded-xl w-64 border p-0">
-                    <h3 className="text-foreground-tertiary px-4 py-4 border-b">
+                <PopoverContent className="backdrop-blur text-sm overflow-hidden bg-background/85 rounded-xl w-48 border p-0">
+                    <h3 className="text-foreground-tertiary px-3 py-3 border-b text-smallPlus">
                         Preset Dimensions
                     </h3>
                     <div>
@@ -210,15 +213,18 @@ function BrowserControls({
                                     resizeToPreset(preset.width, preset.height, preset.name)
                                 }
                                 className={clsx(
-                                    'w-full grid grid-cols-2 px-4 py-4 transition-colors duration-200',
+                                    'w-full flex flex-row gap-2 px-3 py-3 transition-colors duration-200 items-center',
                                     selectedPreset === preset.name
-                                        ? 'bg-background-active/80'
-                                        : 'bg-transparent',
-                                    'hover:bg-background-active/80',
+                                        ? 'bg-background-tertiary text-foreground-primary'
+                                        : 'bg-transparent text-foreground-secondary',
+                                    'hover:bg-background-tertiary/50 hover:text-foreground-primary',
                                 )}
                             >
-                                <span className="justify-self-start">{preset.name}</span>
-                                <span className="text-foreground-tertiary justify-self-end">{`${preset.width} x ${preset.height}`}</span>
+                                {preset.icon}
+                                <span className="justify-self-start text-smallPlus">
+                                    {preset.name}
+                                </span>
+                                <span className="text-foreground-tertiary text-mini">{`${preset.width} × ${preset.height}`}</span>
                             </button>
                         ))}
                     </div>
diff --git a/app/src/routes/editor/WebviewArea/Frame.tsx b/app/src/routes/editor/WebviewArea/Frame.tsx
index a8240ca2b..720599314 100644
--- a/app/src/routes/editor/WebviewArea/Frame.tsx
+++ b/app/src/routes/editor/WebviewArea/Frame.tsx
@@ -117,7 +117,7 @@ const Frame = observer(
         }
 
         return (
-            <div className="flex flex-col space-y-4">
+            <div className="flex flex-col space-y-1.5">
                 <BrowserControls
                     webviewRef={webviewRef}
                     webviewSrc={webviewSrc}
diff --git a/app/src/routes/editor/WebviewArea/ResizeHandles.tsx b/app/src/routes/editor/WebviewArea/ResizeHandles.tsx
index 198372842..50d7c8b29 100644
--- a/app/src/routes/editor/WebviewArea/ResizeHandles.tsx
+++ b/app/src/routes/editor/WebviewArea/ResizeHandles.tsx
@@ -66,21 +66,21 @@ const ResizeHandles = observer(({ webviewSize, setWebviewSize }: ResizeHandlePro
                 className="flex items-center justify-center absolute -bottom-10 w-full cursor-s-resize h-10"
                 onMouseDown={(e) => startResize(e, [HandleType.Bottom])}
             >
-                <div className="rounded bg-white w-32 h-1"></div>
+                <div className="rounded bg-foreground-primary w-32 h-1"></div>
             </div>
             <div
                 ref={resizeHandleRef}
                 className="flex items-center justify-center absolute -right-10 h-full cursor-e-resize w-10"
                 onMouseDown={(e) => startResize(e, [HandleType.Right])}
             >
-                <div className="rounded bg-white w-1 h-32"></div>
+                <div className="rounded bg-foreground-primary w-1 h-32"></div>
             </div>
             <div
                 ref={resizeHandleRef}
                 className="flex items-center justify-center absolute -bottom-10 -right-10 cursor-se-resize w-10 h-10"
                 onMouseDown={(e) => startResize(e, [HandleType.Right, HandleType.Bottom])}
             >
-                <div className="rounded bg-white w-2 h-2"></div>
+                <div className="rounded bg-foreground-primary w-2 h-2"></div>
             </div>
         </div>
     );