dashboard layout (#597)

2025-07-03 06:56:15 +00:00 · 2025-05-13 23:42:22 +03:00
parent 38bafd7654
commit a81e9b18b7
57 changed files with 1011 additions and 843 deletions
--- a/resources/css/app.css
+++ b/resources/css/app.css
@ -198,3 +198,31 @@ @layer base {
    @apply bg-background text-foreground;
  }
 }
+
+/*
+  ---break---
+*/
+
+@theme inline {
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+/*
+  ---break---
+*/
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/resources/js/components/app-content.tsx
+++ b/resources/js/components/app-content.tsx
@ -1,18 +0,0 @@
-import { SidebarInset } from '@/components/ui/sidebar';
-import * as React from 'react';
-
-interface AppContentProps extends React.ComponentProps<'main'> {
-  variant?: 'header' | 'sidebar';
-}
-
-export function AppContent({ variant = 'header', children, ...props }: AppContentProps) {
-  if (variant === 'sidebar') {
-    return <SidebarInset {...props}>{children}</SidebarInset>;
-  }
-
-  return (
-    <main className="mx-auto flex h-full w-full max-w-7xl flex-1 flex-col gap-4 rounded-xl px-4" {...props}>
-      {children}
-    </main>
-  );
-}
--- a/resources/js/components/app-header.tsx
+++ b/resources/js/components/app-header.tsx
@ -1,204 +1,26 @@
-import { Icon } from '@/components/icon';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Button } from '@/components/ui/button';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
-import { NavigationMenu, NavigationMenuItem, NavigationMenuList, navigationMenuTriggerStyle } from '@/components/ui/navigation-menu';
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { UserMenuContent } from '@/components/user-menu-content';
-import { useInitials } from '@/hooks/use-initials';
-import { cn } from '@/lib/utils';
-import { type NavItem, type SharedData } from '@/types';
-import { Link, usePage } from '@inertiajs/react';
-import { BookOpen, CogIcon, Folder, Menu, Search, ServerIcon, SlashIcon } from 'lucide-react';
-import AppLogo from './app-logo';
-import AppLogoIcon from './app-logo-icon';
-import { ProjectSwitch } from '@/components/project-switch';
-import { ServerSwitch } from '@/components/server-switch';
+import { SidebarTrigger } from '@/components/ui/sidebar';
 import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
