diff --git a/src/components/content/carousels/GenericCarousel.js b/src/components/content/carousels/GenericCarousel.js
index 7de5303..383217e 100644
--- a/src/components/content/carousels/GenericCarousel.js
+++ b/src/components/content/carousels/GenericCarousel.js
@@ -20,7 +20,7 @@ const responsiveOptions = [
     }
 ];
 
-export default function GenericCarousel({items, selectedTopic}) {
+export default function GenericCarousel({items, selectedTopic, title}) {
     const [carousels, setCarousels] = useState([]);
 
     useEffect(() => {
@@ -35,16 +35,9 @@ export default function GenericCarousel({items, selectedTopic}) {
                 itemsPerCarousel = 1;
             }
 
-            const filteredItems = selectedTopic === 'All' 
-                ? items 
-                : items.filter(item => 
-                    item.topics && 
-                    (item.topics.includes(selectedTopic) || item.type === selectedTopic.toLowerCase())
-                );
-
             const newCarousels = [];
-            for (let i = 0; i < filteredItems.length; i += itemsPerCarousel) {
-                newCarousels.push(filteredItems.slice(i, i + itemsPerCarousel));
+            for (let i = 0; i < items.length; i += itemsPerCarousel) {
+                newCarousels.push(items.slice(i, i + itemsPerCarousel));
             }
             setCarousels(newCarousels);
         };
@@ -55,7 +48,8 @@ export default function GenericCarousel({items, selectedTopic}) {
         return () => {
             window.removeEventListener('resize', handleResize);
         };
-    }, [items, selectedTopic]);
+    }, [items]);
+
     return (
         <>
             {carousels.map((carouselItems, index) => (
diff --git a/src/components/forms/course/CourseForm.js b/src/components/forms/course/CourseForm.js
index fd13dd0..fb26571 100644
--- a/src/components/forms/course/CourseForm.js
+++ b/src/components/forms/course/CourseForm.js
@@ -52,6 +52,10 @@ const CourseForm = ({ draft = null }) => {
         console.log('allContent', allContent);
     }, [allContent]);
 
+    useEffect(() => {
+        console.log('fasfsa', workshops)
+    }, [workshops])
+
     useEffect(() => {
         if (!resourcesLoading && !workshopsLoading && !draftsLoading) {
             let combinedContent = [];
@@ -59,6 +63,7 @@ const CourseForm = ({ draft = null }) => {
                 combinedContent = [...combinedContent, ...resources];
             }
             if (workshops) {
+                console.log('workssdfsdfdsf', workshops)
                 combinedContent = [...combinedContent, ...workshops];
             }
             if (drafts) {
diff --git a/src/components/forms/course/LessonSelector.js b/src/components/forms/course/LessonSelector.js
index 685fdaa..ae4398d 100644
--- a/src/components/forms/course/LessonSelector.js
+++ b/src/components/forms/course/LessonSelector.js
@@ -45,6 +45,8 @@ const LessonSelector = ({ isPaidCourse, lessons, setLessons, allContent, onNewRe
                 }
             });
 
+        console.log('filtered content', filteredContent)
+
         const draftResourceOptions = filteredContent.filter(content => content?.topics.includes('resource') && !content.kind).map(content => ({
             label: content.title,
             value: content
@@ -60,7 +62,7 @@ const LessonSelector = ({ isPaidCourse, lessons, setLessons, allContent, onNewRe
             value: content
         }));
 
-        const workshopOptions = filteredContent.filter(content => content?.topics.includes('workshop') && content.kind).map(content => ({
+        const workshopOptions = filteredContent.filter(content => content?.type === "workshop" && content.kind).map(content => ({
             label: content.title,
             value: content
         }));
diff --git a/src/components/sidebar/Sidebar.js b/src/components/sidebar/Sidebar.js
index ed9a5f1..5d695cc 100644
--- a/src/components/sidebar/Sidebar.js
+++ b/src/components/sidebar/Sidebar.js
@@ -10,26 +10,47 @@ const Sidebar = () => {
 
     // Helper function to determine if the path matches the current route
     const isActive = (path) => {
-        const pathWithQuery = router.pathname + router.asPath.split(router.pathname)[1];
-        return pathWithQuery === path;
+        return router.asPath === path;
     };
 
     const { data: session } = useSession();
 
+    const header = (text) => {
+        return <span onClick={() => router.push('/content')}>{text}</span>
+    };
+
     return (
-        <div className='max-sidebar:hidden w-[13vw] bg-gray-800 p-2 fixed h-[100%] flex flex-col'>
+        <div className='max-sidebar:hidden w-[14vw] bg-gray-800 p-2 fixed h-[100%] flex flex-col'>
             <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">Home</p>
-                </div>
-                <div onClick={() => router.push('/content')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content') ? 'bg-gray-700' : ''}`}>
-                    <i className="pi pi-video pl-5" /> <p className="pl-2 rounded-md font-bold">Content</p>
+                    <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={header('Content')}>
+                        <div onClick={() => router.push('/content?tag=courses')} className={`w-full cursor-pointer py-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" /> <p className="pl-2 rounded-md font-bold">Create</p>
+                    <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" /> <p className="pl-2 rounded-md font-bold">Subscribe</p>
+                    <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 
@@ -37,34 +58,35 @@ const Sidebar = () => {
                             headerAction: ({ context }) => ({
                                 className: `hover:bg-gray-700 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''} ${styles['p-accordion-header-link']}`
                             }),
-                            content: styles['p-accordion-content']
+                            content: styles['p-accordion-content'],
+                            header: 'text-lg'
                         }}
                         header={"Community"}>
                         <div onClick={() => router.push('/feed?channel=global')} className={`w-full cursor-pointer py-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=global') ? 'bg-gray-700' : ''}`}>
-                            <p className="pl-3 rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> global</p>
+                            <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"><i className="pi pi-hashtag text-sm"></i> nostr</p>
+                            <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"><i className="pi pi-hashtag text-sm"></i> discord</p>
+                            <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"><i className="pi pi-hashtag text-sm"></i> stackernews</p>
+                            <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>
             <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" /> <p className="pl-2 rounded-md font-bold">Settings</p>
+                    <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`}>
-                    <i className={`pi ${session ? 'pi-sign-out' : 'pi-sign-in'} pl-5`} /> <p className="pl-2 rounded-md font-bold">{session ? 'Logout' : 'Login'}</p>
+                <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" /> <p className="pl-2 rounded-md font-bold">Logout</p>
+                    <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>
diff --git a/src/components/sidebar/sidebar.module.css b/src/components/sidebar/sidebar.module.css
index af22992..fa0da44 100644
--- a/src/components/sidebar/sidebar.module.css
+++ b/src/components/sidebar/sidebar.module.css
@@ -1,6 +1,7 @@
 .p-accordion .p-accordion-content {
     border: none !important;
     padding-top: 0px !important;
+    padding-bottom: 0px !important;
 }
 .p-accordion .p-accordion-header-link {
     border: none !important;
diff --git a/src/hooks/nostr/useWorkshops.js b/src/hooks/nostr/useWorkshops.js
index 7c8fc38..5d01b04 100644
--- a/src/hooks/nostr/useWorkshops.js
+++ b/src/hooks/nostr/useWorkshops.js
@@ -59,6 +59,7 @@ export function useWorkshops() {
         if (isClient && contentIds) {
             fetchWorkshopsFromNDK().then(fetchedWorkshops => {
                 if (fetchedWorkshops && fetchedWorkshops.length > 0) {
+                    console.log('fetchedworkshops', fetchedWorkshops)
                     setWorkshops(fetchedWorkshops);
                 }
             });
diff --git a/src/pages/_app.js b/src/pages/_app.js
index c83bd5e..cdb071f 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -35,7 +35,7 @@ export default function MyApp({
                                 <Navbar />
                                 <div className='flex'>
                                 <Sidebar />
-                                <div className='max-w-[100vw] pl-[13vw] max-sidebar:pl-0 pb-16 max-sidebar:pb-20'>
+                                <div className='max-w-[100vw] pl-[14vw] max-sidebar:pl-0 pb-16 max-sidebar:pb-20'>
                                 {/* <div className='max-w-[100vw]'> */}
                                     <Component {...pageProps} />
                                 </div>
diff --git a/src/pages/auth/signin.js b/src/pages/auth/signin.js
index b7fa2fe..d8edc06 100644
--- a/src/pages/auth/signin.js
+++ b/src/pages/auth/signin.js
@@ -45,7 +45,7 @@ export default function SignIn() {
     }
 
     return (
-        <div className="w-[100vw] min-bottom-bar:w-[83vw] mx-auto mt-24 flex flex-col justify-center">
+        <div className="w-[100vw] min-bottom-bar:w-[82vw] mx-auto mt-24 flex flex-col justify-center">
             <h1 className="text-center mb-8">Sign In</h1>
             <Button
                 label={"login with nostr"}
diff --git a/src/pages/content.js b/src/pages/content/index.js
similarity index 61%
rename from src/pages/content.js
rename to src/pages/content/index.js
index 6f292f7..daa93eb 100644
--- a/src/pages/content.js
+++ b/src/pages/content/index.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import GenericCarousel from '@/components/content/carousels/GenericCarousel';
 import { parseEvent, parseCourseEvent } from '@/utils/nostr';
 import { useResources } from '@/hooks/nostr/useResources';
@@ -8,30 +8,41 @@ import { TabMenu } from 'primereact/tabmenu';
 import 'primeicons/primeicons.css';
 import { InputText } from 'primereact/inputtext';
 import { Button } from 'primereact/button';
+import { useRouter } from 'next/router';
 
 const MenuTab = ({ items, selectedTopic, onTabChange }) => {
+    const router = useRouter();
     const allItems = ['All', ...items];
 
     const menuItems = allItems.map((item, index) => {
         let icon = 'pi pi-tag';
         if (item === 'All') icon = 'pi pi-eye';
-        else if (item === 'resource') icon = 'pi pi-file';
-        else if (item === 'workshop') icon = 'pi pi-video';
-        else if (item === 'course') icon = 'pi pi-desktop';
+        else if (item === 'Resources') icon = 'pi pi-file';
+        else if (item === 'Workshops') icon = 'pi pi-video';
+        else if (item === 'Courses') icon = 'pi pi-desktop';
+
+        const queryParam = item === 'All' ? '' : `?tag=${item.toLowerCase()}`;
+        const isActive = router.asPath === `/content${queryParam}`;
 
         return {
             label: (
                 <Button
-                    className={`${selectedTopic === item ? 'bg-primary text-white' : ''}`}
-                    onClick={() => onTabChange(item)}
-                    outlined={selectedTopic !== item}
+                    className={`${isActive ? 'bg-primary text-white' : ''}`}
+                    onClick={() => {
+                        onTabChange(item);
+                        router.push(`/content${queryParam}`);
+                    }}
+                    outlined={!isActive}
                     rounded
                     size='small'
                     label={item}
                     icon={icon}
                 />
             ),
-            command: () => onTabChange(item)
+            command: () => {
+                onTabChange(item);
+                router.push(`/content${queryParam}`);
+            }
         };
     });
 
@@ -55,6 +66,7 @@ const MenuTab = ({ items, selectedTopic, onTabChange }) => {
 }
 
 const ContentPage = () => {
+    const router = useRouter();
     const { resources, resourcesLoading } = useResources();
     const { workshops, workshopsLoading } = useWorkshops();
     const { courses, coursesLoading } = useCourses();
@@ -64,63 +76,81 @@ const ContentPage = () => {
     const [processedCourses, setProcessedCourses] = useState([]);
     const [allContent, setAllContent] = useState([]);
     const [allTopics, setAllTopics] = useState([]);
-    const [activeIndex, setActiveIndex] = useState(0);
     const [searchQuery, setSearchQuery] = useState('');
-    const [selectedTopic, setSelectedTopic] = useState('All');
+    const [selectedTopic, setSelectedTopic] = useState('All')
     const [filteredContent, setFilteredContent] = useState([]);
 
     useEffect(() => {
-        console.log(selectedTopic);
-    }, [selectedTopic]);
+        const tag = router.query.tag;
+        if (tag) {
+            const topic = tag.charAt(0).toUpperCase() + tag.slice(1);
+            setSelectedTopic(topic);
+        } else {
+            setSelectedTopic('All');
+        }
+    }, [router.query.tag]);
 
     useEffect(() => {
         if (resources && !resourcesLoading) {
-            const processedResources = resources.map(resource => parseEvent(resource));
+            const processedResources = resources.map(resource => ({...parseEvent(resource), type: 'resource'}));
             setProcessedResources(processedResources);
         }
     }, [resources, resourcesLoading]);
 
     useEffect(() => {
         if (workshops && !workshopsLoading) {
-            const processedWorkshops = workshops.map(workshop => parseEvent(workshop));
+            const processedWorkshops = workshops.map(workshop => ({...parseEvent(workshop), type: 'workshop'}));
             setProcessedWorkshops(processedWorkshops);
         }
     }, [workshops, workshopsLoading]);
 
     useEffect(() => {
         if (courses && !coursesLoading) {
-            const processedCourses = courses.map(course => parseCourseEvent(course));
+            const processedCourses = courses.map(course => ({...parseCourseEvent(course), type: 'course'}));
             setProcessedCourses(processedCourses);
         }
     }, [courses, coursesLoading]);
 
     useEffect(() => {
-        const uniqueTopics = new Set([...processedResources, ...processedWorkshops, ...processedCourses].map(item => item.topics).flat());
-        const priorityItems = ['All', 'course', 'workshop', 'resource'];
+        const allContent = [...processedResources, ...processedWorkshops, ...processedCourses];
+        setAllContent(allContent);
+
+        const uniqueTopics = new Set(allContent.map(item => item.topics).flat());
+        const priorityItems = ['All', 'Courses', 'Workshops', 'Resources'];
         const otherTopics = Array.from(uniqueTopics).filter(topic => !priorityItems.includes(topic));
-        setAllTopics([...priorityItems.slice(1), ...otherTopics]);
-        setAllContent([...processedResources, ...processedWorkshops, ...processedCourses]);
+        const combinedTopics = [...priorityItems.slice(1), ...otherTopics];
+        setAllTopics(combinedTopics);
+
+        if (selectedTopic) {
+            filterContent(selectedTopic, allContent);
+        }
     }, [processedResources, processedWorkshops, processedCourses]);
 
-    useEffect(() => {
-        let filtered = allContent;
-        if (selectedTopic !== 'All') {
-            if (['course', 'workshop', 'resource'].includes(selectedTopic)) {
-                filtered = allContent.filter(item => item.type === selectedTopic);
+    const filterContent = (topic, content) => {
+        let filtered = content;
+        if (topic !== 'All') {
+            const topicLower = topic.toLowerCase();
+            if (['courses', 'workshops', 'resources'].includes(topicLower)) {
+                filtered = content.filter(item => item.type === topicLower.slice(0, -1));
             } else {
-                filtered = allContent.filter(item => item.topics && item.topics.includes(selectedTopic));
+                filtered = content.filter(item => item.topics && item.topics.includes(topic.toLowerCase()));
             }
         }
+
         setFilteredContent(filtered);
-    }, [selectedTopic, allContent]);
+    };
 
     const handleTopicChange = (newTopic) => {
         setSelectedTopic(newTopic);
+        const queryParam = newTopic === 'All' ? '' : `?tag=${newTopic.toLowerCase()}`;
+        router.push(`/content${queryParam}`, undefined, { shallow: true });
+        filterContent(newTopic, allContent);
     };
 
     const renderCarousels = () => {
         return (
             <GenericCarousel
+                key={selectedTopic} // Add this line
                 items={filteredContent}
                 selectedTopic={selectedTopic}
                 title={`${selectedTopic} Content`}
@@ -142,7 +172,7 @@ const ContentPage = () => {
                 />
             </div>
             <MenuTab
-                items={allTopics}
+                items={['Courses', 'Workshops', 'Resources', ...allTopics.filter(topic => !['Courses', 'Workshops', 'Resources'].includes(topic))]}
                 selectedTopic={selectedTopic}
                 onTabChange={handleTopicChange}
                 className="max-w-[90%] mx-auto"
diff --git a/src/pages/course/[slug]/draft/edit.js b/src/pages/course/[slug]/draft/edit.js
index ee1ceac..82a3e0e 100644
--- a/src/pages/course/[slug]/draft/edit.js
+++ b/src/pages/course/[slug]/draft/edit.js
@@ -32,7 +32,7 @@ export default function Edit() {
     }, [router.isReady, router.query, showToast]);
 
     return (
-        <div className="w-[80vw] max-w-[80vw] mx-auto my-8 flex flex-col justify-center">
+        <div className="w-full min-bottom-bar:w-[87vw] max-sidebar:w-[100vw] px-8 mx-auto my-8 flex flex-col justify-center">
             <h2 className="text-center mb-8">Edit Course Draft</h2>
             {draft && <CourseForm draft={draft} />}
         </div>