diff --git a/dev-dist/sw.js b/dev-dist/sw.js
index 5f3d99b..f02da09 100644
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -79,7 +79,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
    */
   workbox.precacheAndRoute([{
     "url": "index.html",
-    "revision": "0.fnrrna5najg"
+    "revision": "0.d4m96v8cgs"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
diff --git a/package-lock.json b/package-lock.json
index 6ca134b..d26357e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,8 @@
         "vue-router": "^4.5.0"
       },
       "devDependencies": {
+        "@tailwindcss/forms": "^0.5.10",
+        "@tailwindcss/typography": "^0.5.16",
         "@tailwindcss/vite": "^4.0.1",
         "@types/node": "^22.12.0",
         "@vitejs/plugin-vue": "^5.2.1",
@@ -2612,6 +2614,19 @@
         "tslib": "^2.8.0"
       }
     },
+    "node_modules/@tailwindcss/forms": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.10.tgz",
+      "integrity": "sha512-utI1ONF6uf/pPNO68kmN1b8rEwNXv3czukalo8VtJH8ksIkZXr3Q3VYudZLkCsDd4Wku120uF02hYK25XGPorw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mini-svg-data-uri": "^1.2.3"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"
+      }
+    },
     "node_modules/@tailwindcss/node": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.0.1.tgz",
@@ -2834,6 +2849,22 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz",
+      "integrity": "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+      }
+    },
     "node_modules/@tailwindcss/vite": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.0.1.tgz",
@@ -3602,6 +3633,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -5271,6 +5315,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -5278,6 +5329,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -5323,6 +5388,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -5585,6 +5660,20 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
@@ -6680,6 +6769,13 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.11.tgz",
diff --git a/package.json b/package.json
index 94fc54d..23f91cf 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,8 @@
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.0.1",
     "@types/node": "^22.12.0",
     "@vitejs/plugin-vue": "^5.2.1",
