From 0660d1300649f831610a29b7f84ab6e5739a5889 Mon Sep 17 00:00:00 2001
From: salmad3 <danny.f.salman@gmail.com>
Date: Thu, 13 Nov 2025 03:10:43 -0500
Subject: [PATCH 01/12] add atomone theme and color theme system

---
 .../components/ui/switch/ColorModeSwitch.vue  |  70 +++++++-----
 .../src/components/users/UserAvatar.vue       |   8 +-
 .../src/composables/useColorTheme.ts          | 104 ++++++++++++++++++
 packages/frontend-main/src/main.ts            |  10 ++
 packages/frontend-main/src/style.css          |  62 ++++++++++-
 .../frontend-main/src/views/EnvConfigView.vue |   9 +-
 6 files changed, 230 insertions(+), 33 deletions(-)
 create mode 100644 packages/frontend-main/src/composables/useColorTheme.ts

diff --git a/packages/frontend-main/src/components/ui/switch/ColorModeSwitch.vue b/packages/frontend-main/src/components/ui/switch/ColorModeSwitch.vue
index 37c9d613..6a39874e 100644
--- a/packages/frontend-main/src/components/ui/switch/ColorModeSwitch.vue
+++ b/packages/frontend-main/src/components/ui/switch/ColorModeSwitch.vue
@@ -1,38 +1,56 @@
 <script setup lang="ts">
-import { useDark, useMediaQuery, useToggle } from '@vueuse/core';
-import { Moon, Sun } from 'lucide-vue-next';
-import { SwitchRoot, SwitchThumb } from 'reka-ui';
+import type { ColorTheme } from '@/composables/useColorTheme';
 
+import { useMediaQuery } from '@vueuse/core';
+import { Atom, Moon, Sun } from 'lucide-vue-next';
+import { computed } from 'vue';
+
+import { useColorTheme } from '@/composables/useColorTheme';
 import { cn } from '@/utility';
 
 const isSmallScreen = useMediaQuery(`(max-width: 480px)`);
-const isDarkMode = useDark({ disableTransition: false });
-const toggleColorMode = useToggle(isDarkMode);
+const { theme, cycleTheme } = useColorTheme();
+
+const themeIcon = computed(() => {
+  switch (theme.value) {
+    case 'dark':
+      return Moon;
+    case 'atomone':
+      return Atom;
+    default:
+      return Sun;
+  }
+});
+
+const themePosition = computed(() => {
+  switch (theme.value) {
+    case 'dark':
+      return 'translate-x-[1.5rem]';
+    case 'atomone':
+      return 'translate-x-[3rem]';
+    default:
+      return 'translate-x-0';
+  }
+});
 </script>
 
 <template>
-  <div class="flex">
-    <SwitchRoot
-      data-slot="switch"
-      :model-value="isDarkMode"
+  <button
+    type="button"
+    :class="cn(
+      'relative h-10 rounded-full bg-input transition-colors',
+      isSmallScreen ? 'w-10' : 'w-[5.75rem]',
+    )"
+    :aria-label="`Switch to ${theme === 'light' ? 'dark' : theme === 'dark' ? 'atomone' : 'light'} mode`"
+    @click="cycleTheme"
+  >
+    <div
       :class="cn(
-        'relative h-10 rounded-full bg-input',
-        isSmallScreen ? 'w-10' : 'w-16',
+        'absolute top-0.5 left-0.5 size-9 rounded-full bg-background !transition-transform duration-300 ease-in-out shadow-sm flex items-center justify-center',
+        themePosition,
       )"
-      @update:model-value="toggleColorMode"
     >
-      <SwitchThumb
-        data-slot="switch-thumb"
-        :class="cn(
-          'absolute top-1 left-1 size-8 rounded-full bg-background !transition-transform duration-300 ease-in-out',
-          !isSmallScreen && 'data-[state=checked]:translate-x-[1.5rem]',
-        )"
-      >
-        <div class="flex h-full w-full items-center justify-center">
-          <Moon v-if="isDarkMode" class="size-5" />
-          <Sun v-else class="size-5" />
-        </div>
-      </SwitchThumb>
-    </SwitchRoot>
-  </div>
+      <component :is="themeIcon" class="size-4 text-muted-foreground" />
+    </div>
+  </button>
 </template>
diff --git a/packages/frontend-main/src/components/users/UserAvatar.vue b/packages/frontend-main/src/components/users/UserAvatar.vue
index 352fc942..4af30c88 100644
--- a/packages/frontend-main/src/components/users/UserAvatar.vue
+++ b/packages/frontend-main/src/components/users/UserAvatar.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import type { UserAvatarUsernameProps } from './UserAvatarUsername.vue';
 
-import { useColorMode } from '@vueuse/core';
+import { computed } from 'vue';
 
+import { useColorTheme } from '@/composables/useColorTheme';
 import { cn } from '@/utility';
 
 import Avatar from '../ui/avatar/Avatar.vue';
@@ -11,12 +12,13 @@ import AvatarImage from '../ui/avatar/AvatarImage.vue';
 
 defineProps<UserAvatarUsernameProps>();
 
-const mode = useColorMode();
+const { theme } = useColorTheme();
+const isDarkTheme = computed(() => theme.value === 'dark' || theme.value === 'atomone');
 </script>
 
 <template>
   <Avatar :class="cn(size === 'lg' ? 'size-[64px]' : size === 'sm' ? 'size-[32px]' : 'size-[40px]', !disabled && 'active:opacity-60 hover:opacity-60 transition-opacity', 'z-10')">
-    <AvatarImage v-if="userAddress" :class="mode === 'dark' && 'filter-[invert(0.96))]'" :src="`https://api.dicebear.com/9.x/notionists-neutral/svg?seed=${userAddress}`" alt="user-avatar-image" />
+    <AvatarImage v-if="userAddress" :class="isDarkTheme && 'filter-[invert(0.96))]'" :src="`https://api.dicebear.com/9.x/notionists-neutral/svg?seed=${userAddress}`" alt="user-avatar-image" />
     <AvatarFallback v-else class="bg-[#D9D9D9] size-full" />
   </Avatar>
 </template>
diff --git a/packages/frontend-main/src/composables/useColorTheme.ts b/packages/frontend-main/src/composables/useColorTheme.ts
new file mode 100644
index 00000000..bce721de
--- /dev/null
+++ b/packages/frontend-main/src/composables/useColorTheme.ts
@@ -0,0 +1,104 @@
+import { useStorage } from '@vueuse/core';
+import { watch } from 'vue';
+
+export type ColorTheme = 'light' | 'dark' | 'atomone';
+
+const THEME_STORAGE_KEY = 'dither-color-theme';
+
+let themeInstance: ReturnType<typeof createThemeInstance> | null = null;
+
+function createThemeInstance() {
+  const theme = useStorage<ColorTheme>(THEME_STORAGE_KEY, 'light');
+  const html = document.documentElement;
+
+  function applyTheme(newTheme: ColorTheme) {
+    html.classList.remove('light', 'dark', 'atomone');
+    html.classList.add(newTheme);
+    theme.value = newTheme;
+
+    if (typeof window !== 'undefined') {
+      const metaThemeColor = document.querySelector('meta[name="theme-color"]');
+      if (metaThemeColor) {
+        if (newTheme === 'dark' || newTheme === 'atomone') {
+          metaThemeColor.setAttribute('content', '#1a1a1a');
+        } else {
+          metaThemeColor.setAttribute('content', '#ffffff');
+        }
+      }
+    }
+  }
+
+  function cycleTheme() {
+    const themes: ColorTheme[] = ['light', 'dark', 'atomone'];
+    const currentIndex = themes.indexOf(theme.value);
+    const nextIndex = (currentIndex + 1) % themes.length;
+    applyTheme(themes[nextIndex]);
+  }
+
+  if (typeof window !== 'undefined') {
+    applyTheme(theme.value);
+
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          const currentClass = html.className;
+          const hasTheme = currentClass.includes('light') || currentClass.includes('dark') || currentClass.includes('atomone');
+
+          if (!hasTheme) {
+            requestAnimationFrame(() => {
+              applyTheme(theme.value);
+            });
+          } else {
+            const currentTheme = theme.value;
+            if (!currentClass.includes(currentTheme)) {
+              requestAnimationFrame(() => {
+                applyTheme(currentTheme);
+              });
+            }
+          }
+        }
+      });
+    });
+
+    observer.observe(html, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+
+    if (window.location) {
+      const originalPushState = history.pushState;
+      const originalReplaceState = history.replaceState;
+
+      history.pushState = function (...args) {
+        originalPushState.apply(history, args);
+        requestAnimationFrame(() => applyTheme(theme.value));
+      };
+
+      history.replaceState = function (...args) {
+        originalReplaceState.apply(history, args);
+        requestAnimationFrame(() => applyTheme(theme.value));
+      };
+
+      window.addEventListener('popstate', () => {
+        requestAnimationFrame(() => applyTheme(theme.value));
+      });
+    }
+  }
+
+  watch(theme, (newTheme) => {
+    applyTheme(newTheme);
+  }, { immediate: true });
+
+  return {
+    theme,
+    cycleTheme,
+    setTheme: applyTheme,
+  };
+}
+
+export function useColorTheme() {
+  if (!themeInstance) {
+    themeInstance = createThemeInstance();
+  }
+  return themeInstance;
+}
diff --git a/packages/frontend-main/src/main.ts b/packages/frontend-main/src/main.ts
index d9ae0e9a..724ce52d 100644
--- a/packages/frontend-main/src/main.ts
+++ b/packages/frontend-main/src/main.ts
@@ -4,6 +4,7 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 import { createApp } from 'vue';
 import { createI18n } from 'vue-i18n';
 
+import { useColorTheme } from '@/composables/useColorTheme';
 import { messages } from '@/localization';
 
 import App from './App.vue';
@@ -12,6 +13,15 @@ import router from './router.ts';
 
 import './style.css';
 
+const { theme } = useColorTheme();
+
+router.afterEach(() => {
+  const html = document.documentElement;
+  const currentTheme = theme.value;
+  html.classList.remove('light', 'dark', 'atomone');
+  html.classList.add(currentTheme);
+});
+
 const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate);
 const app = createApp(App);
diff --git a/packages/frontend-main/src/style.css b/packages/frontend-main/src/style.css
index 3c13da38..90c0031d 100644
--- a/packages/frontend-main/src/style.css
+++ b/packages/frontend-main/src/style.css
@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
@@ -93,6 +94,9 @@
   --text-base--line-height: normal;
   --text-sm--line-height: normal;
   --text-xs--line-height: normal;
+  
+  --atomone-accent: oklch(0.55 0.15 250);
+  --atomone-accent-muted: oklch(0.65 0.08 250);
 }
 
 .dark {
@@ -130,6 +134,50 @@
   --sidebar-ring: oklch(0.439 0 0);
 }
 
