diff --git a/package-lock.json b/package-lock.json
index 6c2bc6c..3f8f15d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,7 +30,7 @@
         "vue": "^3.5.13",
         "vue-i18n": "^9.14.2",
         "vue-router": "^4.5.0",
-        "vue-sonner": "^2.0.1",
+        "vue-sonner": "^2.0.2",
         "web-vitals": "^3.5.2"
       },
       "devDependencies": {
@@ -14119,9 +14119,9 @@
       }
     },
     "node_modules/vue-sonner": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/vue-sonner/-/vue-sonner-2.0.1.tgz",
-      "integrity": "sha512-sn4vjCRzRcnMaxaLa9aNSyZQi6S+gshiea5Lc3eqpkj0ES9LH8ljg+WJCkxefr28V4PZ9xkUXBIWpxGfQxstIg==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/vue-sonner/-/vue-sonner-2.0.2.tgz",
+      "integrity": "sha512-cN6onnN6aBOZ56YWN8CMj6t4zqbz/XlenE+jx5z+mgduMMelFo6B6G+e2Q6hhxU9YFiV16MXG2MBPluZabyElQ==",
       "license": "MIT"
     },
     "node_modules/vue-tsc": {
diff --git a/package.json b/package.json
index 2a41448..b25fd19 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "vue": "^3.5.13",
     "vue-i18n": "^9.14.2",
     "vue-router": "^4.5.0",
-    "vue-sonner": "^2.0.1",
+    "vue-sonner": "^2.0.2",
     "web-vitals": "^3.5.2"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index 7b68574..2a7b1c8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -61,9 +61,9 @@ onUnmounted(() => {
       style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)">
       <header
         class="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <nav class="container flex h-14 items-center justify-between">
+        <nav
+          class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 flex h-14 lg:h-16 xl:h-20 items-center justify-between">
           <Navbar />
-          <ConnectionStatus :is-connected="isConnected" :is-connecting="isConnecting" :error="error" />
         </nav>
       </header>
 
diff --git a/src/components/ui/sonner/Sonner.vue b/src/components/ui/sonner/Sonner.vue
index e6fff28..b82b29e 100644
--- a/src/components/ui/sonner/Sonner.vue
+++ b/src/components/ui/sonner/Sonner.vue
@@ -8,11 +8,15 @@ const props = defineProps<ToasterProps>()
   <Sonner
     class="toaster group"
     v-bind="props"
-    :style="{
-      '--normal-bg': 'var(--popover)',
-      '--normal-text': 'var(--popover-foreground)',
-      '--normal-border': 'var(--border)',
-
+    :toast-options="{
+      classes: {
+        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+        description: 'group-[.toast]:text-muted-foreground',
+        actionButton:
+          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+        cancelButton:
+          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+      },
     }"
   />
 </template>