diff --git a/src/assets/index.css b/src/assets/index.css
index 4c7ded6..0d076d3 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@config "../../tailwind.config.js";
 
 @layer base {
   :root {
@@ -70,108 +71,108 @@
   }
   
   body {
-    background-color: hsl(var(--background));
-    color: hsl(var(--foreground));
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
   }
 }
 
 @layer utilities {
   .bg-background {
-    background-color: hsl(var(--background));
+    background-color: hsl(var(--background) / <alpha-value>);
   }
   .bg-foreground {
-    background-color: hsl(var(--foreground));
+    background-color: hsl(var(--foreground) / <alpha-value>);
   }
   .bg-card {
-    background-color: hsl(var(--card));
+    background-color: hsl(var(--card) / var(--tw-bg-opacity, 1));
   }
   .bg-card-foreground {
-    background-color: hsl(var(--card-foreground));
+    background-color: hsl(var(--card-foreground) / var(--tw-bg-opacity, 1));
   }
   .bg-popover {
-    background-color: hsl(var(--popover));
+    background-color: hsl(var(--popover) / var(--tw-bg-opacity, 1));
   }
   .bg-popover-foreground {
-    background-color: hsl(var(--popover-foreground));
+    background-color: hsl(var(--popover-foreground) / var(--tw-bg-opacity, 1));
   }
   .bg-primary {
-    background-color: hsl(var(--primary));
+    background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
   }
   .bg-primary-foreground {
-    background-color: hsl(var(--primary-foreground));
+    background-color: hsl(var(--primary-foreground) / var(--tw-bg-opacity, 1));
   }
   .bg-secondary {
-    background-color: hsl(var(--secondary));
+    background-color: hsl(var(--secondary) / var(--tw-bg-opacity, 1));
   }
   .bg-secondary-foreground {
-    background-color: hsl(var(--secondary-foreground));
+    background-color: hsl(var(--secondary-foreground) / var(--tw-bg-opacity, 1));
   }
   .bg-muted {
-    background-color: hsl(var(--muted));
+    background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
   }
   .bg-muted-foreground {
-    background-color: hsl(var(--muted-foreground));
+    background-color: hsl(var(--muted-foreground) / var(--tw-bg-opacity, 1));
   }
   .bg-accent {
-    background-color: hsl(var(--accent));
+    background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
   }
   .bg-accent-foreground {
-    background-color: hsl(var(--accent-foreground));
+    background-color: hsl(var(--accent-foreground) / var(--tw-bg-opacity, 1));
   }
   .bg-destructive {
-    background-color: hsl(var(--destructive));
+    background-color: hsl(var(--destructive) / var(--tw-bg-opacity, 1));
   }
   .bg-destructive-foreground {
-    background-color: hsl(var(--destructive-foreground));
+    background-color: hsl(var(--destructive-foreground) / var(--tw-bg-opacity, 1));
   }
 
   .text-background {
-    color: hsl(var(--background));
+    color: hsl(var(--background) / <alpha-value>);
   }
   .text-foreground {
-    color: hsl(var(--foreground));
+    color: hsl(var(--foreground) / <alpha-value>);
   }
   .text-card {
-    color: hsl(var(--card));
+    color: hsl(var(--card) / var(--tw-text-opacity, 1));
   }
   .text-card-foreground {
-    color: hsl(var(--card-foreground));
+    color: hsl(var(--card-foreground) / var(--tw-text-opacity, 1));
   }
   .text-popover {
-    color: hsl(var(--popover));
+    color: hsl(var(--popover) / var(--tw-text-opacity, 1));
   }
   .text-popover-foreground {
-    color: hsl(var(--popover-foreground));
+    color: hsl(var(--popover-foreground) / var(--tw-text-opacity, 1));
   }
   .text-primary {
-    color: hsl(var(--primary));
+    color: hsl(var(--primary) / var(--tw-text-opacity, 1));
   }
   .text-primary-foreground {
-    color: hsl(var(--primary-foreground));
+    color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
   }
   .text-secondary {
-    color: hsl(var(--secondary));
+    color: hsl(var(--secondary) / var(--tw-text-opacity, 1));
   }
   .text-secondary-foreground {
-    color: hsl(var(--secondary-foreground));
+    color: hsl(var(--secondary-foreground) / var(--tw-text-opacity, 1));
   }
   .text-muted {
-    color: hsl(var(--muted));
+    color: hsl(var(--muted) / var(--tw-text-opacity, 1));
   }
   .text-muted-foreground {
-    color: hsl(var(--muted-foreground));
+    color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
   }
   .text-accent {
-    color: hsl(var(--accent));
+    color: hsl(var(--accent) / var(--tw-text-opacity, 1));
   }
   .text-accent-foreground {
-    color: hsl(var(--accent-foreground));
+    color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
   }
   .text-destructive {
-    color: hsl(var(--destructive));
+    color: hsl(var(--destructive) / var(--tw-text-opacity, 1));
   }
   .text-destructive-foreground {
-    color: hsl(var(--destructive-foreground));
+    color: hsl(var(--destructive-foreground) / var(--tw-text-opacity, 1));
   }
 
   @supports not (backdrop-filter: blur(1px)) {
@@ -180,3 +181,29 @@
     }
   }
 }
