diff --git a/package-lock.json b/package-lock.json
index 8848099..3f7d7ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "getashell",
-  "version": "0.1.1",
+  "version": "0.1.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "getashell",
-      "version": "0.1.1",
+      "version": "0.1.6",
       "dependencies": {
         "@radix-ui/react-icons": "^1.3.0",
-        "@radix-ui/themes": "^2.0.3",
+        "@radix-ui/themes": "^3.0.0",
         "better-sqlite3": "^9.4.3",
         "drizzle-orm": "^0.30.4",
         "next": "14.1.3",
@@ -17,8 +17,7 @@
         "react": "^18.2.0",
         "react-dom": "^18",
         "react-toastify": "^10.0.5",
-        "tsx": "^4.7.1",
-        "zod": "^3.22.4"
+        "tsx": "^4.7.1"
       },
       "devDependencies": {
         "@types/better-sqlite3": "^7.6.9",
@@ -1881,6 +1880,42 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-navigation-menu": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.1.4.tgz",
+      "integrity": "sha512-Cc+seCS3PmWmjI51ufGG7zp1cAAIRqHVw7C9LOA2TZ+R4hG6rDvHcTqIsEEFLmZO3zNVH72jOOE7kKNy8W+RtA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-visually-hidden": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popover": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.0.7.tgz",
@@ -2020,6 +2055,30 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.0.3.tgz",
+      "integrity": "sha512-5G6Om/tYSxjSeEdrb1VfKkfZfn/1IlPWd731h2RfPuSbIfNUgfqAwbKfJCg/PP6nuUCTrYzalwHSpSinoWoCag==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-radio-group": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.1.3.tgz",
@@ -2157,29 +2216,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-separator": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz",
-      "integrity": "sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-primitive": "1.0.3"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-slider": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.1.2.tgz",
@@ -2290,6 +2326,60 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz",
+      "integrity": "sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz",
+      "integrity": "sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-toggle": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz",
@@ -2479,9 +2569,9 @@
       }
     },
     "node_modules/@radix-ui/themes": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/themes/-/themes-2.0.3.tgz",
-      "integrity": "sha512-yaXQ8aWT2P1CQ0Xe6YCRD9HXsfMTvKkrIYkrc4aitCzhGTLS0sjtTqKmrxIWMVA+3DIbEuG9K/8aAMRJBhep8g==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/themes/-/themes-3.0.1.tgz",
+      "integrity": "sha512-w0+2XqaifspZlds2ealxgVU2xtZlJ0gSTgHuLd56ectYxnC4hkg/PEOP5kPHOpCQ+vtV9+LI+Cy4RWipGgg3aQ==",
       "dependencies": {
         "@radix-ui/colors": "^3.0.0",
         "@radix-ui/primitive": "^1.0.1",
@@ -2490,26 +2580,34 @@
         "@radix-ui/react-aspect-ratio": "^1.0.3",
         "@radix-ui/react-avatar": "^1.0.4",
         "@radix-ui/react-checkbox": "^1.0.4",
+        "@radix-ui/react-compose-refs": "^1.0.1",
+        "@radix-ui/react-context": "^1.0.1",
         "@radix-ui/react-context-menu": "^2.1.5",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-direction": "^1.0.1",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-form": "^0.0.3",
         "@radix-ui/react-hover-card": "^1.0.7",
+        "@radix-ui/react-navigation-menu": "^1.1.4",
         "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-portal": "^1.0.4",
+        "@radix-ui/react-primitive": "^1.0.3",
+        "@radix-ui/react-progress": "^1.0.3",
         "@radix-ui/react-radio-group": "^1.1.3",
+        "@radix-ui/react-roving-focus": "^1.0.4",
         "@radix-ui/react-scroll-area": "^1.0.5",
         "@radix-ui/react-select": "^2.0.0",
-        "@radix-ui/react-separator": "^1.0.3",
         "@radix-ui/react-slider": "^1.1.2",
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-switch": "^1.0.3",
         "@radix-ui/react-tabs": "^1.0.4",
+        "@radix-ui/react-toggle-group": "^1.0.4",
         "@radix-ui/react-tooltip": "^1.0.7",
         "@radix-ui/react-use-callback-ref": "^1.0.1",
+        "@radix-ui/react-use-controllable-state": "^1.0.1",
         "@radix-ui/react-visually-hidden": "^1.0.3",
-        "classnames": "^2.3.2"
+        "classnames": "^2.3.2",
+        "react-remove-scroll-bar": "2.3.4"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2526,6 +2624,27 @@
         }
       }
     },
