diff --git a/frontend/public/images/icons/Action.webp b/frontend/public/images/icons/Action.webp
new file mode 100644
index 0000000..caf71e0
Binary files /dev/null and b/frontend/public/images/icons/Action.webp differ
diff --git a/frontend/public/images/icons/Horror.png b/frontend/public/images/icons/Horror.png
new file mode 100644
index 0000000..63928f7
Binary files /dev/null and b/frontend/public/images/icons/Horror.png differ
diff --git a/frontend/public/images/icons/Psychological.png b/frontend/public/images/icons/Psychological.png
new file mode 100644
index 0000000..9cd61a6
Binary files /dev/null and b/frontend/public/images/icons/Psychological.png differ
diff --git a/frontend/public/images/icons/R-18.png b/frontend/public/images/icons/R-18.png
new file mode 100644
index 0000000..20b6ad6
Binary files /dev/null and b/frontend/public/images/icons/R-18.png differ
diff --git a/frontend/public/images/icons/Shooter.png b/frontend/public/images/icons/Shooter.png
new file mode 100644
index 0000000..551d565
Binary files /dev/null and b/frontend/public/images/icons/Shooter.png differ
diff --git a/frontend/src/assets/styles/sidebar.css b/frontend/src/assets/styles/sidebar.css
index 02517f8..97459f0 100644
--- a/frontend/src/assets/styles/sidebar.css
+++ b/frontend/src/assets/styles/sidebar.css
@@ -10,4 +10,14 @@
     --sideBar-DarkBG: black;
     --sideBar-DarkText: white;
   }
+
+.style {
+  font-size: 2em;
+  font-weight: bold;
+}
+
+.category-style {
+  font-size: 1.75em;
+  font-weight: bold;
+}
   
