diff --git a/src/components/frontend/page/style/sidebar.tsx b/src/components/frontend/page/style/sidebar.tsx
index 9df2261..e63f679 100644
--- a/src/components/frontend/page/style/sidebar.tsx
+++ b/src/components/frontend/page/style/sidebar.tsx
@@ -2,15 +2,15 @@ import { Link } from "@/lib/i18n";
 import { styleFonts, StyleKey } from "@/slugs";
 import { ALargeSmallIcon, BoldIcon, CircleDot, FeatherIcon, ItalicIcon, SquareDot, StarsIcon, UnderlineIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useSearchParams } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
 import { ClassNameValue } from "tailwind-merge";
 
-export const Sidebar =( )=>{    
+export const Sidebar =( )=>{   
+  const pathname = usePathname(); 
   let search = useSearchParams().toString();
   if(search) search = `?${search}`;
   
   const t = useTranslations();
-  const linkCls: ClassNameValue = "border w-full h-12 flex rounded-lg items-center gap-3 px-5 font-semibold mb-5";
 
   const i18nName=(slug: StyleKey)=>{
     switch(slug){ 
@@ -65,18 +65,19 @@ export const Sidebar =( )=>{
         return null;
     }
   } 
+  const linkCls: ClassNameValue = " w-full  flex rounded-lg items-center gap-y-0 gap-x-3 pl-3 mb-1 font-semibold py-2 hover:bg-secondary";
 
   return(
     <>
-      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-1 gap-x-3  md:flex-row">
-        <Link href={`/${search}`} className={linkCls}>
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-1 gap-x-3 md:flex-row">
+        <Link href={`/${search}`} className={`${linkCls} ${pathname === `/` ? "bg-secondary" : ""}`}>
           <span>{t('frontend.style.sidebar.all')}</span> 
         </Link>
         { Object.entries(styleFonts).map(([slug]) =>{ 
           const name = i18nName(slug as StyleKey); 
           if(!name) return;
           return(
-            <Link href={`/${slug}${search}`} key={slug} className={linkCls}>
+            <Link href={`/${slug}${search}`} key={slug} className={`${linkCls} ${pathname === `/${slug}` ? "bg-secondary" : ""}`}>
               <NavIcon slug={slug as StyleKey} />
               <span className="text-sm">{name}</span>
             </Link>