diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 70122f2e..f86b758c 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { Link } from "react-router-dom";
+import type React from "react"
+import { Link } from "react-router-dom"
 import {
   SidebarContainer,
   SidebarTitle,
@@ -10,44 +10,51 @@ import {
   HelperIcon,
   HelperText,
   DividerLine,
-} from "../styles/components/Sidebar";
-import { BulbOutlined } from "@ant-design/icons";
+  HamburgerButton,
+} from "../styles/components/Sidebar"
+import { BulbOutlined, MenuOutlined } from "@ant-design/icons"
 
 interface SidebarProps {
-  steps: { title: string; link: string }[];
+  steps: { title: string; link: string }[]
+  isOpen: boolean
+  toggleSidebar: () => void
 }
-const Sidebar: React.FC<SidebarProps> = ({ steps }) => {
+
+const Sidebar: React.FC<SidebarProps> = ({ steps, isOpen, toggleSidebar }) => {
   return (
     <SidebarContainer>
-      <SidebarTitle>Learning Pathway</SidebarTitle>
-      <SidebarList>
-        {steps.map((step, index) => (
-          <SidebarListItem key={index}>
-            <SidebarLink
-              to={step.link}
-              className={({ isActive }) => (isActive ? "active" : "")}
-            >
-              {step.title}
-            </SidebarLink>
-          </SidebarListItem>
-        ))}
-      </SidebarList>
-      <DividerLine />
-      <HelperBox>
-        <HelperIcon>
-          <BulbOutlined />
-        </HelperIcon>
-        <HelperText>
-          Welcome to the Learning Pathway! Use the sidebar to follow the guide.
-          Open the {" "}
-          <Link to="/" target="_blank" rel="noopener noreferrer">
-            Template Playground
-          </Link>{" "}
-          in another tab to experiment as you learn.
-        </HelperText>
-      </HelperBox>
+      <HamburgerButton onClick={toggleSidebar}>
+        <MenuOutlined />
+      </HamburgerButton>
+      {isOpen && (
+        <>
+          <SidebarTitle>Learning Pathway</SidebarTitle>
+          <SidebarList>
+            {steps.map((step, index) => (
+              <SidebarListItem key={index}>
+                <SidebarLink to={step.link} className={({ isActive }) => (isActive ? "active" : "")}>
+                  {step.title}
+                </SidebarLink>
+              </SidebarListItem>
+            ))}
+          </SidebarList>
+          <DividerLine />
+          <HelperBox>
+            <HelperIcon>
+              <BulbOutlined />
+            </HelperIcon>
+            <HelperText>
+              Welcome to the Learning Pathway! Use the sidebar to follow the guide. Open the{" "}
+              <Link to="/" target="_blank" rel="noopener noreferrer">
+                Template Playground
+              </Link>{" "}
+              in another tab to experiment as you learn.
+            </HelperText>
+          </HelperBox>
+        </>
+      )}
     </SidebarContainer>
-  );
-};
+  )
+}
 
-export default Sidebar;
\ No newline at end of file
+export default Sidebar
\ No newline at end of file
diff --git a/src/pages/LearnNow.tsx b/src/pages/LearnNow.tsx
index 594a128c..6dac2935 100644
--- a/src/pages/LearnNow.tsx
+++ b/src/pages/LearnNow.tsx
@@ -1,20 +1,29 @@
-import React from "react";
-import { Outlet } from "react-router-dom";
-import Sidebar from "../components/Sidebar";
-import { LearnNowContainer, SidebarContainer, ContentContainer } from "../styles/pages/LearnNow";
-import { steps } from "../constants/learningSteps/steps";
+"use client"
+
+import type React from "react"
+import { useState } from "react"
+import { Outlet } from "react-router-dom"
+import Sidebar from "../components/Sidebar"
+import { LearnNowContainer, SidebarContainer, ContentContainer } from "../styles/pages/LearnNow"
+import { steps } from "../constants/learningSteps/steps"
 
 const LearnNow: React.FC = () => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true)