\ No newline at end of file
diff --git a/frontend/src/components/Layout/Navbar.tsx b/frontend/src/components/Layout/Navbar.tsx
index 71ad8a0..1f5c46a 100644
--- a/frontend/src/components/Layout/Navbar.tsx
+++ b/frontend/src/components/Layout/Navbar.tsx
@@ -77,10 +77,10 @@ const Navbar: React.FC<NavbarProps> = ({
             extraClasses={`absolute ${showSideBar ? `fixed top-[20px] left-[20px] p-2 text-[1.5rem] text-white hover:text-white
           bg-black/30 hover:bg-purple-500/80 rounded-md border border-gray-300 hover:border-white h
           over:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all ` :
-                "top-[75px] left-[20px]"
+              "top-[75px] left-[20px]"
               } transition-all duration-300 z-[99]`}
           >
-            <SidebarIcon className="h-15 w-15 mr-1 z-[90]" />
+            <SidebarIcon className="top-[0.20em] left-[10em] mr-1 z-[90]" />
           </Button>
           <div
             className={`fixed top-0 left-0 w-[250px] h-screen bg-[var(--sideBar-LightBG)] text-[var(--sideBar-LightText)] z-[90] overflow-y-auto scrollbar-hide
diff --git a/frontend/src/components/Layout/Sidebar.tsx b/frontend/src/components/Layout/Sidebar.tsx
index f7dd449..9e5a1b1 100644
--- a/frontend/src/components/Layout/Sidebar.tsx
+++ b/frontend/src/components/Layout/Sidebar.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { SunMoon as SunMoonIcon} from "lucide-react"
+import { SunMoon as SunMoonIcon } from "lucide-react"
 import Theme from "./Theme";
 import "../../assets/styles/sidebar.css"
 
@@ -27,91 +27,64 @@ const Sidebar: React.FC<SideBarProps> = () => {
     setTriggerAnimation(false);  // Reset animation
     setTimeout(() => setTriggerAnimation(true), 0);  // Re-trigger animation
   };
+  const testStreamer: Record<string, string> = {
+    "Markiplier": "Slink1",
+    "Jacksepticeye": "Slink2",
+    "8-BitRyan": "Slink3",
+  };
 
-  return (<div id="sidebar" 
-    key={triggerAnimation ? 'burn-in' : 'reset'}
-    className={`fixed top-0 left-0 w-[250px] ${thisTheme
-      ? " bg-[var(--sideBar-LightBG)] text-[var(--sideBar-LightText)]"
-      : " bg-[var(--sideBar-DarkBG)] text-[var(--sideBar-DarkText)]"
-    } p-4 z-[90] h-screen overflow-y-auto pt-10
+  const testCategory: Record<string, {dummyLink: string; dummyImage: string} > = {
+    "Action": {dummyLink : "link1", dummyImage: "../../../images/icons/Action.webp"},
+    "Horror": {dummyLink : "link2", dummyImage: "../../../images/icons/Horror.png"},
+    "Psychological": {dummyLink : "link3", dummyImage: "../../../images/icons/Psychological.png"},
+    "Adult": {dummyLink : "link4", dummyImage: "../../../images/icons/R-18.png"},
+    "Shooter": {dummyLink : "link5", dummyImage: "../../../images/icons/Shooter.png"}
+  };
+
+  const shownStreamers = Object.entries(testStreamer).map(([dummyCategory, dummyLink]) => {
+    return (
+      <li key={dummyCategory}>
+        <a href={dummyLink}>{dummyCategory}</a>
+      </li>
+    );
+  });
+
+  const shownCategory = Object.entries(testCategory).map(([dummyCategory, {dummyLink, dummyImage}]) => {
+    return (
+      <li key={dummyCategory} className="flex items-center border border-7 border-black space-x-3 rounded-md p-0 text-center
+      hover:bg-[#800020] hover:scale-110 hover:shadow-[-1px_1.5px_10px_white] transition-all duration-250">
+        <img src={dummyImage} alt={dummyCategory} className="w-[2em] h-[2em] bg-white ml-[0.25em]"/>
+        <a href={dummyLink} className="pr-[7.5em] pt-[0.75em] pb-[0.75em]">{dummyCategory}</a>
+      </li>
+    );
+  });
+
+  return (
+    <>
+      <div id="sidebar"
+        key={triggerAnimation ? 'burn-in' : 'reset'}
+        className={`fixed top-0 left-0 w-[250px] ${thisTheme
+          ? " bg-[var(--sideBar-LightBG)] text-[var(--sideBar-LightText)]"
+          : " bg-[var(--sideBar-DarkBG)] text-[var(--sideBar-DarkText)]"
+          } p-4 z-[90] h-screen overflow-y-auto 
     transition-transform duration-500 ease-in-out animate-burnIn`}
-    onMouseLeave={() => setIsCursorOnSidebar(false)}
-    style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
-    <Theme onClick={handleTheme} />
-    <ul className="overflow-y-auto">
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>2</li>
-      <li>2</li>
-      <li>2</li>
-      <li>2</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>2</li>
-      <li>2</li>
-      <li>2</li>
-      <li>2</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>2</li>
-      <li>2</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>2</li>
-      <li>2</li>
-      <li>2</li>
-      <li>2</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>2</li>
-      <li>2</li>
-      <li>2</li>
-      <li>2</li>
-      <li>2</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-      <li>1</li>
-    </ul>
-  </div>);
+        onMouseLeave={() => setIsCursorOnSidebar(false)}
+        style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
+        <Theme onClick={handleTheme} />
+
+        <h1 className="style"> Followed </h1>
+        <ul>
+          {shownStreamers}
+        </ul>
+
+        <h1 className="category-style pt-[0.50em]"> Your Categories </h1>
+        <ul>
+          {shownCategory}
+        </ul>
+
+      </div>
+    </>
+  );
 };
 
 export default Sidebar;
diff --git a/frontend/src/components/Layout/Theme.tsx b/frontend/src/components/Layout/Theme.tsx
index 510c538..1299083 100644
--- a/frontend/src/components/Layout/Theme.tsx
+++ b/frontend/src/components/Layout/Theme.tsx
@@ -8,14 +8,16 @@ interface ThemeProps {
 
 const Theme: React.FC<ThemeProps> = ({ onClick }) => {
   return (
+    <div className='relative top-[0.20em] left-[10em]'>
     <button
       onClick={onClick}
       className="p-2 text-[1.5rem] flex items-center gap-2 text-white hover:text-purple-600 bg-black/30 hover:bg-black/80 rounded-md border border-gray-300 hover:border-purple-500 hover:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all"
     >
-      <SunMoonIcon
+      <SunMoonIcon size={27}
         className={`transition-transform duration-300 ease-in-out`}
       />
     </button>
+    </div>
   );
 };