+
+/* Add support for ring colors */
+@layer utilities {
+  .ring-border {
+    --tw-ring-color: hsl(var(--border) / <alpha-value>);
+  }
+  .ring-primary {
+    --tw-ring-color: hsl(var(--primary) / <alpha-value>);
+  }
+  .ring-background {
+    --tw-ring-color: hsl(var(--background) / <alpha-value>);
+  }
+}
+
+/* Add support for border colors */
+@layer utilities {
+  .box-border {
+    border-color: hsl(var(--border) / var(--tw-border-opacity, 1));
+  }
+  .border-primary {
+    border-color: hsl(var(--primary) / <alpha-value>);
+  }
+  .border-background {
+    border-color: hsl(var(--background) / <alpha-value>);
+  }
+}
diff --git a/src/components/SupportChat.vue b/src/components/SupportChat.vue
index 7ef1123..05ddd99 100644
--- a/src/components/SupportChat.vue
+++ b/src/components/SupportChat.vue
@@ -126,25 +126,25 @@ const getMessageGroupClasses = (sent: boolean) => {
 
 <template>
   <Card
-    class="flex flex-col h-full bg-gradient-to-b from-[#1e1e2e] to-[#181825] border-[#313244] shadow-2xl overflow-hidden relative z-0">
+    class="flex flex-col h-full bg-gradient-to-b from-card to-background border-border shadow-2xl overflow-hidden relative z-0">
     <CardHeader
-      class="flex-shrink-0 flex flex-row items-center justify-between px-6 py-4 border-b border-[#313244]/50 bg-[#181825]/95 backdrop-blur-md relative z-50">
+      class="flex-shrink-0 flex flex-row items-center justify-between px-6 py-4 border-b border-border/50 bg-background/95 backdrop-blur-md relative z-50">
       <!-- Left side with avatar and name -->
       <div class="flex items-center gap-5 flex-shrink-0">
         <div class="relative group">
           <div
-            class="absolute -inset-0.5 bg-gradient-to-r from-[#cba6f7] to-[#89b4fa] rounded-full opacity-75 group-hover:opacity-100 blur transition duration-200">
+            class="absolute -inset-0.5 bg-gradient-to-r from-primary to-primary/50 rounded-full opacity-75 group-hover:opacity-100 blur transition duration-200">
           </div>
           <Avatar
-            class="relative h-11 w-11 bg-[#313244] ring-2 ring-[#cba6f7] ring-offset-2 ring-offset-[#181825] shadow-md transition-all duration-200 hover:shadow-lg group-hover:scale-105">
-            <AvatarFallback class="text-base font-semibold text-[#cdd6f4]">SA</AvatarFallback>
+            class="relative h-11 w-11 bg-muted ring-2 ring-ring ring-offset-2 ring-offset-background shadow-md transition-all duration-200 hover:shadow-lg group-hover:scale-105">
+            <AvatarFallback class="text-base font-semibold text-foreground">SA</AvatarFallback>
           </Avatar>
         </div>
         <div class="hidden sm:block">
-          <p class="font-semibold leading-none text-[#cdd6f4] tracking-tight">Support Agent</p>
+          <p class="font-semibold leading-none text-foreground tracking-tight">Support Agent</p>
           <div class="flex items-center gap-1.5 mt-1.5">
-            <div class="w-2 h-2 rounded-full bg-[#a6e3a1] animate-pulse"></div>
-            <p class="text-sm text-[#a6adc8]">Online</p>
+            <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
+            <p class="text-sm text-muted-foreground">Online</p>
           </div>
         </div>
       </div>
@@ -152,7 +152,7 @@ const getMessageGroupClasses = (sent: boolean) => {
       <!-- Center badge -->
       <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
         <div
-          class="text-xs font-medium text-[#cdd6f4] bg-gradient-to-r from-[#313244]/80 to-[#45475a]/80 backdrop-blur-sm px-4 py-2 rounded-full whitespace-nowrap shadow-lg border border-[#45475a]/50">
+          class="text-xs font-medium text-foreground bg-gradient-to-r from-muted/80 to-muted/50 backdrop-blur-sm px-4 py-2 rounded-full whitespace-nowrap shadow-lg border border-border/50">
           Customer Support
         </div>
       </div>
@@ -167,7 +167,7 @@ const getMessageGroupClasses = (sent: boolean) => {
       </div>
     </CardHeader>
 
-    <CardContent class="flex-1 min-h-0 p-0 bg-gradient-to-b from-[#1e1e2e] to-[#181825] overflow-hidden">
+    <CardContent class="flex-1 min-h-0 p-0 bg-gradient-to-b from-card to-background overflow-hidden">
       <ScrollArea class="h-full" type="hover">
         <div class="flex flex-col gap-4 px-6 py-4">
           <template v-for="(group, groupIndex) in groupedMessages" :key="groupIndex">
@@ -176,7 +176,7 @@ const getMessageGroupClasses = (sent: boolean) => {
               formatDate(group.timestamp) !== formatDate(groupedMessages[groupIndex - 1].timestamp)"
               class="flex justify-center my-8">
               <div
-                class="px-4 py-1.5 rounded-full bg-gradient-to-r from-[#313244]/30 to-[#45475a]/30 text-xs font-medium text-[#a6adc8] shadow-lg backdrop-blur-sm border border-[#45475a]/20">
+                class="px-4 py-1.5 rounded-full bg-gradient-to-r from-muted/30 to-muted/30 text-xs font-medium text-muted-foreground shadow-lg backdrop-blur-sm border border-border/20">
                 {{ formatDate(group.timestamp) }}
               </div>
             </div>
@@ -203,15 +203,15 @@ const getMessageGroupClasses = (sent: boolean) => {
     </CardContent>
 
     <CardFooter
-      class="flex-shrink-0 border-t border-[#313244]/50 bg-[#181825]/95 backdrop-blur-md p-4 shadow-xl">
+      class="flex-shrink-0 border-t border-border/50 bg-background/95 backdrop-blur-md p-4 shadow-xl">
       <form @submit="sendMessage" class="flex w-full items-center gap-4">
         <Input id="message" v-model="input" placeholder="Type your message..."
-          class="flex-1 bg-[#1e1e2e]/90 border-[#313244] text-[#cdd6f4] placeholder:text-[#6c7086] focus:ring-2 focus:ring-[#cba6f7] focus:border-[#cba6f7] transition-all duration-300 shadow-lg hover:border-[#45475a] rounded-xl h-11"
+          class="flex-1 bg-card/90 border-border text-foreground placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-300 shadow-lg hover:border-border/60 rounded-xl h-11"
           autocomplete="off" />
         <Button type="submit" size="icon" :disabled="inputLength === 0 || isSending"
-          class="bg-gradient-to-r from-[#cba6f7] to-[#89b4fa] text-[#11111b] hover:brightness-110 active:brightness-90 transition-all duration-300 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:hover:shadow-lg h-11 w-11 rounded-xl flex-shrink-0">
+          class="bg-gradient-to-r from-primary to-primary/80 text-primary-foreground hover:brightness-110 active:brightness-90 transition-all duration-300 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:hover:shadow-lg h-11 w-11 rounded-xl flex-shrink-0">
           <Send v-if="!isSending" class="h-4 w-4" />
-          <div v-else class="h-4 w-4 animate-spin rounded-full border-2 border-[#11111b] border-r-transparent" />
+          <div v-else class="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-r-transparent" />
           <span class="sr-only">{{ isSending ? 'Sending...' : 'Send' }}</span>
         </Button>
       </form>
diff --git a/src/components/ui/message-bubble/MessageBubble.vue b/src/components/ui/message-bubble/MessageBubble.vue
index 1d0658f..cea72e1 100644
--- a/src/components/ui/message-bubble/MessageBubble.vue
+++ b/src/components/ui/message-bubble/MessageBubble.vue
@@ -19,10 +19,10 @@ const copiedValues = ref(new Set<string>())
 
 const bubbleClasses = computed(() => {
   return cn(
-    'relative flex flex-col break-words min-w-[120px] max-w-[90%] md:max-w-[75%] text-sm',
+    'relative flex flex-col break-words min-w-[120px] max-w-[90%] md:max-w-[75%] text-sm shadow-sm',
     props.sent
-      ? 'bg-gradient-to-br from-purple-300 to-purple-400 text-gray-900'
-      : 'bg-gradient-to-br from-gray-700 to-gray-800 text-gray-100',
+      ? 'bg-gradient-to-br from-primary/90 via-primary/80 to-primary/70 text-primary-foreground ring-1 ring-primary/10'
+      : 'bg-gradient-to-br from-muted/90 via-muted/80 to-muted/70 text-muted-foreground ring-1 ring-border/10',
     // First message in group
     props.isFirst && (props.sent ? 'rounded-t-xl rounded-l-xl' : 'rounded-t-xl rounded-r-xl'),
     // Last message in group
@@ -60,7 +60,7 @@ const copyToClipboard = async (text: string) => {
 
 const formatSpecialContent = (type: 'address' | 'txid' | 'invoice', value: string) => {
   const isCopied = copiedValues.value.has(value)
-  const buttonClasses = 'inline-flex items-center gap-1 px-2 h-[22px] text-[11px] font-medium rounded bg-gray-800/20 hover:bg-gray-800/30 transition-colors'
+  const buttonClasses = 'inline-flex items-center gap-1 px-2 h-[22px] text-[11px] font-medium rounded bg-background/10 hover:bg-background/20 transition-colors ring-1 ring-border/5'
   
   if (type === 'txid') {
     return `<div class="font-mono text-[11px] leading-normal break-all opacity-90">${value}</div><div class="flex flex-wrap items-center gap-1.5 mt-1.5"><button data-copy="${value}" class="${buttonClasses}"><svg class="h-3 w-3 mr-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${isCopied ? '<path d="M20 6 9 17l-5-5"/>' : '<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M15 2H9a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Z"/>'}</svg>Copy txid</button><a href="https://mempool.space/tx/${value}" target="_blank" rel="noopener noreferrer" class="${buttonClasses}"><svg class="h-3 w-3 mr-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10M7 17 17 7"/></svg>mempool.space</a></div>`
@@ -133,12 +133,15 @@ const handleClick = async (event: MouseEvent) => {
   <div :class="bubbleClasses" @click="handleClick">
     <div class="px-3 py-2 break-words whitespace-pre-wrap">
       <span v-if="isJson" class="font-mono text-[11px]">
-        <pre class="select-text p-2 rounded">{{ JSON.stringify(JSON.parse(content), null, 2) }}</pre>
+        <pre class="select-text p-2 rounded bg-background/10">{{ JSON.stringify(JSON.parse(content), null, 2) }}</pre>
       </span>
       <span v-else class="select-text text-[13px] leading-relaxed" v-html="formattedContent"></span>
     </div>
-    <span v-if="showTimestamp && isLast" class="text-[10px] text-gray-500/80 px-3 pb-1 select-none"
-      :class="{ 'self-end': sent }">{{ formatTime(timestamp) }}</span>
+    <span v-if="showTimestamp && isLast" 
+      class="text-[10px] px-3 pb-1 select-none opacity-70"
+      :class="{ 'self-end': sent }">
+      {{ formatTime(timestamp) }}
+    </span>
   </div>
 </template>
 
@@ -164,7 +167,6 @@ const handleClick = async (event: MouseEvent) => {
 }
 
 :deep(pre) {
-  background: rgba(0, 0, 0, 0.1);
   margin: 0;
   font-size: 11px;
   line-height: 1.4;
@@ -181,11 +183,6 @@ const handleClick = async (event: MouseEvent) => {
   outline-offset: 2px;
 }
 
-/* Dark theme adjustments for JSON */
-:deep(pre) {
-  background: rgba(0, 0, 0, 0.2);
-}
-
 /* Special content container styles */
 :deep(.special-content) {
   margin: 0.5rem 0;
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..4ac5287
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,97 @@
+const animate = require("tailwindcss-animate")
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  safelist: ["dark"],
+  prefix: "",
+
+  content: [
+    './pages/**/*.{ts,tsx,vue}',
+    './components/**/*.{ts,tsx,vue}',
+    './app/**/*.{ts,tsx,vue}',
+    './src/**/*.{ts,tsx,vue}',
+    './index.html',
+  ],
+
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border) / <alpha-value>)',
+        input: 'hsl(var(--input) / <alpha-value>)',
+        ring: 'hsl(var(--ring) / <alpha-value>)',
+        background: 'hsl(var(--background) / <alpha-value>)',
+        foreground: 'hsl(var(--foreground) / <alpha-value>)',
+        primary: {
+          DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
+          foreground: 'hsl(var(--primary-foreground) / <alpha-value>)',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
+          foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
+          foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
+          foreground: 'hsl(var(--muted-foreground) / <alpha-value>)',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
+          foreground: 'hsl(var(--accent-foreground) / <alpha-value>)',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
+          foreground: 'hsl(var(--popover-foreground) / <alpha-value>)',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card) / <alpha-value>)',
+          foreground: 'hsl(var(--card-foreground) / <alpha-value>)',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+    },
+  },
+  plugins: [
+    animate,
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+  ],
+  future: {
+    hoverOnlyWhenSupported: true,
+    respectDefaultRingColorOpacity: true,
+    disableColorOpacityUtilitiesByDefault: true,
+    colorOpacityUtilities: true,
+  },
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
deleted file mode 100644
index adf1cff..0000000
--- a/tailwind.config.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-const animate = require("tailwindcss-animate")
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: 'class',
-  safelist: ["dark"],
-  prefix: "",
-
-  content: [
-    './pages/**/*.{ts,tsx,vue}',
-    './components/**/*.{ts,tsx,vue}',
-    './app/**/*.{ts,tsx,vue}',
-    './src/**/*.{ts,tsx,vue}',
-  ],
-
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
-  },
-  plugins: [animate],
-}