diff --git a/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx b/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
index 447f34c..619c65e 100644
--- a/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
+++ b/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
@@ -37,9 +37,9 @@ export default function ProjectCardMini({ project, onClick }: Props) {
                 {/* <span className="chip-small bg-warning-50 text-yellow-700 font-light text-body5 py-[3px] px-10"> <MdLocalFireDepartment className='inline-block text-fire transform text-body4 align-middle' /> {numberFormatter(project.votes_count)} </span> */}
             </div>
             {/* <VoteButton votes={project.votes_count} direction='vertical' dense onVote={vote}></VoteButton> */}
-            <div className="flex flex-col text-gray-500 items-center">
-                <MdLocalFireDepartment className="text-gray-400" />
-                <span>{numberFormatter(project.votes_count)}</span>
+            <div className="flex flex-col text-gray-400 items-center">
+                <MdLocalFireDepartment />
+                <span className="text-body6">{numberFormatter(project.votes_count)}</span>
             </div>
         </div>
     );
diff --git a/src/features/Projects/pages/ExplorePage/Categories/Categories.tsx b/src/features/Projects/pages/ExplorePage/Categories/Categories.tsx
index e025fc6..ab13292 100644
--- a/src/features/Projects/pages/ExplorePage/Categories/Categories.tsx
+++ b/src/features/Projects/pages/ExplorePage/Categories/Categories.tsx
@@ -1,15 +1,26 @@
 import { useQuery } from '@apollo/client';
 import Badge from 'src/Components/Badge/Badge'
 import Slider from 'src/Components/Slider/Slider'
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { useAllCategoriesQuery } from 'src/graphql';
 
+const colors = [
+    '#FDF2F8',
+    '#F5F3FF',
+    '#FEFCE8',
+    '#F0FDF4',
+    '#EFF6FF',
+    '#FFFBEB',
+    '#FEF2F2',
+    '#FDF2F8',
+    '#FFF7ED',
+    '#F1F5F9'
+]
 
 export default function Categories() {
 
     const { data, loading } = useAllCategoriesQuery();
     const navigate = useNavigate();
-
     if (loading || !data)
         return <div className="flex gap-12">
             {Array(5).fill(0).map((_, idx) =>
@@ -20,8 +31,13 @@ export default function Categories() {
 
     return (
         <Slider>
-            {data?.allCategories.map(category =>
-                <Badge key={category.id} onClick={() => navigate(`/category/${category.id}`)}>{category.title}</Badge>
+            {data?.allCategories.map((category, idx) =>
+                <button
+                    key={category.id}
+                    onClick={() => navigate(`/products/category/${category.id}`)}
+                    className=' block p-16 rounded-16 hover:bg-gray-100 active:bg-gray-200 active:scale-90 transition-transform'
+                    style={{ backgroundColor: colors[idx % colors.length] }}
+                >{category.icon} {category.title}</button>
             )}
         </Slider>
     )
diff --git a/src/features/Projects/pages/ExplorePage/Categories/allCategories.graphql b/src/features/Projects/pages/ExplorePage/Categories/allCategories.graphql
index b4f38e8..718682c 100644
--- a/src/features/Projects/pages/ExplorePage/Categories/allCategories.graphql
+++ b/src/features/Projects/pages/ExplorePage/Categories/allCategories.graphql
@@ -2,5 +2,6 @@ query AllCategories {
   allCategories {
     id
     title
+    icon
   }
 }
diff --git a/src/features/Projects/pages/ExplorePage/ExplorePage.tsx b/src/features/Projects/pages/ExplorePage/ExplorePage.tsx
index 6652a34..fab2765 100644
--- a/src/features/Projects/pages/ExplorePage/ExplorePage.tsx
+++ b/src/features/Projects/pages/ExplorePage/ExplorePage.tsx
@@ -1,6 +1,7 @@
 import Header from "./Header/Header";
 import ProjectsSection from "./ProjectsSection/ProjectsSection";
 import { Helmet } from "react-helmet";
+import Categories from "./Categories/Categories";
 
 
 export default function ExplorePage() {
@@ -14,9 +15,9 @@ export default function ExplorePage() {
 
                 <Header />
 
-                {/* <div className="my-40 px-32">
-                <Categories />
-            </div> */}
+                <div className="my-32 ">
+                    <Categories />
+                </div>
                 <div className="w-full overflow-hidden">
                     <ProjectsSection />
                 </div>
diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx
index 0bb9984..0c5282b 100644
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -421,7 +421,7 @@ export type CategoryPageQuery = { __typename?: 'Query', projectsByCategory: Arra
 export type AllCategoriesQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type AllCategoriesQuery = { __typename?: 'Query', allCategories: Array<{ __typename?: 'Category', id: number, title: string }> };
+export type AllCategoriesQuery = { __typename?: 'Query', allCategories: Array<{ __typename?: 'Category', id: number, title: string, icon: string | null }> };
 
 export type ExploreProjectsQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -1107,6 +1107,7 @@ export const AllCategoriesDocument = gql`
   allCategories {
     id
     title
+    icon
   }
 }
     `;