+.atomone {
+  --background: oklch(0.05 0 0);
+  --foreground: oklch(1 0 0);
+  --card: oklch(0.08 0 0);
+  --card-foreground: oklch(1 0 0);
+  --popover: oklch(0.08 0 0);
+  --popover-foreground: oklch(1 0 0);
+  --primary: oklch(1 0 0);
+  --primary-foreground: oklch(0.05 0 0);
+  --secondary: oklch(0.15 0 0);
+  --secondary-foreground: oklch(1 0 0);
+  --muted: oklch(0.15 0 0);
+  --muted-foreground: oklch(0.62 0 0);
+  --accent: oklch(0.75 0.15 200);
+  --accent-foreground: oklch(0.05 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.18 0 0);
+  --input: oklch(0.15 0 0);
+  --ring: oklch(0.75 0.15 200);
+  --chart-1: oklch(0.75 0.15 200);
+  --chart-2: oklch(0.7 0.18 300);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.08 0 0);
+  --sidebar-foreground: oklch(1 0 0);
+  --sidebar-primary: oklch(1 0 0);
+  --sidebar-primary-foreground: oklch(0.05 0 0);
+  --sidebar-accent: oklch(0.15 0 0);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-border: oklch(0.18 0 0);
+  --sidebar-ring: oklch(0.75 0.15 200);
+}
+
+.atomone,
+.atomone body {
+  background-image: 
+    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
+  background-size: 24px 24px;
+  background-attachment: fixed;
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
@@ -137,8 +185,20 @@
   body {
     @apply bg-background text-foreground;
     overflow-y: scroll;
-    font-family: 'Inter', sans-serif;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     line-height: normal;
+    font-feature-settings: 'kern' 1, 'liga' 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  
+  h1, h2, h3, h4, h5, h6,
+  [class*="font-display"],
+  .logo,
+  .brand-text {
+    font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    font-feature-settings: 'kern' 1, 'liga' 1;
+    letter-spacing: -0.01em;
   }
   button:not([disabled]),
   [role='button']:not([disabled]) {
diff --git a/packages/frontend-main/src/views/EnvConfigView.vue b/packages/frontend-main/src/views/EnvConfigView.vue
index b56fb31d..84fd1743 100644
--- a/packages/frontend-main/src/views/EnvConfigView.vue
+++ b/packages/frontend-main/src/views/EnvConfigView.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { debouncedWatch, useColorMode } from '@vueuse/core';
+import { debouncedWatch } from '@vueuse/core';
 import JsonEditorVue from 'json-editor-vue';
+import { computed } from 'vue';
 
 import NetworkSelector from '@/components/selects/NetworkSelector.vue';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { useColorTheme } from '@/composables/useColorTheme';
 import MainLayout from '@/layouts/MainLayout.vue';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { showInfoToast } from '@/utility/toast';
@@ -13,7 +15,8 @@ import HeaderBack from '@/views/ViewHeading.vue';
 import 'vanilla-jsoneditor/themes/jse-theme-dark.css';
 
 const configStore = useConfigStore();
-const mode = useColorMode();
+const { theme } = useColorTheme();
+const isDarkMode = computed(() => theme.value === 'dark' || theme.value === 'atomone');
 
 debouncedWatch(configStore.config, () => {
   showInfoToast('Settings Updated', 'Config automatically updated');
@@ -51,7 +54,7 @@ debouncedWatch(configStore.config, () => {
         <label class="font-semibold text-sm">Chain Config</label>
         <JsonEditorVue
           v-model="configStore.envConfig.chainConfig"
-          :class="[mode === 'dark' ? 'jse-theme-dark' : 'jse-theme-light']"
+          :class="[isDarkMode ? 'jse-theme-dark' : 'jse-theme-light']"
           :main-menu-bar="false"
           :navigation-bar="false"
           :status-bar="false"

From 1eeaf48b8f3221239a783f890e04ba0fd61cf251 Mon Sep 17 00:00:00 2001
From: salmad3 <danny.f.salman@gmail.com>
Date: Thu, 13 Nov 2025 03:10:50 -0500
Subject: [PATCH 02/12] refine typography sizes and weights across navigation

---
 .../src/components/ui/tabs/index.ts           |  8 +--
 .../src/layouts/panels/LeftPanel.vue          | 56 ++++++++++---------
 2 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/packages/frontend-main/src/components/ui/tabs/index.ts b/packages/frontend-main/src/components/ui/tabs/index.ts
index 1d5e4e4f..b1ba98fd 100644
--- a/packages/frontend-main/src/components/ui/tabs/index.ts
+++ b/packages/frontend-main/src/components/ui/tabs/index.ts
@@ -5,12 +5,12 @@ import { cva } from 'class-variance-authority';
 export { default as Tabs } from './RouterTabs.vue';
 
 export const tabVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 relative rounded-none border-b-2 bg-transparent font-semibold shadow-none transition-none',
+  'inline-flex items-center justify-center whitespace-nowrap ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 relative rounded-none border-b bg-transparent font-medium shadow-none transition-colors',
   {
     variants: {
       size: {
-        default: 'p-4 text-base border-b-2',
-        lg: 'p-6 text-lg border-b-4',
+        default: 'px-4 py-3 text-sm border-b-2',
+        lg: 'px-5 py-4 text-base border-b-2',
       },
       layout: {
         default: '',
@@ -18,7 +18,7 @@ export const tabVariants = cva(
       },
       state: {
         active: 'border-b-primary text-foreground',
-        inactive: 'border-b-transparent text-muted-foreground',
+        inactive: 'border-b-transparent text-muted-foreground/70',
       },
     },
     defaultVariants: {
diff --git a/packages/frontend-main/src/layouts/panels/LeftPanel.vue b/packages/frontend-main/src/layouts/panels/LeftPanel.vue
index f6092ea9..8488b382 100644
--- a/packages/frontend-main/src/layouts/panels/LeftPanel.vue
+++ b/packages/frontend-main/src/layouts/panels/LeftPanel.vue
@@ -1,52 +1,55 @@
 <script setup lang="ts">
 import type { RouteRecordNameGeneric } from 'vue-router';
 
-import { Bell, HelpCircle, House, Search, Settings, User } from 'lucide-vue-next';
+import { Bell, Feather, HelpCircle, House, Search, Settings, User } from 'lucide-vue-next';
 import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 
 import NotificationsCount from '@/components/notifications/NotificationsCount.vue';
-import { Button } from '@/components/ui/button';
 import WalletConnectButton from '@/components/wallet/WalletConnectButton/WalletConnectButton.vue';
 import { useDefaultAmount } from '@/composables/useDefaultAmount';
 import { usePopups } from '@/composables/usePopups';
 import { useWallet } from '@/composables/useWallet';
 import { routesNames } from '@/router';
 import { cn } from '@/utility';
+import { shorten } from '@/utility/text';
 
 const wallet = useWallet();
 const popups = usePopups();
 const { isDefaultAmountInvalid } = useDefaultAmount();
 const router = useRouter();
 const isMyProfileRoute = computed(() => router.currentRoute.value.name?.toString().startsWith(routesNames.profile) && wallet.loggedIn.value && wallet.address.value === router.currentRoute.value.params.address);
-const buttonClass = (routeName?: RouteRecordNameGeneric) => `flex items-center flex-row h-[52px] px-4 gap-3 rounded-sm hover:bg-accent active:bg-accent transition-colors ${!!routeName && router.currentRoute.value.name?.toString().startsWith(routeName.toString()) && 'bg-accent/60'}`;
-const buttonLabelClass = 'text-lg font-semibold';
+function buttonClass(routeName?: RouteRecordNameGeneric, isTwoLine?: boolean) {
+  const isActive = !!routeName && router.currentRoute.value.name?.toString().startsWith(routeName.toString());
+  return `flex items-center flex-row ${isTwoLine ? 'h-auto min-h-11 py-2' : 'h-11'} px-3 gap-2.5 rounded-md hover:bg-accent/50 active:bg-accent transition-colors ${isActive && 'bg-muted/60'}`;
+}
+const buttonLabelClass = 'text-base font-semibold';
 </script>
 
 <template>
-  <header class="flex flex-col justify-between h-full max-w-[270px] ml-auto pt-5 pb-6 pr-6">
-    <div class="flex flex-col gap-22">
+  <header class="flex flex-col justify-between h-full max-w-[270px] ml-auto pt-6 pb-6 pr-6">
+    <div class="flex flex-col gap-8">
       <nav class="contents">
         <RouterLink to="/" :class="buttonClass()">
-          <span class="text-2xl font-semibold">
+          <span class="text-xl font-semibold tracking-tight logo">
             dither
           </span>
         </RouterLink>
 
-        <div class="flex flex-col gap-3">
+        <div class="flex flex-col gap-1">
           <RouterLink to="/" :class="buttonClass(routesNames.home)">
-            <House class="size-6" />
+            <House class="size-5" />
             <span :class="buttonLabelClass">Home</span>
           </RouterLink>
 
           <RouterLink to="/explore" :class="buttonClass(routesNames.explore)">
-            <Search class="size-6" />
+            <Search class="size-5" />
             <span :class="buttonLabelClass">Explore</span>
           </RouterLink>
 
           <RouterLink v-if="wallet.loggedIn.value" to="/notifications" :class="cn(buttonClass(routesNames.notifications), 'relative')">
-            <NotificationsCount class="absolute top-1 left-6" />
-            <Bell class="size-6" />
+            <NotificationsCount class="absolute top-0.5 left-5" />
+            <Bell class="size-5" />
             <span :class="buttonLabelClass">Notifications</span>
           </RouterLink>
 
@@ -55,36 +58,39 @@ const buttonLabelClass = 'text-lg font-semibold';
             :to="`/profile/${wallet.address.value}`"
             :class="buttonClass(isMyProfileRoute ? routesNames.profile : undefined)"
           >
-            <User class="size-6" />
+            <User class="size-5" />
             <span :class="buttonLabelClass">My Profile</span>
           </RouterLink>
+        </div>
+
+        <button
+          v-if="wallet.loggedIn.value"
+          class="flex items-center flex-row h-11 px-3 gap-2.5 rounded-md border border-border/70 bg-background/60 backdrop-blur-sm shadow-[0_1px_3px_0_rgba(0,0,0,0.08)] hover:border-border hover:bg-background/85 hover:shadow-[0_2px_6px_0_rgba(0,0,0,0.12)] active:bg-background/95 active:shadow-[0_1px_2px_0_rgba(0,0,0,0.08)] transition-all duration-200"
+          @click="isDefaultAmountInvalid ? popups.show('invalidDefaultAmount', 'none') : popups.show('newPost', {})"
+        >
+          <Feather class="size-5" />
+          <span class="text-base font-bold">{{ $t('components.Button.newPost') }}</span>
+        </button>
 
+        <div class="flex flex-col gap-1 pt-2 border-t border-border/40">
           <RouterLink
             v-if="wallet.loggedIn.value"
             to="/settings"
             :class="buttonClass(routesNames.settings)"
           >
-            <Settings class="size-6" />
-            <span :class="buttonLabelClass">Settings</span>
+            <Settings class="size-4 opacity-50" />
+            <span :class="cn(buttonLabelClass, 'opacity-60')">Settings</span>
           </RouterLink>
 
           <RouterLink
             to="/about"
             :class="buttonClass(routesNames.about)"
           >
-            <HelpCircle class="size-6" />
-            <span :class="buttonLabelClass">About</span>
+            <HelpCircle class="size-4 opacity-50" />
+            <span :class="cn(buttonLabelClass, 'opacity-60')">About</span>
           </RouterLink>
         </div>
       </nav>
-
-      <Button
-        v-if="wallet.loggedIn.value" class="ml-4 w-[208px]"
-        @click="isDefaultAmountInvalid ? popups.show('invalidDefaultAmount', 'none') : popups.show('newPost', {})"
-      >
-        {{ $t('components.Button.newPost') }}
-      </Button>
     </div>
-    <WalletConnectButton />
   </header>
 </template>

From f45daf1f60e793d499f9d0776f789feec0aead78 Mon Sep 17 00:00:00 2001
From: salmad3 <danny.f.salman@gmail.com>
Date: Thu, 13 Nov 2025 03:10:55 -0500
Subject: [PATCH 03/12] move wallet connect to top right and make it navigate
 to profile

---
 .../WalletConnectButton.vue                   | 28 ++++++++++++------
 .../src/layouts/panels/RightPanel.vue         | 29 +++++++++++++++++--
 2 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectButton.vue b/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectButton.vue
index 99657e7d..6fcb49aa 100644
--- a/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectButton.vue
+++ b/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectButton.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
+import { MoreVertical } from 'lucide-vue-next';
 import { computed, ref } from 'vue';
+import { RouterLink } from 'vue-router';
 
 import { Button } from '@/components/ui/button';
 import {
@@ -22,20 +24,28 @@ const connectedState = computed(() => !isConnecting.value && loggedIn.value && !
 </script>
 
 <template>
-  <div>
+  <div class="w-full">
     <!-- Normal signed in account display -->
     <template v-if="connectedState">
-      <Popover>
-        <PopoverTrigger class="w-full">
-          <UserAvatarUsername :user-address="address" disabled class="h-[52px] px-4 gap-3 rounded-sm hover:bg-accent active:bg-accent transition-colors" />
-        </PopoverTrigger>
-
-        <WalletConnectPopoverContent />
-      </Popover>
+      <div class="flex w-full items-center gap-2.5 rounded-md px-3 py-2 hover:bg-accent/50 transition-colors">
+        <RouterLink
+          :to="`/profile/${address}`"
+          class="flex flex-1 items-center gap-2.5 active:opacity-70 transition-opacity"
+        >
+          <UserAvatarUsername :user-address="address" size="sm" disabled />
+        </RouterLink>
+
+        <Popover>
+          <PopoverTrigger class="p-1 rounded hover:bg-accent/70 active:bg-accent transition-colors shrink-0">
+            <MoreVertical class="size-4 text-muted-foreground" />
+          </PopoverTrigger>
+          <WalletConnectPopoverContent />
+        </Popover>
+      </div>
     </template>
 
     <template v-else>
-      <Button class="w-[207px]" @click="walletDialogStore.showDialog">
+      <Button class="w-full" @click="walletDialogStore.showDialog">
         {{ $t('components.WalletConnect.button') }}
       </Button>
     </template>
diff --git a/packages/frontend-main/src/layouts/panels/RightPanel.vue b/packages/frontend-main/src/layouts/panels/RightPanel.vue
index fbfcae32..c5c55407 100644
--- a/packages/frontend-main/src/layouts/panels/RightPanel.vue
+++ b/packages/frontend-main/src/layouts/panels/RightPanel.vue
@@ -1,18 +1,41 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 
 import FilterPhoton from '@/components/ui/filter/FilterPhoton.vue';
 import { SearchInput } from '@/components/ui/search';
 import ColorModeSwitch from '@/components/ui/switch/ColorModeSwitch.vue';
+import WalletConnectButton from '@/components/wallet/WalletConnectButton/WalletConnectButton.vue';
 import { routesNames } from '@/router';
 
 const router = useRouter();
+const isFeedPage = computed(() => {
+  const routeName = router.currentRoute.value.name?.toString();
+  return routeName === routesNames.home
+    || routeName === routesNames.homeFollowing
+    || routeName === routesNames.explore;
+});
 </script>
 
 <template>
   <aside class="flex flex-col h-full w-full max-w-[358px] gap-8 p-6">
-    <ColorModeSwitch />
-    <FilterPhoton v-if="router.currentRoute.value.name !== routesNames.explore" />
-    <SearchInput v-if="router.currentRoute.value.name !== routesNames.explore" />
+    <div class="flex items-center justify-end pt-2">
+      <WalletConnectButton />
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <SearchInput />
+    </div>
+
+    <div v-if="isFeedPage" class="flex flex-col gap-4 pt-2 border-t border-border/40">
+      <FilterPhoton />
+    </div>
+
+    <div class="flex flex-col gap-4 mt-auto pt-4 border-t border-border/40">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium text-muted-foreground/70 uppercase tracking-wider">Appearance</span>
+        <ColorModeSwitch />
+      </div>
+    </div>
   </aside>
 </template>

From 8c8414940063af3f8940b6e8135de05faaaedaa6 Mon Sep 17 00:00:00 2001
From: salmad3 <danny.f.salman@gmail.com>
Date: Thu, 13 Nov 2025 03:11:12 -0500
Subject: [PATCH 04/12] improve profile view with expandable address and copy
 button

---
 .../frontend-main/src/localization/index.ts   |  1 +
 .../src/views/Profile/ProfileViewWrapper.vue  | 83 +++++++++++++------
 .../frontend-main/src/views/ViewHeading.vue   |  2 +-
 3 files changed, 61 insertions(+), 25 deletions(-)

diff --git a/packages/frontend-main/src/localization/index.ts b/packages/frontend-main/src/localization/index.ts
index c2c9346c..72f2c4be 100644
--- a/packages/frontend-main/src/localization/index.ts
+++ b/packages/frontend-main/src/localization/index.ts
@@ -40,6 +40,7 @@ export const messages = {
         close: 'Close',
         showMore: 'Show more',
         copyLink: 'Copy link',
+        copyAddress: 'Copy address',
         follow: 'Follow',
         unfollow: 'Unfollow',
         newPost: 'New post',
diff --git a/packages/frontend-main/src/views/Profile/ProfileViewWrapper.vue b/packages/frontend-main/src/views/Profile/ProfileViewWrapper.vue
index 248aa7c0..7aa76837 100644
--- a/packages/frontend-main/src/views/Profile/ProfileViewWrapper.vue
+++ b/packages/frontend-main/src/views/Profile/ProfileViewWrapper.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import type { PopupState } from '@/composables/usePopups';
 
-import { Loader } from 'lucide-vue-next';
-import { computed } from 'vue';
+import { Copy, Loader } from 'lucide-vue-next';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { toast } from 'vue-sonner';
 
 import Button from '@/components/ui/button/Button.vue';
 import Tabs from '@/components/ui/tabs/RouterTabs.vue';
-import UserAvatarUsername from '@/components/users/UserAvatarUsername.vue';
+import UserAvatar from '@/components/users/UserAvatar.vue';
 import { useDefaultAmount } from '@/composables/useDefaultAmount';
 import { useFollowUser } from '@/composables/useFollowUser';
 import { useIsFollowing } from '@/composables/useIsFollowing';
@@ -20,10 +20,9 @@ import { useWallet } from '@/composables/useWallet';
 import MainLayout from '@/layouts/MainLayout.vue';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { useWalletDialogStore } from '@/stores/useWalletDialogStore';
+import { shorten } from '@/utility/text';
 import { showBroadcastingToast } from '@/utility/toast';
 
-import ViewHeading from '../ViewHeading.vue';
-
 const wallet = useWallet();
 const popups = usePopups();
 const { isDefaultAmountInvalid } = useDefaultAmount();
@@ -42,6 +41,21 @@ const isMyProfile = computed(() =>
 );
 const { data: isFollowing, isFetching: isFetchingIsFollowing } = useIsFollowing({ followingAddress: address, followerAddress: wallet.address });
 
+const isAddressExpanded = ref(false);
+
+function toggleAddress() {
+  isAddressExpanded.value = !isAddressExpanded.value;
+}
+
+async function copyAddress() {
+  try {
+    await navigator.clipboard.writeText(address.value);
+    toast.success('Address copied to clipboard');
+  } catch {
+    toast.error('Failed to copy address');
+  }
+}
+
 const tabs = computed(() => [
   {
     label: t(`components.Tabs.${isMyProfile.value ? 'myPosts' : 'posts'}`),
@@ -111,28 +125,49 @@ async function onClickUnfollow() {
 <template>
   <MainLayout>
     <div class="flex flex-col">
-      <ViewHeading :title="$t(`components.Headings.${isMyProfile ? 'myProfile' : 'profile'}`)" />
-
-      <div class="flex flex-row justify-between items-center p-4">
-        <UserAvatarUsername :user-address="address" size="lg" disabled />
-        <Loader v-if="isFetchingIsFollowing" class="animate-spin w-[80px]" />
-        <template v-else-if="!isMyProfile && wallet.loggedIn.value">
-          <div class="flex flex-row gap-2">
-            <Button size="sm" @click="onClickTip">
-              {{ $t('components.Button.tip') }}
-            </Button>
-
-            <Button v-if="isFollowing" size="sm" @click="onClickUnfollow">
-              {{ $t('components.Button.unfollow') }}
-            </Button>
-            <Button v-else size="sm" @click="onClickFollow">
-              {{ $t('components.Button.follow') }}
-            </Button>
+      <div class="flex flex-row items-center justify-between gap-4 p-6 border-b">
+        <div class="flex flex-row items-center gap-4 flex-1 min-w-0">
+          <UserAvatar :user-address="address" size="lg" disabled />
+
+          <div class="flex flex-row items-center gap-2 flex-1 min-w-0">
+            <button
+              class="text-xl font-medium font-mono tracking-wide text-left hover:opacity-70 active:opacity-50 transition-opacity flex-1 min-w-0"
+              @click="toggleAddress"
+            >
+              <span v-if="isAddressExpanded" class="break-all">{{ address }}</span>
+              <span v-else>{{ shorten(address, 10, 6) }}</span>
+            </button>
+
+            <button
+              class="p-1.5 rounded hover:bg-accent/50 active:bg-accent transition-colors shrink-0"
+              :aria-label="$t('components.Button.copyAddress')"
+              @click.stop="copyAddress"
+            >
+              <Copy class="size-4 text-muted-foreground" />
+            </button>
           </div>
-        </template>
+        </div>
+
+        <div class="flex items-center shrink-0">
+          <Loader v-if="isFetchingIsFollowing" class="animate-spin w-5 h-5" />
+          <template v-else-if="!isMyProfile && wallet.loggedIn.value">
+            <div class="flex flex-row gap-2">
+              <Button size="sm" @click="onClickTip">
+                {{ $t('components.Button.tip') }}
+              </Button>
+
+              <Button v-if="isFollowing" size="sm" @click="onClickUnfollow">
+                {{ $t('components.Button.unfollow') }}
+              </Button>
+              <Button v-else size="sm" @click="onClickFollow">
+                {{ $t('components.Button.follow') }}
+              </Button>
+            </div>
+          </template>
+        </div>
       </div>
 
-      <Tabs v-if="wallet.loggedIn.value" :tabs="tabs" layout="fill" class="border-t" />
+      <Tabs v-if="wallet.loggedIn.value" :tabs="tabs" layout="fill" />
     </div>
     <slot />
   </MainLayout>
diff --git a/packages/frontend-main/src/views/ViewHeading.vue b/packages/frontend-main/src/views/ViewHeading.vue
index f93325ff..62581f2d 100644
--- a/packages/frontend-main/src/views/ViewHeading.vue
+++ b/packages/frontend-main/src/views/ViewHeading.vue
@@ -12,7 +12,7 @@ const { back } = useRouter();
     <button class="flex flex-row items-center gap-1 p-2 mr-5 rounded-full hover:bg-accent active:bg-accent transition-colors" @click="back">
       <ArrowLeft class="size-6" />
     </button>
-    <h1 v-if="title" class="text-lg font-semibold ">
+    <h1 v-if="title" class="text-lg font-semibold">
       {{ title }}
     </h1>
   </div>

From cb90cad1038fe46d9630a08e45d6a36b5be9e5ce Mon Sep 17 00:00:00 2001
From: salmad3 <danny.f.salman@gmail.com>
Date: Thu, 13 Nov 2025 03:11:18 -0500
Subject: [PATCH 05/12] refine post components and filter ui

---
 .../src/components/posts/PostActions.vue        | 14 +++++++-------
 .../src/components/posts/PostMessage.vue        |  2 +-
 .../src/components/ui/filter/FilterPhoton.vue   |  6 +++---
 .../src/components/ui/search/SearchInput.vue    | 17 ++++++++++-------
 .../src/components/users/Username.vue           |  2 +-
 5 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/packages/frontend-main/src/components/posts/PostActions.vue b/packages/frontend-main/src/components/posts/PostActions.vue
index f4d8b3f8..40669dda 100644
--- a/packages/frontend-main/src/components/posts/PostActions.vue
+++ b/packages/frontend-main/src/components/posts/PostActions.vue
@@ -28,7 +28,7 @@ import PopoverTrigger from '../ui/popover/PopoverTrigger.vue';
 const props = defineProps<{ post: Post }>();
 const buttonWrapperClass = 'flex items-center flex-1 min-w-[84px]';
 const buttonClass = 'flex flex-row items-center gap-1 p-2 rounded-full hover:bg-accent active:bg-accent transition-colors';
-const amountTextClass = 'text-[#A2A2A9] text-xs font-medium hover:underline active:underline transition-colors';
+const amountTextClass = 'text-muted-foreground text-xs font-normal hover:underline active:underline transition-colors';
 const amountPopoverContentClass = 'py-2 px-3 size-fit';
 const fullAmountTextClass = 'text-sm ';
 
@@ -108,7 +108,7 @@ async function onClickFlag() {
   <div :class="cn('flex flex-row items-center justify-between pr-2 flex-wrap')">
     <div :class="buttonWrapperClass">
       <button :class="buttonClass" @click.stop="onClickReply">
-        <MessageCircle class="size-5" color="#A2A2A9" />
+        <MessageCircle class="size-5" />
       </button>
       <Popover>
         <PopoverTrigger @click.stop>
@@ -122,7 +122,7 @@ async function onClickFlag() {
 
     <div :class="buttonWrapperClass">
       <button :class="buttonClass" @click.stop="onClickLike">
-        <ThumbsUp class="size-5" color="#A2A2A9" />
+        <ThumbsUp class="size-5" />
       </button>
       <Popover>
         <PopoverTrigger @click.stop>
@@ -135,8 +135,8 @@ async function onClickFlag() {
     </div>
 
     <div :class="buttonWrapperClass">
-      <button :class="buttonClass" @click.stop="onClickDislike">
-        <ThumbsDown class="size-5 scale-x-[-1]" color="#A2A2A9" />
+      <button :class="cn(buttonClass, 'opacity-60')" @click.stop="onClickDislike">
+        <ThumbsDown class="size-5 scale-x-[-1]" />
       </button>
       <Popover>
         <PopoverTrigger @click.stop>
@@ -149,8 +149,8 @@ async function onClickFlag() {
     </div>
 
     <div :class="buttonWrapperClass">
-      <button :class="buttonClass" @click.stop="onClickFlag">
-        <Flag class="size-5" color="#A2A2A9" />
+      <button :class="cn(buttonClass, 'opacity-60')" @click.stop="onClickFlag">
+        <Flag class="size-5" />
       </button>
       <Popover>
         <PopoverTrigger @click.stop>
diff --git a/packages/frontend-main/src/components/posts/PostMessage.vue b/packages/frontend-main/src/components/posts/PostMessage.vue
index 67d77b65..347767ad 100644
--- a/packages/frontend-main/src/components/posts/PostMessage.vue
+++ b/packages/frontend-main/src/components/posts/PostMessage.vue
@@ -52,7 +52,7 @@ const parsedMessage = computed((): MessageSegment[] => {
 </script>
 
 <template>
-  <div class="leading-6 text-sm">
+  <div class="leading-relaxed text-sm">
     <template v-for="(segment, index) in parsedMessage" :key="`${index}-${segment.content}`">
       <span v-if="segment.type === 'text'">{{ segment.content }}</span>
       <a
diff --git a/packages/frontend-main/src/components/ui/filter/FilterPhoton.vue b/packages/frontend-main/src/components/ui/filter/FilterPhoton.vue
index 222abdd5..043b7a0c 100644
--- a/packages/frontend-main/src/components/ui/filter/FilterPhoton.vue
+++ b/packages/frontend-main/src/components/ui/filter/FilterPhoton.vue
@@ -51,10 +51,10 @@ function inverseExponentialScale(amount: Decimal): number {
 </script>
 
 <template>
-  <div class="flex flex-col gap-4">
-    <label class="font-semibold text-sm">{{ $t('components.Filter.posts') }}</label>
+  <div class="flex flex-col gap-3">
+    <label class="text-xs font-medium text-muted-foreground/70 uppercase tracking-wider">{{ $t('components.Filter.posts') }}</label>
     <Slider v-model="sliderValue" :min="min" :max="max" :step="step" class="cursor-pointer" />
-    <span class="text-sm">
+    <span class="text-xs text-muted-foreground/80">
       {{ `${$t('components.Filter.amount')}: ${displayValue}` }}
     </span>
   </div>
diff --git a/packages/frontend-main/src/components/ui/search/SearchInput.vue b/packages/frontend-main/src/components/ui/search/SearchInput.vue
index 6f6eaa1e..2cfa66f4 100644
--- a/packages/frontend-main/src/components/ui/search/SearchInput.vue
+++ b/packages/frontend-main/src/components/ui/search/SearchInput.vue
@@ -25,14 +25,17 @@ function gotoExplore() {
 
 <template>
   <div class="relative">
-    <div class="flex items-center gap-2 relative z-10">
-      <Input v-model="query" :placeholder="$t('placeholders.search')" @keyup.enter="gotoExplore" />
+    <div class="flex flex-col gap-2">
+      <label class="text-xs font-medium text-muted-foreground/70 uppercase tracking-wider">Search</label>
+      <div class="flex items-center gap-2 relative z-10">
+        <Input v-model="query" :placeholder="$t('placeholders.search')" @keyup.enter="gotoExplore" />
 
-      <CircleX
-        v-if="query"
-        class="size-6 absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer"
-        @click="clearSearch"
-      />
+        <CircleX
+          v-if="query"
+          class="size-4 absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer text-muted-foreground/60 hover:text-muted-foreground transition-colors"
+          @click="clearSearch"
+        />
+      </div>
     </div>
 
     <div
diff --git a/packages/frontend-main/src/components/users/Username.vue b/packages/frontend-main/src/components/users/Username.vue
index 18cc59d2..b95118d5 100644
--- a/packages/frontend-main/src/components/users/Username.vue
+++ b/packages/frontend-main/src/components/users/Username.vue
@@ -8,5 +8,5 @@ defineProps<UserAvatarUsernameProps>();
 </script>
 
 <template>
-  <span :class="cn(size === 'lg' ? 'text-lg' : size === 'sm' ? 'text-sm' : 'text-base', !disabled && 'active:underline hover:underline decoration-2', 'font-semibold')">{{ shorten(userAddress || '...............', 8, 4) }}</span>
+  <span :class="cn(size === 'lg' ? 'text-lg' : size === 'sm' ? 'text-sm' : 'text-sm', !disabled && 'active:underline hover:underline decoration-2', 'font-medium text-muted-foreground')">{{ shorten(userAddress || '...............', 8, 4) }}</span>
 </template>

From 2d5383e2e8a942756446dcbd089f14f332504d8c Mon Sep 17 00:00:00 2001
From: salmad3 <danny.f.salman@gmail.com>
Date: Thu, 13 Nov 2025 03:11:24 -0500
Subject: [PATCH 06/12] update authz transaction messages

---
 packages/frontend-main/src/composables/authz/useAuthzGrant.ts  | 2 +-
 packages/frontend-main/src/composables/authz/useAuthzRevoke.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend-main/src/composables/authz/useAuthzGrant.ts b/packages/frontend-main/src/composables/authz/useAuthzGrant.ts
index 0318c573..7a937f68 100644
--- a/packages/frontend-main/src/composables/authz/useAuthzGrant.ts
+++ b/packages/frontend-main/src/composables/authz/useAuthzGrant.ts
@@ -62,7 +62,7 @@ export function useAuthzGrant() {
         value: feeAllowance,
       }];
 
-      return await wallet.sendTx(msgs, 'Grant authorization for Dither.chat');
+      return await wallet.sendTx(msgs, 'Grant authorization for dither.chat');
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEY_AUTHZ_GRANTS] });
diff --git a/packages/frontend-main/src/composables/authz/useAuthzRevoke.ts b/packages/frontend-main/src/composables/authz/useAuthzRevoke.ts
index 745bbea5..a8a7987f 100644
--- a/packages/frontend-main/src/composables/authz/useAuthzRevoke.ts
+++ b/packages/frontend-main/src/composables/authz/useAuthzRevoke.ts
@@ -28,7 +28,7 @@ export function useAuthzRevoke() {
         value: msgRevoke,
       };
 
-      return await wallet.sendTx([msg], 'Revoke authorization for Dither.chat');
+      return await wallet.sendTx([msg], 'Revoke authorization for dither.chat');
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEY_AUTHZ_GRANTS] });

From 130559c48459bf7faaacabdc68e5685c0509f448 Mon Sep 17 00:00:00 2001
From: salmad3 <danny.f.salman@gmail.com>
Date: Thu, 13 Nov 2025 03:23:39 -0500
Subject: [PATCH 07/12] lint

---
 .../src/layouts/panels/LeftPanel.vue          |  2 --
 packages/frontend-main/src/style.css          | 33 ++++++++++++++-----
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/packages/frontend-main/src/layouts/panels/LeftPanel.vue b/packages/frontend-main/src/layouts/panels/LeftPanel.vue
index 8488b382..ce991bca 100644
--- a/packages/frontend-main/src/layouts/panels/LeftPanel.vue
+++ b/packages/frontend-main/src/layouts/panels/LeftPanel.vue
@@ -6,13 +6,11 @@ import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 
 import NotificationsCount from '@/components/notifications/NotificationsCount.vue';
-import WalletConnectButton from '@/components/wallet/WalletConnectButton/WalletConnectButton.vue';
 import { useDefaultAmount } from '@/composables/useDefaultAmount';
 import { usePopups } from '@/composables/usePopups';
 import { useWallet } from '@/composables/useWallet';
 import { routesNames } from '@/router';
 import { cn } from '@/utility';
-import { shorten } from '@/utility/text';
 
 const wallet = useWallet();
 const popups = usePopups();
diff --git a/packages/frontend-main/src/style.css b/packages/frontend-main/src/style.css
index 90c0031d..72d2c6b0 100644
--- a/packages/frontend-main/src/style.css
+++ b/packages/frontend-main/src/style.css
@@ -94,7 +94,7 @@
   --text-base--line-height: normal;
   --text-sm--line-height: normal;
   --text-xs--line-height: normal;
-  
+
   --atomone-accent: oklch(0.55 0.15 250);
   --atomone-accent-muted: oklch(0.65 0.08 250);
 }
@@ -171,7 +171,7 @@
 
 .atomone,
 .atomone body {
-  background-image: 
+  background-image:
     linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
     linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
   background-size: 24px 24px;
@@ -185,18 +185,35 @@
   body {
     @apply bg-background text-foreground;
     overflow-y: scroll;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    font-family:
+      'Inter',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      sans-serif;
     line-height: normal;
-    font-feature-settings: 'kern' 1, 'liga' 1;
+    font-feature-settings:
+      'kern' 1,
+      'liga' 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
-  
-  h1, h2, h3, h4, h5, h6,
-  [class*="font-display"],
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  [class*='font-display'],
   .logo,
   .brand-text {
-    font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    font-family:
+      'Space Grotesk',
+      'Inter',
+      -apple-system,
+      BlinkMacSystemFont,
+      sans-serif;
     font-feature-settings: 'kern' 1, 'liga' 1;
     letter-spacing: -0.01em;
   }

From 20b9235c50a7f5ca415f6cef632db3b443c59f93 Mon Sep 17 00:00:00 2001
From: salmad3 <danny.f.salman@gmail.com>
Date: Thu, 13 Nov 2025 03:26:31 -0500
Subject: [PATCH 08/12] lint

---
 .../src/components/ui/switch/ColorModeSwitch.vue              | 2 --
 packages/frontend-main/src/style.css                          | 4 +++-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend-main/src/components/ui/switch/ColorModeSwitch.vue b/packages/frontend-main/src/components/ui/switch/ColorModeSwitch.vue
index 6a39874e..b8e29b0b 100644
--- a/packages/frontend-main/src/components/ui/switch/ColorModeSwitch.vue
+++ b/packages/frontend-main/src/components/ui/switch/ColorModeSwitch.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { ColorTheme } from '@/composables/useColorTheme';
-
 import { useMediaQuery } from '@vueuse/core';
 import { Atom, Moon, Sun } from 'lucide-vue-next';
 import { computed } from 'vue';
diff --git a/packages/frontend-main/src/style.css b/packages/frontend-main/src/style.css
index 72d2c6b0..caca5fb8 100644
--- a/packages/frontend-main/src/style.css
+++ b/packages/frontend-main/src/style.css
@@ -214,7 +214,9 @@
       -apple-system,
       BlinkMacSystemFont,
       sans-serif;
-    font-feature-settings: 'kern' 1, 'liga' 1;
+    font-feature-settings:
+      'kern' 1,
+      'liga' 1;
     letter-spacing: -0.01em;
   }
   button:not([disabled]),

From 63305a968589e39d37f3f7eb451b939f77cb87c1 Mon Sep 17 00:00:00 2001
From: salmad3 <danny.f.salman@gmail.com>
Date: Thu, 13 Nov 2025 03:33:42 -0500
Subject: [PATCH 09/12] style connect wallet button like new post button

---
 .../wallet/WalletConnectButton/WalletConnectButton.vue    | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectButton.vue b/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectButton.vue
index 6fcb49aa..c6cd1359 100644
--- a/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectButton.vue
+++ b/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectButton.vue
@@ -3,7 +3,6 @@ import { MoreVertical } from 'lucide-vue-next';
 import { computed, ref } from 'vue';
 import { RouterLink } from 'vue-router';
 
-import { Button } from '@/components/ui/button';
 import {
   Popover,
   PopoverTrigger,
@@ -45,9 +44,12 @@ const connectedState = computed(() => !isConnecting.value && loggedIn.value && !
     </template>
 
     <template v-else>
-      <Button class="w-full" @click="walletDialogStore.showDialog">
+      <button
+        class="flex items-center justify-center flex-row h-11 px-3 gap-2.5 rounded-md border border-border/70 bg-background/60 backdrop-blur-sm shadow-[0_1px_3px_0_rgba(0,0,0,0.08)] hover:border-border hover:bg-background/85 hover:shadow-[0_2px_6px_0_rgba(0,0,0,0.12)] active:bg-background/95 active:shadow-[0_1px_2px_0_rgba(0,0,0,0.08)] transition-all duration-200 w-full text-base font-semibold"
+        @click="walletDialogStore.showDialog"
+      >
         {{ $t('components.WalletConnect.button') }}
-      </Button>
+      </button>
     </template>
   </div>
 </template>

From b1113bf785e67862a05cf8ed4ff23e9641a3a98e Mon Sep 17 00:00:00 2001
From: salmad3 <danny.f.salman@gmail.com>
Date: Thu, 13 Nov 2025 03:33:58 -0500
Subject: [PATCH 10/12] remove html comment

---
 .../wallet/WalletConnectButton/WalletConnectButton.vue           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectButton.vue b/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectButton.vue
index c6cd1359..e964a56b 100644
--- a/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectButton.vue
+++ b/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectButton.vue
@@ -24,7 +24,6 @@ const connectedState = computed(() => !isConnecting.value && loggedIn.value && !
 
 <template>
   <div class="w-full">
-    <!-- Normal signed in account display -->
     <template v-if="connectedState">
       <div class="flex w-full items-center gap-2.5 rounded-md px-3 py-2 hover:bg-accent/50 transition-colors">
         <RouterLink

From 61d04783ecc1f5f8405ade7d964193b70d1b8915 Mon Sep 17 00:00:00 2001
From: salmad3 <danny.f.salman@gmail.com>
Date: Thu, 13 Nov 2025 03:34:18 -0500
Subject: [PATCH 11/12] style disconnect button like new post button

---
 .../WalletConnectPopoverContent.vue                   | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectPopoverContent.vue b/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectPopoverContent.vue
index 2accc0ef..232b2978 100644
--- a/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectPopoverContent.vue
+++ b/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectPopoverContent.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { Button } from '@/components/ui/button';
 import {
   PopoverContent,
 } from '@/components/ui/popover';
@@ -11,14 +10,12 @@ const { signOut } = useWallet();
 <template>
   <PopoverContent>
     <div class="flex flex-col gap-4">
-      <Button
-        class="justify-center"
-        @click="
-          signOut();
-        "
+      <button
+        class="flex items-center justify-center flex-row h-11 px-3 gap-2.5 rounded-md border border-border/70 bg-background/60 backdrop-blur-sm shadow-[0_1px_3px_0_rgba(0,0,0,0.08)] hover:border-border hover:bg-background/85 hover:shadow-[0_2px_6px_0_rgba(0,0,0,0.12)] active:bg-background/95 active:shadow-[0_1px_2px_0_rgba(0,0,0,0.08)] transition-all duration-200 w-full text-base font-semibold"
+        @click="signOut()"
       >
         {{ $t('components.WalletConnect.disconnect') }}
-      </Button>
+      </button>
     </div>
   </PopoverContent>
 </template>

From 8b7496a7002022e3c30a714adc78c640c72a6385 Mon Sep 17 00:00:00 2001
From: salmad3 <danny.f.salman@gmail.com>
Date: Thu, 13 Nov 2025 03:48:17 -0500
Subject: [PATCH 12/12] align with design system

---
 .../src/components/posts/PostActions.vue      | 18 +++---
 .../src/components/posts/PostMoreActions.vue  | 11 ++--
 .../src/components/tma/TMAInfo.vue            |  8 ++-
 .../src/components/ui/button/Button.vue       |  1 +
 .../src/components/ui/button/index.ts         |  9 +++
 .../WalletConnectButton.vue                   |  9 ++-
 .../WalletConnectButtonMobile.vue             |  5 +-
 .../WalletConnectPopoverContent.vue           |  9 ++-
 .../src/layouts/panels/BottomPanel.vue        | 50 +++++++++++++----
 .../src/layouts/panels/LeftPanel.vue          | 56 +++++++++++--------
 .../src/layouts/panels/LeftPanelTablet.vue    | 54 ++++++++++++++----
 .../src/layouts/panels/TopPanel.vue           |  9 +--
 .../src/views/Profile/ProfileViewWrapper.vue  | 15 +++--
 .../frontend-main/src/views/ViewHeading.vue   |  6 +-
 14 files changed, 179 insertions(+), 81 deletions(-)

diff --git a/packages/frontend-main/src/components/posts/PostActions.vue b/packages/frontend-main/src/components/posts/PostActions.vue
index 40669dda..0264bfd4 100644
--- a/packages/frontend-main/src/components/posts/PostActions.vue
+++ b/packages/frontend-main/src/components/posts/PostActions.vue
@@ -21,13 +21,13 @@ import { fractionalDigits } from '@/utility/atomics';
 import { formatCompactAtomics, formatCompactNumber } from '@/utility/text';
 import { showBroadcastingToast } from '@/utility/toast';
 
+import { Button } from '../ui/button';
 import Popover from '../ui/popover/Popover.vue';
 import PopoverContent from '../ui/popover/PopoverContent.vue';
 import PopoverTrigger from '../ui/popover/PopoverTrigger.vue';
 
 const props = defineProps<{ post: Post }>();
 const buttonWrapperClass = 'flex items-center flex-1 min-w-[84px]';
-const buttonClass = 'flex flex-row items-center gap-1 p-2 rounded-full hover:bg-accent active:bg-accent transition-colors';
 const amountTextClass = 'text-muted-foreground text-xs font-normal hover:underline active:underline transition-colors';
 const amountPopoverContentClass = 'py-2 px-3 size-fit';
 const fullAmountTextClass = 'text-sm ';
@@ -107,9 +107,9 @@ async function onClickFlag() {
 <template>
   <div :class="cn('flex flex-row items-center justify-between pr-2 flex-wrap')">
     <div :class="buttonWrapperClass">
-      <button :class="buttonClass" @click.stop="onClickReply">
+      <Button variant="icon" size="icon" class="p-2" @click.stop="onClickReply">
         <MessageCircle class="size-5" />
-      </button>
+      </Button>
       <Popover>
         <PopoverTrigger @click.stop>
           <span :class="amountTextClass">{{ formatCompactNumber(post.replies) }}</span>
@@ -121,9 +121,9 @@ async function onClickFlag() {
     </div>
 
     <div :class="buttonWrapperClass">
-      <button :class="buttonClass" @click.stop="onClickLike">
+      <Button variant="icon" size="icon" class="p-2" @click.stop="onClickLike">
         <ThumbsUp class="size-5" />
-      </button>
+      </Button>
       <Popover>
         <PopoverTrigger @click.stop>
           <span :class="amountTextClass">{{ formatCompactAtomics(post.likes_burnt, fractionalDigits) }}</span>
@@ -135,9 +135,9 @@ async function onClickFlag() {
     </div>
 
     <div :class="buttonWrapperClass">
-      <button :class="cn(buttonClass, 'opacity-60')" @click.stop="onClickDislike">
+      <Button variant="icon" size="icon" class="p-2 opacity-60" @click.stop="onClickDislike">
         <ThumbsDown class="size-5 scale-x-[-1]" />
-      </button>
+      </Button>
       <Popover>
         <PopoverTrigger @click.stop>
           <span :class="amountTextClass">{{ formatCompactAtomics(post.dislikes_burnt, fractionalDigits) }}</span>
@@ -149,9 +149,9 @@ async function onClickFlag() {
     </div>
 
     <div :class="buttonWrapperClass">
-      <button :class="cn(buttonClass, 'opacity-60')" @click.stop="onClickFlag">
+      <Button variant="icon" size="icon" class="p-2 opacity-60" @click.stop="onClickFlag">
         <Flag class="size-5" />
-      </button>
+      </Button>
       <Popover>
         <PopoverTrigger @click.stop>
           <span :class="amountTextClass">{{ formatCompactAtomics(post.flags_burnt, fractionalDigits) }}</span>
diff --git a/packages/frontend-main/src/components/posts/PostMoreActions.vue b/packages/frontend-main/src/components/posts/PostMoreActions.vue
index 50b72d40..8a935114 100644
--- a/packages/frontend-main/src/components/posts/PostMoreActions.vue
+++ b/packages/frontend-main/src/components/posts/PostMoreActions.vue
@@ -4,15 +4,14 @@ import type { Post } from 'api-main/types/feed';
 import { useClipboard } from '@vueuse/core';
 import { Ellipsis, Link2 } from 'lucide-vue-next';
 
+import { Button } from '@/components/ui/button';
+import Icon from '@/components/ui/icon/Icon.vue';
 import Popover from '@/components/ui/popover/Popover.vue';
 import PopoverContent from '@/components/ui/popover/PopoverContent.vue';
 import PopoverTrigger from '@/components/ui/popover/PopoverTrigger.vue';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { cn } from '@/utility';
 
-import Button from '../ui/button/Button.vue';
-import Icon from '../ui/icon/Icon.vue';
-
 const { post } = defineProps<{ post: Post }>();
 const configStore = useConfigStore();
 
@@ -35,8 +34,10 @@ function gotoMintscan() {
 
 <template>
   <Popover>
-    <PopoverTrigger class="p-2 rounded-full hover:bg-accent active:bg-accent transition-colors" @click.stop>
-      <Ellipsis class="size-5" color="#A2A2A9" />
+    <PopoverTrigger as-child>
+      <Button variant="icon" size="icon" class="p-2" @click.stop>
+        <Ellipsis class="size-5" color="#A2A2A9" />
+      </Button>
     </PopoverTrigger>
 
     <PopoverContent class="p-2">
diff --git a/packages/frontend-main/src/components/tma/TMAInfo.vue b/packages/frontend-main/src/components/tma/TMAInfo.vue
index 60c2f641..fbe2221d 100644
--- a/packages/frontend-main/src/components/tma/TMAInfo.vue
+++ b/packages/frontend-main/src/components/tma/TMAInfo.vue
@@ -2,6 +2,7 @@
 import { ChevronDown, ChevronRight, Globe, Smartphone } from 'lucide-vue-next';
 import { computed, onMounted, ref } from 'vue';
 
+import { Button } from '@/components/ui/button';
 import { useTMAStore } from '@/stores/useTMAStore';
 
 import TelegramLogo from './telegram-logo.svg';
@@ -39,8 +40,9 @@ function toggleExpanded() {
 <template>
   <div v-if="tmaInfo.isInitialized" class="border-y md:border-x md:rounded-lg bg-background">
     <!-- Summary -->
-    <button
-      class="w-full flex items-center justify-between p-4 text-left hover:bg-accent/50 transition-colors"
+    <Button
+      variant="ghost"
+      class="w-full flex items-center justify-between p-4 text-left h-auto"
       @click="toggleExpanded"
     >
       <div class="flex items-center gap-3">
@@ -68,7 +70,7 @@ function toggleExpanded() {
           class="size-4 text-muted-foreground transition-transform"
         />
       </div>
-    </button>
+    </Button>
 
     <!-- Details -->
     <div
diff --git a/packages/frontend-main/src/components/ui/button/Button.vue b/packages/frontend-main/src/components/ui/button/Button.vue
index e96145c2..7a765229 100644
--- a/packages/frontend-main/src/components/ui/button/Button.vue
+++ b/packages/frontend-main/src/components/ui/button/Button.vue
@@ -27,6 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
     :as="as"
     :as-child="asChild"
     :class="cn(buttonVariants({ variant, size }), props.class)"
+    v-bind="$attrs"
   >
     <slot />
   </Primitive>
diff --git a/packages/frontend-main/src/components/ui/button/index.ts b/packages/frontend-main/src/components/ui/button/index.ts
index 8fa69a75..e251d38e 100644
--- a/packages/frontend-main/src/components/ui/button/index.ts
+++ b/packages/frontend-main/src/components/ui/button/index.ts
@@ -19,14 +19,23 @@ export const buttonVariants = cva(
           'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 active:bg-secondary/80',
         ghost:
           'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 active:bg-accent active:text-accent-foreground dark:active:bg-accent/50',
+        navigation:
+          'justify-start rounded-md hover:bg-accent/50 active:bg-accent transition-colors',
+        icon:
+          'rounded-full hover:bg-accent active:bg-accent transition-colors p-0',
         link: 'text-primary underline-offset-4 hover:underline active:underline',
+        elevated:
+          'rounded-md border border-border/70 bg-background/60 backdrop-blur-sm shadow-[0_1px_3px_0_rgba(0,0,0,0.08)] hover:border-border hover:bg-background/85 hover:shadow-[0_2px_6px_0_rgba(0,0,0,0.12)] active:bg-background/95 active:shadow-[0_1px_2px_0_rgba(0,0,0,0.08)] transition-all duration-200',
       },
       size: {
         default: 'h-13 px-4 has-[>svg]:px-3',
         xs: 'h-8 rounded-xs gap-1 px-2 has-[>svg]:px-1.5',
         sm: 'h-10 rounded-xs gap-1.5 px-3 has-[>svg]:px-2.5',
+        nav: 'h-11 px-3 gap-2.5',
         lg: 'h-15 rounded-xs px-6 has-[>svg]:px-4',
         icon: 'size-10',
+        iconSm: 'size-[40px]',
+        iconMd: 'size-[52px]',
       },
     },
     defaultVariants: {
diff --git a/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectButton.vue b/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectButton.vue
index e964a56b..1eba550d 100644
--- a/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectButton.vue
+++ b/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectButton.vue
@@ -3,6 +3,7 @@ import { MoreVertical } from 'lucide-vue-next';
 import { computed, ref } from 'vue';
 import { RouterLink } from 'vue-router';
 
+import { Button } from '@/components/ui/button';
 import {
   Popover,
   PopoverTrigger,
@@ -43,12 +44,14 @@ const connectedState = computed(() => !isConnecting.value && loggedIn.value && !
     </template>
 
     <template v-else>
-      <button
-        class="flex items-center justify-center flex-row h-11 px-3 gap-2.5 rounded-md border border-border/70 bg-background/60 backdrop-blur-sm shadow-[0_1px_3px_0_rgba(0,0,0,0.08)] hover:border-border hover:bg-background/85 hover:shadow-[0_2px_6px_0_rgba(0,0,0,0.12)] active:bg-background/95 active:shadow-[0_1px_2px_0_rgba(0,0,0,0.08)] transition-all duration-200 w-full text-base font-semibold"
+      <Button
+        variant="elevated"
+        size="sm"
+        class="w-full"
         @click="walletDialogStore.showDialog"
       >
         {{ $t('components.WalletConnect.button') }}
-      </button>
+      </Button>
     </template>
   </div>
 </template>
diff --git a/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectButtonMobile.vue b/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectButtonMobile.vue
index cd756c28..514b01c3 100644
--- a/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectButtonMobile.vue
+++ b/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectButtonMobile.vue
@@ -2,6 +2,7 @@
 import { Wallet } from 'lucide-vue-next';
 import { computed, ref } from 'vue';
 
+import { Button } from '@/components/ui/button';
 import {
   Popover,
   PopoverTrigger,
@@ -35,9 +36,9 @@ const connectedState = computed(() => !isConnecting.value && loggedIn.value && !
     </template>
 
     <template v-else>
-      <button class="flex items-center justify-center flex-row size-full rounded-full hover:bg-accent active:bg-accent transition-colors" @click="walletDialogStore.showDialog">
+      <Button variant="icon" size="iconSm" @click="walletDialogStore.showDialog">
         <Wallet class="size-6" />
-      </button>
+      </Button>
     </template>
   </div>
 </template>
diff --git a/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectPopoverContent.vue b/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectPopoverContent.vue
index 232b2978..3df7a2ad 100644
--- a/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectPopoverContent.vue
+++ b/packages/frontend-main/src/components/wallet/WalletConnectButton/WalletConnectPopoverContent.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { Button } from '@/components/ui/button';
 import {
   PopoverContent,
 } from '@/components/ui/popover';
@@ -10,12 +11,14 @@ const { signOut } = useWallet();
 <template>
   <PopoverContent>
     <div class="flex flex-col gap-4">
-      <button
-        class="flex items-center justify-center flex-row h-11 px-3 gap-2.5 rounded-md border border-border/70 bg-background/60 backdrop-blur-sm shadow-[0_1px_3px_0_rgba(0,0,0,0.08)] hover:border-border hover:bg-background/85 hover:shadow-[0_2px_6px_0_rgba(0,0,0,0.12)] active:bg-background/95 active:shadow-[0_1px_2px_0_rgba(0,0,0,0.08)] transition-all duration-200 w-full text-base font-semibold"
+      <Button
+        variant="elevated"
+        size="sm"
+        class="w-full"
         @click="signOut()"
       >
         {{ $t('components.WalletConnect.disconnect') }}
-      </button>
+      </Button>
     </div>
   </PopoverContent>
 </template>
diff --git a/packages/frontend-main/src/layouts/panels/BottomPanel.vue b/packages/frontend-main/src/layouts/panels/BottomPanel.vue
index af148f79..9581b44b 100644
--- a/packages/frontend-main/src/layouts/panels/BottomPanel.vue
+++ b/packages/frontend-main/src/layouts/panels/BottomPanel.vue
@@ -3,9 +3,10 @@ import type { RouteRecordNameGeneric } from 'vue-router';
 
 import { Bell, Feather, HelpCircle, House, Search, Settings, User } from 'lucide-vue-next';
 import { computed } from 'vue';
-import { useRouter } from 'vue-router';
+import { RouterLink, useRouter } from 'vue-router';
 
 import NotificationsCount from '@/components/notifications/NotificationsCount.vue';
+import { Button, buttonVariants } from '@/components/ui/button';
 import { useDefaultAmount } from '@/composables/useDefaultAmount';
 import { usePopups } from '@/composables/usePopups';
 import { useWallet } from '@/composables/useWallet';
@@ -17,40 +18,69 @@ const popups = usePopups();
 const { isDefaultAmountInvalid } = useDefaultAmount();
 const router = useRouter();
 const isMyProfileRoute = computed(() => router.currentRoute.value.name?.toString().startsWith(routesNames.profile) && wallet.loggedIn.value && wallet.address.value === router.currentRoute.value.params.address);
-const buttonClass = (routeName?: RouteRecordNameGeneric) => `flex justify-center items-center size-[52px] rounded-full active:bg-accent hover:bg-accent ${!!routeName && router.currentRoute.value.name?.toString().startsWith(routeName.toString()) && 'bg-accent/80'}`;
+
+function isRouteActive(routeName?: RouteRecordNameGeneric) {
+  return !!routeName && router.currentRoute.value.name?.toString().startsWith(routeName.toString());
+}
 </script>
 
 <template>
   <header class="h-full w-full flex flex-row items-center justify-around border-t bg-background px-4">
     <nav class="contents">
-      <RouterLink to="/" :class="buttonClass(routesNames.home)">
+      <RouterLink
+        to="/"
+        :class="cn(buttonVariants({ variant: 'icon', size: 'iconMd' }), isRouteActive(routesNames.home) && 'bg-accent/80')"
+      >
         <House class="size-6" />
       </RouterLink>
 
-      <RouterLink to="/explore" :class="buttonClass(routesNames.explore)">
+      <RouterLink
+        to="/explore"
+        :class="cn(buttonVariants({ variant: 'icon', size: 'iconMd' }), isRouteActive(routesNames.explore) && 'bg-accent/80')"
+      >
         <Search class="size-6" />
       </RouterLink>
 
-      <RouterLink v-if="wallet.loggedIn.value" to="/notifications" :class="cn(buttonClass(routesNames.notifications), 'relative')">
+      <RouterLink
+        v-if="wallet.loggedIn.value"
+        to="/notifications"
+        :class="cn(buttonVariants({ variant: 'icon', size: 'iconMd' }), 'relative', isRouteActive(routesNames.notifications) && 'bg-accent/80')"
+      >
         <NotificationsCount class="absolute top-1 left-6" />
         <Bell class="size-6" />
       </RouterLink>
 
-      <RouterLink v-if="wallet.loggedIn.value" :to="`/profile/${wallet.address.value}`" :class="buttonClass(isMyProfileRoute ? routesNames.profile : undefined)">
+      <RouterLink
+        v-if="wallet.loggedIn.value"
+        :to="`/profile/${wallet.address.value}`"
+        :class="cn(buttonVariants({ variant: 'icon', size: 'iconMd' }), isMyProfileRoute && 'bg-accent/80')"
+      >
         <User class="size-6" />
       </RouterLink>
 
-      <RouterLink v-if="wallet.loggedIn.value" to="/settings" :class="buttonClass(routesNames.settings)">
+      <RouterLink
+        v-if="wallet.loggedIn.value"
+        to="/settings"
+        :class="cn(buttonVariants({ variant: 'icon', size: 'iconMd' }), isRouteActive(routesNames.settings) && 'bg-accent/80')"
+      >
         <Settings class="size-6" />
       </RouterLink>
 
-      <RouterLink to="/about" :class="buttonClass(routesNames.about)">
+      <RouterLink
+        to="/about"
+        :class="cn(buttonVariants({ variant: 'icon', size: 'iconMd' }), isRouteActive(routesNames.about) && 'bg-accent/80')"
+      >
         <HelpCircle class="size-6" />
       </RouterLink>
     </nav>
 
-    <button v-if="wallet.loggedIn.value" :class="buttonClass()" @click="isDefaultAmountInvalid ? popups.show('invalidDefaultAmount', 'none') : popups.show('newPost', {})">
+    <Button
+      v-if="wallet.loggedIn.value"
+      variant="icon"
+      size="iconMd"
+      @click="isDefaultAmountInvalid ? popups.show('invalidDefaultAmount', 'none') : popups.show('newPost', {})"
+    >
       <Feather class="size-6" />
-    </button>
+    </Button>
   </header>
 </template>
diff --git a/packages/frontend-main/src/layouts/panels/LeftPanel.vue b/packages/frontend-main/src/layouts/panels/LeftPanel.vue
index ce991bca..87da4dc7 100644
--- a/packages/frontend-main/src/layouts/panels/LeftPanel.vue
+++ b/packages/frontend-main/src/layouts/panels/LeftPanel.vue
@@ -3,9 +3,10 @@ import type { RouteRecordNameGeneric } from 'vue-router';
 
 import { Bell, Feather, HelpCircle, House, Search, Settings, User } from 'lucide-vue-next';
 import { computed } from 'vue';
-import { useRouter } from 'vue-router';
+import { RouterLink, useRouter } from 'vue-router';
 
 import NotificationsCount from '@/components/notifications/NotificationsCount.vue';
+import { Button, buttonVariants } from '@/components/ui/button';
 import { useDefaultAmount } from '@/composables/useDefaultAmount';
 import { usePopups } from '@/composables/usePopups';
 import { useWallet } from '@/composables/useWallet';
@@ -17,75 +18,86 @@ const popups = usePopups();
 const { isDefaultAmountInvalid } = useDefaultAmount();
 const router = useRouter();
 const isMyProfileRoute = computed(() => router.currentRoute.value.name?.toString().startsWith(routesNames.profile) && wallet.loggedIn.value && wallet.address.value === router.currentRoute.value.params.address);
-function buttonClass(routeName?: RouteRecordNameGeneric, isTwoLine?: boolean) {
-  const isActive = !!routeName && router.currentRoute.value.name?.toString().startsWith(routeName.toString());
-  return `flex items-center flex-row ${isTwoLine ? 'h-auto min-h-11 py-2' : 'h-11'} px-3 gap-2.5 rounded-md hover:bg-accent/50 active:bg-accent transition-colors ${isActive && 'bg-muted/60'}`;
+
+function isRouteActive(routeName?: RouteRecordNameGeneric) {
+  return !!routeName && router.currentRoute.value.name?.toString().startsWith(routeName.toString());
 }
-const buttonLabelClass = 'text-base font-semibold';
 </script>
 
 <template>
   <header class="flex flex-col justify-between h-full max-w-[270px] ml-auto pt-6 pb-6 pr-6">
     <div class="flex flex-col gap-8">
       <nav class="contents">
-        <RouterLink to="/" :class="buttonClass()">
+        <RouterLink to="/" :class="cn(buttonVariants({ variant: 'navigation', size: 'nav' }), 'w-full')">
           <span class="text-xl font-semibold tracking-tight logo">
             dither
           </span>
         </RouterLink>
 
         <div class="flex flex-col gap-1">
-          <RouterLink to="/" :class="buttonClass(routesNames.home)">
+          <RouterLink
+            to="/"
+            :class="cn(buttonVariants({ variant: 'navigation', size: 'nav' }), 'w-full', isRouteActive(routesNames.home) && 'bg-muted/60')"
+          >
             <House class="size-5" />
-            <span :class="buttonLabelClass">Home</span>
+            <span class="text-base font-semibold">Home</span>
           </RouterLink>
 
-          <RouterLink to="/explore" :class="buttonClass(routesNames.explore)">
+          <RouterLink
+            to="/explore"
+            :class="cn(buttonVariants({ variant: 'navigation', size: 'nav' }), 'w-full', isRouteActive(routesNames.explore) && 'bg-muted/60')"
+          >
             <Search class="size-5" />
-            <span :class="buttonLabelClass">Explore</span>
+            <span class="text-base font-semibold">Explore</span>
           </RouterLink>
 
-          <RouterLink v-if="wallet.loggedIn.value" to="/notifications" :class="cn(buttonClass(routesNames.notifications), 'relative')">
+          <RouterLink
+            v-if="wallet.loggedIn.value"
+            to="/notifications"
+            :class="cn(buttonVariants({ variant: 'navigation', size: 'nav' }), 'w-full relative', isRouteActive(routesNames.notifications) && 'bg-muted/60')"
+          >
             <NotificationsCount class="absolute top-0.5 left-5" />
             <Bell class="size-5" />
-            <span :class="buttonLabelClass">Notifications</span>
+            <span class="text-base font-semibold">Notifications</span>
           </RouterLink>
 
           <RouterLink
             v-if="wallet.loggedIn.value"
             :to="`/profile/${wallet.address.value}`"
-            :class="buttonClass(isMyProfileRoute ? routesNames.profile : undefined)"
+            :class="cn(buttonVariants({ variant: 'navigation', size: 'nav' }), 'w-full', isMyProfileRoute && 'bg-muted/60')"
           >
             <User class="size-5" />
-            <span :class="buttonLabelClass">My Profile</span>
+            <span class="text-base font-semibold">My Profile</span>
           </RouterLink>
         </div>
 
-        <button
+        <Button
           v-if="wallet.loggedIn.value"
-          class="flex items-center flex-row h-11 px-3 gap-2.5 rounded-md border border-border/70 bg-background/60 backdrop-blur-sm shadow-[0_1px_3px_0_rgba(0,0,0,0.08)] hover:border-border hover:bg-background/85 hover:shadow-[0_2px_6px_0_rgba(0,0,0,0.12)] active:bg-background/95 active:shadow-[0_1px_2px_0_rgba(0,0,0,0.08)] transition-all duration-200"
+          variant="elevated"
+          size="sm"
+          class="w-full justify-start font-bold"
           @click="isDefaultAmountInvalid ? popups.show('invalidDefaultAmount', 'none') : popups.show('newPost', {})"
         >
           <Feather class="size-5" />
-          <span class="text-base font-bold">{{ $t('components.Button.newPost') }}</span>
-        </button>
+          {{ $t('components.Button.newPost') }}
+        </Button>
 
         <div class="flex flex-col gap-1 pt-2 border-t border-border/40">
           <RouterLink
             v-if="wallet.loggedIn.value"
             to="/settings"
-            :class="buttonClass(routesNames.settings)"
+            :class="cn(buttonVariants({ variant: 'navigation', size: 'nav' }), 'w-full', isRouteActive(routesNames.settings) && 'bg-muted/60')"
           >
             <Settings class="size-4 opacity-50" />
-            <span :class="cn(buttonLabelClass, 'opacity-60')">Settings</span>
+            <span class="text-base font-semibold opacity-60">Settings</span>
           </RouterLink>
 
           <RouterLink
             to="/about"
-            :class="buttonClass(routesNames.about)"
+            :class="cn(buttonVariants({ variant: 'navigation', size: 'nav' }), 'w-full', isRouteActive(routesNames.about) && 'bg-muted/60')"
           >
             <HelpCircle class="size-4 opacity-50" />
-            <span :class="cn(buttonLabelClass, 'opacity-60')">About</span>
+            <span class="text-base font-semibold opacity-60">About</span>
           </RouterLink>
         </div>
       </nav>
diff --git a/packages/frontend-main/src/layouts/panels/LeftPanelTablet.vue b/packages/frontend-main/src/layouts/panels/LeftPanelTablet.vue
index d755d4ae..cecc08b0 100644
--- a/packages/frontend-main/src/layouts/panels/LeftPanelTablet.vue
+++ b/packages/frontend-main/src/layouts/panels/LeftPanelTablet.vue
@@ -3,9 +3,10 @@ import type { RouteRecordNameGeneric } from 'vue-router';
 
 import { Bell, Feather, HelpCircle, House, Search, Settings, User } from 'lucide-vue-next';
 import { computed } from 'vue';
-import { useRouter } from 'vue-router';
+import { RouterLink, useRouter } from 'vue-router';
 
 import NotificationsCount from '@/components/notifications/NotificationsCount.vue';
+import { Button, buttonVariants } from '@/components/ui/button';
 import WalletConnectButtonMobile from '@/components/wallet/WalletConnectButton/WalletConnectButtonMobile.vue';
 import { useDefaultAmount } from '@/composables/useDefaultAmount';
 import { usePopups } from '@/composables/usePopups';
@@ -18,42 +19,71 @@ const popups = usePopups();
 const { isDefaultAmountInvalid } = useDefaultAmount();
 const router = useRouter();
 const isMyProfileRoute = computed(() => router.currentRoute.value.name?.toString().startsWith(routesNames.profile) && wallet.loggedIn.value && wallet.address.value === router.currentRoute.value.params.address);
-const buttonClass = (routeName?: RouteRecordNameGeneric) => `flex justify-center items-center size-[52px] rounded-full active:bg-accent hover:bg-accent transition-colors ${!!routeName && router.currentRoute.value.name?.toString().startsWith(routeName.toString()) && 'bg-accent/80'}`;
+
+function isRouteActive(routeName?: RouteRecordNameGeneric) {
+  return !!routeName && router.currentRoute.value.name?.toString().startsWith(routeName.toString());
+}
 </script>
 
 <template>
-  <header class="flex flex-col justify-between h-full  items-end  py-6 px-3">
-    <div class="flex flex-col items-center gap-3 ">
+  <header class="flex flex-col justify-between h-full items-end py-6 px-3">
+    <div class="flex flex-col items-center gap-3">
       <nav class="contents">
-        <RouterLink to="/" :class="buttonClass(routesNames.home)">
+        <RouterLink
+          to="/"
+          :class="cn(buttonVariants({ variant: 'icon', size: 'iconMd' }), isRouteActive(routesNames.home) && 'bg-accent/80')"
+        >
           <House class="size-6" />
         </RouterLink>
 
-        <RouterLink to="/explore" :class="buttonClass(routesNames.explore)">
+        <RouterLink
+          to="/explore"
+          :class="cn(buttonVariants({ variant: 'icon', size: 'iconMd' }), isRouteActive(routesNames.explore) && 'bg-accent/80')"
+        >
           <Search class="size-6" />
         </RouterLink>
 
-        <RouterLink v-if="wallet.loggedIn.value" to="/notifications" :class="cn(buttonClass(routesNames.notifications), 'relative')">
+        <RouterLink
+          v-if="wallet.loggedIn.value"
+          to="/notifications"
+          :class="cn(buttonVariants({ variant: 'icon', size: 'iconMd' }), 'relative', isRouteActive(routesNames.notifications) && 'bg-accent/80')"
+        >
           <NotificationsCount class="absolute top-1 left-6" />
           <Bell class="size-6" />
         </RouterLink>
 
-        <RouterLink v-if="wallet.loggedIn.value" :to="`/profile/${wallet.address.value}`" :class="buttonClass(isMyProfileRoute ? routesNames.profile : undefined)">
+        <RouterLink
+          v-if="wallet.loggedIn.value"
+          :to="`/profile/${wallet.address.value}`"
+          :class="cn(buttonVariants({ variant: 'icon', size: 'iconMd' }), isMyProfileRoute && 'bg-accent/80')"
+        >
           <User class="size-6" />
         </RouterLink>
 
-        <RouterLink v-if="wallet.loggedIn.value" to="/settings" :class="buttonClass(routesNames.settings)">
+        <RouterLink
+          v-if="wallet.loggedIn.value"
+          to="/settings"
+          :class="cn(buttonVariants({ variant: 'icon', size: 'iconMd' }), isRouteActive(routesNames.settings) && 'bg-accent/80')"
+        >
           <Settings class="size-6" />
         </RouterLink>
 
-        <RouterLink to="/about" :class="buttonClass(routesNames.about)">
+        <RouterLink
+          to="/about"
+          :class="cn(buttonVariants({ variant: 'icon', size: 'iconMd' }), isRouteActive(routesNames.about) && 'bg-accent/80')"
+        >
           <HelpCircle class="size-6" />
         </RouterLink>
       </nav>
 
-      <button v-if="wallet.loggedIn.value" :class="buttonClass()" @click="isDefaultAmountInvalid ? popups.show('invalidDefaultAmount', 'none') : popups.show('newPost', {})">
+      <Button
+        v-if="wallet.loggedIn.value"
+        variant="icon"
+        size="iconMd"
+        @click="isDefaultAmountInvalid ? popups.show('invalidDefaultAmount', 'none') : popups.show('newPost', {})"
+      >
         <Feather class="size-6" />
-      </button>
+      </Button>
     </div>
 
     <WalletConnectButtonMobile class="size-[52px]" />
diff --git a/packages/frontend-main/src/layouts/panels/TopPanel.vue b/packages/frontend-main/src/layouts/panels/TopPanel.vue
index e22b6eca..d1bf6f7f 100644
--- a/packages/frontend-main/src/layouts/panels/TopPanel.vue
+++ b/packages/frontend-main/src/layouts/panels/TopPanel.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { SlidersHorizontal } from 'lucide-vue-next';
 
+import { Button } from '@/components/ui/button';
 import FilterPhoton from '@/components/ui/filter/FilterPhoton.vue';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover';
-import SearchInput from '@/components/ui/search/SearchInput.vue';
+import { SearchInput } from '@/components/ui/search';
 import ColorModeSwitch from '@/components/ui/switch/ColorModeSwitch.vue';
 import WalletConnectButtonMobile from '@/components/wallet/WalletConnectButton/WalletConnectButtonMobile.vue';
 </script>
@@ -21,10 +22,10 @@ import WalletConnectButtonMobile from '@/components/wallet/WalletConnectButton/W
     <div class="flex flex-row items-center gap-2">
       <SearchInput class="self-start" />
       <Popover>
-        <PopoverTrigger>
-          <div class="flex flex-row items-center justify-center size-[40px] rounded-full hover:bg-accent active:bg-accent transition-colors">
+        <PopoverTrigger as-child>
+          <Button variant="icon" size="iconSm">
             <SlidersHorizontal class="size-6" />
-          </div>
+          </Button>
         </PopoverTrigger>
         <PopoverContent>
           <FilterPhoton />
diff --git a/packages/frontend-main/src/views/Profile/ProfileViewWrapper.vue b/packages/frontend-main/src/views/Profile/ProfileViewWrapper.vue
index 7aa76837..fed430e9 100644
--- a/packages/frontend-main/src/views/Profile/ProfileViewWrapper.vue
+++ b/packages/frontend-main/src/views/Profile/ProfileViewWrapper.vue
@@ -130,21 +130,24 @@ async function onClickUnfollow() {
           <UserAvatar :user-address="address" size="lg" disabled />
 
           <div class="flex flex-row items-center gap-2 flex-1 min-w-0">
-            <button
-              class="text-xl font-medium font-mono tracking-wide text-left hover:opacity-70 active:opacity-50 transition-opacity flex-1 min-w-0"
+            <Button
+              variant="ghost"
+              class="text-xl font-medium font-mono tracking-wide text-left hover:opacity-70 active:opacity-50 transition-opacity flex-1 min-w-0 justify-start h-auto p-0"
               @click="toggleAddress"
             >
               <span v-if="isAddressExpanded" class="break-all">{{ address }}</span>
               <span v-else>{{ shorten(address, 10, 6) }}</span>
-            </button>
+            </Button>
 
-            <button
-              class="p-1.5 rounded hover:bg-accent/50 active:bg-accent transition-colors shrink-0"
+            <Button
+              variant="icon"
+              size="icon"
+              class="p-1.5 shrink-0"
               :aria-label="$t('components.Button.copyAddress')"
               @click.stop="copyAddress"
             >
               <Copy class="size-4 text-muted-foreground" />
-            </button>
+            </Button>
           </div>
         </div>
 
diff --git a/packages/frontend-main/src/views/ViewHeading.vue b/packages/frontend-main/src/views/ViewHeading.vue
index 62581f2d..86501a53 100644
--- a/packages/frontend-main/src/views/ViewHeading.vue
+++ b/packages/frontend-main/src/views/ViewHeading.vue
@@ -2,6 +2,8 @@
 import { ArrowLeft } from 'lucide-vue-next';
 import { useRouter } from 'vue-router';
 
+import { Button } from '@/components/ui/button';
+
 defineProps<{ title?: string }>();
 
 const { back } = useRouter();
@@ -9,9 +11,9 @@ const { back } = useRouter();
 
 <template>
   <div class="flex flex-row items-center w-full border-b px-2 h-[62px]">
-    <button class="flex flex-row items-center gap-1 p-2 mr-5 rounded-full hover:bg-accent active:bg-accent transition-colors" @click="back">
+    <Button variant="icon" size="icon" class="mr-5 p-2" @click="back">
       <ArrowLeft class="size-6" />
-    </button>
+    </Button>
     <h1 v-if="title" class="text-lg font-semibold">
       {{ title }}
     </h1>