diff --git a/src/assets/image/logo.ico b/src/assets/image/logo.ico
index 95510174..4bd0e9fc 100644
Binary files a/src/assets/image/logo.ico and b/src/assets/image/logo.ico differ
diff --git a/src/assets/image/logo.png b/src/assets/image/logo.png
new file mode 100644
index 00000000..b5b01964
Binary files /dev/null and b/src/assets/image/logo.png differ
diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index cdcd0786..f4d8c61a 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -40,10 +40,20 @@ export function AppSidebar() {
   return (
     <Sidebar variant="floating" collapsible="icon">
       <SidebarHeader>
-        <SidebarMenuButton>
-          <EarthLock/>
-          <span className="font-semibold group-data-[state=collapsed]:hidden">
-            Clash Koala
+        <SidebarMenuButton size="lg"
+          className={cn(
+            "flex h-12 items-center transition-all duration-200",
+            "group-data-[state=expanded]:w-full group-data-[state=expanded]:gap-2 group-data-[state=expanded]:px-3",
+            "group-data-[state=collapsed]:w-full group-data-[state=collapsed]:justify-center"
+          )}
+        >
+          <img
+            src="./assets/image/logo.png"
+            alt="logo"
+            className="h-6 w-6 flex-shrink-0"
+          />
+          <span className="font-semibold whitespace-nowrap group-data-[state=collapsed]:hidden">
+            Koala Clash
           </span>
         </SidebarMenuButton>
       </SidebarHeader>