diff --git a/apps/buy.immich.app/routes/success/+page.svelte b/apps/buy.immich.app/routes/success/+page.svelte
index 1cea37d..ec57bf4 100644
--- a/apps/buy.immich.app/routes/success/+page.svelte
+++ b/apps/buy.immich.app/routes/success/+page.svelte
@@ -71,7 +71,7 @@
     </section>
 
     {#if isLoading}
-      <Card variant="subtle" color="secondary">
+      <Card color="secondary">
         <CardBody>
           <section class="flex gap-2">
             <Text>Waiting for payment verification...</Text>
diff --git a/apps/get.immich.app/routes/+page.svelte b/apps/get.immich.app/routes/+page.svelte
index 487eb56..d727941 100644
--- a/apps/get.immich.app/routes/+page.svelte
+++ b/apps/get.immich.app/routes/+page.svelte
@@ -41,7 +41,7 @@
       </div>
 
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 l gap-4">
-        <Card color="secondary" variant="subtle">
+        <Card color="secondary">
           <CardHeader>
             <CardTitle>Android</CardTitle>
           </CardHeader>
@@ -66,7 +66,7 @@
           </CardBody>
         </Card>
 
-        <Card color="secondary" variant="subtle">
+        <Card color="secondary">
           <CardHeader>
             <CardTitle>iOS</CardTitle>
           </CardHeader>
@@ -86,7 +86,7 @@
       </div>
 
       <section class="grid auto-rows-fr grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        <Card color="secondary" variant="subtle" class="h-full">
+        <Card color="secondary" class="h-full">
           <CardHeader>
             <CardTitle>Docker Compose</CardTitle>
             <CardDescription>Run Immich on <Link href="https://www.docker.com/">Docker</Link></CardDescription>
@@ -99,7 +99,7 @@
           </CardFooter>
         </Card>
 
-        <Card color="secondary" variant="subtle" class="h-full">
+        <Card color="secondary" class="h-full">
           <CardHeader>
             <CardTitle>Portainer</CardTitle>
             <CardDescription>Run Immich on <Link href="https://www.portainer.io/">Portainer</Link></CardDescription>
@@ -112,7 +112,7 @@
           </CardFooter>
         </Card>
 
-        <Card color="secondary" variant="subtle" class="h-full">
+        <Card color="secondary" class="h-full">
           <CardHeader>
             <CardTitle>Unraid</CardTitle>
             <CardDescription>Run Immich on <Link href="https://unraid.net/">Unraid</Link></CardDescription>
@@ -125,7 +125,7 @@
           </CardFooter>
         </Card>
 
-        <Card color="secondary" variant="subtle" class="h-full">
+        <Card color="secondary" class="h-full">
           <CardHeader>
             <CardTitle>TrueNAS SCALE</CardTitle>
             <CardDescription
diff --git a/apps/get.immich.app/routes/docker-compose/+page.svelte b/apps/get.immich.app/routes/docker-compose/+page.svelte
index d466de7..d215e46 100644
--- a/apps/get.immich.app/routes/docker-compose/+page.svelte
+++ b/apps/get.immich.app/routes/docker-compose/+page.svelte
@@ -113,7 +113,7 @@
     <CodePreview code={spec}>
       <div class="flex flex-col lg:flex-row-reverse gap-2">
         <div>
-          <Card variant="subtle">
+          <Card color="secondary">
             <CardHeader>
               <CardTitle>Settings</CardTitle>
             </CardHeader>
@@ -144,7 +144,7 @@
 
         <form class="grow">
           <Stack>
-            <Card variant="subtle">
+            <Card color="secondary">
               <CardHeader>
                 <CardTitle>Options</CardTitle>
               </CardHeader>
@@ -158,7 +158,7 @@
             </Card>
 
             {#if settings.customFolders}
-              <Card variant="subtle">
+              <Card color="secondary">
                 <CardHeader>
                   <CardTitle>Custom Folders</CardTitle>
                 </CardHeader>
@@ -186,7 +186,7 @@
                 </CardBody>
               </Card>
             {:else}
-              <Card variant="subtle">
+              <Card color="secondary">
                 <CardHeader>
                   <CardTitle>Folders</CardTitle>
                 </CardHeader>
@@ -201,7 +201,7 @@
             {/if}
 
             {#if settings.externalPostgres}
-              <Card variant="subtle">
+              <Card color="secondary">
                 <CardHeader>
                   <CardTitle>External Postgres</CardTitle>
                 </CardHeader>
@@ -212,7 +212,7 @@
                 </CardBody>
               </Card>
             {:else}
-              <Card variant="subtle">
+              <Card color="secondary">
                 <CardHeader>
                   <CardTitle>Postgres</CardTitle>
                 </CardHeader>
@@ -244,7 +244,7 @@
             {/if}
 
             {#if settings.externalRedis}
-              <Card variant="subtle">
+              <Card color="secondary">
                 <CardHeader>
                   <CardTitle>External Redis</CardTitle>
                 </CardHeader>
diff --git a/apps/my.immich.app/routes/[...rest]/+page.svelte b/apps/my.immich.app/routes/[...rest]/+page.svelte
index c26e00b..6929bf2 100644
--- a/apps/my.immich.app/routes/[...rest]/+page.svelte
+++ b/apps/my.immich.app/routes/[...rest]/+page.svelte
@@ -7,7 +7,6 @@
     Card,
     CardBody,
     CardDescription,
-    CardFooter,
     CardHeader,
     CardTitle,
     Heading,
@@ -58,33 +57,26 @@
     <Text>My Immich allows public links to link you to specific areas of your personal Immich instance.</Text>
 
     <form onsubmit={handleSubmit}>
-      <Card color="secondary" variant="subtle">
+      <Card color="secondary">
         <CardHeader>
           <CardTitle>Instance URL</CardTitle>
           <CardDescription>This URL is only stored in your browser</CardDescription>
         </CardHeader>
         <CardBody>
-          <section>
-            <Stack gap={4}>
-              <Input
-                type="text"
-                placeholder="https://demo.immich.app/"
-                bind:value={instanceUrl}
-                oninput={handleChange}
-              />
-            </Stack>
-          </section>
+          <Stack gap={4}>
+            <Input type="text" placeholder="https://demo.immich.app/" bind:value={instanceUrl} oninput={handleChange} />
+            <div class="flex justify-end">
+              <Button type="submit" class="w-full sm:w-auto" disabled={saved}>
+                {#if saved}
+                  <Icon icon={mdiCheckCircleOutline} />
+                  Saved!
+                {:else}
+                  {targetUrl ? 'Save & Redirect' : 'Save'}
+                {/if}
+              </Button>
+            </div>
+          </Stack>
         </CardBody>
-        <CardFooter class="justify-end">
-          <Button type="submit" class="w-full sm:w-auto" disabled={saved}>
-            {#if saved}
-              <Icon icon={mdiCheckCircleOutline} />
-              Saved!
-            {:else}
-              {targetUrl ? 'Save & Redirect' : 'Save'}
-            {/if}
-          </Button>
-        </CardFooter>
       </Card>
     </form>
   </Stack>
diff --git a/package-lock.json b/package-lock.json
index 560a511..464e956 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@mdi/js": "^7.4.47"
       },
       "devDependencies": {
-        "@immich/ui": "^0.9.0",
+        "@immich/ui": "^0.10.0",
         "@sveltejs/adapter-static": "^3.0.6",
         "@sveltejs/kit": "^2.12.1",
         "@sveltejs/vite-plugin-svelte": "^5.0.2",
@@ -696,9 +696,9 @@
       }
     },
     "node_modules/@immich/ui": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.9.0.tgz",
-      "integrity": "sha512-AmFyvBAzr59yJcaaxrBTSzRRw6MdpV2Tl/HsT5ff5Ntkcn4pDGgfjVGU8wLlS7PGBF395XudxvVmn51RIyubOA==",
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.10.0.tgz",
+      "integrity": "sha512-tdI6oHGgNzc8SnjT/qca8SLjJI62bo04RoGps8/+Bbyc4f3I05ja5Zj6fHR6q+OvFjqPO4MM86kRKfIfHjb/Fg==",
       "dev": true,
       "license": "GNU Affero General Public License version 3",
       "dependencies": {
diff --git a/package.json b/package.json
index 1ec70aa..59f9b19 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "format:fix": "prettier --write ."
   },
   "devDependencies": {
-    "@immich/ui": "^0.9.0",
+    "@immich/ui": "^0.10.0",
     "@sveltejs/adapter-static": "^3.0.6",
     "@sveltejs/kit": "^2.12.1",
     "@sveltejs/vite-plugin-svelte": "^5.0.2",
diff --git a/src/lib/components/CodePreview.svelte b/src/lib/components/CodePreview.svelte
index 00ade2c..0ce733d 100644
--- a/src/lib/components/CodePreview.svelte
+++ b/src/lib/components/CodePreview.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Button, Card, CardBody, CardHeader, Heading, HStack, Icon } from '@immich/ui';
+  import { Button, Card, Heading, HStack, Icon } from '@immich/ui';
   import { mdiPencilOutline, mdiXml } from '@mdi/js';
   import type { Snippet } from 'svelte';
   import { HighlightSvelte, LineNumbers } from 'svelte-highlight';
@@ -23,33 +23,31 @@
   {@html atomOneDark}
 </svelte:head>
 
-<Card color="primary">
-  <CardHeader>
-    <div class="flex justify-between">
-      <Heading size="medium">docker-compose.yaml</Heading>
-      <HStack gap={1} class="lg:border rounded-xl p-1">
-        <Button
-          disabled={viewMode === 'children'}
-          onclick={handleToggle}
-          size="small"
-          class={viewMode === 'children' ? 'hidden md:flex' : ''}
-        >
-          <Icon icon={mdiPencilOutline} size="1.5em" />
-          <span>Configure</span>
-        </Button>
-        <Button
-          disabled={viewMode === 'code'}
-          onclick={handleToggle}
-          size="small"
-          class={viewMode === 'code' ? 'hidden md:flex' : ''}
-        >
-          <Icon icon={mdiXml} size="1.5em" />
-          <span>View</span>
-        </Button>
-      </HStack>
-    </div>
-  </CardHeader>
-  <CardBody class={viewMode === 'code' ? 'p-0 pt-4' : ''}>
+<Card>
+  <div class="flex justify-between items-center p-4">
+    <Heading size="medium">docker-compose.yaml</Heading>
+    <HStack gap={1} class="lg:border rounded-xl p-1">
+      <Button
+        disabled={viewMode === 'children'}
+        onclick={handleToggle}
+        size="small"
+        class={viewMode === 'children' ? 'hidden md:flex' : ''}
+      >
+        <Icon icon={mdiPencilOutline} size="1.5em" />
+        <span>Configure</span>
+      </Button>
+      <Button
+        disabled={viewMode === 'code'}
+        onclick={handleToggle}
+        size="small"
+        class={viewMode === 'code' ? 'hidden md:flex' : ''}
+      >
+        <Icon icon={mdiXml} size="1.5em" />
+        <span>View</span>
+      </Button>
+    </HStack>
+  </div>
+  <div class={viewMode === 'children' ? 'px-4 pb-4' : ''}>
     {#if viewMode === 'children'}
       {@render children()}
     {:else}
@@ -57,5 +55,5 @@
         <LineNumbers {highlighted} hideBorder wrapLines />
       </HighlightSvelte>
     {/if}
-  </CardBody>
+  </div>
 </Card>
diff --git a/src/lib/components/LicenseKey.svelte b/src/lib/components/LicenseKey.svelte
index 5a39b60..b104261 100644
--- a/src/lib/components/LicenseKey.svelte
+++ b/src/lib/components/LicenseKey.svelte
@@ -26,7 +26,7 @@
   };
 </script>
 
-<Card variant="subtle" {color}>
+<Card {color}>
   <CardHeader>
     <CardTitle size="tiny">{type} Product Key</CardTitle>
   </CardHeader>