diff --git a/frontend/public/logo.png b/frontend/public/logo.png
new file mode 100644
index 0000000..23ff5c0
Binary files /dev/null and b/frontend/public/logo.png differ
diff --git a/frontend/src/layouts/AdminLayout.vue b/frontend/src/layouts/AdminLayout.vue
index 89955b0..ecfa35c 100644
--- a/frontend/src/layouts/AdminLayout.vue
+++ b/frontend/src/layouts/AdminLayout.vue
@@ -3,11 +3,7 @@
     <aside class="sidebar" :class="{ collapsed: sidebarCollapsed, 'mobile-open': mobileMenuOpen }">
       <div class="sidebar-header">
         <div class="logo" @click="$router.push('/admin')">
-          <div class="logo-icon">
-            <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
-              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
-            </svg>
-          </div>
+          <img src="/logo.png" alt="Logo" class="logo-icon" />
           <span class="logo-text">Admin</span>
         </div>
       </div>
@@ -272,11 +268,7 @@ function toggleFullscreen() {
   width: 32px;
   height: 32px;
   border-radius: 8px;
-  background: linear-gradient(135deg, #4e6ef2, #7c5cfc);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
+  object-fit: contain;
   flex-shrink: 0;
 }
 
diff --git a/frontend/src/layouts/SupplierLayout.vue b/frontend/src/layouts/SupplierLayout.vue
index bf0859d..647bacb 100644
--- a/frontend/src/layouts/SupplierLayout.vue
+++ b/frontend/src/layouts/SupplierLayout.vue
@@ -3,11 +3,7 @@
     <aside class="sidebar" :class="{ collapsed: sidebarCollapsed, 'mobile-open': mobileMenuOpen }">
       <div class="sidebar-header">
         <div class="logo" @click="$router.push('/supplier')">
-          <div class="logo-icon">
-            <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
-              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
-            </svg>
-          </div>
+          <img src="/logo.png" alt="Logo" class="logo-icon" />
           <span class="logo-text">Supplier</span>
         </div>
       </div>
@@ -144,11 +140,7 @@ function handleCommand(command: string) {
   width: 32px;
   height: 32px;
   border-radius: 8px;
-  background: linear-gradient(135deg, #4e6ef2, #7c5cfc);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
+  object-fit: contain;
   flex-shrink: 0;
 }
 
diff --git a/frontend/src/layouts/UserLayout.vue b/frontend/src/layouts/UserLayout.vue
index 39d9b3e..9f33962 100644
--- a/frontend/src/layouts/UserLayout.vue
+++ b/frontend/src/layouts/UserLayout.vue
@@ -3,11 +3,7 @@
     <aside v-if="!hideSidebar" class="sidebar" :class="{ collapsed: sidebarCollapsed, 'mobile-open': mobileMenuOpen }">
       <div class="sidebar-header">
         <div class="logo" @click="$router.push('/')">
-          <div class="logo-icon">
-            <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
-              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
-            </svg>
-          </div>
+          <img src="/logo.png" alt="Logo" class="logo-icon" />
           <span class="logo-text">Sale</span>
         </div>
       </div>
@@ -202,11 +198,7 @@ if (isLoggedIn.value) cartStore.fetchCart()
   width: 32px;
   height: 32px;
   border-radius: 8px;
-  background: linear-gradient(135deg, #4e6ef2, #7c5cfc);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
+  object-fit: contain;
   flex-shrink: 0;
 }