diff --git a/public/images/hero-bg.png b/public/images/hero-bg.png
deleted file mode 100644
index 3abdc78..0000000
Binary files a/public/images/hero-bg.png and /dev/null differ
diff --git a/public/images/plebdevs-banner.jpg b/public/images/plebdevs-banner.png
similarity index 100%
rename from public/images/plebdevs-banner.jpg
rename to public/images/plebdevs-banner.png
diff --git a/public/images/plebdevs-guy.jpg b/public/images/plebdevs-guy.png
similarity index 100%
rename from public/images/plebdevs-guy.jpg
rename to public/images/plebdevs-guy.png
diff --git a/src/components/banner/HeroBanner.js b/src/components/banner/HeroBanner.js
index 5b2f0e6..aa345f9 100644
--- a/src/components/banner/HeroBanner.js
+++ b/src/components/banner/HeroBanner.js
@@ -32,7 +32,7 @@ const HeroBanner = () => {
     return (
         <div className="relative flex justify-center items-center">
             <Image
-                src="/plebdevs-banner.jpg"
+                src="/images/plebdevs-banner.png"
                 alt="Banner"
                 width={1920}
                 height={1080}
diff --git a/src/components/navbar/Navbar.js b/src/components/navbar/Navbar.js
index e0fa823..94c86f9 100644
--- a/src/components/navbar/Navbar.js
+++ b/src/components/navbar/Navbar.js
@@ -20,7 +20,7 @@ const Navbar = () => {
             <div onClick={() => router.push('/')} className="flex flex-row items-center justify-center cursor-pointer">
                 <Image
                     alt="logo"
-                    src="/plebdevs-guy.jpg"
+                    src="/images/plebdevs-guy.png"
                     width={50}
                     height={50}
                     className="rounded-full mr-2 max-tab:hidden max-mob:hidden"
diff --git a/src/components/sidebar/Sidebar.js b/src/components/sidebar/Sidebar.js
index 2567dee..221c4ca 100644
--- a/src/components/sidebar/Sidebar.js
+++ b/src/components/sidebar/Sidebar.js
@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Accordion, AccordionTab } from 'primereact/accordion';
 import { useRouter } from 'next/router';
 import { useSession, signOut } from 'next-auth/react';
+import { Button } from 'primereact/button';
 import 'primeicons/primeicons.css';
 import styles from "./sidebar.module.css";
 
 const Sidebar = () => {
+    const [isExpanded, setIsExpanded] = useState(true);
     const router = useRouter();
 
     // Helper function to determine if the path matches the current route
@@ -15,78 +17,119 @@ const Sidebar = () => {
 
     const { data: session } = useSession();
 
+    useEffect(() => {
+        // Notify parent component about sidebar state change
+        if (typeof window !== 'undefined') {
+            window.dispatchEvent(new CustomEvent('sidebarToggle', { detail: { isExpanded } }));
+        }
+    }, [isExpanded]);
+
+    const toggleSidebar = () => {
+        setIsExpanded(!isExpanded);
+    };
+
     return (
-        <div className='max-sidebar:hidden w-[14vw] bg-gray-800 p-2 fixed h-[100%] flex flex-col'>
+        <div className={`max-sidebar:hidden bg-gray-800 p-2 fixed h-[100%] flex flex-col transition-all duration-300 ease-in-out ${isExpanded ? 'w-[14vw]' : 'w-[50px]'}`}>
+            <Button
+                onClick={toggleSidebar}
+                size='small' 
+                className={`p-0 px-2 mt-1 w-fit ${isExpanded ? 'self-end' : 'self-center'}`}
+                outlined
+                icon={<i className={`pi ${isExpanded ? 'pi-chevron-left' : 'pi-chevron-right'} text-xs`} />}
+            >
+            </Button>
             <div className="flex-grow overflow-y-auto">
-                <div onClick={() => router.push('/')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}>
-                    <i className="pi pi-home pl-5" /> <p className="pl-2 rounded-md font-bold text-lg">Home</p>
-                </div>
-                <Accordion activeIndex={0} className={styles['p-accordion']} style={{ marginBottom: '0px', paddingBottom: '0px' }}>
-                    <AccordionTab
-                        pt={{
-                            headerAction: ({ context }) => ({
-                                className: `hover:bg-gray-700 rounded-lg ${isActive('/content') || router.pathname === '/content' ? 'bg-gray-700' : ''} ${styles['p-accordion-header-link']}`
-                            }),
-                            content: styles['p-accordion-content'],
-                            header: 'text-lg'
-                        }}
-                        header={'Content'}>
-                        <div onClick={() => router.push('/content?tag=all')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content?tag=all') ? 'bg-gray-700' : ''}`}>
-                            <p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-eye text-sm pr-1"></i> All</p>
+                {isExpanded ? (
+                    <div className="flex-grow overflow-y-auto">
+                        <div onClick={() => router.push('/')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}>
+                            <i className="pi pi-home pl-5" /> <p className="pl-2 rounded-md font-bold text-lg">Home</p>
                         </div>
-                        <div onClick={() => router.push('/content?tag=courses')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content?tag=courses') ? 'bg-gray-700' : ''}`}>
-                            <p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-desktop text-sm pr-1"></i> Courses</p>
+                        <Accordion activeIndex={0} className={styles['p-accordion']} style={{ marginBottom: '0px', paddingBottom: '0px' }}>
+                            <AccordionTab
+                                pt={{
+                                    headerAction: ({ context }) => ({
+                                        className: `hover:bg-gray-700 rounded-lg ${isActive('/content') || router.pathname === '/content' ? 'bg-gray-700' : ''} ${styles['p-accordion-header-link']}`
+                                    }),
+                                    content: styles['p-accordion-content'],
+                                    header: 'text-lg'
+                                }}
+                                header={'Content'}>
+                                <div onClick={() => router.push('/content?tag=all')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content?tag=all') ? 'bg-gray-700' : ''}`}>
+                                    <p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-eye text-sm pr-1"></i> All</p>
+                                </div>
+                                <div onClick={() => router.push('/content?tag=courses')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content?tag=courses') ? 'bg-gray-700' : ''}`}>
+                                    <p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-desktop text-sm pr-1"></i> Courses</p>
+                                </div>
+                                <div onClick={() => router.push('/content?tag=workshops')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content?tag=workshops') ? 'bg-gray-700' : ''}`}>
+                                    <p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-video text-sm pr-1"></i> Workshops</p>
+                                </div>
+                                <div onClick={() => router.push('/content?tag=resources')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content?tag=resources') ? 'bg-gray-700' : ''}`}>
+                                    <p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-file text-sm pr-1"></i> Resources</p>
+                                </div>
+                            </AccordionTab>
+                        </Accordion>
+                        <div onClick={() => router.push('/create')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/create') ? 'bg-gray-700' : ''}`}>
+                            <i className="pi pi-plus pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Create</p>
                         </div>
-                        <div onClick={() => router.push('/content?tag=workshops')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content?tag=workshops') ? 'bg-gray-700' : ''}`}>
-                            <p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-video text-sm pr-1"></i> Workshops</p>
+                        <div onClick={() => session ? router.push('/profile?tab=subscribe') : router.push('/auth/signin')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/profile?tab=subscribe') ? 'bg-gray-700' : ''}`}>
+                            <i className="pi pi-star pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Subscribe</p>
                         </div>
-                        <div onClick={() => router.push('/content?tag=resources')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content?tag=resources') ? 'bg-gray-700' : ''}`}>
-                            <p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-file text-sm pr-1"></i> Resources</p>
-                        </div>
-                    </AccordionTab>
-                </Accordion>
-                <div onClick={() => router.push('/create')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/create') ? 'bg-gray-700' : ''}`}>
-                    <i className="pi pi-plus pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Create</p>
-                </div>
-                <div onClick={() => session ? router.push('/profile?tab=subscribe') : router.push('/auth/signin')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/profile?tab=subscribe') ? 'bg-gray-700' : ''}`}>
-                    <i className="pi pi-star pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Subscribe</p>
-                </div>
-                <Accordion activeIndex={0} className={styles['p-accordion']}>
-                    <AccordionTab
-                        pt={{
-                            headerAction: ({ context }) => ({
-                                className: `hover:bg-gray-700 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''} ${styles['p-accordion-header-link']}`
-                            }),
-                            content: styles['p-accordion-content'],
-                            header: 'text-lg'
-                        }}
-                        header={"Community"}>
-                        <div onClick={() => router.push('/feed?channel=global')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=global') ? 'bg-gray-700' : ''}`}>
-                            <p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> global</p>
-                        </div>
-                        <div onClick={() => router.push('/feed?channel=nostr')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=nostr') ? 'bg-gray-700' : ''}`}>
-                            <p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> nostr</p>
-                        </div>
-                        <div onClick={() => router.push('/feed?channel=discord')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=discord') ? 'bg-gray-700' : ''}`}>
-                            <p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> discord</p>
-                        </div>
-                        <div onClick={() => router.push('/feed?channel=stackernews')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=stackernews') ? 'bg-gray-700' : ''}`}>
-                            <p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> stackernews</p>
-                        </div>
-                    </AccordionTab>
-                </Accordion>
+                        <Accordion activeIndex={0} className={styles['p-accordion']}>
+                            <AccordionTab
+                                pt={{
+                                    headerAction: ({ context }) => ({
+                                        className: `hover:bg-gray-700 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''} ${styles['p-accordion-header-link']}`
+                                    }),
+                                    content: styles['p-accordion-content'],
+                                    header: 'text-lg'
+                                }}
+                                header={"Community"}>
+                                <div onClick={() => router.push('/feed?channel=global')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=global') ? 'bg-gray-700' : ''}`}>
+                                    <p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> global</p>
+                                </div>
+                                <div onClick={() => router.push('/feed?channel=nostr')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=nostr') ? 'bg-gray-700' : ''}`}>
+                                    <p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> nostr</p>
+                                </div>
+                                <div onClick={() => router.push('/feed?channel=discord')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=discord') ? 'bg-gray-700' : ''}`}>
+                                    <p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> discord</p>
+                                </div>
+                                <div onClick={() => router.push('/feed?channel=stackernews')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=stackernews') ? 'bg-gray-700' : ''}`}>
+                                    <p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> stackernews</p>
+                                </div>
+                            </AccordionTab>
+                        </Accordion>
+                    </div>
+                ) : (
+                    // Collapsed sidebar content (icons only)
+                    <div className="flex flex-col items-center">
+                        <i className="pi pi-home my-4 cursor-pointer" onClick={() => router.push('/')} />
+                        <i className="pi pi-list my-4 cursor-pointer" onClick={() => router.push('/content')} />
+                        <i className="pi pi-plus my-4 cursor-pointer" onClick={() => router.push('/create')} />
+                        <i className="pi pi-star my-4 cursor-pointer" onClick={() => session ? router.push('/profile?tab=subscribe') : router.push('/auth/signin')} />
+                        <i className="pi pi-users my-4 cursor-pointer" onClick={() => router.push('/feed')} />
+                    </div>
+                )}
             </div>
             <div className='mt-auto'>
-                <div onClick={() => router.push('/profile?tab=settings')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/profile?tab=settings') ? 'bg-gray-700' : ''}`}>
-                    <i className="pi pi-cog pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Settings</p>
-                </div>
-                <div onClick={() => session ? signOut() : router.push('/auth/signin')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/auth/signin') ? 'bg-gray-700' : ''}`}>
-                    <i className={`pi ${session ? 'pi-sign-out' : 'pi-sign-in'} pl-5 text-sm`} /> <p className="pl-2 rounded-md font-bold text-lg">{session ? 'Logout' : 'Login'}</p>
-                </div>
-                {/* todo: have to add this extra button to push the sidebar to the right space but it doesnt seem to cause any negative side effects? */}
-                <div onClick={signOut} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg`}>
-                    <i className="pi pi-sign-out pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Logout</p>
-                </div>
+                {isExpanded ? (
+                    <div className='mt-auto'>
+                        <div onClick={() => router.push('/profile?tab=settings')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/profile?tab=settings') ? 'bg-gray-700' : ''}`}>
+                            <i className="pi pi-cog pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Settings</p>
+                        </div>
+                        <div onClick={() => session ? signOut() : router.push('/auth/signin')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/auth/signin') ? 'bg-gray-700' : ''}`}>
+                            <i className={`pi ${session ? 'pi-sign-out' : 'pi-sign-in'} pl-5 text-sm`} /> <p className="pl-2 rounded-md font-bold text-lg">{session ? 'Logout' : 'Login'}</p>
+                        </div>
+                        {/* todo: have to add this extra button to push the sidebar to the right space but it doesnt seem to cause any negative side effects? */}
+                        <div onClick={signOut} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg`}>
+                            <i className="pi pi-sign-out pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Logout</p>
+                        </div>
+                    </div>
+                ) : (
+                    <div className="flex flex-col items-center">
+                        <i className="pi pi-cog my-4 cursor-pointer" onClick={() => router.push('/profile?tab=settings')} />
+                        <i className={`pi ${session ? 'pi-sign-out' : 'pi-sign-in'} my-4 cursor-pointer`} onClick={() => session ? signOut() : router.push('/auth/signin')} />
+                    </div>
+                )}
             </div>
         </div>
     );
diff --git a/src/pages/_app.js b/src/pages/_app.js
index cdb071f..9d45260 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -1,5 +1,5 @@
 import { PrimeReactProvider } from 'primereact/api';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import Navbar from '@/components/navbar/Navbar';
 import { ToastProvider } from '@/hooks/useToast';
 import { SessionProvider } from "next-auth/react"
@@ -24,28 +24,41 @@ const queryClient = new QueryClient()
 export default function MyApp({
     Component, pageProps: { session, ...pageProps }
 }) {
+    const [sidebarExpanded, setSidebarExpanded] = useState(true);
+
+    useEffect(() => {
+        const handleSidebarToggle = (event) => {
+            setSidebarExpanded(event.detail.isExpanded);
+        };
+
+        window.addEventListener('sidebarToggle', handleSidebarToggle);
+
+        return () => {
+            window.removeEventListener('sidebarToggle', handleSidebarToggle);
+        };
+    }, []);
+
     return (
         <PrimeReactProvider>
             <SessionProvider session={session}>
                 <NDKProvider>
                     <QueryClientProvider client={queryClient}>
-                    <ToastProvider>
-                        <Layout>
-                            <div className="flex flex-col min-h-screen">
-                                <Navbar />
-                                <div className='flex'>
-                                <Sidebar />
-                                <div className='max-w-[100vw] pl-[14vw] max-sidebar:pl-0 pb-16 max-sidebar:pb-20'>
-                                {/* <div className='max-w-[100vw]'> */}
-                                    <Component {...pageProps} />
+                        <ToastProvider>
+                            <Layout>
+                                <div className="flex flex-col min-h-screen">
+                                    <Navbar />
+                                    <div className='flex'>
+                                        <Sidebar />
+                                        <div className='max-w-[100vw] pl-[14vw] max-sidebar:pl-0 pb-16 max-sidebar:pb-20'>
+                                            <Component {...pageProps} />
+                                        </div>
+                                    </div>
+                                    <BottomBar />
                                 </div>
-                                </div>
-                                <BottomBar />
-                            </div>
-                        </Layout>
-                    </ToastProvider>
-                </QueryClientProvider>
-            </NDKProvider>
+                            </Layout>
+                        </ToastProvider>
+                    </QueryClientProvider>
+                </NDKProvider>
             </SessionProvider>
         </PrimeReactProvider>
     );
diff --git a/src/styles/globals.css b/src/styles/globals.css
index f3f7026..178aa1d 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -136,4 +136,5 @@ code {
 .hljs-type,
 .hljs-addition {
   color: #ce9178;
-}
\ No newline at end of file
+}
+