diff --git a/src/app/dashboard/[subdomain]/layout-component.tsx b/src/app/dashboard/[subdomain]/layout-component.tsx
index 62f07f68..fec66fcc 100644
--- a/src/app/dashboard/[subdomain]/layout-component.tsx
+++ b/src/app/dashboard/[subdomain]/layout-component.tsx
@@ -12,7 +12,6 @@ import {
 
 import { ConnectButton } from "~/components/common/ConnectButton"
 import { Logo } from "~/components/common/Logo"
-import { DashboardSidebar } from "~/components/dashboard/DashboardSidebar"
 import { DashboardTopbar } from "~/components/dashboard/DashboardTopbar"
 import { Avatar } from "~/components/ui/Avatar"
 import { UniLink } from "~/components/ui/UniLink"
@@ -198,7 +197,7 @@ export default function DashboardLayout({
             }
           />
         )}
-        <div className="flex h-screen">
+        <div className="flex h-screen bg-slate-100">
           {isMobileLayout ? (
             <DashboardTopbar
               userWidget={
@@ -238,13 +237,12 @@ export default function DashboardLayout({
                             <UniLink
                               href={link.href}
                               className={cn(
-                                `flex px-4 h-12 items-center rounded-md space-x-2 w-full transition-colors`,
+                                `flex px-4 h-12 items-center rounded-xl space-x-2 w-full transition-colors`,
                                 active
-                                  ? `bg-slate-200 font-medium text-accent`
+                                  ? `bg-white font-medium text-accent drop-shadow-sm`
                                   : link.href || link.onClick
                                   ? "hover:bg-slate-200 hover:bg-opacity-50"
-                                  : "opacity-80",
-                                !true && "justify-center",
+                                  : "opacity-80 cursor-default",
                               )}
                               onClick={link.onClick}
                             >
@@ -274,7 +272,7 @@ export default function DashboardLayout({
                         href={getSiteLink({
                           subdomain,
                         })}
-                        className="space-x-2 border rounded-lg bg-slate-100 border-slate-200 text-accent hover:scale-105 transition-transform flex w-full h-12 items-center justify-center"
+                        className="space-x-2 border rounded-lg border-slate-200 text-accent hover:scale-105 transition-transform flex w-full h-12 items-center justify-center bg-white drop-shadow-sm"
                       >
                         <span className="icon-[mingcute--home-1-line]"></span>
                         {<span>{t("View Site")}</span>}
@@ -287,121 +285,120 @@ export default function DashboardLayout({
               {(isOpen) => <div>233</div>}
             </DashboardTopbar>
           ) : (
-            <DashboardSidebar>
-              {(isOpen) => (
-                <>
-                  <div className="flex-1 min-h-0 flex flex-col">
-                    <div className="mb-2 px-5 pt-3 pb-2 text-2xl font-extrabold flex items-center">
-                      <div className="inline-block w-9 h-9 mr-3">
-                        <Logo
-                          type="lottie"
-                          width={36}
-                          height={36}
-                          autoplay={false}
-                        />
-                      </div>
-                      {isOpen && "xLog"}
-                    </div>
-                    {account?.character?.handle &&
-                      subdomain &&
-                      account?.character?.handle !== subdomain && (
-                        <div className="mb-2 px-5 pt-3 pb-2 bg-orange-50 text-center">
-                          <div className="mb-2">
-                            {isOpen && "You are operating"}
-                          </div>
-                          <Avatar
-                            cid={site.data?.characterId}
-                            images={site.data?.metadata?.content?.avatars || []}
-                            size={isOpen ? 60 : 40}
-                            name={site.data?.metadata?.content?.name}
-                          />
-                          {isOpen && (
-                            <span className="flex flex-col justify-center">
-                              <span className="block">
-                                {site.data?.metadata?.content?.name}
-                              </span>
-                              <span className="block text-sm text-zinc-400">
-                                @{site.data?.handle}
-                              </span>
-                            </span>
-                          )}
-                        </div>
-                      )}
-                    <div className="mb-2 px-2 pt-3 pb-2">
-                      <ConnectButton
-                        left={true}
-                        size="base"
-                        hideNotification={true}
-                        hideName={!isOpen}
+            <div
+              className={`w-sidebar transition-[width] relative flex-shrink-0`}
+            >
+              <div
+                className={`w-sidebar transition-[width] fixed h-full flex flex-col`}
+              >
+                <div className="flex-1 min-h-0 flex flex-col">
+                  <div className="mb-2 px-5 pt-3 pb-2 text-2xl font-extrabold flex items-center">
+                    <div className="inline-block w-9 h-9 mr-3">
+                      <Logo
+                        type="lottie"
+                        width={36}
+                        height={36}
+                        autoplay={false}
                       />
                     </div>
+                    xLog
+                  </div>
+                  {account?.character?.handle &&
+                    subdomain &&
+                    account?.character?.handle !== subdomain && (
+                      <div className="mb-2 px-5 pt-3 pb-2 bg-orange-50 text-center">
+                        <div className="mb-2">You are operating</div>
+                        <Avatar
+                          cid={site.data?.characterId}
+                          images={site.data?.metadata?.content?.avatars || []}
+                          size={60}
+                          name={site.data?.metadata?.content?.name}
+                        />
+                        <span className="flex flex-col justify-center">
+                          <span className="block">
+                            {site.data?.metadata?.content?.name}
+                          </span>
+                          <span className="block text-sm text-zinc-400">
+                            @{site.data?.handle}
+                          </span>
+                        </span>
+                      </div>
+                    )}
+                  <div className="mb-2 px-2 pt-3 pb-2">
+                    <ConnectButton
+                      left={true}
+                      size="base"
+                      hideNotification={true}
+                    />
+                  </div>
 
-                    <div className="px-3 space-y-[2px] text-zinc-500 flex-1 min-h-0 overflow-y-auto">
-                      {links.map((link) => {
-                        const active =
-                          link.href &&
-                          link.isActive({
-                            pathname: pathname,
-                            href: link.href,
-                          })
-                        return (
-                          <UniLink
-                            href={link.href}
-                            key={link.text}
-                            className={cn(
-                              `flex px-4 h-12 items-center rounded-md space-x-2 w-full transition-colors`,
-                              active
-                                ? `bg-slate-200 font-medium text-accent`
-                                : link.href || link.onClick
-                                ? "hover:bg-slate-200 hover:bg-opacity-50"
-                                : "opacity-80",
-                              !isOpen && "justify-center px-0",
-                            )}
-                            onClick={link.onClick}
-                          >
-                            <i
-                              className={cn(link.icon, "text-xl")}
-                              style={{
-                                marginLeft: link.lever
-                                  ? (link.lever - 1) * 20
-                                  : 0,
-                              }}
-                            ></i>
-                            {isOpen && (
-                              <span className="truncate">{t(link.text)}</span>
-                            )}
-                          </UniLink>
-                        )
-                      })}
-                    </div>
+                  <div className="px-3 space-y-[2px] text-zinc-500 flex-1 min-h-0 overflow-y-auto">
+                    {links.map((link) => {
+                      const active =
+                        link.href &&
+                        link.isActive({
+                          pathname: pathname,
+                          href: link.href,
+                        })
+                      return (
+                        <UniLink
+                          href={link.href}
+                          key={link.text}
+                          className={cn(
+                            `flex px-4 h-12 items-center rounded-xl space-x-2 w-full transition-colors`,
+                            active
+                              ? `bg-white font-medium text-accent drop-shadow-sm`
+                              : link.href || link.onClick
+                              ? "hover:bg-slate-200 hover:bg-opacity-50"
+                              : "opacity-80 cursor-default",
+                          )}
+                          onClick={link.onClick}
+                        >
+                          <i
+                            className={cn(link.icon, "text-xl")}
+                            style={{
+                              marginLeft: link.lever
+                                ? (link.lever - 1) * 20
+                                : 0,
+                            }}
+                          ></i>
+                          <span className="truncate">{t(link.text)}</span>
+                        </UniLink>
+                      )
+                    })}
                   </div>
-                  <div className="flex items-center px-4 flex-col pb-4">
-                    <UniLink
-                      href={DISCORD_LINK}
-                      className="space-x-1 text-zinc-500 hover:text-zinc-800 flex w-full h-12 items-center justify-center transition-colors mb-2"
-                    >
-                      <i className="icon-[mingcute--question-line] text-lg" />
-                      {isOpen && <span>{t("Need help?")}</span>}
-                    </UniLink>
-                    <UniLink
-                      href={getSiteLink({
-                        subdomain,
-                      })}
-                      className="space-x-2 border rounded-lg bg-slate-100 border-slate-200 text-accent hover:scale-105 transition-transform flex w-full h-12 items-center justify-center"
-                    >
-                      <span className="icon-[mingcute--home-1-line]"></span>
-                      {isOpen && <span>{t("View Site")}</span>}
-                    </UniLink>
-                  </div>
-                </>
-              )}
-            </DashboardSidebar>
+                </div>
+                <div className="flex items-center px-4 flex-col pb-4">
+                  <UniLink
+                    href={DISCORD_LINK}
+                    className="space-x-1 text-zinc-500 hover:text-zinc-800 flex w-full h-12 items-center justify-center transition-colors mb-2"
+                  >
+                    <i className="icon-[mingcute--question-line] text-lg" />
+                    <span>{t("Need help?")}</span>
+                  </UniLink>
+                  <UniLink
+                    href={getSiteLink({
+                      subdomain,
+                    })}
+                    className="space-x-2 border rounded-lg border-slate-200 text-accent hover:scale-105 transition-transform flex w-full h-12 items-center justify-center bg-white drop-shadow-sm"
+                  >
+                    <span className="icon-[mingcute--home-1-line]"></span>
+                    <span>{t("View Site")}</span>
+                  </UniLink>
+                </div>
+              </div>
+            </div>
           )}
 
-          <div
-            className={`${isMobileLayout ? "pt-16 flex-1" : "flex-1 min-w-0"}`}
-          >
-            {children}
+          <div className="sm:p-3 w-full h-full">
+            <div
+              className={cn(
+                `${isMobileLayout ? "pt-16 flex-1" : "flex-1 min-w-0"}`,
+                "bg-white w-full h-full sm:rounded-xl sm:drop-shadow overflow-y-auto",
+              )}
+            >
+              {children}
+            </div>
           </div>
         </div>
       </>
diff --git a/src/components/dashboard/DashboardSidebar.tsx b/src/components/dashboard/DashboardSidebar.tsx
deleted file mode 100644
index 934735df..00000000
--- a/src/components/dashboard/DashboardSidebar.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useEffect, useState } from "react"
-
-import { getStorage, setStorage } from "~/lib/storage"
-
-export const DashboardSidebar = ({
-  children,
-}: {
-  children: (isOpen: boolean) => React.ReactNode
-}) => {
-  const [isOpen, setIsOpen] = useState(true)
-
-  useEffect(() => {
-    const storage = getStorage("sidebar")
-    if (storage) {
-      setIsOpen(storage.isOpen)
-    }
-  }, [])
-
-  useEffect(() => {
-    setStorage("sidebar", {
-      isOpen,
-    })
-  }, [isOpen])
-
-  return (
-    <div
-      className={`${
-        isOpen ? `w-sidebar` : "w-20"
-      } transition-[width] relative flex-shrink-0`}
-    >
-      <div
-        className={`${
-          isOpen ? `w-sidebar` : "w-20"
-        } transition-[width] fixed bg-slate-50 z-10 h-full flex flex-col`}
-      >
-        {children(isOpen)}
-        <div className="w-[1px] bg-border absolute top-0 right-0 bottom-0"></div>
-        <div
-          className="absolute top-5 -right-3 bg-accent rounded-full cursor-pointer text-white w-6 h-6"
-          onClick={() => setIsOpen(!isOpen)}
-        >
-          {isOpen ? (
-            <i className="icon-[mingcute--left-line] text-2xl inline-block w-6 h-6" />
-          ) : (
-            <i className="icon-[mingcute--right-line] text-2xl inline-block w-6 h-6" />
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}