+    "node_modules/@radix-ui/themes/node_modules/react-remove-scroll-bar": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
+      "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
+      "dependencies": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.8.0.tgz",
@@ -8293,6 +8412,7 @@
       "version": "3.22.4",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz",
       "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==",
+      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/package.json b/package.json
index 6284de9..07b468d 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/themes": "^2.0.3",
+    "@radix-ui/themes": "^3.0.0",
     "better-sqlite3": "^9.4.3",
     "drizzle-orm": "^0.30.4",
     "next": "14.1.3",
@@ -25,8 +25,7 @@
     "react": "^18.2.0",
     "react-dom": "^18",
     "react-toastify": "^10.0.5",
-    "tsx": "^4.7.1",
-    "zod": "^3.22.4"
+    "tsx": "^4.7.1"
   },
   "devDependencies": {
     "@types/better-sqlite3": "^7.6.9",
diff --git a/src/app/components/create-shell-form/create-shell-form.tsx b/src/app/components/create-shell-form/create-shell-form.tsx
index e2612b3..a7577d4 100644
--- a/src/app/components/create-shell-form/create-shell-form.tsx
+++ b/src/app/components/create-shell-form/create-shell-form.tsx
@@ -54,18 +54,20 @@ export const CreateShellForm = () => {
           </Select.Content>
         </Select.Root>
 
-        <TextField.Root>
-          <TextField.Input name="name" required placeholder="Enter a name..." />
-        </TextField.Root>
+        <TextField.Root
+          name="name"
+          required
+          placeholder="Enter a name..."
+        ></TextField.Root>
 
-        <TextField.Root>
-          <TextField.Input
-            name="extraArguments"
-            placeholder="Enter extra arguments..."
-          />
-        </TextField.Root>
+        <TextField.Root
+          name="extraArguments"
+          placeholder="Enter extra arguments..."
+        ></TextField.Root>
 
-        <Button type="submit">Get me a shell</Button>
+        <Button type="submit" color="indigo" variant="soft">
+          Get me a shell
+        </Button>
       </Flex>
     </form>
   );
diff --git a/src/app/components/render-shell/render-shell.tsx b/src/app/components/render-shell/render-shell.tsx
index c9176a8..b0e3656 100644
--- a/src/app/components/render-shell/render-shell.tsx
+++ b/src/app/components/render-shell/render-shell.tsx
@@ -37,11 +37,21 @@ export const renderShell = (shell: containerData) => {
         <Flex className="flex-row gap-1 items-center">
           <SettingsDialog shell={shell} />
           {shell.running ? (
-            <Button onClick={() => handleStopStart()} color="red">
+            <Button
+              onClick={() => handleStopStart()}
+              color="orange"
+              variant="soft"
+            >
               Stop
             </Button>
           ) : (
-            <Button onClick={() => handleStopStart()}>Start</Button>
+            <Button
+              onClick={() => handleStopStart()}
+              color="indigo"
+              variant="soft"
+            >
+              Start
+            </Button>
           )}
         </Flex>
       </Flex>
diff --git a/src/app/components/settings-dialog/settings-dialog.tsx b/src/app/components/settings-dialog/settings-dialog.tsx
index 2e14ad2..2ee98c8 100644
--- a/src/app/components/settings-dialog/settings-dialog.tsx
+++ b/src/app/components/settings-dialog/settings-dialog.tsx
@@ -9,9 +9,8 @@ import {
   Flex,
   Text,
   Code,
+  TextField,
   IconButton,
-  Popover,
-  TextArea,
 } from "@radix-ui/themes";
 import React, { FormEvent } from "react";
 import { toast } from "react-toastify";
@@ -24,6 +23,7 @@ interface shellData {
 export const SettingsDialog: React.FC<shellData> = ({ shell }) => {
   const sshCommand = `ssh -o StrictHostKeyChecking=no -p ${shell.port} ${shell.distro}@yourhost`;
   const [open, setOpen] = React.useState(false);
+  const [passwdEdit, setPasswdEdit] = React.useState(false);
 
   const handleDelete = async () => {
     setOpen(false);
@@ -38,10 +38,29 @@ export const SettingsDialog: React.FC<shellData> = ({ shell }) => {
     }
   };
 
+  const handlePasswordSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setPasswdEdit(false);
+    const newPassword = new FormData(e.currentTarget).get(
+      "new-password",
+    ) as string;
+    const { success } = await change(shell, newPassword);
+    if (success) {
+      toast.success("Password changed successfully!");
+    } else {
+      toast.error("Error in changing password! Please check logs.");
+    }
+  };
+
   return (
     <Dialog.Root open={open} onOpenChange={setOpen}>
       <Dialog.Trigger>
-        <Button onClick={() => setOpen(true)} className="m-1">
+        <Button
+          onClick={() => setOpen(true)}
+          className="m-1"
+          color="gray"
+          variant="soft"
+        >
           <GearIcon />
           Settings
         </Button>
@@ -72,7 +91,49 @@ export const SettingsDialog: React.FC<shellData> = ({ shell }) => {
               {shell.distro}
             </Code>
           </Text>
-          <PasswordEdit shell={shell} />
+          {!passwdEdit ? (
+            <Flex className="flex-row gap-1">
+              <Text weight="medium">
+                Password:{" "}
+                <Code color="gray" variant="ghost">
+                  {shell.password}
+                </Code>
+              </Text>
+              <IconButton
+                className="size-5"
+                color="blue"
+                variant="soft"
+                onClick={() => setPasswdEdit(true)}
+              >
+                <Pencil1Icon></Pencil1Icon>
+              </IconButton>
+            </Flex>
+          ) : (
+            <Flex className="flex-row gap-1">
+              <Text weight="medium">Password: </Text>
+              <form onSubmit={(e) => handlePasswordSubmit(e)}>
+                <Flex className="flex-row gap-1">
+                  <TextField.Root
+                    required
+                    placeholder="New password..."
+                    size="1"
+                    name="new-password"
+                  />
+                  <Button type="submit" color="blue" variant="soft" size="1">
+                    Save
+                  </Button>
+                  <Button
+                    color="gray"
+                    variant="soft"
+                    size="1"
+                    onClick={() => setPasswdEdit(false)}
+                  >
+                    Cancel
+                  </Button>
+                </Flex>
+              </form>
+            </Flex>
+          )}
           <Text weight="medium">
             Port:{" "}
             <Code color="gray" variant="ghost">
@@ -102,78 +163,16 @@ export const SettingsDialog: React.FC<shellData> = ({ shell }) => {
           <Button
             title="When you click the button your shell is gone!"
             onClick={() => handleDelete()}
-            color="red"
+            color="orange"
+            variant="soft"
           >
             Delete
           </Button>
-          <Button onClick={() => setOpen(false)}>Close</Button>
+          <Button onClick={() => setOpen(false)} color="blue" variant="soft">
+            Close
+          </Button>
         </Flex>
       </Dialog.Content>
     </Dialog.Root>
   );
 };
-
-const PasswordEdit: React.FC<shellData> = ({ shell }) => {
-  const [mainOpen, setMainOpen] = React.useState(false);
-  const [isRequired, setIsRequired] = React.useState(true);
-
-  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    setMainOpen(false);
-    const newPassword = new FormData(e.currentTarget).get(
-      "new-password",
-    ) as string;
-    const { success } = await change(shell, newPassword);
-    if (success) {
-      toast.success("Password changed successfully!");
-    } else {
-      toast.error("Error in changing password! Please check logs.");
-    }
-  };
-
-  return (
-    <Flex className="flex-row gap-2">
-      <Text weight="medium">
-        Password:{" "}
-        <Code color="gray" variant="ghost">
-          {shell.password}
-        </Code>
-      </Text>
-
-      <Popover.Root open={mainOpen}>
-        <Popover.Trigger>
-          <IconButton onClick={() => setMainOpen(true)} className="size-5">
-            <Pencil1Icon />
-          </IconButton>
-        </Popover.Trigger>
-
-        <Popover.Content>
-          <form onSubmit={(e) => handleSubmit(e)}>
-            <Flex className="flex-col gap-2">
-              <TextArea
-                required={isRequired}
-                name="new-password"
-                placeholder="Type new password..."
-              />
-              <Flex className="flex-row gap-2 justify-end">
-                <Button
-                  color="gray"
-                  variant="soft"
-                  type="button"
-                  highContrast
-                  onClick={() => {
-                    setIsRequired(false);
-                    setMainOpen(false);
-                  }}
-                >
-                  Cancel
-                </Button>
-                <Button type="submit">Save</Button>
-              </Flex>
-            </Flex>
-          </form>
-        </Popover.Content>
-      </Popover.Root>
-    </Flex>
-  );
-};