diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index a1758b4..de10c22 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -44,30 +44,34 @@ export default function Sidebar({ className }: { className?: string }) {
   return (
     <div
       id="sidebar"
-      className={`bg-base-200 h-full w-64 xl:w-80 overflow-y-auto border-solid border border-base-200 border-r-neutral-content px-2 z-20 ${
+      className={`bg-base-200 h-full w-64 xl:w-80 overflow-y-auto border-solid border border-base-200 border-r-neutral-content p-2 z-20 ${
         className || ""
       }`}
     >
-      <div className="grid grid-cols-2 gap-1 mt-2">
-        <SidebarHighlightLink title={"Dashboard"}
-                              href={`/dashboard`}
-                              icon={"bi-house"}
-                              active={active === `/dashboard`}
+      <div className="grid grid-cols-2 gap-2">
+        <SidebarHighlightLink
+          title={"Dashboard"}
+          href={`/dashboard`}
+          icon={"bi-house"}
+          active={active === `/dashboard`}
         />
-        <SidebarHighlightLink title={"Pinned"}
-                              href={`/links/pinned`}
-                              icon={"bi-pin-angle"}
-                              active={active === `/links/pinned`}
+        <SidebarHighlightLink
+          title={"Pinned"}
+          href={`/links/pinned`}
+          icon={"bi-pin-angle"}
+          active={active === `/links/pinned`}
         />
-        <SidebarHighlightLink title={"All Links"}
-                              href={`/links`}
-                              icon={"bi-link-45deg"}
-                              active={active === `/links`}
+        <SidebarHighlightLink
+          title={"All Links"}
+          href={`/links`}
+          icon={"bi-link-45deg"}
+          active={active === `/links`}
         />
-        <SidebarHighlightLink title={"All Collections"}
-                              href={`/collections`}
-                              icon={"bi-folder2"}
-                              active={active === `/collections`}
+        <SidebarHighlightLink
+          title={"All Collections"}
+          href={`/collections`}
+          icon={"bi-folder2"}
+          active={active === `/collections`}
         />
       </div>
 
diff --git a/components/SidebarHighlightLink.tsx b/components/SidebarHighlightLink.tsx
index 339a0d0..d4796e8 100644
--- a/components/SidebarHighlightLink.tsx
+++ b/components/SidebarHighlightLink.tsx
@@ -1,26 +1,38 @@
 import Link from "next/link";
 
-export default function SidebarHighlightLink({ title, href, icon, active }: {
-  title: string,
-  href: string,
-  icon: string,
-  active?: boolean
+export default function SidebarHighlightLink({
+  title,
+  href,
+  icon,
+  active,
+}: {
+  title: string;
+  href: string;
+  icon: string;
+  active?: boolean;
 }) {
-
   return (
     <Link href={href}>
       <div
         className={`${
-          active || false ? "bg-primary/20" : "bg-white/5 hover:bg-neutral/20"
-        } duration-100 px-3 py-2 cursor-pointer gap-2 w-full rounded-lg capitalize`}
+          active || false
+            ? "bg-primary/20"
+            : "bg-neutral-content/20 hover:bg-neutral/20"
+        } duration-200 px-3 py-2 cursor-pointer gap-2 w-full rounded-lg capitalize`}
       >
-        <div className={"w-8 h-8 inline-flex items-center justify-center bg-white/5 rounded-full"}>
-          <i className={`${icon} text-primary text-xl drop-shadow`}></i>
+        <div
+          className={
+            "w-10 h-10 inline-flex items-center justify-center bg-black/10 dark:bg-white/5 rounded-full"
+          }
+        >
+          <i className={`${icon} text-primary text-2xl drop-shadow`}></i>
         </div>
         <div className={"mt-1"}>
-          <p className="truncate w-full text-xs sm:text-sm">{title}</p>
+          <p className="truncate w-full text-xs font-semibold xl:text-sm">
+            {title}
+          </p>
         </div>
       </div>
     </Link>
-  )
-}
\ No newline at end of file
+  );
+}