diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
index a4d0ab5..fc0ee05 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -3,7 +3,6 @@ import type { NextPage } from "next";
 const Portfolio: NextPage = () => {
   return (
     <div>
-      &lt;&gt;
       <section className="portfolio section" id="portfolio">
         <div className="container">
           <div className="row">
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
index 6c069e7..aa0a89a 100644
--- a/src/app/providers.tsx
+++ b/src/app/providers.tsx
@@ -5,7 +5,7 @@ import NextTopLoader from "nextjs-toploader";
 
 const Providers = ({ children }: { children: React.ReactNode }) => {
   return (
-    <ThemeProvider enableSystem={true}>
+    <ThemeProvider enableSystem>
       <NextTopLoader />
       {children}
     </ThemeProvider>
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
index ac79122..3847257 100644
--- a/src/components/sidebar/sidebar.tsx
+++ b/src/components/sidebar/sidebar.tsx
@@ -1,9 +1,18 @@
+"use client";
+
 import Link from "next/link";
+import { useState } from "react";
 
 const Sidebar = () => {
+  const [open, setOpen] = useState(false);
+
+  const handleOpen = () => {
+    setOpen(!open);
+  };
+
   return (
-    <aside className="aside">
-      <div className="nav-toggler">
+    <aside className={`aside ${open ? "open" : ""}`}>
+      <div onClick={handleOpen} className="nav-toggler"> 
         <span />
       </div>
       <div className="aside-inner">