diff --git a/app/blocks/sidebar/sidebar-01/app-sidebar.tsx b/app/blocks/sidebar/sidebar-01/app-sidebar.tsx
index 2fe0942e..54b6f5f7 100644
--- a/app/blocks/sidebar/sidebar-01/app-sidebar.tsx
+++ b/app/blocks/sidebar/sidebar-01/app-sidebar.tsx
@@ -76,7 +76,9 @@ export function AppSidebar(props: React.ComponentProps<typeof Sidebar>) {
           <Sidebar.Item icon={IconPersonAdd} href="#">
             Add New Member
           </Sidebar.Item>
-          <Sidebar.Item href="#">Manage Roles</Sidebar.Item>
+          <Sidebar.Item icon={IconCirclePerson} href="#">
+            Manage Roles
+          </Sidebar.Item>
         </Sidebar.Section>
       </Sidebar.Content>
       <Sidebar.Footer className="lg:flex lg:flex-row hidden items-center">
diff --git a/app/blocks/sidebar/sidebar-02/app-sidebar.tsx b/app/blocks/sidebar/sidebar-02/app-sidebar.tsx
index faeaf4e1..609b44a7 100644
--- a/app/blocks/sidebar/sidebar-02/app-sidebar.tsx
+++ b/app/blocks/sidebar/sidebar-02/app-sidebar.tsx
@@ -44,7 +44,7 @@ export function AppSidebar(props: React.ComponentProps<typeof Sidebar>) {
           <Sidebar.Item icon={IconDashboard} href="/blocks/sidebar/sidebar-01">
             Overview
           </Sidebar.Item>
-          <Sidebar.Item isCurrent icon={IconSettings} href="#">
+          <Sidebar.Item isCurrent icon={IconSettings} href="/blocks/sidebar/sidebar-02">
             Settings
           </Sidebar.Item>
           <Sidebar.Item icon={IconCreditCard} href="/blocks/sidebar/sidebar-03">
@@ -76,7 +76,9 @@ export function AppSidebar(props: React.ComponentProps<typeof Sidebar>) {
           <Sidebar.Item icon={IconPersonAdd} href="#">
             Add New Member
           </Sidebar.Item>
-          <Sidebar.Item href="#">Manage Roles</Sidebar.Item>
+          <Sidebar.Item icon={IconCirclePerson} href="#">
+            Manage Roles
+          </Sidebar.Item>
         </Sidebar.Section>
       </Sidebar.Content>
       <Sidebar.Footer className="lg:flex lg:flex-row hidden items-center">
diff --git a/app/blocks/sidebar/sidebar-03/app-sidebar.tsx b/app/blocks/sidebar/sidebar-03/app-sidebar.tsx
index 42806786..765365d7 100644
--- a/app/blocks/sidebar/sidebar-03/app-sidebar.tsx
+++ b/app/blocks/sidebar/sidebar-03/app-sidebar.tsx
@@ -41,13 +41,13 @@ export function AppSidebar(props: React.ComponentProps<typeof Sidebar>) {
       </Sidebar.Header>
       <Sidebar.Content>
         <Sidebar.Section>
-          <Sidebar.Item icon={IconDashboard} href="/blocks/sidebar/sidebar-02">
+          <Sidebar.Item icon={IconDashboard} href="/blocks/sidebar/sidebar-01">
             Overview
           </Sidebar.Item>
           <Sidebar.Item icon={IconSettings} href="/blocks/sidebar/sidebar-02">
             Settings
           </Sidebar.Item>
-          <Sidebar.Item isCurrent icon={IconCreditCard} href="#">
+          <Sidebar.Item isCurrent icon={IconCreditCard} href="/blocks/sidebar/sidebar-03">
             Billing
           </Sidebar.Item>
           <Sidebar.Item icon={IconEnvelope} href="#" badge="49.67K">
@@ -76,7 +76,9 @@ export function AppSidebar(props: React.ComponentProps<typeof Sidebar>) {
           <Sidebar.Item icon={IconPersonAdd} href="#">
             Add New Member
           </Sidebar.Item>
-          <Sidebar.Item href="#">Manage Roles</Sidebar.Item>
+          <Sidebar.Item icon={IconCirclePerson} href="#">
+            Manage Roles
+          </Sidebar.Item>
         </Sidebar.Section>
       </Sidebar.Content>
       <Sidebar.Footer className="lg:flex lg:flex-row hidden items-center">
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
index 25cf9efb..7b32d554 100644
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -289,7 +289,7 @@ const Item = ({ isCurrent, children, className, icon: Icon, ...props }: ItemProp
             <>
               {state === "collapsed" ? (
                 <Tooltip delay={0}>
-                  <Tooltip.Trigger>
+                  <Tooltip.Trigger className="focus:outline-none">
                     {<Icon data-slot="icon" />}
                     <span className="sr-only">{children as string}</span>
                   </Tooltip.Trigger>
@@ -376,8 +376,9 @@ const footer = tv({
   base: "flex flex-col mt-auto [&>section+section]:mt-2.5",
   variants: {
     collapsed: {
-      false:
-        "p-2 [&_[slot=menu-trigger]]:w-full [&_[slot=menu-trigger]]:justify-start [&_[slot=menu-trigger]]:flex [&_[slot=menu-trigger]]:items-center",
+      false: [
+        "p-2 [&_[slot=menu-trigger]]:w-full [&_[slot=menu-trigger]]:justify-start [&_[slot=menu-trigger]]:flex [&_[slot=menu-trigger]]:items-center"
+      ],
       true: "size-12 p-1 [&_[slot=menu-trigger]]:size-9 justify-center items-center"
     }
   }