+
+  const toggleSidebar = () => {
+    setIsSidebarOpen(!isSidebarOpen)
+  }
+
   return (
     <LearnNowContainer>
-      <SidebarContainer>
-        <Sidebar steps={steps} />
+      <SidebarContainer isOpen={isSidebarOpen}>
+        <Sidebar steps={steps} isOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
       </SidebarContainer>
-      <ContentContainer>
+      <ContentContainer isSidebarOpen={isSidebarOpen}>
         <Outlet />
       </ContentContainer>
     </LearnNowContainer>
-  );
-};
+  )
+}
 
-export default LearnNow;
+export default LearnNow
diff --git a/src/styles/components/Sidebar.ts b/src/styles/components/Sidebar.ts
index 81136a41..fec0b9ec 100644
--- a/src/styles/components/Sidebar.ts
+++ b/src/styles/components/Sidebar.ts
@@ -1,15 +1,16 @@
 import styled from "styled-components";
 import { NavLink } from "react-router-dom";
 
-export const SidebarContainer = styled.div`
-  width: 260px;
+export const SidebarContainer = styled.div<{ isOpen?: boolean }>`
+  width: 100%;
+  height: 100%;
   background-color: var(--bg-color) !important;
   padding: 1rem;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
   position: relative;
   overflow-y: auto;
   border-right: 1px solid #ddd;
+  transition: all 0.3s ease;
+  
   @media (max-width: 768px) {
     width: 100%;
     height: auto;
@@ -21,13 +22,18 @@ export const SidebarTitle = styled.h2`
   font-size: 1.2rem;
   font-weight: 500;
   margin-bottom: 1rem;
+  margin-top: 2.5rem;
   color: var(--text-color) !important;
+  opacity: 1;
+  transition: opacity 0.3s ease;
 `;
 
 export const SidebarList = styled.ul`
   list-style: none;
   padding: 0;
   margin: 0;
+  opacity: 1;
+  transition: opacity 0.3s ease;
 `;
 
 export const SidebarListItem = styled.li`
@@ -98,4 +104,27 @@ export const DividerLine = styled.div`
   height: 1px;
   background-color: #ddd;
   margin: 7rem 0 1rem 0;
+`;
+
+export const HamburgerButton = styled.button<{ isOpen?: boolean }>`
+  background: none;
+  border: none;
+  color: var(--text-color);
+  font-size: 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 10px;
+  right: ${props => props.isOpen ? "220px" : "20px"};
+  z-index: 100;
+  width: 40px;
+  height: 40px;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+  &:hover {
+    color: #19c6c7;
+    background-color: rgba(25, 198, 199, 0.1);
+  }
 `;
\ No newline at end of file
diff --git a/src/styles/pages/LearnNow.ts b/src/styles/pages/LearnNow.ts
index fd674a52..0ba9ebe5 100644
--- a/src/styles/pages/LearnNow.ts
+++ b/src/styles/pages/LearnNow.ts
@@ -1,22 +1,28 @@
-import styled from "styled-components";
+import styled from "styled-components"
 
 export const LearnNowContainer = styled.div`
   display: flex;
-`;
+`
 
-export const SidebarContainer = styled.div`
-  width: 250px;
+export const SidebarContainer = styled.div<{ isOpen?: boolean }>`
+  width: ${(props) => (props.isOpen ? "250px" : "60px")};
   background-color: var(--bg-color) !important; 
   padding: 0;
   border-right: 1px solid var(--border-color) !important;
+  transition: width 0.3s ease;
+  overflow: hidden;
 
   h2 {
     margin-top: 0;
+    opacity: ${(props) => (props.isOpen ? "1" : "0")};
+    transition: opacity 0.2s ease;
   }
 
   ul {
     list-style: none;
     padding: 0;
+    opacity: ${(props) => (props.isOpen ? "1" : "0")};
+    transition: opacity 0.2s ease;
   }
 
   li {
@@ -27,11 +33,13 @@ export const SidebarContainer = styled.div`
     text-decoration: none;
     color: var(--text-color) !important; 
   }
-`;
+`
 
-export const ContentContainer = styled.div`
+export const ContentContainer = styled.div<{ isSidebarOpen?: boolean }>`
   flex: 1;
   padding: 20px;
   background-color: var(--bg-color) !important; 
   color: var(--text-color) !important;
-`;
+  margin-left: ${(props) => (props.isSidebarOpen ? "0" : "-190px")};
+  transition: margin-left 0.3s ease;
+`