diff --git a/resources/css/global.css b/resources/css/global.css
index ac6e555..f82256b 100755
--- a/resources/css/global.css
+++ b/resources/css/global.css
@@ -32,10 +32,6 @@
   }
 }
 
-* {
-  font-family: poppins, sans-serif;
-}
-
 ::-webkit-scrollbar-thumb {
   border-radius: 100px;
   border: 4px solid transparent;
@@ -44,7 +40,11 @@
 }
 
 ::-webkit-scrollbar {
-  width: 16px;
+  width: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
 }
 
 ::placeholder {
@@ -52,14 +52,6 @@
   opacity: 1;
 }
 
-:-ms-input-placeholder {
-  color: #626565;
-}
-
-::-ms-input-placeholder {
-  color: #626565;
-}
-
 html {
   scroll-behavior: smooth;
 }
@@ -95,81 +87,37 @@ body {
   background-blend-mode: multiply;
 }
 
-.camera-icon {
-  background: #242c31 url("/public/assets/images/icons/camera.png") no-repeat
-    center;
+.icon-base {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
 }
 
-.discord-icon {
-  background: #25658d url("/public/assets/images/icons/discord.png") no-repeat
-    center;
-}
-
-html.dark .camera-icon {
-  background: #25658d url("/public/assets/images/icons/camera.png") no-repeat
-    center;
-}
-
-.hotel-icon {
-  background: #f68b08 url("/public/assets/images/icons/feeds.png") no-repeat
-    center;
-}
-
-.chat-icon {
-  background: #375571 url("/public/assets/images/icons/chat.png") no-repeat
-    center;
-}
-
-.article-icon {
-  background: #536e5e url("/public/assets/images/icons/article.gif") no-repeat
-    center;
-}
-
-.lighthouse-icon {
-  background: #8554a6 url("/public/assets/images/icons/lighthouse.png")
-    no-repeat center;
-}
-
-.currency-icon {
-  background: #e3ad06 url("/public/assets/images/icons/currency.png") no-repeat
-    center;
-}
-
-.catalog-icon {
-  background: rgba(141, 74, 183, 0.51)
-    url("/public/assets/images/icons/catalog.png") no-repeat center;
-}
-
-.inventory-icon {
-  background: #232121 url("/public/assets/images/icons/inventory.png") no-repeat
-    center;
-}
-
-.duo-chat-icon {
-  background: #eec980 url("/public/assets/images/icons/due-chat.png") no-repeat
-    center;
-}
-
-.friends-icon {
-  background: #b17f85 url("/public/assets/images/icons/friends.png") no-repeat
-    center;
-}
+.camera-icon { background: #242c31 url("/public/assets/images/icons/camera.png") no-repeat center; }
+.discord-icon { background: #25658d url("/public/assets/images/icons/discord.png") no-repeat center; }
+html.dark .camera-icon { background: #25658d url("/public/assets/images/icons/camera.png") no-repeat center; }
+.hotel-icon { background: #f68b08 url("/public/assets/images/icons/feeds.png") no-repeat center; }
+.chat-icon { background: #375571 url("/public/assets/images/icons/chat.png") no-repeat center; }
+.article-icon { background: #536e5e url("/public/assets/images/icons/article.gif") no-repeat center; }
+.lighthouse-icon { background: #8554a6 url("/public/assets/images/icons/lighthouse.png") no-repeat center; }
+.currency-icon { background: #e3ad06 url("/public/assets/images/icons/currency.png") no-repeat center; }
+.catalog-icon { background: rgba(141, 74, 183, 0.51) url("/public/assets/images/icons/catalog.png") no-repeat center; }
+.inventory-icon { background: #232121 url("/public/assets/images/icons/inventory.png") no-repeat center; }
+.duo-chat-icon { background: #eec980 url("/public/assets/images/icons/due-chat.png") no-repeat center; }
+.friends-icon { background: #b17f85 url("/public/assets/images/icons/friends.png") no-repeat center; }
 
 .nav-credit-icon {
-  background: #e9b124 url("/public/assets/images/icons/currency/credits.png")
-    no-repeat center;
+  background: #e9b124 url("/public/assets/images/icons/currency/credits.png") no-repeat center;
   outline: 1px solid #b26d18;
 }
 
 .nav-ducket-icon {
-  background: #c44aac url("/public/assets/images/icons/currency/duckets.png")
-    no-repeat center;
+  background: #c44aac url("/public/assets/images/icons/currency/duckets.png") no-repeat center;
   outline: 1px solid #812378;
 }
 
 .nav-diamond-icon {
-  background: #caf1f3 url("/public/assets/images/icons/currency/diamonds.png")
-    no-repeat center;
+  background: #caf1f3 url("/public/assets/images/icons/currency/diamonds.png") no-repeat center;
   outline: 1px solid #6caff4;
 }
 
@@ -182,43 +130,36 @@ html.dark .camera-icon {
   background-blend-mode: multiply;
 }
 
-/* Nitro disconnect overlay */
 #disconnected {
   display: none;
 }
 
 .profile-bg {
-  background: rgba(0, 0, 0, 0.5)
-    url("/public/assets/images/profile/profile-bg.png");
+  background: rgba(0, 0, 0, 0.5) url("/public/assets/images/profile/profile-bg.png");
   background-blend-mode: multiply;
 }
 
 .leaderboard-first {
-  background: #f9d83e url("/public/assets/images/leaderboards/trophy-gold.png")
-    no-repeat center;
+  background: #f9d83e url("/public/assets/images/leaderboards/trophy-gold.png") no-repeat center;
   color: transparent;
 }
 
 .leaderboard-second {
-  background: #b8c4d4
-    url("/public/assets/images/leaderboards/trophy-silver.png") no-repeat center;
+  background: #b8c4d4 url("/public/assets/images/leaderboards/trophy-silver.png") no-repeat center;
   color: transparent;
 }
 
 .leaderboard-third {
-  background: #f1851b
-    url("/public/assets/images/leaderboards/trophy-bronze.png") no-repeat center;
+  background: #f1851b url("/public/assets/images/leaderboards/trophy-bronze.png") no-repeat center;
   color: transparent;
 }
 
 .site-bg {
-  background: url("/public/assets/images/background-light.jpg") no-repeat fixed
-    right bottom;
+  background: url("/public/assets/images/background-light.jpg") no-repeat fixed right bottom;
 }
 
 .app.dark .site-bg {
-  background: url("/public/assets/images/background-dark.jpg") no-repeat fixed
-    right bottom;
+  background: url("/public/assets/images/background-dark.jpg") no-repeat fixed right bottom;
 }
 
 .app.dark .swal2-popup {
@@ -239,25 +180,11 @@ html.dark .camera-icon {
   background-position: center;
 }
 
-.navigation-icon.shop {
-  background-image: url("/public/assets/images/icons/navigation/shop.png");
-}
-
-.navigation-icon.leaderboards {
-  background-image: url("/public/assets/images/icons/navigation/leaderboards.png");
-}
-
-.navigation-icon.rules {
-  background-image: url("/public/assets/images/icons/navigation/rules.gif");
-}
-
-.navigation-icon.home {
-  background-image: url("/public/assets/images/icons/navigation/home.png");
-}
-
-.navigation-icon.community {
-  background-image: url("/public/assets/images/icons/navigation/community.png");
-}
+.navigation-icon.shop { background-image: url("/public/assets/images/icons/navigation/shop.png"); }
+.navigation-icon.leaderboards { background-image: url("/public/assets/images/icons/navigation/leaderboards.png"); }
+.navigation-icon.rules { background-image: url("/public/assets/images/icons/navigation/rules.gif"); }
+.navigation-icon.home { background-image: url("/public/assets/images/icons/navigation/home.png"); }
+.navigation-icon.community { background-image: url("/public/assets/images/icons/navigation/community.png"); }
 
 .swiper-slide {
   height: 215px !important;
@@ -272,63 +199,55 @@ html.dark .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
   background: white !important;
 }
 
-.prose-xl p:is([style*="text-align: center;"]) img {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
+.prose-xl p:is([style*="text-align: center;"]) img { display: block; margin-left: auto; margin-right: auto; }
+.prose-xl p:is([style*="text-align: left;"]) img { margin-left: 0; margin-right: auto; }
+.prose-xl p:is([style*="text-align: right;"]) img { margin-left: auto; margin-right: 0; }
+.prose-xl p { font-size: 16px; }
 
-.prose-xl p:is([style*="text-align: left;"]) img {
-  margin-left: 0;
-  margin-right: auto;
-}
-
-.prose-xl p:is([style*="text-align: right;"]) img {
-  margin-left: auto;
-  margin-right: 0;
-}
-
-.prose-xl p {
-  font-size: 16px;
-}
-
-.atom-align-left {
-  float: left;
-  margin: 0 10px 10px 0;
-}
-
-.atom-align-right {
-  float: right;
-  margin: 0 0 10px 10px;
-}
-
-.atom-align-center {
-  display: block;
-  margin: 0 auto;
-  text-align: center;
-}
-
-.atom-align-center > * {
-  text-align: center;
-}
+.atom-align-left { float: left; margin: 0 10px 10px 0; }
+.atom-align-right { float: right; margin: 0 0 10px 10px; }
+.atom-align-center { display: block; margin: 0 auto; text-align: center; }
+.atom-align-center > * { text-align: center; }
 
 #article-content a {
   color: var(--link-color, #53b2f8);
 }
 
-.cursor-grab {
-  cursor: grab !important;
-}
-.cursor-grab:active {
-  cursor: grabbing !important;
-}
+.cursor-grab { cursor: grab !important; }
+.cursor-grab:active { cursor: grabbing !important; }
 
-/* Text utility classes using CSS variables */
 .text-body { color: var(--color-text); }
 .text-muted { color: var(--color-text-muted); }
 .text-nav { color: var(--color-navbar-text); }
 
-/* Text shadow for readability on images/dark backgrounds */
 .text-shadow { text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
 .text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
 .text-shadow-lg { text-shadow: 0 2px 8px rgba(0,0,0,0.9); }
+
+.transition-base {
+  transition: all 0.2s ease-in-out;
+}
+
+.transition-smooth {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.hover-lift {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.hover-lift:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-card-hover);
+}
+
+.card-base {
+  background-color: var(--color-surface);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-card);
+  border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
+}
+
+.card-base:hover {
+  box-shadow: var(--shadow-card-hover);
+  border-color: color-mix(in srgb, var(--color-text-muted) 25%, transparent);
+}
diff --git a/resources/themes/atom/css/app.css b/resources/themes/atom/css/app.css
index 40b5152..1765d56 100755
--- a/resources/themes/atom/css/app.css
+++ b/resources/themes/atom/css/app.css
@@ -18,22 +18,37 @@
 
 @layer components {
   .nav-item {
-    @apply flex h-auto md:h-[60px] items-center text-[14px] font-semibold uppercase text-gray-700 transition duration-200 ease-in-out;
+    @apply flex h-auto md:h-[60px] items-center text-[14px] font-semibold uppercase transition-all duration-200 ease-in-out;
     color: var(--color-navbar-text);
     border-bottom: 4px solid transparent;
+    position: relative;
   }
 
-  .nav-item:hover {
-    border-bottom-color: var(--color-primary);
+  .nav-item::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+    height: 4px;
+    background-color: var(--color-primary);
+    transition: all 0.2s ease-in-out;
+    transform: translateX(-50%);
+    border-radius: 2px 2px 0 0;
+  }
+
+  .nav-item:hover::after {
+    width: 100%;
   }
 
   .dropdown-item {
-    @apply block py-2 px-4 font-semibold hover:bg-gray-100 text-gray-900;
+    @apply block py-2 px-4 font-semibold transition-all duration-200 ease-in-out;
     color: var(--color-text);
     list-style: none;
     margin: 0;
     padding: 8px 16px;
     text-align: center;
+    border-radius: var(--radius-sm);
   }
 
   .dropdown-item::before,
@@ -44,10 +59,10 @@
 
   .dropdown-item:hover {
     background-color: var(--color-primary);
+    color: var(--button-text-color);
   }
 }
 
-/* Mobile dropdown - force center everything */
 @media (max-width: 768px) {
   .dropdown-panel {
     text-align: center !important;
@@ -65,38 +80,6 @@
   }
 }
 
-* {
-  font-family: poppins, sans-serif;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 100px;
-  border: 4px solid transparent;
-  background-clip: content-box;
-  background-color: #2c3039;
-}
-
-::-webkit-scrollbar {
-  width: 16px;
-}
-
-::placeholder {
-  color: #626565;
-  opacity: 1;
-}
-
-:-ms-input-placeholder {
-  color: #626565;
-}
-
-::-ms-input-placeholder {
-  color: #626565;
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
 input::placeholder,
 textarea::placeholder {
   color: var(--input-placeholder-color, var(--color-text-muted));
@@ -120,81 +103,37 @@ textarea::placeholder {
   background-blend-mode: multiply;
 }
 
-.camera-icon {
-  background: #242c31 url("/public/assets/images/icons/camera.png") no-repeat
-    center;
+.icon-base {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
 }
 
-.discord-icon {
-  background: #25658d url("/public/assets/images/icons/discord.png") no-repeat
-    center;
-}
-
-html.dark .camera-icon {
-  background: #25658d url("/public/assets/images/icons/camera.png") no-repeat
-    center;
-}
-
-.hotel-icon {
-  background: #f68b08 url("/public/assets/images/icons/feeds.png") no-repeat
-    center;
-}
-
-.chat-icon {
-  background: #375571 url("/public/assets/images/icons/chat.png") no-repeat
-    center;
-}
-
-.article-icon {
-  background: #536e5e url("/public/assets/images/icons/article.gif") no-repeat
-    center;
-}
-
-.lighthouse-icon {
-  background: #8554a6 url("/public/assets/images/icons/lighthouse.png")
-    no-repeat center;
-}
-
-.currency-icon {
-  background: #e3ad06 url("/public/assets/images/icons/currency.png") no-repeat
-    center;
-}
-
-.catalog-icon {
-  background: rgba(141, 74, 183, 0.51)
-    url("/public/assets/images/icons/catalog.png") no-repeat center;
-}
-
-.inventory-icon {
-  background: #232121 url("/public/assets/images/icons/inventory.png") no-repeat
-    center;
-}
-
-.duo-chat-icon {
-  background: #eec980 url("/public/assets/images/icons/due-chat.png") no-repeat
-    center;
-}
-
-.friends-icon {
-  background: #b17f85 url("/public/assets/images/icons/friends.png") no-repeat
-    center;
-}
+.camera-icon { background: #242c31 url("/public/assets/images/icons/camera.png") no-repeat center; }
+.discord-icon { background: #25658d url("/public/assets/images/icons/discord.png") no-repeat center; }
+html.dark .camera-icon { background: #25658d url("/public/assets/images/icons/camera.png") no-repeat center; }
+.hotel-icon { background: #f68b08 url("/public/assets/images/icons/feeds.png") no-repeat center; }
+.chat-icon { background: #375571 url("/public/assets/images/icons/chat.png") no-repeat center; }
+.article-icon { background: #536e5e url("/public/assets/images/icons/article.gif") no-repeat center; }
+.lighthouse-icon { background: #8554a6 url("/public/assets/images/icons/lighthouse.png") no-repeat center; }
+.currency-icon { background: #e3ad06 url("/public/assets/images/icons/currency.png") no-repeat center; }
+.catalog-icon { background: rgba(141, 74, 183, 0.51) url("/public/assets/images/icons/catalog.png") no-repeat center; }
+.inventory-icon { background: #232121 url("/public/assets/images/icons/inventory.png") no-repeat center; }
+.duo-chat-icon { background: #eec980 url("/public/assets/images/icons/due-chat.png") no-repeat center; }
+.friends-icon { background: #b17f85 url("/public/assets/images/icons/friends.png") no-repeat center; }
 
 .nav-credit-icon {
-  background: #e9b124 url("/public/assets/images/icons/currency/credits.png")
-    no-repeat center;
+  background: #e9b124 url("/public/assets/images/icons/currency/credits.png") no-repeat center;
   outline: 1px solid #b26d18;
 }
 
 .nav-ducket-icon {
-  background: #c44aac url("/public/assets/images/icons/currency/duckets.png")
-    no-repeat center;
+  background: #c44aac url("/public/assets/images/icons/currency/duckets.png") no-repeat center;
   outline: 1px solid #812378;
 }
 
 .nav-diamond-icon {
-  background: #caf1f3 url("/public/assets/images/icons/currency/diamonds.png")
-    no-repeat center;
+  background: #caf1f3 url("/public/assets/images/icons/currency/diamonds.png") no-repeat center;
   outline: 1px solid #6caff4;
 }
 
@@ -207,42 +146,34 @@ html.dark .camera-icon {
   background-blend-mode: multiply;
 }
 
-#disconnected {
-  display: none;
-}
+#disconnected { display: none; }
 
 .profile-bg {
-  background: rgba(0, 0, 0, 0.5)
-    url("/public/assets/images/profile/profile-bg.png");
+  background: rgba(0, 0, 0, 0.5) url("/public/assets/images/profile/profile-bg.png");
   background-blend-mode: multiply;
 }
 
 .leaderboard-first {
-  background: #f9d83e url("/public/assets/images/leaderboards/trophy-gold.png")
-    no-repeat center;
+  background: #f9d83e url("/public/assets/images/leaderboards/trophy-gold.png") no-repeat center;
   color: transparent;
 }
 
 .leaderboard-second {
-  background: #b8c4d4
-    url("/public/assets/images/leaderboards/trophy-silver.png") no-repeat center;
+  background: #b8c4d4 url("/public/assets/images/leaderboards/trophy-silver.png") no-repeat center;
   color: transparent;
 }
 
 .leaderboard-third {
-  background: #f1851b
-    url("/public/assets/images/leaderboards/trophy-bronze.png") no-repeat center;
+  background: #f1851b url("/public/assets/images/leaderboards/trophy-bronze.png") no-repeat center;
   color: transparent;
 }
 
 .site-bg {
-  background: url("/public/assets/images/background-light.jpg") no-repeat fixed
-    right bottom;
+  background: url("/public/assets/images/background-light.jpg") no-repeat fixed right bottom;
 }
 
 .app.dark .site-bg {
-  background: url("/public/assets/images/background-dark.jpg") no-repeat fixed
-    right bottom;
+  background: url("/public/assets/images/background-dark.jpg") no-repeat fixed right bottom;
 }
 
 .app.dark .swal2-popup {
@@ -263,82 +194,29 @@ html.dark .camera-icon {
   background-position: center;
 }
 
-.navigation-icon.shop {
-  background-image: url("/public/assets/images/icons/navigation/shop.png");
-}
+.navigation-icon.shop { background-image: url("/public/assets/images/icons/navigation/shop.png"); }
+.navigation-icon.leaderboards { background-image: url("/public/assets/images/icons/navigation/leaderboards.png"); }
+.navigation-icon.rules { background-image: url("/public/assets/images/icons/navigation/rules.gif"); }
+.navigation-icon.home { background-image: url("/public/assets/images/icons/navigation/home.png"); }
+.navigation-icon.community { background-image: url("/public/assets/images/icons/navigation/community.png"); }
 
-.navigation-icon.leaderboards {
-  background-image: url("/public/assets/images/icons/navigation/leaderboards.png");
-}
-
-.navigation-icon.rules {
-  background-image: url("/public/assets/images/icons/navigation/rules.gif");
-}
-
-.navigation-icon.home {
-  background-image: url("/public/assets/images/icons/navigation/home.png");
-}
-
-.navigation-icon.community {
-  background-image: url("/public/assets/images/icons/navigation/community.png");
-}
-
-.swiper-slide {
-  height: 215px !important;
-}
+.swiper-slide { height: 215px !important; }
 
 .swiper-pagination-bullet-active,
-html.dark .swiper-pagination-bullet-active {
-  background: #e9b124 !important;
-}
+html.dark .swiper-pagination-bullet-active { background: #e9b124 !important; }
+html.dark .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) { background: white !important; }
 
-html.dark .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
-  background: white !important;
-}
+.prose-xl p:is([style*="text-align: center;"]) img { display: block; margin-left: auto; margin-right: auto; }
+.prose-xl p:is([style*="text-align: left;"]) img { margin-left: 0; margin-right: auto; }
+.prose-xl p:is([style*="text-align: right;"]) img { margin-left: auto; margin-right: 0; }
+.prose-xl p { font-size: 16px; }
 
-.prose-xl p:is([style*="text-align: center;"]) img {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
+.atom-align-left { float: left; margin: 0 10px 10px 0; }
+.atom-align-right { float: right; margin: 0 0 10px 10px; }
+.atom-align-center { display: block; margin: 0 auto; text-align: center; }
+.atom-align-center > * { text-align: center; }
 
-.prose-xl p:is([style*="text-align: left;"]) img {
-  margin-left: 0;
-  margin-right: auto;
-}
-
-.prose-xl p:is([style*="text-align: right;"]) img {
-  margin-left: auto;
-  margin-right: 0;
-}
-
-.prose-xl p {
-  font-size: 16px;
-}
-
-.atom-align-left {
-  float: left;
-  margin: 0 10px 10px 0;
-}
-
-.atom-align-right {
-  float: right;
-  margin: 0 0 10px 10px;
-}
-
-.atom-align-center {
-  display: block;
-  margin: 0 auto;
-  text-align: center;
-}
-
-.atom-align-center > * {
-  text-align: center;
-}
-
-#article-content a {
-  color: #53b2f8;
-}
+#article-content a { color: #53b2f8; }
 
 .badge-drawer-button {
   background-image: linear-gradient(to bottom, #f2f2f3 51%, #d9d8d8 49%);
@@ -351,9 +229,7 @@ html.dark .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
   box-shadow: inset 0 0 0px 2px #ffffff;
 }
 
-.badge-drawer-button .toggled {
-  background: #f2f2f3;
-}
+.badge-drawer-button .toggled { background: #f2f2f3; }
 
 html.dark .badge-drawer-button {
   background-image: linear-gradient(to bottom, #141414 51%, #101010 49%);
@@ -366,9 +242,7 @@ html.dark .badge-drawer-button:hover {
   box-shadow: inset 0 0 0px 2px #363636;
 }
 
-html.dark .badge-drawer-button .toggled {
-  background: #f2f2f3;
-}
+html.dark .badge-drawer-button .toggled { background: #f2f2f3; }
 
 .badge-drawer-palette {
   background-position: center;
@@ -401,12 +275,33 @@ html.dark .badge-drawer-button .toggled {
   opacity: 0.1;
 }
 
-/* Text utility classes using CSS variables */
 .text-body { color: var(--color-text); }
 .text-muted { color: var(--color-text-muted); }
 .text-nav { color: var(--color-navbar-text); }
 
-/* Text shadow for readability */
 .text-shadow { text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
 .text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
 .text-shadow-lg { text-shadow: 0 2px 8px rgba(0,0,0,0.9); }
+
+.transition-base { transition: all 0.2s ease-in-out; }
+.transition-smooth { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+
+.hover-lift {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.hover-lift:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-card-hover);
+}
+
+.card-base {
+  background-color: var(--color-surface);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-card);
+  border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
+}
+
+.card-base:hover {
+  box-shadow: var(--shadow-card-hover);
+  border-color: color-mix(in srgb, var(--color-text-muted) 25%, transparent);
+}
diff --git a/resources/themes/atom/views/components/content/content-card.blade.php b/resources/themes/atom/views/components/content/content-card.blade.php
index 03fec56..5ae2c32 100755
--- a/resources/themes/atom/views/components/content/content-card.blade.php
+++ b/resources/themes/atom/views/components/content/content-card.blade.php
@@ -1,21 +1,23 @@
 
 @props(['icon' => '', 'classes' => ''])
 
-<div class="w-full flex flex-col gap-y-4 rounded overflow-hidden pb-3 shadow-sm {{ $classes }}" style="background-color: var(--color-surface); color: var(--color-text);">
- <div class="flex gap-x-2 border-b p-3" style="border-color: color-mix(in srgb, var(--color-primary) 30%, transparent)">
+<div class="w-full flex flex-col gap-y-4 rounded-xl overflow-hidden pb-4 shadow-sm border {{ $classes }}"
+     style="background-color: var(--color-surface); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
+ <div class="flex gap-x-2.5 p-3.5 rounded-t-xl"
+      style="background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);">
  @if (empty($icon) === false)
- <div class="max-w-[50px] max-h-[50px] min-w-[50px] min-h-[50px] rounded-full relative flex items-center justify-center {{ $icon }}"></div>
+ <div class="w-[50px] h-[50px] min-w-[50px] rounded-full flex items-center justify-center {{ $icon }} shadow-sm"></div>
  @endif
  <div class="flex flex-col justify-center text-sm">
  <p class="font-semibold" style="color: var(--color-text)">{{ $title }}</p>
 
  @if(isset($underTitle))
- <p style="color: var(--color-text-muted)">{{ $underTitle }}</p>
+ <p class="text-xs mt-0.5" style="color: var(--color-text-muted)">{{ $underTitle }}</p>
  @endif
  </div>
  </div>
 
- <section class="h-full flex flex-col px-3" style="color: var(--color-text)">
+ <section class="h-full flex flex-col px-4" style="color: var(--color-text)">
  {{ $slot }}
  </section>
 </div>
diff --git a/resources/themes/atom/views/components/form/danger-button.blade.php b/resources/themes/atom/views/components/form/danger-button.blade.php
index ce670a9..c3f93c7 100755
--- a/resources/themes/atom/views/components/form/danger-button.blade.php
+++ b/resources/themes/atom/views/components/form/danger-button.blade.php
@@ -1,7 +1,9 @@
 @props(['classes' => '', 'type' => 'submit'])
 
 <button type="{{ $type }}"
- class="w-full rounded bg-[var(--button-danger-color)]! hover:bg-[var(--button-danger-hover-color)]! text-[var(--button-danger-text-color)]! border-2 border-[var(--button-danger-border-color)]! transition! ease-in-out! duration-150! font-semibold px-6! py-2! {{ $classes }}"
- style="border-radius: var(--border-radius)">
+ class="w-full bg-[var(--button-danger-color)]! hover:bg-[var(--button-danger-hover-color)]! text-[var(--button-danger-text-color)]! border-2 border-[var(--button-danger-border-color)]! transition-all! ease-in-out! duration-200! font-semibold px-6! py-2.5! {{ $classes }}"
+ style="border-radius: var(--border-radius); box-shadow: var(--shadow-btn);"
+ onmouseover="this.style.boxShadow='var(--shadow-btn-hover)'; this.style.transform='translateY(-1px)'"
+ onmouseout="this.style.boxShadow='var(--shadow-btn)'; this.style.transform='translateY(0)'">
  {{ $slot }}
 </button>
diff --git a/resources/themes/atom/views/components/form/input.blade.php b/resources/themes/atom/views/components/form/input.blade.php
index 7037ced..2c5a576 100755
--- a/resources/themes/atom/views/components/form/input.blade.php
+++ b/resources/themes/atom/views/components/form/input.blade.php
@@ -1,17 +1,17 @@
 @props(['errorBag' => '', 'classes' => '', 'name', 'type' => 'text', 'value' => '', 'placeholder' => '', 'required' => true, 'autofocus' => false, 'readonly' => false])
 
 <input
- class="{{ $classes }} focus:ring-0 border-2 rounded w-full -sm @error($name, $errorBag) border-red-600 ring-red-500 @enderror"
- style="background-color: var(--color-background); color: var(--color-text); border-color: var(--input-border-color, var(--color-text-muted)); --tw-ring-color: var(--color-primary); --tw-border-opacity: 1; border-color: var(--color-primary);"
+ class="{{ $classes }} focus:ring-0 border-2 rounded-lg w-full px-4 py-2.5 transition-all duration-200 @error($name, $errorBag) border-red-500 ring-red-500 @enderror"
+ style="background-color: var(--color-background); color: var(--color-text); border-color: var(--input-border-color, var(--color-text-muted)); --tw-ring-color: var(--color-primary);"
  id="{{ $name }}" type="{{ $type }}" name="{{ $name }}" value="{{ $value }}"
- autocomplete="{{ $name }}" placeholder="{{ $placeholder }}" @if ($readonly) required @endif
+ autocomplete="{{ $name }}" placeholder="{{ $placeholder }}" @if ($required) required @endif
  @if ($autofocus) autofocus="{{ $name }}" @endif
  @if ($readonly) readonly @endif
- onfocus="this.style.borderColor='var(--color-primary)'"
- onblur="this.style.borderColor='var(--input-border-color, var(--color-text-muted))'">
+ onfocus="this.style.borderColor='var(--color-primary)'; this.style.boxShadow='0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent)'"
+ onblur="this.style.borderColor='var(--input-border-color, var(--color-text-muted))'; this.style.boxShadow='none'">
 
 @error($name, $errorBag)
- <p class="mt-1 text-xs italic" style="color: var(--button-danger-color, #ef4444);">
+ <p class="mt-1.5 text-xs font-medium" style="color: var(--button-danger-color, #ef4444);">
  {{ $message }}
  </p>
 @enderror
diff --git a/resources/themes/atom/views/components/form/outline-button.blade.php b/resources/themes/atom/views/components/form/outline-button.blade.php
index 1157cb7..f77d069 100755
--- a/resources/themes/atom/views/components/form/outline-button.blade.php
+++ b/resources/themes/atom/views/components/form/outline-button.blade.php
@@ -1,7 +1,9 @@
 @props(['classes' => '', 'type' => 'submit'])
 
 <button type="{{ $type }}"
- class="w-full rounded bg-transparent! hover:bg-[var(--button-outline-hover-color)]! text-[var(--button-outline-text-color)]! border-2 border-[var(--button-outline-color)]! transition! ease-in-out! duration-150! font-semibold px-6! py-2! {{ $classes }}"
- style="border-radius: var(--border-radius)">
+ class="w-full bg-transparent! hover:bg-[var(--button-outline-hover-color)]! text-[var(--button-outline-text-color)]! border-2 border-[var(--button-outline-color)]! transition-all! ease-in-out! duration-200! font-semibold px-6! py-2.5! {{ $classes }}"
+ style="border-radius: var(--border-radius); box-shadow: var(--shadow-btn);"
+ onmouseover="this.style.boxShadow='var(--shadow-btn-hover)'; this.style.transform='translateY(-1px)'"
+ onmouseout="this.style.boxShadow='var(--shadow-btn)'; this.style.transform='translateY(0)'">
  {{ $slot }}
 </button>
diff --git a/resources/themes/atom/views/components/form/primary-button.blade.php b/resources/themes/atom/views/components/form/primary-button.blade.php
index bc6614b..35c9250 100755
--- a/resources/themes/atom/views/components/form/primary-button.blade.php
+++ b/resources/themes/atom/views/components/form/primary-button.blade.php
@@ -1,7 +1,9 @@
 @props(['classes' => '', 'type' => 'submit'])
 
 <button type="{{ $type }}"
- class="w-full rounded bg-[var(--button-color)]! text-[var(--button-text-color)]! border-2 border-[var(--button-color)]! transition! ease-in-out! duration-200! hover:opacity-90! font-semibold px-6! py-2! {{ $classes }}"
- style="border-radius: var(--border-radius)">
+ class="w-full bg-[var(--button-color)]! text-[var(--button-text-color)]! border-2 border-[var(--button-color)]! transition-all! ease-in-out! duration-200! font-semibold px-6! py-2.5! {{ $classes }}"
+ style="border-radius: var(--border-radius); box-shadow: var(--shadow-btn);"
+ onmouseover="this.style.boxShadow='var(--shadow-btn-hover)'; this.style.transform='translateY(-1px)'"
+ onmouseout="this.style.boxShadow='var(--shadow-btn)'; this.style.transform='translateY(0)'">
  {{ $slot }}
 </button>
diff --git a/resources/themes/atom/views/components/form/secondary-button.blade.php b/resources/themes/atom/views/components/form/secondary-button.blade.php
index e524802..1fab535 100755
--- a/resources/themes/atom/views/components/form/secondary-button.blade.php
+++ b/resources/themes/atom/views/components/form/secondary-button.blade.php
@@ -1,7 +1,9 @@
 @props(['classes' => '', 'type' => 'submit'])
 
 <button type="{{ $type }}"
- class="w-full rounded bg-[var(--button-secondary-color)]! hover:bg-[var(--button-secondary-hover-color)]! text-[var(--button-secondary-text-color)]! border-2 border-[var(--button-secondary-border-color)]! transition! ease-in-out! duration-150! font-semibold px-6! py-2! {{ $classes }}"
- style="border-radius: var(--border-radius)">
+ class="w-full bg-[var(--button-secondary-color)]! hover:bg-[var(--button-secondary-hover-color)]! text-[var(--button-secondary-text-color)]! border-2 border-[var(--button-secondary-border-color)]! transition-all! ease-in-out! duration-200! font-semibold px-6! py-2.5! {{ $classes }}"
+ style="border-radius: var(--border-radius); box-shadow: var(--shadow-btn);"
+ onmouseover="this.style.boxShadow='var(--shadow-btn-hover)'; this.style.transform='translateY(-1px)'"
+ onmouseout="this.style.boxShadow='var(--shadow-btn)'; this.style.transform='translateY(0)'">
  {{ $slot }}
 </button>
diff --git a/resources/themes/atom/views/components/user/me-backdrop.blade.php b/resources/themes/atom/views/components/user/me-backdrop.blade.php
index cbe6ea5..f7f3625 100755
--- a/resources/themes/atom/views/components/user/me-backdrop.blade.php
+++ b/resources/themes/atom/views/components/user/me-backdrop.blade.php
@@ -5,10 +5,11 @@
  <div>
  <a href="{{ route('profile.show', $user) }}"
  class="absolute -bottom-12 left-0 transition duration-300 ease-in-out hover:scale-105 group">
+ <div class="rounded-full overflow-hidden border-4 border-gray-800 group-hover:border-[var(--border-color)] transition-colors">
  <img style="image-rendering: pixelated;"
  src="{{ setting('avatar_imager') }}{{ $user->look }}&direction=2&head_direction=3&gesture=sml&action=wav&size=l"
- alt="{{ $user->username }}"
- class="border-4 border-gray-800 group-hover:border-[var(--border-color)] transition-colors rounded-xl">
+ alt="{{ $user->username }}">
+ </div>
  </a>
  </div>
 
diff --git a/resources/themes/dusk/css/app.css b/resources/themes/dusk/css/app.css
index 29109b4..3c3e2b3 100755
--- a/resources/themes/dusk/css/app.css
+++ b/resources/themes/dusk/css/app.css
@@ -14,14 +14,14 @@
 
 @layer components {
     .dropdown-item {
-        @apply w-full text-left px-2 py-1 transition duration-200 ease-in-out text-sm;
+        @apply w-full text-left px-2 py-1 transition-all duration-200 ease-in-out text-sm;
         color: var(--color-text);
+        border-radius: var(--radius-sm);
     }
     .dropdown-item:hover {
         background-color: var(--color-primary, #8770b2);
         color: var(--button-text-color, #ffffff);
     }
-
 }
 
 :focus {
@@ -31,34 +31,32 @@
 body {
     overflow-x: hidden;
     color: var(--color-text, #ffffff);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
-/* Base text utility classes using CSS variables */
 .text-body { color: var(--color-text); }
 .text-muted { color: var(--color-text-muted); }
 .text-nav { color: var(--color-navbar-text); }
 .text-primary { color: var(--color-primary); }
 .text-on-primary { color: var(--button-text-color); }
 
-/* Settings navigation */
 .settings-nav:hover,
 .settings-nav.active {
     background-color: var(--color-primary) !important;
     color: var(--button-text-color) !important;
 }
 
-/* Dropdown panel */
 .dropdown-children {
     background-color: var(--color-dropdown, #ac93da);
     box-shadow: var(--dropdown-shadow, 0 4px 16px rgba(0,0,0,0.25));
+    border-radius: var(--radius-md);
 }
 
-/* Footer hover */
 .site-footer:hover {
     color: var(--color-text) !important;
 }
 
-/* Navigation link hover states using CSS variables */
 .nav-link {
     color: var(--color-navbar-text);
     transition: color 200ms ease-in-out;
@@ -67,7 +65,6 @@ body {
     color: var(--color-primary);
 }
 
-/* Text shadow for readability on images/dark backgrounds */
 .text-shadow { text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
 .text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
 .text-shadow-lg { text-shadow: 0 2px 8px rgba(0,0,0,0.9); }
@@ -108,7 +105,7 @@ textarea::placeholder {
         left: 0;
         right: 0;
         bottom: 0;
-        background: rgba(46, 45, 45, 0.7); /* Black overlay with 60% opacity */
+        background: rgba(46, 45, 45, 0.7);
     }
 }
 
@@ -124,17 +121,10 @@ textarea::placeholder {
         width: 40px;
         filter: grayscale(1);
         transition: filter 300ms ease-in-out;
-
-    }
-
-    a:hover .icon {
-        filter: grayscale(0);
-    }
-
-    .dropdown-parent:hover .icon {
-        filter: grayscale(0);
     }
 
+    a:hover .icon,
+    .dropdown-parent:hover .icon,
     .dropdown-parent:active .icon {
         filter: grayscale(0);
     }
@@ -142,13 +132,8 @@ textarea::placeholder {
     a.active, div.active {
         color: #ac93da;
 
-        .dropdown-children {
-            color: #FFFFFF;
-        }
-
-        .icon {
-            filter: grayscale(0);
-        }
+        .dropdown-children { color: #FFFFFF; }
+        .icon { filter: grayscale(0); }
     }
 }
 
@@ -194,51 +179,24 @@ textarea::placeholder {
     text-shadow: 0 1px 3px rgba(0,0,0,0.8);
 }
 
-.swiper-button-prev {
-    z-index: 15 !important;
+.swiper-button-prev { z-index: 15 !important; }
+.swiper-button-next { z-index: 15 !important; }
+
+.icon-base {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
 }
 
-.swiper-button-next {
-    z-index: 15 !important;
-}
-
-
-.hotel-icon {
-    background: url("/public/assets/images/icons/feeds.png") no-repeat center;
-}
-
-.chat-icon {
-    background: url("/public/assets/images/icons/chat.png") no-repeat center;
-}
-
-.article-icon {
-    background: url("/public/assets/images/icons/article.gif") no-repeat center;
-}
-
-.lighthouse-icon {
-    background: url("/public/assets/images/icons/lighthouse.png") no-repeat center;
-}
-
-.currency-icon {
-    background: url("/public/assets/images/dusk/store_icon.png") no-repeat center;
-}
-
-.catalog-icon {
-    background: url("/public/assets/images/icons/catalog.png") no-repeat center;
-}
-
-.inventory-icon {
-    background: url("/public/assets/images/icons/inventory.png") no-repeat center;
-}
-
-.duo-chat-icon {
-    background: url("/public/assets/images/icons/due-chat.png") no-repeat center;
-}
-
-
-.friends-icon {
-    background: #b17f85 url("/public/assets/images/icons/friends.png") no-repeat center;
-}
+.hotel-icon { background: url("/public/assets/images/icons/feeds.png") no-repeat center; }
+.chat-icon { background: url("/public/assets/images/icons/chat.png") no-repeat center; }
+.article-icon { background: url("/public/assets/images/icons/article.gif") no-repeat center; }
+.lighthouse-icon { background: url("/public/assets/images/icons/lighthouse.png") no-repeat center; }
+.currency-icon { background: url("/public/assets/images/dusk/store_icon.png") no-repeat center; }
+.catalog-icon { background: url("/public/assets/images/icons/catalog.png") no-repeat center; }
+.inventory-icon { background: url("/public/assets/images/icons/inventory.png") no-repeat center; }
+.duo-chat-icon { background: url("/public/assets/images/icons/due-chat.png") no-repeat center; }
+.friends-icon { background: #b17f85 url("/public/assets/images/icons/friends.png") no-repeat center; }
 
 .nav-credit-icon {
     background: #e9b124 url("/public/assets/images/icons/currency/credits.png") no-repeat center;
@@ -275,55 +233,24 @@ textarea::placeholder {
     height: 25px;
     width: 25px;
 
-    &.first {
-        background-image: url("/public/assets/images/leaderboards/trophy-gold.png");
-    }
-
-    &.second {
-        background-image: url("/public/assets/images/leaderboards/trophy-silver.png");
-    }
-
-    &.third {
-        background-image: url("/public/assets/images/leaderboards/trophy-bronze.png");
-    }
+    &.first { background-image: url("/public/assets/images/leaderboards/trophy-gold.png"); }
+    &.second { background-image: url("/public/assets/images/leaderboards/trophy-silver.png"); }
+    &.third { background-image: url("/public/assets/images/leaderboards/trophy-bronze.png"); }
 }
 
 .leaderboard-background {
     background-image: url("/public/assets/images/dusk/leaderboard_circle_image.png");
 }
 
-.staff-bg {
-    background-blend-mode: multiply;
-}
+.staff-bg { background-blend-mode: multiply; }
+#disconnected { display: none; }
 
-/* Nitro disconnect overlay */
-#disconnected {
-    display: none;
-}
+.atom-align-left { float: left; margin: 0 10px 10px 0; }
+.atom-align-right { float: right; margin: 0 0 10px 10px; }
+.atom-align-center { display: block; margin: 0 auto; text-align: center; }
+.atom-align-center > * { text-align: center; }
 
-.atom-align-left {
-    float: left;
-    margin: 0 10px 10px 0;
-}
-
-.atom-align-right {
-    float: right;
-    margin: 0 0 10px 10px;
-}
-
-.atom-align-center {
-    display: block;
-    margin: 0 auto;
-    text-align: center;
-}
-
-.atom-align-center > * {
-    text-align: center;
-}
-
-#article-content a {
-    color: #53b2f8;
-}
+#article-content a { color: #53b2f8; }
 
 .badge-drawer-button {
     background-image: linear-gradient(to bottom, #f2f2f3 51%, #d9d8d8 49%);
@@ -335,12 +262,9 @@ textarea::placeholder {
         box-shadow: inset 0 0 0px 2px #ffffff;
     }
 
-    .toggled {
-        background: #f2f2f3;
-    }
+    .toggled { background: #f2f2f3; }
 }
 
-
 html.dark .badge-drawer-button {
     background-image: linear-gradient(to bottom, #141414 51%, #101010 49%);
     box-shadow: inset 0 0 0px 2px #242424;
@@ -351,9 +275,7 @@ html.dark .badge-drawer-button {
         box-shadow: inset 0 0 0px 2px #363636;
     }
 
-    .toggled {
-        background: #f2f2f3;
-    }
+    .toggled { background: #f2f2f3; }
 }
 
 .badge-drawer-palette {
@@ -386,3 +308,26 @@ html.dark .badge-drawer-button {
         opacity: .1;
     }
 }
+
+.transition-base { transition: all 0.2s ease-in-out; }
+.transition-smooth { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+
+.hover-lift {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.hover-lift:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.card-base {
+    background-color: var(--color-surface);
+    border-radius: var(--radius-md);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
+}
+
+.card-base:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+    border-color: color-mix(in srgb, var(--color-text-muted) 25%, transparent);
+}
diff --git a/resources/themes/dusk/views/components/content/content-card.blade.php b/resources/themes/dusk/views/components/content/content-card.blade.php
index 60c93ed..da4dfcb 100755
--- a/resources/themes/dusk/views/components/content/content-card.blade.php
+++ b/resources/themes/dusk/views/components/content/content-card.blade.php
@@ -1,17 +1,19 @@
 
 @props(['icon' => '', 'classes' => ''])
 
-<div class="w-full flex flex-col gap-y-4 rounded-lg overflow-hidden bg-[#2b303c] pb-4 shadow-sm {{ $classes }}" style="color: var(--color-text);">
-    <div class="flex gap-x-2 bg-[#21242e] p-3">
+<div class="w-full flex flex-col gap-y-4 rounded-xl overflow-hidden pb-4 shadow-sm border {{ $classes }}"
+     style="background-color: var(--color-surface); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
+    <div class="flex gap-x-2.5 p-3.5 rounded-t-xl"
+         style="background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);">
         @if (!empty($icon))
-            <div class="max-w-12.5 max-h-12.5 min-w-12.5 min-h-12.5 rounded-full relative flex items-center justify-center {{ $icon }}"></div>
+            <div class="w-[50px] h-[50px] min-w-[50px] rounded-full flex items-center justify-center {{ $icon }} shadow-sm"></div>
         @endif
 
         <div class="flex flex-col justify-center text-sm">
             <p class="font-semibold">{{ $title }}</p>
 
             @if(isset($underTitle))
-                <p class="text-muted">{{ $underTitle }}</p>
+                <p class="text-xs mt-0.5 text-muted">{{ $underTitle }}</p>
             @endif
         </div>
     </div>
diff --git a/resources/themes/dusk/views/components/form/danger-button.blade.php b/resources/themes/dusk/views/components/form/danger-button.blade.php
index 57ea045..978f3a3 100755
--- a/resources/themes/dusk/views/components/form/danger-button.blade.php
+++ b/resources/themes/dusk/views/components/form/danger-button.blade.php
@@ -1,6 +1,9 @@
 @props(['classes' => '', 'type' => 'submit'])
 
 <button type="{{ $type }}"
-    class="w-full rounded bg-[var(--button-danger-color)] hover:bg-[var(--button-danger-hover-color)] text-[var(--button-danger-text-color)] border-2 border-[var(--button-danger-border-color)] transition ease-in-out duration-150 font-semibold px-6 py-2 {{ $classes }}">
+    class="w-full rounded-lg bg-[var(--button-danger-color)] hover:bg-[var(--button-danger-hover-color)] text-[var(--button-danger-text-color)] border-2 border-[var(--button-danger-border-color)] transition-all ease-in-out duration-200 font-semibold px-6 py-2.5 {{ $classes }}"
+    style="border-radius: var(--border-radius); box-shadow: 0 1px 2px rgba(0,0,0,0.1);"
+    onmouseover="this.style.boxShadow='0 2px 8px rgba(0,0,0,0.15)'; this.style.transform='translateY(-1px)'"
+    onmouseout="this.style.boxShadow='0 1px 2px rgba(0,0,0,0.1)'; this.style.transform='translateY(0)'">
     {{ $slot }}
 </button>
diff --git a/resources/themes/dusk/views/components/form/input.blade.php b/resources/themes/dusk/views/components/form/input.blade.php
index 1b3f3f7..5543203 100755
--- a/resources/themes/dusk/views/components/form/input.blade.php
+++ b/resources/themes/dusk/views/components/form/input.blade.php
@@ -1,14 +1,17 @@
 @props(['errorBag' => '', 'classes' => '', 'name', 'type' => 'text', 'value' => '', 'placeholder' => '', 'required' => true, 'autofocus' => false, 'readonly' => false])
 
 <input
-    class="{{ $classes }} focus:ring-0 border-2 rounded w-full @error($name, $errorBag) !border-red-600 ring-red-500 @enderror" style="border-color: var(--input-border-color, #4b5563); background-color: var(--input-background, #21242e); color: var(--input-text-color, #e2e8f0);"
+    class="{{ $classes }} focus:ring-0 border-2 rounded-lg w-full px-4 py-2.5 transition-all duration-200 @error($name, $errorBag) !border-red-500 @enderror"
+    style="border-color: var(--input-border-color, #4b5563); background-color: var(--input-background, #21242e); color: var(--input-text-color, #e2e8f0);"
     id="{{ $name }}" type="{{ $type }}" name="{{ $name }}" value="{{ $value }}"
-    autocomplete="{{ $name }}" placeholder="{{ $placeholder }}" @if ($readonly) required @endif
+    autocomplete="{{ $name }}" placeholder="{{ $placeholder }}" @if ($required) required @endif
     @if ($autofocus) autofocus="{{ $name }}" @endif
-    @if ($readonly) readonly @endif>
+    @if ($readonly) readonly @endif
+    onfocus="this.style.borderColor='var(--color-primary)'; this.style.boxShadow='0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent)'"
+    onblur="this.style.borderColor='var(--input-border-color, #4b5563)'; this.style.boxShadow='none'">
 
 @error($name, $errorBag)
-    <p class="mt-1 text-xs italic" style="color: var(--button-danger-color, #ef4444);">
+    <p class="mt-1.5 text-xs font-medium" style="color: var(--button-danger-color, #ef4444);">
         {{ $message }}
     </p>
 @enderror
diff --git a/resources/themes/dusk/views/components/form/outline-button.blade.php b/resources/themes/dusk/views/components/form/outline-button.blade.php
index 549b0a8..b4ed5e1 100755
--- a/resources/themes/dusk/views/components/form/outline-button.blade.php
+++ b/resources/themes/dusk/views/components/form/outline-button.blade.php
@@ -1,6 +1,9 @@
 @props(['classes' => '', 'type' => 'submit'])
 
 <button type="{{ $type }}"
-    class="w-full rounded bg-transparent hover:bg-[var(--button-outline-hover-color)] text-[var(--button-outline-text-color)] border-2 border-[var(--button-outline-color)] transition ease-in-out duration-150 font-semibold px-6 py-2 {{ $classes }}">
+    class="w-full rounded-lg bg-transparent hover:bg-[var(--button-outline-hover-color)] text-[var(--button-outline-text-color)] border-2 border-[var(--button-outline-color)] transition-all ease-in-out duration-200 font-semibold px-6 py-2.5 {{ $classes }}"
+    style="border-radius: var(--border-radius); box-shadow: 0 1px 2px rgba(0,0,0,0.1);"
+    onmouseover="this.style.boxShadow='0 2px 8px rgba(0,0,0,0.15)'; this.style.transform='translateY(-1px)'"
+    onmouseout="this.style.boxShadow='0 1px 2px rgba(0,0,0,0.1)'; this.style.transform='translateY(0)'">
     {{ $slot }}
 </button>
diff --git a/resources/themes/dusk/views/components/form/primary-button.blade.php b/resources/themes/dusk/views/components/form/primary-button.blade.php
index 0feb681..4fedb52 100755
--- a/resources/themes/dusk/views/components/form/primary-button.blade.php
+++ b/resources/themes/dusk/views/components/form/primary-button.blade.php
@@ -1,6 +1,9 @@
 @props(['classes' => '', 'type' => 'submit'])
 
 <button type="{{ $type }}"
-    class="{{ $classes }} w-full rounded p-2 border-2 transition ease-in-out duration-200 font-semibold" style="background-color: var(--button-color); color: var(--button-text-color); border-color: var(--button-color);">
+    class="{{ $classes }} w-full rounded-lg px-6 py-2.5 border-2 transition-all ease-in-out duration-200 font-semibold"
+    style="background-color: var(--button-color); color: var(--button-text-color); border-color: var(--button-color); border-radius: var(--border-radius); box-shadow: 0 1px 2px rgba(0,0,0,0.1);"
+    onmouseover="this.style.boxShadow='0 2px 8px rgba(0,0,0,0.15)'; this.style.transform='translateY(-1px)'"
+    onmouseout="this.style.boxShadow='0 1px 2px rgba(0,0,0,0.1)'; this.style.transform='translateY(0)'">
     {{ $slot }}
 </button>
diff --git a/resources/themes/dusk/views/components/form/secondary-button.blade.php b/resources/themes/dusk/views/components/form/secondary-button.blade.php
index 3bd93ec..e53b39c 100755
--- a/resources/themes/dusk/views/components/form/secondary-button.blade.php
+++ b/resources/themes/dusk/views/components/form/secondary-button.blade.php
@@ -1,6 +1,9 @@
 @props(['classes' => '', 'type' => 'submit'])
 
 <button type="{{ $type }}"
-    class="w-full rounded bg-[var(--button-secondary-color)] hover:bg-[var(--button-secondary-hover-color)] text-[var(--button-secondary-text-color)] border-2 border-[var(--button-secondary-border-color)] transition ease-in-out duration-150 font-semibold px-6 py-2 {{ $classes }}">
+    class="w-full rounded-lg bg-[var(--button-secondary-color)] hover:bg-[var(--button-secondary-hover-color)] text-[var(--button-secondary-text-color)] border-2 border-[var(--button-secondary-border-color)] transition-all ease-in-out duration-200 font-semibold px-6 py-2.5 {{ $classes }}"
+    style="border-radius: var(--border-radius); box-shadow: 0 1px 2px rgba(0,0,0,0.1);"
+    onmouseover="this.style.boxShadow='0 2px 8px rgba(0,0,0,0.15)'; this.style.transform='translateY(-1px)'"
+    onmouseout="this.style.boxShadow='0 1px 2px rgba(0,0,0,0.1)'; this.style.transform='translateY(0)'">
     {{ $slot }}
 </button>
diff --git a/resources/themes/dusk/views/user/me.blade.php b/resources/themes/dusk/views/user/me.blade.php
index 1245ae9..bfd4ce2 100755
--- a/resources/themes/dusk/views/user/me.blade.php
+++ b/resources/themes/dusk/views/user/me.blade.php
@@ -6,9 +6,11 @@
         <div class="block lg:hidden w-40">
             <a href="{{ route('profile.show', $user) }}"
                class="absolute bottom-2 -left-4 lg:left-8 drop-shadow transition duration-300 ease-in-out hover:scale-105">
-                <img style="image-rendering: pixelated;"
-                     src="{{ setting('avatar_imager') }}{{ $user->look }}&direction=2&head_direction=3&gesture=sml&action=wav&size=l"
-                     alt="">
+                <div class="rounded-full overflow-hidden border-2 border-gray-300 w-[100px] h-[100px]">
+                    <img style="image-rendering: pixelated;"
+                         src="{{ setting('avatar_imager') }}{{ $user->look }}&direction=2&head_direction=3&gesture=sml&action=wav&size=l"
+                         alt="">
+                </div>
             </a>
         </div>
 
diff --git a/tailwind.css b/tailwind.css
index 0fd0f31..e872aef 100755
--- a/tailwind.css
+++ b/tailwind.css
@@ -1,7 +1,6 @@
 @import "tailwindcss";
 
 @theme {
-  /* Colors */
   --color-primary: #eeb425;
   --color-primary-hover: #cf9d15;
   --color-background: #f3f4f6;
@@ -16,33 +15,32 @@
   --color-danger: #ef4444;
   --color-danger-hover: #dc2626;
   --color-secondary: #1a1a2e;
-
-  /* Border */
   --color-border: #eeb425;
   --color-input-border: #4b5563;
 
-  /* Font Family */
   --font-family-sans: "Poppins", sans-serif;
 
-  /* Border Radius */
-  --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 20px;
   --radius-full: 9999px;
 
-  /* Shadows */
-  --shadow-dropdown: 0 2px 8px rgba(0, 0, 0, 0.15);
-  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.12);
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+  --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-btn-hover: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-/* Font import */
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
 
-/* Base styles */
 body {
   font-family: var(--font-family-sans);
   background-color: var(--color-background);
   color: var(--color-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 /* Button effects */