diff --git a/frontend/components/navigation/sidebar/sidebar-item-with-icon.tsx b/frontend/components/navigation/sidebar/sidebar-item-with-icon.tsx
index ab7d614c..114c95fb 100644
--- a/frontend/components/navigation/sidebar/sidebar-item-with-icon.tsx
+++ b/frontend/components/navigation/sidebar/sidebar-item-with-icon.tsx
@@ -1,13 +1,19 @@
 import { LucideIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
 
 interface SidebarItemWithIconProps {
   Icon: LucideIcon;
   label: string;
+  categoryId: number;
 }
 
-const SidebarItemWithIcon = ({ Icon, label }: SidebarItemWithIconProps) => {
+const SidebarItemWithIcon = ({ Icon, label, categoryId }: SidebarItemWithIconProps) => {
+  const router = useRouter();
+
+  const onClickCategory = () => router.push(`/categories/${categoryId}`);
+
   return (
-    <div className="flex rounded px-2 py-1.5 hover:bg-muted-foreground/5 text-sm font-medium items-center">
+    <div onClick={onClickCategory} className="flex rounded px-2 py-1.5 hover:bg-muted-foreground/5 text-sm font-medium items-center">
       <Icon
         className="mr-3 text-muted-foreground"
         size={16}
diff --git a/frontend/components/navigation/sidebar/sidebar-other-topics.tsx b/frontend/components/navigation/sidebar/sidebar-other-topics.tsx
index 6bb3765e..f1d1f7cd 100644
--- a/frontend/components/navigation/sidebar/sidebar-other-topics.tsx
+++ b/frontend/components/navigation/sidebar/sidebar-other-topics.tsx
@@ -1,42 +1,34 @@
+"use client";
+
 import {
-  categoriesToDisplayName,
-  categoriesToIconsMap,
-  Category,
+  getIconFor,
 } from "@/types/categories";
 
 import SidebarItemWithIcon from "./sidebar-item-with-icon";
-
-// TODO: dynamically fetch
-const otherTopics = [
-  Category.SciTech,
-  Category.ArtsHumanities,
-  Category.Politics,
-  Category.Media,
-  Category.Environment,
-  Category.Economics,
-  Category.Sports,
-  Category.GenderEquality,
-  Category.Religion,
-  Category.SocietyCulture,
-];
+import { useEffect } from "react";
+import { getCategories } from "@/queries/category";
+import { useQuery } from "@tanstack/react-query";
 
 const SidebarOtherTopics = () => {
+  const { data: categories, isSuccess: isCategoriesSuccess } = useQuery(getCategories());
+
   return (
     <div className="flex flex-col space-y-2.5">
       <h1 className="text-sm font-medium text-muted-foreground/80 px-2">
         Other topics
       </h1>
       <div className="flex flex-col">
-        {otherTopics.map((category) => {
-          const categoryLabel = categoriesToDisplayName[category];
-          const categoryIcon = categoriesToIconsMap[category];
+        {
+        categories?.map((category) => {
+          const categoryIcon = getIconFor(category.name);
           return (
             <SidebarItemWithIcon
-              Icon={categoryIcon}
-              key={category}
-              label={categoryLabel}
+              Icon={categoryIcon} 
+              key={category.id} 
+              label={category.name} 
+              categoryId={category.id}
             />
-          );
+          )
         })}
       </div>
     </div>