-
-const mainNavItems: NavItem[] = [
-  {
-    title: 'Servers',
-    href: '/servers',
-    activePath: '/servers',
-    icon: ServerIcon,
-  },
-  {
-    title: 'Settings',
-    href: '/settings/profile',
-    activePath: '/settings',
-    icon: CogIcon,
-  },
-];
-
-const rightNavItems: NavItem[] = [
-  {
-    title: 'Repository',
-    href: 'https://github.com/vitodeploy/vito',
-    icon: Folder,
-  },
-  {
-    title: 'Documentation',
-    href: 'https://vitodeploy.com',
-    icon: BookOpen,
-  },
-];
-
-const activeItemStyles = '';
+import { ProjectSwitch } from '@/components/project-switch';
+import { SlashIcon } from 'lucide-react';
+import { ServerSwitch } from '@/components/server-switch';

 export function AppHeader() {
-  const page = usePage<SharedData>();
-  const { auth } = page.props;
-  const getInitials = useInitials();
  return (
-    <>
-      <div className="border-sidebar-border/80 border-b">
-        <div className="mx-auto flex h-16 items-center px-4 md:max-w-7xl">
-          {/* Mobile Menu */}
-          <div className="lg:hidden">
-            <Sheet>
-              <SheetTrigger asChild>
-                <Button variant="ghost" size="icon" className="mr-2 h-[34px] w-[34px]">
-                  <Menu className="h-5 w-5" />
-                </Button>
-              </SheetTrigger>
-              <SheetContent side="left" className="bg-sidebar flex h-full w-64 flex-col items-stretch justify-between">
-                <SheetTitle className="sr-only">Navigation Menu</SheetTitle>
-                <SheetHeader className="flex justify-start text-left">
-                  <AppLogoIcon className="h-6 w-6 fill-current text-black dark:text-white" />
-                </SheetHeader>
-                <div className="flex h-full flex-1 flex-col space-y-4 p-4">
-                  <div className="flex h-full flex-col justify-between text-sm">
-                    <div className="flex flex-col space-y-4">
-                      {mainNavItems.map((item) => (
-                        <Link key={item.title} href={item.href} className="flex items-center space-x-2 font-medium">
-                          {item.icon && <Icon iconNode={item.icon} className="h-5 w-5" />}
-                          <span>{item.title}</span>
-                        </Link>
-                      ))}
-                    </div>
-
-                    <div className="flex flex-col space-y-4">
-                      {rightNavItems.map((item) => (
-                        <a
-                          key={item.title}
-                          href={item.href}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="flex items-center space-x-2 font-medium"
-                        >
-                          {item.icon && <Icon iconNode={item.icon} className="h-5 w-5" />}
-                          <span>{item.title}</span>
-                        </a>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              </SheetContent>
-            </Sheet>
-          </div>
-
-          <Link href={route('home')} prefetch className="flex items-center space-x-2">
-            <AppLogo />
-          </Link>
-
-          {/* Desktop Navigation */}
-          <div className="ml-6 flex h-full items-center space-x-6">
-            <Breadcrumb>
-              <BreadcrumbList>
-                <BreadcrumbItem>
-                  <ProjectSwitch />
-                </BreadcrumbItem>
-                <BreadcrumbSeparator>
-                  <SlashIcon />
-                </BreadcrumbSeparator>
-                <BreadcrumbItem>
-                  <ServerSwitch />
-                </BreadcrumbItem>
-              </BreadcrumbList>
-            </Breadcrumb>
-          </div>
-
-          <div className="ml-auto flex items-center space-x-2">
-            <div className="relative flex items-center space-x-1">
-              <Button variant="ghost" size="icon" className="group h-9 w-9 cursor-pointer">
-                <Search className="!size-5 opacity-80 group-hover:opacity-100" />
-              </Button>
-              <div className="hidden lg:flex">
-                {rightNavItems.map((item) => (
-                  <TooltipProvider key={item.title} delayDuration={0}>
-                    <Tooltip>
-                      <TooltipTrigger>
-                        <a
-                          href={item.href}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="group text-accent-foreground ring-offset-background hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring ml-1 inline-flex h-9 w-9 items-center justify-center rounded-md bg-transparent p-0 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
-                        >
-                          <span className="sr-only">{item.title}</span>
-                          {item.icon && <Icon iconNode={item.icon} className="size-5 opacity-80 group-hover:opacity-100" />}
-                        </a>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>{item.title}</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                ))}
-              </div>
-            </div>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" className="size-10 rounded-full p-1">
-                  <Avatar className="size-8 overflow-hidden rounded-full">
-                    <AvatarImage src={auth.user.avatar} alt={auth.user.name} />
-                    <AvatarFallback className="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
-                      {getInitials(auth.user.name)}
-                    </AvatarFallback>
-                  </Avatar>
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent className="w-56" align="end">
-                <UserMenuContent user={auth.user} />
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        </div>
-        {/* Desktop Navigation */}
-        <div className="mx-auto hidden h-12 items-center px-2 md:max-w-7xl lg:flex">
-          <NavigationMenu className="flex h-full items-stretch">
-            <NavigationMenuList className="flex h-full items-stretch">
-              {mainNavItems.map((item, index) => (
-                <NavigationMenuItem key={index} className="relative flex h-full items-center">
-                  <Link
-                    href={item.href}
-                    className={cn(
-                      navigationMenuTriggerStyle(),
-                      item.activePath && page.url.startsWith(item.activePath) && activeItemStyles,
-                      'h-9 cursor-pointer px-3',
-                    )}
-                  >
-                    {item.icon && <Icon iconNode={item.icon} className="mr-2 h-4 w-4" />}
-                    {item.title}
-                  </Link>
-                  {item.activePath && page.url.startsWith(item.activePath) && (
-                    <div className="absolute right-3 bottom-0 left-3 h-0.5 translate-y-px bg-black dark:bg-white"></div>
-                  )}
-                </NavigationMenuItem>
-              ))}
-            </NavigationMenuList>
-          </NavigationMenu>
-        </div>
-      </div>
-      {/*{breadcrumbs.length > 1 && (*/}
-      {/*    <div className="border-sidebar-border/70 flex w-full border-b">*/}
-      {/*        <div*/}
-      {/*            className="mx-auto flex h-12 w-full items-center justify-start px-4 text-neutral-500 md:max-w-7xl">*/}
-      {/*            <Breadcrumbs breadcrumbs={breadcrumbs} />*/}
-      {/*        </div>*/}
-      {/*    </div>*/}
-      {/*)}*/}
-    </>
+    <header className="bg-background -ml-1 flex h-12 shrink-0 items-center gap-2 border-b p-4 md:-ml-2">
+      <SidebarTrigger className="-ml-1 md:hidden" />
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <ProjectSwitch />
+          </BreadcrumbItem>
+          <BreadcrumbSeparator>
+            <SlashIcon />
+          </BreadcrumbSeparator>
+          <BreadcrumbItem>
+            <ServerSwitch />
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    </header>
  );
 }
--- a/resources/js/components/app-shell.tsx
+++ b/resources/js/components/app-shell.tsx
@ -1,18 +0,0 @@
-import { SidebarProvider } from '@/components/ui/sidebar';
-import { SharedData } from '@/types';
-import { usePage } from '@inertiajs/react';
-
-interface AppShellProps {
-  children: React.ReactNode;
-  variant?: 'header' | 'sidebar';
-}
-
-export function AppShell({ children, variant = 'header' }: AppShellProps) {
-  const isOpen = usePage<SharedData>().props.sidebarOpen;
-
-  if (variant === 'header') {
-    return <div className="flex min-h-screen w-full flex-col">{children}</div>;
-  }
-
-  return <SidebarProvider defaultOpen={isOpen}>{children}</SidebarProvider>;
-}
--- a/resources/js/components/app-sidebar-header.tsx
+++ b/resources/js/components/app-sidebar-header.tsx
@ -1,14 +0,0 @@
-import { Breadcrumbs } from '@/components/breadcrumbs';
-import { SidebarTrigger } from '@/components/ui/sidebar';
-import { type BreadcrumbItem as BreadcrumbItemType } from '@/types';
-
-export function AppSidebarHeader({ breadcrumbs = [] }: { breadcrumbs?: BreadcrumbItemType[] }) {
-  return (
-    <header className="border-sidebar-border/50 flex h-16 shrink-0 items-center gap-2 border-b px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4">
-      <div className="flex items-center gap-2">
-        <SidebarTrigger className="-ml-1" />
-        <Breadcrumbs breadcrumbs={breadcrumbs} />
-      </div>
-    </header>
-  );
-}
--- a/resources/js/components/app-sidebar.tsx
+++ b/resources/js/components/app-sidebar.tsx
@ -1,11 +1,20 @@
-import { NavFooter } from '@/components/nav-footer';
-import { NavMain } from '@/components/nav-main';
 import { NavUser } from '@/components/nav-user';
-import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/components/ui/sidebar';
 import { type NavItem } from '@/types';
 import { Link } from '@inertiajs/react';
-import { BookOpen, Folder, ServerIcon } from 'lucide-react';
+import { BookOpen, CogIcon, Folder, ServerIcon } from 'lucide-react';
 import AppLogo from './app-logo';
+import { Icon } from '@/components/icon';

 const mainNavItems: NavItem[] = [
  {
@ -13,6 +22,11 @@ const mainNavItems: NavItem[] = [
    href: route('servers'),
    icon: ServerIcon,
  },
+  {
+    title: 'Settings',
+    href: route('profile'),
+    icon: CogIcon,
+  },
 ];

 const footerNavItems: NavItem[] = [
@ -28,29 +42,93 @@ const footerNavItems: NavItem[] = [
  },
 ];

-export function AppSidebar() {
+export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?: NavItem[]; secondNavTitle?: string }) {
  return (
-    <Sidebar collapsible="icon" variant="sidebar">
-      <SidebarHeader>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton size="lg" asChild>
-              <Link href={route('servers')} prefetch>
-                <AppLogo />
-              </Link>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarHeader>
+    <Sidebar collapsible="icon" className="overflow-hidden [&>[data-sidebar=sidebar]]:flex-row">
+      {/* This is the first sidebar */}
+      {/* We disable collapsible and adjust width to icon. */}
+      {/* This will make the sidebar appear as icons. */}
+      <Sidebar collapsible="none" className="h-auto !w-[calc(var(--sidebar-width-icon)_+_1px)] border-r">
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
+                <Link href={route('servers')} prefetch>
+                  <AppLogo />
+                </Link>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent className="md:px-0">
+              <SidebarMenu>
+                {mainNavItems.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton
+                      asChild
+                      isActive={window.location.href.startsWith(item.href)}
+                      tooltip={{ children: item.title, hidden: false }}
+                    >
+                      <Link href={item.href} prefetch>
+                        {item.icon && <item.icon />}
+                        <span>{item.title}</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarFooter className="hidden md:flex">
+          <SidebarMenu>
+            {footerNavItems.map((item) => (
+              <SidebarMenuItem key={item.title}>
+                <SidebarMenuButton asChild tooltip={{ children: item.title, hidden: false }}>
+                  <a href={item.href} target="_blank" rel="noopener noreferrer">
+                    {item.icon && <Icon iconNode={item.icon} />}
+                    <span className="sr-only">{item.title}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))}
+          </SidebarMenu>
+          <NavUser />
+        </SidebarFooter>
+      </Sidebar>

-      <SidebarContent>
-        <NavMain items={mainNavItems} />
-      </SidebarContent>
-
-      <SidebarFooter>
-        <NavFooter items={footerNavItems} className="mt-auto" />
-        <NavUser />
-      </SidebarFooter>
+      {/* This is the second sidebar */}
+      {/* We enable collapsible and adjust width to icon. */}
+      {/* This will make the sidebar appear as icons. */}
+      {secondNavItems && secondNavItems.length > 0 && (
+        <Sidebar collapsible="none" className="flex flex-1">
+          <SidebarHeader className="hidden h-12 border-b p-0 md:flex">
+            <div className="flex h-full items-center p-2">
+              <span className="max-w-[200px] truncate overflow-ellipsis">{secondNavTitle}</span>
+            </div>
+          </SidebarHeader>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {secondNavItems.map((item) => (
+                    <SidebarMenuItem key={item.title}>
+                      <SidebarMenuButton asChild isActive={window.location.href.startsWith(item.href)}>
+                        <Link href={item.href} prefetch>
+                          {item.icon && <item.icon />}
+                          <span>{item.title}</span>
+                        </Link>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+        </Sidebar>
+      )}
    </Sidebar>
  );
 }
--- a/resources/js/components/breadcrumbs.tsx
+++ b/resources/js/components/breadcrumbs.tsx
@ -1,34 +0,0 @@
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
-import { type BreadcrumbItem as BreadcrumbItemType } from '@/types';
-import { Link } from '@inertiajs/react';
-import { Fragment } from 'react';
-
-export function Breadcrumbs({ breadcrumbs }: { breadcrumbs: BreadcrumbItemType[] }) {
-  return (
-    <>
-      {breadcrumbs.length > 0 && (
-        <Breadcrumb>
-          <BreadcrumbList>
-            {breadcrumbs.map((item, index) => {
-              const isLast = index === breadcrumbs.length - 1;
-              return (
-                <Fragment key={index}>
-                  <BreadcrumbItem>
-                    {isLast ? (
-                      <BreadcrumbPage>{item.title}</BreadcrumbPage>
-                    ) : (
-                      <BreadcrumbLink asChild>
-                        <Link href={item.href}>{item.title}</Link>
-                      </BreadcrumbLink>
-                    )}
-                  </BreadcrumbItem>
-                  {!isLast && <BreadcrumbSeparator />}
-                </Fragment>
-              );
-            })}
-          </BreadcrumbList>
-        </Breadcrumb>
-      )}
-    </>
-  );
-}
--- a/resources/js/components/container.tsx
+++ b/resources/js/components/container.tsx
@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
+import { cn } from '@/lib/utils';

-export default function Container({ children }: { children?: ReactNode }) {
-  return <div className="container mx-auto space-y-5 py-10">{children}</div>;
+export default function Container({ className, children }: { className?: string; children?: ReactNode }) {
+  return <div className={cn('container mx-auto space-y-5 px-4 py-5', className)}>{children}</div>;
 }
--- a/resources/js/components/heading.tsx
+++ b/resources/js/components/heading.tsx
@ -1,6 +1,6 @@
 export default function Heading({ title, description }: { title: string; description?: string }) {
  return (
-    <div className="mb-8 space-y-0.5">
+    <div className="space-y-0.5">
      <h2 className="text-xl font-semibold tracking-tight">{title}</h2>
      {description && <p className="text-muted-foreground text-sm">{description}</p>}
    </div>
--- a/resources/js/components/nav-footer.tsx
+++ b/resources/js/components/nav-footer.tsx
@ -1,31 +0,0 @@
-import { Icon } from '@/components/icon';
-import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
-import { type NavItem } from '@/types';
-import { type ComponentPropsWithoutRef } from 'react';
-
-export function NavFooter({
-  items,
-  className,
-  ...props
-}: ComponentPropsWithoutRef<typeof SidebarGroup> & {
-  items: NavItem[];
-}) {
-  return (
-    <SidebarGroup {...props} className={`group-data-[collapsible=icon]:p-0 ${className || ''}`}>
-      <SidebarGroupContent>
-        <SidebarMenu>
-          {items.map((item) => (
-            <SidebarMenuItem key={item.title}>
-              <SidebarMenuButton asChild className="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100">
-                <a href={item.href} target="_blank" rel="noopener noreferrer">
-                  {item.icon && <Icon iconNode={item.icon} className="h-5 w-5" />}
-                  <span>{item.title}</span>
-                </a>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          ))}
-        </SidebarMenu>
-      </SidebarGroupContent>
-    </SidebarGroup>
-  );
-}
--- a/resources/js/components/nav-main.tsx
+++ b/resources/js/components/nav-main.tsx
@ -1,24 +0,0 @@
-import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
-import { type NavItem } from '@/types';
-import { Link, usePage } from '@inertiajs/react';
-
-export function NavMain({ items = [] }: { items: NavItem[] }) {
-  const page = usePage();
-  return (
-    <SidebarGroup className="px-2 py-0">
-      <SidebarGroupLabel>Platform</SidebarGroupLabel>
-      <SidebarMenu>
-        {items.map((item) => (
-          <SidebarMenuItem key={item.title}>
-            <SidebarMenuButton asChild isActive={item.href === page.url} tooltip={{ children: item.title }}>
-              <Link href={item.href} prefetch>
-                {item.icon && <item.icon />}
-                <span>{item.title}</span>
-              </Link>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        ))}
-      </SidebarMenu>
-    </SidebarGroup>
-  );
-}
--- a/resources/js/components/nav-user.tsx
+++ b/resources/js/components/nav-user.tsx
@ -1,5 +1,5 @@
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
-import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar';
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
 import { UserInfo } from '@/components/user-info';
 import { UserMenuContent } from '@/components/user-menu-content';
 import { useIsMobile } from '@/hooks/use-mobile';
@ -9,7 +9,6 @@ import { ChevronsUpDown } from 'lucide-react';

 export function NavUser() {
  const { auth } = usePage<SharedData>().props;
-  const { state } = useSidebar();
  const isMobile = useIsMobile();

  return (
@ -17,15 +16,19 @@ export function NavUser() {
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
-            <SidebarMenuButton size="lg" className="text-sidebar-accent-foreground data-[state=open]:bg-sidebar-accent group">
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
+            >
              <UserInfo user={auth.user} />
              <ChevronsUpDown className="ml-auto size-4" />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent
-            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? 'bottom' : 'right'}
            align="end"
-            side={isMobile ? 'bottom' : state === 'collapsed' ? 'left' : 'bottom'}
+            sideOffset={4}
          >
            <UserMenuContent user={auth.user} />
          </DropdownMenuContent>
--- a/resources/js/components/project-switch.tsx
+++ b/resources/js/components/project-switch.tsx
@ -33,8 +33,8 @@ export function ProjectSwitch() {
    <div className="flex items-center">
      <Link href={route('servers')}>
        <Button variant="ghost" className="px-2">
-          <Avatar className="size-7 rounded-md">
-            <AvatarFallback className="rounded-md">{initials(auth.currentProject?.name ?? '')}</AvatarFallback>
+          <Avatar className="size-6 rounded-sm">
+            <AvatarFallback className="rounded-sm">{initials(auth.currentProject?.name ?? '')}</AvatarFallback>
          </Avatar>
          <span className="hidden lg:flex">{auth.currentProject?.name}</span>
        </Button>
--- a/resources/js/components/server-switch.tsx
+++ b/resources/js/components/server-switch.tsx
@ -31,8 +31,8 @@ export function ServerSwitch() {
      {selectedServer && (
        <Link href={route('servers.show', { server: selectedServer?.id || '' })}>
          <Button variant="ghost" className="px-2">
-            <Avatar className="size-7 rounded-md">
-              <AvatarFallback className="rounded-md">{initials(selectedServer?.name ?? '')}</AvatarFallback>
+            <Avatar className="size-6 rounded-sm">
+              <AvatarFallback className="rounded-sm">{initials(selectedServer?.name ?? '')}</AvatarFallback>
            </Avatar>
            <span className="hidden lg:flex">{selectedServer?.name}</span>
          </Button>
@ -41,8 +41,8 @@ export function ServerSwitch() {

      {!selectedServer && (
        <Button variant="ghost" className="cursor-default px-2">
-          <Avatar className="size-7 rounded-md">
-            <AvatarFallback className="rounded-md">S</AvatarFallback>
+          <Avatar className="size-6 rounded-sm">
+            <AvatarFallback className="rounded-sm">S</AvatarFallback>
          </Avatar>
          <span className="hidden lg:flex">Select a server</span>
        </Button>
--- a/resources/js/components/ui/button.tsx
+++ b/resources/js/components/ui/button.tsx
@ -5,21 +5,22 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';

 const buttonVariants = cva(
-  "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
        destructive:
-          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
-        outline: 'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md px-3 has-[>svg]:px-2.5',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
        icon: 'size-9',
      },
--- a/resources/js/components/ui/input-error.tsx
+++ b/resources/js/components/ui/input-error.tsx
--- a/resources/js/components/ui/input.tsx
+++ b/resources/js/components/ui/input.tsx
@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
      type={type}
      data-slot="input"
      className={cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground bg-background border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
        className,
--- a/resources/js/components/ui/separator.tsx
+++ b/resources/js/components/ui/separator.tsx
@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';

--- a/resources/js/components/ui/sheet.tsx
+++ b/resources/js/components/ui/sheet.tsx
@ -25,7 +25,7 @@ function SheetOverlay({ className, ...props }: React.ComponentProps<typeof Sheet
    <SheetPrimitive.Overlay
      data-slot="sheet-overlay"
      className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
@ -48,8 +48,10 @@ function SheetContent({
        data-slot="sheet-content"
        className={cn(
          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-          side === 'right' && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l',
-          side === 'left' && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r',
+          side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
          side === 'top' && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
          side === 'bottom' && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
          className,
--- a/resources/js/components/ui/skeleton.tsx
+++ b/resources/js/components/ui/skeleton.tsx
@ -1,7 +1,7 @@
 import { cn } from '@/lib/utils';

 function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div data-slot="skeleton" className={cn('bg-primary/10 animate-pulse rounded-md', className)} {...props} />;
+  return <div data-slot="skeleton" className={cn('bg-accent animate-pulse rounded-md', className)} {...props} />;
 }

 export { Skeleton };
--- a/resources/js/components/ui/tooltip.tsx
+++ b/resources/js/components/ui/tooltip.tsx
@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';

--- a/resources/js/components/user-info.tsx
+++ b/resources/js/components/user-info.tsx
@ -7,7 +7,7 @@ export function UserInfo({ user, showEmail = false }: { user: User; showEmail?:

  return (
    <>
-      <Avatar className="h-8 w-8 overflow-hidden rounded-full">
+      <Avatar className="h-8 w-8 rounded-lg">
        <AvatarImage src={user.avatar} alt={user.name} />
        <AvatarFallback className="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">{getInitials(user.name)}</AvatarFallback>
      </Avatar>
--- a/resources/js/components/user-menu-content.tsx
+++ b/resources/js/components/user-menu-content.tsx
@ -30,7 +30,7 @@ export function UserMenuContent({ user }: UserMenuContentProps) {
      <DropdownMenuSeparator />
      <DropdownMenuGroup>
        <DropdownMenuItem asChild>
-          <Link className="block w-full" href={route('profile.edit')} as="button" prefetch onClick={cleanup}>
+          <Link className="block w-full" href={route('profile')} as="button" prefetch onClick={cleanup}>
            <Settings className="mr-2" />
            Settings
          </Link>
--- a/resources/js/hooks/use-mobile.ts
+++ b/resources/js/hooks/use-mobile.ts
@ -0,0 +1,19 @@
+import * as React from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener('change', onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return !!isMobile;
+}
--- a/resources/js/layouts/app-layout.tsx
+++ b/resources/js/layouts/app-layout.tsx
@ -1,4 +1,4 @@
-import AppLayoutTemplate from '@/layouts/app/app-header-layout';
+import AppLayout from '@/layouts/app/layout';
 import { type BreadcrumbItem } from '@/types';
 import { type ReactNode } from 'react';

@ -7,4 +7,4 @@ interface AppLayoutProps {
  breadcrumbs?: BreadcrumbItem[];
 }

-export default ({ children, ...props }: AppLayoutProps) => <AppLayoutTemplate {...props}>{children}</AppLayoutTemplate>;
+export default ({ children, ...props }: AppLayoutProps) => <AppLayout {...props}>{children}</AppLayout>;
--- a/resources/js/layouts/app/app-header-layout.tsx
+++ b/resources/js/layouts/app/app-header-layout.tsx
@ -1,19 +0,0 @@
-import { AppContent } from '@/components/app-content';
-import { AppHeader } from '@/components/app-header';
-import { AppShell } from '@/components/app-shell';
-import { type BreadcrumbItem } from '@/types';
-import type { PropsWithChildren } from 'react';
-import { usePoll } from '@inertiajs/react';
-import { Toaster } from '@/components/ui/sonner';
-
-export default function AppHeaderLayout({ children }: PropsWithChildren<{ breadcrumbs?: BreadcrumbItem[] }>) {
-  usePoll(10000);
-
-  return (
-    <AppShell>
-      <AppHeader />
-      <AppContent>{children}</AppContent>
-      <Toaster />
-    </AppShell>
-  );
-}
--- a/resources/js/layouts/app/app-sidebar-layout.tsx
+++ b/resources/js/layouts/app/app-sidebar-layout.tsx
@ -1,18 +0,0 @@
-import { AppContent } from '@/components/app-content';
-import { AppShell } from '@/components/app-shell';
-import { AppSidebar } from '@/components/app-sidebar';
-import { AppSidebarHeader } from '@/components/app-sidebar-header';
-import { type BreadcrumbItem } from '@/types';
-import { type PropsWithChildren } from 'react';
-
-export default function AppSidebarLayout({ children, breadcrumbs = [] }: PropsWithChildren<{ breadcrumbs?: BreadcrumbItem[] }>) {
-  return (
-    <AppShell variant="sidebar">
-      <AppSidebar />
-      <AppContent variant="sidebar">
-        <AppSidebarHeader breadcrumbs={breadcrumbs} />
-        {children}
-      </AppContent>
-    </AppShell>
-  );
-}
--- a/resources/js/layouts/app/layout.tsx
+++ b/resources/js/layouts/app/layout.tsx
@ -0,0 +1,35 @@
+import { AppSidebar } from '@/components/app-sidebar';
+import { AppHeader } from '@/components/app-header';
+import { type BreadcrumbItem, NavItem } from '@/types';
+import { CSSProperties, type PropsWithChildren } from 'react';
+import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
+import { usePoll } from '@inertiajs/react';
+
+export default function Layout({
+  children,
+  secondNavItems,
+  secondNavTitle,
+}: PropsWithChildren<{
+  breadcrumbs?: BreadcrumbItem[];
+  secondNavItems?: NavItem[];
+  secondNavTitle?: string;
+}>) {
+  usePoll(10000);
+
+  return (
+    <SidebarProvider
+      style={
+        {
+          '--sidebar-width': '300px',
+        } as CSSProperties
+      }
+      defaultOpen={!!(secondNavItems && secondNavItems.length > 0)}
+    >
+      <AppSidebar secondNavItems={secondNavItems} secondNavTitle={secondNavTitle} />
+      <SidebarInset>
+        <AppHeader />
+        <div className="flex flex-1 flex-col">{children}</div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}
--- a/resources/js/layouts/server/layout.tsx
+++ b/resources/js/layouts/server/layout.tsx
@ -0,0 +1,102 @@
+import { type NavItem } from '@/types';
+import {
+  ChartPieIcon,
+  ClockIcon,
+  CogIcon,
+  DatabaseIcon,
+  FlameIcon,
+  FolderOpenIcon,
+  HomeIcon,
+  KeyIcon,
+  ListEndIcon,
+  LogsIcon,
+  MousePointerClickIcon,
+  Settings2Icon,
+  TerminalSquareIcon,
+} from 'lucide-react';
+import { ReactNode } from 'react';
+import { Server } from '@/types/server';
+import ServerHeader from '@/pages/servers/partials/header';
+import Layout from '@/layouts/app/layout';
+
+export default function ServerLayout({ server, children }: { server: Server; children: ReactNode }) {
+  // When server-side rendering, we only render the layout on the client...
+  if (typeof window === 'undefined') {
+    return null;
+  }
+  const sidebarNavItems: NavItem[] = [
+    {
+      title: 'Overview',
+      href: route('servers.show', { server: server.id }),
+      icon: HomeIcon,
+    },
+    {
+      title: 'Databases',
+      href: '#',
+      icon: DatabaseIcon,
+    },
+    {
+      title: 'Sites',
+      href: '#',
+      icon: MousePointerClickIcon,
+    },
+    {
+      title: 'File Manager',
+      href: '#',
+      icon: FolderOpenIcon,
+    },
+    {
+      title: 'Firewall',
+      href: '#',
+      icon: FlameIcon,
+    },
+    {
+      title: 'CronJobs',
+      href: '#',
+      icon: ClockIcon,
+    },
+    {
+      title: 'Workers',
+      href: '#',
+      icon: ListEndIcon,
+    },
+    {
+      title: 'SSH Keys',
+      href: '#',
+      icon: KeyIcon,
+    },
+    {
+      title: 'Services',
+      href: '#',
+      icon: CogIcon,
+    },
+    {
+      title: 'Metrics',
+      href: '#',
+      icon: ChartPieIcon,
+    },
+    {
+      title: 'Console',
+      href: '#',
+      icon: TerminalSquareIcon,
+    },
+    {
+      title: 'Logs',
+      href: '#',
+      icon: LogsIcon,
+    },
+    {
+      title: 'Settings',
+      href: '#',
+      icon: Settings2Icon,
+    },
+  ];
+
+  return (
+    <Layout secondNavItems={sidebarNavItems} secondNavTitle={server.name}>
+      <ServerHeader server={server} />
+
+      <div className="p-4">{children}</div>
+    </Layout>
+  );
+}
--- a/resources/js/layouts/settings/layout.tsx
+++ b/resources/js/layouts/settings/layout.tsx
@ -1,16 +1,12 @@
-import Container from '@/components/container';
-import { Button } from '@/components/ui/button';
-import { Separator } from '@/components/ui/separator';
-import { cn } from '@/lib/utils';
-import { type NavItem } from '@/types';
-import { Link } from '@inertiajs/react';
-import { ListIcon, LockIcon, UserIcon } from 'lucide-react';
-import { type PropsWithChildren } from 'react';
+import { type BreadcrumbItem, type NavItem } from '@/types';
+import { ListIcon, UserIcon } from 'lucide-react';
+import { ReactNode } from 'react';
+import Layout from '@/layouts/app/layout';

 const sidebarNavItems: NavItem[] = [
  {
    title: 'Profile',
-    href: '/settings/profile',
+    href: route('profile'),
    icon: UserIcon,
  },
  {
@ -18,51 +14,17 @@ const sidebarNavItems: NavItem[] = [
    href: '/',
    icon: ListIcon,
  },
-  {
-    title: 'Password',
-    href: '/settings/password',
-    icon: LockIcon,
-  },
 ];

-export default function SettingsLayout({ children }: PropsWithChildren) {
+export default function SettingsLayout({ children, breadcrumbs }: { children: ReactNode; breadcrumbs?: BreadcrumbItem[] }) {
  // When server-side rendering, we only render the layout on the client...
  if (typeof window === 'undefined') {
    return null;
  }

-  const currentPath = window.location.pathname;
-
  return (
-    <Container>
-      <div className="flex flex-col space-y-8 lg:flex-row lg:space-y-0 lg:space-x-12">
-        <aside className="w-full max-w-xl lg:w-60">
-          <nav className="flex flex-col space-y-1 space-x-0">
-            {sidebarNavItems.map((item, index) => (
-              <Button
-                key={`${item.href}-${index}`}
-                size="sm"
-                variant="ghost"
-                asChild
-                className={cn('w-full justify-start', {
-                  'bg-muted': currentPath === item.href,
-                })}
-              >
-                <Link href={item.href} prefetch>
-                  {item.icon && <item.icon />}
-                  {item.title}
-                </Link>
-              </Button>
-            ))}
-          </nav>
-        </aside>
-
-        <Separator className="my-6 md:hidden" />
-
-        <div className="flex-1">
-          <section className="space-y-12">{children}</section>
-        </div>
-      </div>
-    </Container>
+    <Layout breadcrumbs={breadcrumbs} secondNavItems={sidebarNavItems} secondNavTitle="Settings">
+      {children}
+    </Layout>
  );
 }
--- a/resources/js/pages/auth/confirm-password.tsx
+++ b/resources/js/pages/auth/confirm-password.tsx
@ -3,7 +3,7 @@ import { Head, useForm } from '@inertiajs/react';
 import { LoaderCircle } from 'lucide-react';
 import { FormEventHandler } from 'react';

-import InputError from '@/components/input-error';
+import InputError from '@/components/ui/input-error';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
--- a/resources/js/pages/auth/forgot-password.tsx
+++ b/resources/js/pages/auth/forgot-password.tsx
@ -3,7 +3,7 @@ import { Head, useForm } from '@inertiajs/react';
 import { LoaderCircle } from 'lucide-react';
 import { FormEventHandler } from 'react';

-import InputError from '@/components/input-error';
+import InputError from '@/components/ui/input-error';
 import TextLink from '@/components/text-link';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
--- a/resources/js/pages/auth/login.tsx
+++ b/resources/js/pages/auth/login.tsx
@ -2,7 +2,7 @@ import { Head, useForm } from '@inertiajs/react';
 import { LoaderCircle } from 'lucide-react';
 import { FormEventHandler } from 'react';

-import InputError from '@/components/input-error';
+import InputError from '@/components/ui/input-error';
 import TextLink from '@/components/text-link';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
--- a/resources/js/pages/auth/reset-password.tsx
+++ b/resources/js/pages/auth/reset-password.tsx
@ -2,7 +2,7 @@ import { Head, useForm } from '@inertiajs/react';
 import { LoaderCircle } from 'lucide-react';
 import { FormEventHandler } from 'react';

-import InputError from '@/components/input-error';
+import InputError from '@/components/ui/input-error';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
--- a/resources/js/pages/server-logs/partials/columns.tsx
+++ b/resources/js/pages/server-logs/partials/columns.tsx
@ -45,7 +45,7 @@ const LogActionCell = ({ row }: { row: Row<ServerLog> }) => {
            <DialogTitle>View Log</DialogTitle>
            <DialogDescription>This is all content of the log</DialogDescription>
          </DialogHeader>
-          <ScrollArea className="border-border relative h-[500px] w-full rounded-md border bg-black p-3 font-mono text-sm whitespace-pre-line text-gray-50">
+          <ScrollArea className="border-border bg-accent text-accent-foreground relative h-[500px] w-full rounded-md border p-3 font-mono text-sm whitespace-pre-line">
            {content}
            <ScrollBar orientation="vertical" />
          </ScrollArea>
--- a/resources/js/pages/server-providers/partials/create-server-provider.tsx
+++ b/resources/js/pages/server-providers/partials/create-server-provider.tsx
@ -14,7 +14,7 @@ import { useForm, usePage } from '@inertiajs/react';
 import { FormEventHandler, useEffect, useState } from 'react';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import InputError from '@/components/input-error';
+import InputError from '@/components/ui/input-error';
 import { Form, FormField, FormFields } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { SharedData } from '@/types';
--- a/resources/js/pages/servers/index.tsx
+++ b/resources/js/pages/servers/index.tsx
@ -2,16 +2,16 @@ import { Head, usePage } from '@inertiajs/react';

 import { type Configs } from '@/types';

-import AppLayout from '@/layouts/app-layout';
 import { DataTable } from '@/components/data-table';
-import { columns } from '@/pages/servers/columns';
+import { columns } from '@/pages/servers/partials/columns';
 import { Server } from '@/types/server';
 import Heading from '@/components/heading';
-import CreateServer from '@/pages/servers/create-server';
+import CreateServer from '@/pages/servers/partials/create-server';
 import Container from '@/components/container';
 import { PlusIcon } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import React from 'react';
+import Layout from '@/layouts/app/layout';

 type Response = {
  servers: {
@ -24,12 +24,12 @@ type Response = {
 export default function Servers() {
  const page = usePage<Response>();
  return (
-    <AppLayout>
+    <Layout>
      <Head title="Servers" />

-      <Container>
+      <Container className="max-w-5xl">
        <div className="flex items-start justify-between">
-          <Heading title="Servers" description="All of the servers on your project are here" />
+          <Heading title="Servers" />
          <div className="flex items-center gap-2">
            <CreateServer>
              <Button variant="outline">
@ -40,6 +40,6 @@ export default function Servers() {
        </div>
        <DataTable columns={columns} data={page.props.servers.data} />
      </Container>
-    </AppLayout>
+    </Layout>
  );
 }
--- a/resources/js/pages/servers/installing.tsx
+++ b/resources/js/pages/servers/installing.tsx
@ -1,12 +1,9 @@
 import type { Server } from '@/types/server';
 import type { ServerLog } from '@/types/server-log';
 import Container from '@/components/container';
-import Heading from '@/components/heading';
-import { Progress } from '@/components/ui/progress';
 import { DataTable } from '@/components/data-table';
-import { columns } from '@/pages/server-logs/columns';
+import { columns } from '@/pages/server-logs/partials/columns';
 import { usePage } from '@inertiajs/react';
-import { Button } from '@/components/ui/button';

 export default function InstallingServer() {
  const page = usePage<{
@ -17,14 +14,8 @@ export default function InstallingServer() {
  }>();

  return (
-    <Container>
-      <div className="flex items-start justify-between">
-        <Heading title={`Installing ${page.props.server.name}`} description="Your server is being installed" />
-        {page.props.server.status === 'installation_failed' && <Button variant="destructive">Delete</Button>}
-      </div>
-      <Progress value={parseInt(page.props.server.progress || '0')} />
-      <div className="mt-2 text-center">{page.props.server.progress}%</div>
-      <DataTable columns={columns} data={page.props.logs.data} />
+    <Container className="max-w-3xl">
+      <DataTable columns={columns} data={page.props.logs.data} />{' '}
    </Container>
  );
 }
--- a/resources/js/pages/servers/overview.tsx
+++ b/resources/js/pages/servers/overview.tsx
@ -0,0 +1,21 @@
+import type { Server } from '@/types/server';
+import type { ServerLog } from '@/types/server-log';
+import { DataTable } from '@/components/data-table';
+import { columns } from '@/pages/server-logs/partials/columns';
+import { usePage } from '@inertiajs/react';
+import Container from '@/components/container';
+
+export default function ServerOverview() {
+  const page = usePage<{
+    server: Server;
+    logs: {
+      data: ServerLog[];
+    };
+  }>();
+
+  return (
+    <Container className="max-w-3xl">
+      <DataTable columns={columns} data={page.props.logs.data} />
+    </Container>
+  );
+}
--- a/resources/js/pages/servers/partials/actions.tsx
+++ b/resources/js/pages/servers/partials/actions.tsx
@ -0,0 +1,27 @@
+import { Server } from '@/types/server';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { MoreVerticalIcon } from 'lucide-react';
+import DeleteServer from '@/pages/servers/partials/delete-server';
+
+export default function ServerActions({ server }: { server: Server }) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 p-0">
+          <span className="sr-only">Open menu</span>
+          <MoreVerticalIcon />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem>Copy payment ID</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DeleteServer server={server}>
+          <DropdownMenuItem onSelect={(e) => e.preventDefault()} variant="destructive">
+            Delete Server
+          </DropdownMenuItem>
+        </DeleteServer>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
--- a/resources/js/pages/servers/partials/columns.tsx
+++ b/resources/js/pages/servers/partials/columns.tsx
@ -2,10 +2,10 @@

 import { ColumnDef } from '@tanstack/react-table';
 import { Server } from '@/types/server';
-import { Badge } from '@/components/ui/badge';
 import { Link } from '@inertiajs/react';
 import { Button } from '@/components/ui/button';
 import { EyeIcon } from 'lucide-react';
+import ServerStatus from '@/pages/servers/partials/status';

 export const columns: ColumnDef<Server>[] = [
  {
@ -33,7 +33,7 @@ export const columns: ColumnDef<Server>[] = [
    enableColumnFilter: true,
    enableSorting: true,
    cell: ({ row }) => {
-      return <Badge variant={row.original.status_color}>{row.original.status}</Badge>;
+      return <ServerStatus server={row.original} />;
    },
  },
  {
--- a/resources/js/pages/servers/partials/create-server.tsx
+++ b/resources/js/pages/servers/partials/create-server.tsx
@ -5,11 +5,11 @@ import { useForm, usePage } from '@inertiajs/react';
 import React, { FormEventHandler, useState } from 'react';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import InputError from '@/components/input-error';
+import InputError from '@/components/ui/input-error';
 import { Input } from '@/components/ui/input';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { ServerProvider } from '@/types/server-provider';
-import CreateServerProvider from '@/pages/server-providers/create-server-provider';
+import CreateServerProvider from '@/pages/server-providers/partials/create-server-provider';
 import axios from 'axios';
 import { Form, FormField, FormFields } from '@/components/ui/form';
 import type { SharedData } from '@/types';
--- a/resources/js/pages/servers/partials/delete-server.tsx
+++ b/resources/js/pages/servers/partials/delete-server.tsx
@ -0,0 +1,63 @@
+import { Server } from '@/types/server';
+import { FormEvent, ReactNode } from 'react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { useForm } from '@inertiajs/react';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import InputError from '@/components/ui/input-error';
+import { LoaderCircleIcon } from 'lucide-react';
+
+export default function DeleteServer({ server, children }: { server: Server; children: ReactNode }) {
+  const form = useForm({
+    name: '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.delete(route('servers.destroy', server.id));
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete {server.name}</DialogTitle>
+          <DialogDescription>Delete server and its resources.</DialogDescription>
+        </DialogHeader>
+
+        <Form id="delete-server-form" onSubmit={submit}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="server-name">Name</Label>
+              <Input id="server-name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
+              <InputError message={form.errors.name} />
+            </FormField>
+          </FormFields>
+        </Form>
+
+        <DialogFooter className="gap-2">
+          <DialogClose asChild>
+            <Button variant="secondary">Cancel</Button>
+          </DialogClose>
+
+          <Button form="delete-server-form" variant="destructive" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="size-4 animate-spin" />}
+            Delete server
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/resources/js/pages/servers/partials/header.tsx
+++ b/resources/js/pages/servers/partials/header.tsx
@ -0,0 +1,73 @@
+import { Server } from '@/types/server';
+import { CloudIcon, IdCardIcon, LoaderCircleIcon, MapPinIcon, SlashIcon } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import ServerStatus from '@/pages/servers/partials/status';
+import ServerActions from '@/pages/servers/partials/actions';
+import { cn } from '@/lib/utils';
+
+export default function ServerHeader({ server }: { server: Server }) {
+  return (
+    <div className="flex items-center justify-between border-b px-4 py-2">
+      <div className="space-y-2">
+        <div className="text-accent-foreground/50 flex items-center space-x-2 text-xs">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="flex items-center space-x-1">
+                <IdCardIcon className="size-4" />
+                <div className="hidden lg:inline-flex">{server.name}</div>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <span className="lg:hidden">{server.name}</span>
+              <span className="hidden lg:inline-flex">Server Name</span>
+            </TooltipContent>
+          </Tooltip>
+          <SlashIcon className="size-3" />
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="flex items-center space-x-1">
+                <CloudIcon className="size-4" />
+                <div className="hidden lg:inline-flex">{server.provider}</div>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <span className="lg:hidden">{server.provider}</span>
+              <span className="hidden lg:inline-flex">Server Provider</span>
+            </TooltipContent>
+          </Tooltip>
+          <SlashIcon className="size-3" />
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="flex items-center space-x-1">
+                <MapPinIcon className="size-4" />
+                <div className="hidden lg:inline-flex">{server.ip}</div>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <span className="lg:hidden">{server.ip}</span>
+              <span className="hidden lg:inline-flex">Server IP</span>
+            </TooltipContent>
+          </Tooltip>
+          {['installing', 'installation_failed'].includes(server.status) && (
+            <>
+              <SlashIcon className="size-3" />
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div className="flex items-center space-x-1">
+                    <LoaderCircleIcon className={cn('size-4', server.status === 'installing' ? 'animate-spin' : '')} />
+                    <div>%{server.progress}</div>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>Installation Progress</TooltipContent>
+              </Tooltip>
+            </>
+          )}
+        </div>
+      </div>
+      <div className="flex items-center space-x-1">
+        <ServerStatus server={server} />
+        <ServerActions server={server} />
+      </div>
+    </div>
+  );
+}
--- a/resources/js/pages/servers/partials/status.tsx
+++ b/resources/js/pages/servers/partials/status.tsx
@ -0,0 +1,6 @@
+import { Server } from '@/types/server';
+import { Badge } from '@/components/ui/badge';
+
+export default function ServerStatus({ server }: { server: Server }) {
+  return <Badge variant={server.status_color}>{server.status}</Badge>;
+}
--- a/resources/js/pages/servers/show.tsx
+++ b/resources/js/pages/servers/show.tsx
@ -2,10 +2,11 @@ import { Head, usePage } from '@inertiajs/react';

 import { type Configs } from '@/types';

-import AppLayout from '@/layouts/app-layout';
 import { type Server } from '@/types/server';
 import InstallingServer from '@/pages/servers/installing';
 import type { ServerLog } from '@/types/server-log';
+import ServerOverview from '@/pages/servers/overview';
+import ServerLayout from '@/layouts/server/layout';

 type Response = {
  servers: {
@ -22,10 +23,10 @@ type Response = {
 export default function ShowServer() {
  const page = usePage<Response>();
  return (
-    <AppLayout>
+    <ServerLayout server={page.props.server}>
      <Head title={page.props.server.name} />

-      {['installing', 'installation_failed'].includes(page.props.server.status) && <InstallingServer />}
-    </AppLayout>
+      {['installing', 'installation_failed'].includes(page.props.server.status) ? <InstallingServer /> : <ServerOverview />}
+    </ServerLayout>
  );
 }
--- a/resources/js/pages/settings/password.tsx
+++ b/resources/js/pages/settings/password.tsx
@ -1,128 +0,0 @@
-import InputError from '@/components/input-error';
-import AppLayout from '@/layouts/app-layout';
-import SettingsLayout from '@/layouts/settings/layout';
-import { type BreadcrumbItem } from '@/types';
-import { Transition } from '@headlessui/react';
-import { Head, useForm } from '@inertiajs/react';
-import { FormEventHandler, useRef } from 'react';
-
-import HeadingSmall from '@/components/heading-small';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-
-const breadcrumbs: BreadcrumbItem[] = [
-  {
-    title: 'Password settings',
-    href: '/settings/password',
-  },
-];
-
-export default function Password() {
-  const passwordInput = useRef<HTMLInputElement>(null);
-  const currentPasswordInput = useRef<HTMLInputElement>(null);
-
-  const { data, setData, errors, put, reset, processing, recentlySuccessful } = useForm({
-    current_password: '',
-    password: '',
-    password_confirmation: '',
-  });
-
-  const updatePassword: FormEventHandler = (e) => {
-    e.preventDefault();
-
-    put(route('password.update'), {
-      preserveScroll: true,
-      onSuccess: () => reset(),
-      onError: (errors) => {
-        if (errors.password) {
-          reset('password', 'password_confirmation');
-          passwordInput.current?.focus();
-        }
-
-        if (errors.current_password) {
-          reset('current_password');
-          currentPasswordInput.current?.focus();
-        }
-      },
-    });
-  };
-
-  return (
-    <AppLayout breadcrumbs={breadcrumbs}>
-      <Head title="Profile settings" />
-
-      <SettingsLayout>
-        <div className="space-y-6">
-          <HeadingSmall title="Update password" description="Ensure your account is using a long, random password to stay secure" />
-
-          <form onSubmit={updatePassword} className="space-y-6">
-            <div className="grid gap-2">
-              <Label htmlFor="current_password">Current password</Label>
-
-              <Input
-                id="current_password"
-                ref={currentPasswordInput}
-                value={data.current_password}
-                onChange={(e) => setData('current_password', e.target.value)}
-                type="password"
-                className="mt-1 block w-full"
-                autoComplete="current-password"
-                placeholder="Current password"
-              />
-
-              <InputError message={errors.current_password} />
-            </div>
-
-            <div className="grid gap-2">
-              <Label htmlFor="password">New password</Label>
-
-              <Input
-                id="password"
-                ref={passwordInput}
-                value={data.password}
-                onChange={(e) => setData('password', e.target.value)}
-                type="password"
-                className="mt-1 block w-full"
-                autoComplete="new-password"
-                placeholder="New password"
-              />
-
-              <InputError message={errors.password} />
-            </div>
-
-            <div className="grid gap-2">
-              <Label htmlFor="password_confirmation">Confirm password</Label>
-
-              <Input
-                id="password_confirmation"
-                value={data.password_confirmation}
-                onChange={(e) => setData('password_confirmation', e.target.value)}
-                type="password"
-                className="mt-1 block w-full"
-                autoComplete="new-password"
-                placeholder="Confirm password"
-              />
-
-              <InputError message={errors.password_confirmation} />
-            </div>
-
-            <div className="flex items-center gap-4">
-              <Button disabled={processing}>Save password</Button>
-
-              <Transition
-                show={recentlySuccessful}
-                enter="transition ease-in-out"
-                enterFrom="opacity-0"
-                leave="transition ease-in-out"
-                leaveTo="opacity-0"
-              >
-                <p className="text-sm text-neutral-600">Saved</p>
-              </Transition>
-            </div>
-          </form>
-        </div>
-      </SettingsLayout>
-    </AppLayout>
-  );
-}
--- a/resources/js/pages/settings/profile.tsx
+++ b/resources/js/pages/settings/profile.tsx
@ -1,129 +0,0 @@
-import { type BreadcrumbItem, type SharedData } from '@/types';
-import { Transition } from '@headlessui/react';
-import { Head, Link, useForm, usePage } from '@inertiajs/react';
-import { FormEventHandler } from 'react';
-
-import DeleteUser from '@/components/delete-user';
-import HeadingSmall from '@/components/heading-small';
-import InputError from '@/components/input-error';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import AppLayout from '@/layouts/app-layout';
-import SettingsLayout from '@/layouts/settings/layout';
-
-const breadcrumbs: BreadcrumbItem[] = [
-  {
-    title: 'Home',
-    href: '/',
-  },
-  {
-    title: 'Profile settings',
-    href: '/settings/profile',
-  },
-];
-
-type ProfileForm = {
-  name: string;
-  email: string;
-};
-
-export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail: boolean; status?: string }) {
-  const { auth } = usePage<SharedData>().props;
-
-  const { data, setData, patch, errors, processing, recentlySuccessful } = useForm<Required<ProfileForm>>({
-    name: auth.user.name,
-    email: auth.user.email,
-  });
-
-  const submit: FormEventHandler = (e) => {
-    e.preventDefault();
-
-    patch(route('profile.update'), {
-      preserveScroll: true,
-    });
-  };
-
-  return (
-    <AppLayout breadcrumbs={breadcrumbs}>
-      <Head title="Profile settings" />
-
-      <SettingsLayout>
-        <div className="space-y-6">
-          <HeadingSmall title="Profile information" description="Update your name and email address" />
-
-          <form onSubmit={submit} className="space-y-6">
-            <div className="grid gap-2">
-              <Label htmlFor="name">Name</Label>
-
-              <Input
-                id="name"
-                className="mt-1 block w-full"
-                value={data.name}
-                onChange={(e) => setData('name', e.target.value)}
-                required
-                autoComplete="name"
-                placeholder="Full name"
-              />
-
-              <InputError className="mt-2" message={errors.name} />
-            </div>
-
-            <div className="grid gap-2">
-              <Label htmlFor="email">Email address</Label>
-
-              <Input
-                id="email"
-                type="email"
-                className="mt-1 block w-full"
-                value={data.email}
-                onChange={(e) => setData('email', e.target.value)}
-                required
-                autoComplete="username"
-                placeholder="Email address"
-              />
-
-              <InputError className="mt-2" message={errors.email} />
-            </div>
-
-            {mustVerifyEmail && auth.user.email_verified_at === null && (
-              <div>
-                <p className="text-muted-foreground -mt-4 text-sm">
-                  Your email address is unverified.{' '}
-                  <Link
-                    href={route('verification.send')}
-                    method="post"
-                    as="button"
-                    className="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
-                  >
-                    Click here to resend the verification email.
-                  </Link>
-                </p>
-
-                {status === 'verification-link-sent' && (
-                  <div className="mt-2 text-sm font-medium text-green-600">A new verification link has been sent to your email address.</div>
-                )}
-              </div>
-            )}
-
-            <div className="flex items-center gap-4">
-              <Button disabled={processing}>Save</Button>
-
-              <Transition
-                show={recentlySuccessful}
-                enter="transition ease-in-out"
-                enterFrom="opacity-0"
-                leave="transition ease-in-out"
-                leaveTo="opacity-0"
-              >
-                <p className="text-sm text-neutral-600">Saved</p>
-              </Transition>
-            </div>
-          </form>
-        </div>
-
-        <DeleteUser />
-      </SettingsLayout>
-    </AppLayout>
-  );
-}
--- a/resources/js/pages/settings/profile/index.tsx
+++ b/resources/js/pages/settings/profile/index.tsx
@ -0,0 +1,19 @@
+import { Head } from '@inertiajs/react';
+import DeleteUser from '@/pages/settings/profile/partials/delete-user';
+import SettingsLayout from '@/layouts/settings/layout';
+import Container from '@/components/container';
+import UpdatePassword from '@/pages/settings/profile/partials/update-password';
+import UpdateUser from '@/pages/settings/profile/partials/update-user';
+
+export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail: boolean; status?: string }) {
+  return (
+    <SettingsLayout>
+      <Head title="Profile settings" />
+      <Container className="max-w-xl">
+        <UpdateUser mustVerifyEmail={mustVerifyEmail} status={status} />
+        <UpdatePassword />
+        <DeleteUser />
+      </Container>
+    </SettingsLayout>
+  );
+}
--- a/resources/js/pages/settings/profile/partials/delete-user.tsx
+++ b/resources/js/pages/settings/profile/partials/delete-user.tsx
@ -1,18 +1,29 @@
 import { useForm } from '@inertiajs/react';
 import { FormEventHandler, useRef } from 'react';

-import InputError from '@/components/input-error';
+import InputError from '@/components/ui/input-error';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';

-import HeadingSmall from '@/components/heading-small';
-
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';

 export default function DeleteUser() {
  const passwordInput = useRef<HTMLInputElement>(null);
-  const { data, setData, delete: destroy, processing, reset, errors, clearErrors } = useForm<Required<{ password: string }>>({ password: '' });
+  const {
+    data,
+    setData,
+    delete: destroy,
+    processing,
+    reset,
+    errors,
+    clearErrors,
+  } = useForm<
+    Required<{
+      password: string;
+    }>
+  >({ password: '' });

  const deleteUser: FormEventHandler = (e) => {
    e.preventDefault();
@ -31,14 +42,19 @@ export default function DeleteUser() {
  };

  return (
-    <div className="space-y-6">
-      <HeadingSmall title="Delete account" description="Delete your account and all of its resources" />
-      <div className="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10">
-        <div className="relative space-y-0.5 text-red-600 dark:text-red-100">
-          <p className="font-medium">Warning</p>
-          <p className="text-sm">Please proceed with caution, this cannot be undone.</p>
-        </div>
+    <Card>
+      <CardHeader>
+        <CardTitle>Delete account</CardTitle>
+        <CardDescription>Delete your account and all of its resources</CardDescription>
+      </CardHeader>

+      <CardContent className="space-y-6">
+        <div className="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10">
+          <div className="relative space-y-0.5 text-red-600 dark:text-red-100">
+            <p className="font-medium">Warning</p>
+            <p className="text-sm">Please proceed with caution, this cannot be undone.</p>
+          </div>
+        </div>
        <Dialog>
          <DialogTrigger asChild>
            <Button variant="destructive">Delete account</Button>
@ -83,7 +99,7 @@ export default function DeleteUser() {
            </form>
          </DialogContent>
        </Dialog>
-      </div>
-    </div>
+      </CardContent>
+    </Card>
  );
 }
--- a/resources/js/pages/settings/profile/partials/update-password.tsx
+++ b/resources/js/pages/settings/profile/partials/update-password.tsx
@ -0,0 +1,116 @@
+import InputError from '@/components/ui/input-error';
+import { Transition } from '@headlessui/react';
+import { useForm } from '@inertiajs/react';
+import { FormEventHandler, useRef } from 'react';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+export default function UpdatePassword() {
+  const passwordInput = useRef<HTMLInputElement>(null);
+  const currentPasswordInput = useRef<HTMLInputElement>(null);
+
+  const { data, setData, errors, put, reset, processing, recentlySuccessful } = useForm({
+    current_password: '',
+    password: '',
+    password_confirmation: '',
+  });
+
+  const updatePassword: FormEventHandler = (e) => {
+    e.preventDefault();
+
+    put(route('profile.password'), {
+      preserveScroll: true,
+      onSuccess: () => reset(),
+      onError: (errors) => {
+        if (errors.password) {
+          reset('password', 'password_confirmation');
+          passwordInput.current?.focus();
+        }
+
+        if (errors.current_password) {
+          reset('current_password');
+          currentPasswordInput.current?.focus();
+        }
+      },
+    });
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Update password</CardTitle>
+        <CardDescription>Ensure your account is using a long, random password to stay secure.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={updatePassword} className="space-y-6">
+          <div className="grid gap-2">
+            <Label htmlFor="current_password">Current password</Label>
+
+            <Input
+              id="current_password"
+              ref={currentPasswordInput}
+              value={data.current_password}
+              onChange={(e) => setData('current_password', e.target.value)}
+              type="password"
+              className="mt-1 block w-full"
+              autoComplete="current-password"
+              placeholder="Current password"
+            />
+
+            <InputError message={errors.current_password} />
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="password">New password</Label>
+
+            <Input
+              id="password"
+              ref={passwordInput}
+              value={data.password}
+              onChange={(e) => setData('password', e.target.value)}
+              type="password"
+              className="mt-1 block w-full"
+              autoComplete="new-password"
+              placeholder="New password"
+            />
+
+            <InputError message={errors.password} />
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="password_confirmation">Confirm password</Label>
+
+            <Input
+              id="password_confirmation"
+              value={data.password_confirmation}
+              onChange={(e) => setData('password_confirmation', e.target.value)}
+              type="password"
+              className="mt-1 block w-full"
+              autoComplete="new-password"
+              placeholder="Confirm password"
+            />
+
+            <InputError message={errors.password_confirmation} />
+          </div>
+
+          <div className="flex items-center gap-4">
+            <Button disabled={processing}>Save password</Button>
+
+            <Transition
+              show={recentlySuccessful}
+              enter="transition ease-in-out"
+              enterFrom="opacity-0"
+              leave="transition ease-in-out"
+              leaveTo="opacity-0"
+            >
+              <p className="text-sm text-neutral-600">Saved</p>
+            </Transition>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
--- a/resources/js/pages/settings/profile/partials/update-user.tsx
+++ b/resources/js/pages/settings/profile/partials/update-user.tsx
@ -0,0 +1,110 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import InputError from '@/components/ui/input-error';
+import { Link, useForm, usePage } from '@inertiajs/react';
+import { Button } from '@/components/ui/button';
+import { Transition } from '@headlessui/react';
+import type { SharedData } from '@/types';
+import { FormEventHandler } from 'react';
+
+type ProfileForm = {
+  name: string;
+  email: string;
+};
+
+export default function UpdateUser({ mustVerifyEmail, status }: { mustVerifyEmail: boolean; status?: string }) {
+  const { auth } = usePage<SharedData>().props;
+
+  const { data, setData, patch, errors, processing, recentlySuccessful } = useForm<Required<ProfileForm>>({
+    name: auth.user.name,
+    email: auth.user.email,
+  });
+
+  const submit: FormEventHandler = (e) => {
+    e.preventDefault();
+
+    patch(route('profile.update'), {
+      preserveScroll: true,
+    });
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Profile information</CardTitle>
+        <CardDescription>Update your profile information and email address.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={submit} className="space-y-6">
+          <div className="grid gap-2">
+            <Label htmlFor="name">Name</Label>
+
+            <Input
+              id="name"
+              className="mt-1 block w-full"
+              value={data.name}
+              onChange={(e) => setData('name', e.target.value)}
+              required
+              autoComplete="name"
+              placeholder="Full name"
+            />
+
+            <InputError className="mt-2" message={errors.name} />
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="email">Email address</Label>
+
+            <Input
+              id="email"
+              type="email"
+              className="mt-1 block w-full"
+              value={data.email}
+              onChange={(e) => setData('email', e.target.value)}
+              required
+              autoComplete="username"
+              placeholder="Email address"
+            />
+
+            <InputError className="mt-2" message={errors.email} />
+          </div>
+
+          {mustVerifyEmail && auth.user.email_verified_at === null && (
+            <div>
+              <p className="text-muted-foreground -mt-4 text-sm">
+                Your email address is unverified.{' '}
+                <Link
+                  href={route('verification.send')}
+                  method="post"
+                  as="button"
+                  className="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
+                >
+                  Click here to resend the verification email.
+                </Link>
+              </p>
+
+              {status === 'verification-link-sent' && (
+                <div className="mt-2 text-sm font-medium text-green-600">A new verification link has been sent to your email address.</div>
+              )}
+            </div>
+          )}
+
+          <div className="flex items-center gap-4">
+            <Button disabled={processing}>Save</Button>
+
+            <Transition
+              show={recentlySuccessful}
+              enter="transition ease-in-out"
+              enterFrom="opacity-0"
+              leave="transition ease-in-out"
+              leaveTo="opacity-0"
+            >
+              <p className="text-sm text-neutral-600">Saved</p>
+            </Transition>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}