diff --git a/src/components/banner/HeroBanner.js b/src/components/banner/HeroBanner.js
index aa345f9..9638acc 100644
--- a/src/components/banner/HeroBanner.js
+++ b/src/components/banner/HeroBanner.js
@@ -39,16 +39,16 @@ const HeroBanner = () => {
                 quality={100}
                 className='opacity-70'
             />
-            <div className="max-mob:min-w-full max-tab:min-w-[38%] min-w-[35%] absolute text-center text-white text-xl h-full flex flex-col justify-evenly">
-                <p className='text-xl md:text-3xl lg:text-4xl xl:text-5xl'>Learn how to code</p>
-                <p className='text-xl md:text-3xl lg:text-4xl xl:text-5xl'>
+            <div className="w-[75vw] sm:w-[65vw] md:w-[45vw] lg:w-[45vw] xl:w-[45vw] absolute text-center text-white text-xl h-full flex flex-col justify-evenly">
+                <p className='text-2xl md:text-4xl lg:text-5xl xl:text-5xl'>Learn how to code</p>
+                <p className='text-2xl md:text-4xl lg:text-5xl xl:text-5xl'>
                     Build{' '}
                     <span className={`inline-block w-[50%] ${isFlipping ? 'flip-enter-active' : ''} ${getColorClass(options[currentOption])}`}>
                         {options[currentOption]}
                     </span>
                     {' '}Apps
                 </p>
-                <p className='text-xl md:text-3xl lg:text-4xl xl:text-5xl'>Become a developer</p>
+                <p className='text-2xl md:text-4xl lg:text-5xl xl:text-5xl'>Become a developer</p>
             </div>
 
         </div>
diff --git a/src/components/content/carousels/CoursesCarousel.js b/src/components/content/carousels/CoursesCarousel.js
index 4eda6bd..8fadf98 100644
--- a/src/components/content/carousels/CoursesCarousel.js
+++ b/src/components/content/carousels/CoursesCarousel.js
@@ -50,7 +50,7 @@ export default function CoursesCarousel() {
 
     return (
         <>
-            <h2 className="ml-[6%] mt-4">Courses</h2>
+            <h3 className="ml-[6%] mt-4">Courses</h3>
             <div className={"min-h-[384px]"}>
                 <Carousel
                     value={coursesLoading || !processedCourses.length ? [{}, {}, {}] : [...processedCourses]}
diff --git a/src/components/content/carousels/ResourcesCarousel.js b/src/components/content/carousels/ResourcesCarousel.js
index fe755de..566225c 100644
--- a/src/components/content/carousels/ResourcesCarousel.js
+++ b/src/components/content/carousels/ResourcesCarousel.js
@@ -48,7 +48,7 @@ export default function ResourcesCarousel() {
 
     return (
         <>
-            <h2 className="ml-[6%] mt-4">Resources</h2>
+            <h3 className="ml-[6%] mt-4">Resources</h3>
             <Carousel 
                 value={resourcesLoading || !processedResources.length ? [{}, {}, {}] : [...processedResources]}
                 numVisible={2}
diff --git a/src/components/content/carousels/WorkshopsCarousel.js b/src/components/content/carousels/WorkshopsCarousel.js
index 640e741..af855d5 100644
--- a/src/components/content/carousels/WorkshopsCarousel.js
+++ b/src/components/content/carousels/WorkshopsCarousel.js
@@ -49,7 +49,7 @@ export default function WorkshopsCarousel() {
 
     return (
         <>
-            <h2 className="ml-[6%] mt-4">Workshops</h2>
+            <h3 className="ml-[6%] mt-4">Workshops</h3>
             <Carousel 
                 value={workshopsLoading || !processedWorkshops.length ? [{}, {}, {}] : [...processedWorkshops]}
                 numVisible={2}
diff --git a/src/components/forms/WorkshopForm.js b/src/components/forms/WorkshopForm.js
index e4c17ab..cb41e94 100644
--- a/src/components/forms/WorkshopForm.js
+++ b/src/components/forms/WorkshopForm.js
@@ -59,6 +59,11 @@ const WorkshopForm = ({ draft = null }) => {
             const videoId = videoUrl.split('/').pop();
             embedCode = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><iframe src="https://player.vimeo.com/video/${videoId}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe></div>`;
         }
+        else if (videoUrl.includes('.mp4') || videoUrl.includes('.mov') || videoUrl.includes('.avi') || videoUrl.includes('.wmv') || videoUrl.includes('.flv') || videoUrl.includes('.webm')) {
+            const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000";
+            const videoEmbed = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video src="${baseUrl}/api/get-video-url?videoKey=${encodeURIComponent(videoUrl)}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls></video></div>`;
+            embedCode = videoEmbed;
+        }
         // Add more conditions here for other video services
 
         const userResponse = await axios.get(`/api/users/${user.pubkey}`);
diff --git a/src/components/sidebar/Sidebar.js b/src/components/sidebar/Sidebar.js
index 0efa353..8b212fa 100644
--- a/src/components/sidebar/Sidebar.js
+++ b/src/components/sidebar/Sidebar.js
@@ -111,9 +111,10 @@ const Sidebar = () => {
                         <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>
-                        <div onClick={toggleSidebar} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg`}>
+                        {/* todo sidebar expand / contract */}
+                        {/* <div onClick={toggleSidebar} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg`}>
                             <i className={`pi pi-chevron-left pl-5 text-sm`} /> <p className="pl-2 rounded-md font-bold text-lg">{isExpanded ? 'close' : 'open'}</p>
-                        </div>
+                        </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>
diff --git a/src/pages/_app.js b/src/pages/_app.js
index 9d45260..15978ba 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -24,19 +24,19 @@ const queryClient = new QueryClient()
 export default function MyApp({
     Component, pageProps: { session, ...pageProps }
 }) {
-    const [sidebarExpanded, setSidebarExpanded] = useState(true);
+    // const [sidebarExpanded, setSidebarExpanded] = useState(true);
 
-    useEffect(() => {
-        const handleSidebarToggle = (event) => {
-            setSidebarExpanded(event.detail.isExpanded);
-        };
+    // useEffect(() => {
+    //     const handleSidebarToggle = (event) => {
+    //         setSidebarExpanded(event.detail.isExpanded);
+    //     };
 
-        window.addEventListener('sidebarToggle', handleSidebarToggle);
+    //     window.addEventListener('sidebarToggle', handleSidebarToggle);
 
-        return () => {
-            window.removeEventListener('sidebarToggle', handleSidebarToggle);
-        };
-    }, []);
+    //     return () => {
+    //         window.removeEventListener('sidebarToggle', handleSidebarToggle);
+    //     };
+    // }, []);
 
     return (
         <PrimeReactProvider>
diff --git a/src/pages/api/auth/[...nextauth].js b/src/pages/api/auth/[...nextauth].js
index d2cf17c..b231631 100644
--- a/src/pages/api/auth/[...nextauth].js
+++ b/src/pages/api/auth/[...nextauth].js
@@ -143,7 +143,7 @@ export const authOptions = {
     },
     pages: {
         signIn: "/auth/signin",
-    },
+    }
 };
 
 export default NextAuth(authOptions);
diff --git a/src/pages/api/get-video-url.js b/src/pages/api/get-video-url.js
index e4c0587..90e34b7 100644
--- a/src/pages/api/get-video-url.js
+++ b/src/pages/api/get-video-url.js
@@ -19,8 +19,6 @@ export default async function handler(req, res) {
     return res.status(401).json({ error: "Unauthorized" })
   }
 
-  console.log("Session:", session)
-
   const { videoKey } = req.query
 
   if (!videoKey) {
@@ -34,10 +32,10 @@ export default async function handler(req, res) {
     })
 
     const signedUrl = await getSignedUrl(s3Client, command, {
-      expiresIn: 10, // URL expires in 10 seconds
+      expiresIn: 3600, // URL expires in 1 hour
     })
 
-    res.status(200).json({ url: signedUrl })
+    res.redirect(signedUrl)
   } catch (error) {
     console.error("Error generating signed URL:", error)
     res.status(500).json({ error: "Failed to generate video URL" })
diff --git a/src/pages/draft/[slug]/index.js b/src/pages/draft/[slug]/index.js
index 7377573..cb8f8b2 100644
--- a/src/pages/draft/[slug]/index.js
+++ b/src/pages/draft/[slug]/index.js
@@ -201,6 +201,18 @@ export default function Draft() {
                     encryptedContent = await nip04.encrypt(process.env.NEXT_PUBLIC_APP_PRIV_KEY, process.env.NEXT_PUBLIC_APP_PUBLIC_KEY, draft.content);
                 }
 
+                if (draft?.content.includes('.mp4') || draft?.content.includes('.mov') || draft?.content.includes('.avi') || draft?.content.includes('.wmv') || draft?.content.includes('.flv') || draft?.content.includes('.webm')) {
+                    // todo update this for dev and prod
+                    const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000"
+                    const videoEmbed = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video src="${baseUrl}/api/get-video-url?videoKey=${encodeURIComponent(draft.content)}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls></video></div>`;
+                    if (draft?.price) {
+                        const encryptedVideoUrl = await nip04.encrypt(process.env.NEXT_PUBLIC_APP_PRIV_KEY, process.env.NEXT_PUBLIC_APP_PUBLIC_KEY, videoEmbed);
+                        draft.content = encryptedVideoUrl;
+                    } else {
+                        draft.content = videoEmbed;
+                    }
+                }
+
                 event.kind = draft?.price ? 30402 : 30023;
                 event.content = draft?.price ? encryptedContent : draft.content;
                 event.created_at = Math.floor(Date.now() / 1000);
@@ -232,9 +244,8 @@ export default function Draft() {
                 <div className='w-[75vw] mx-auto flex flex-row items-start justify-between'>
                     <div className='flex flex-col items-start max-w-[45vw] max-tab:max-w-[100vw] max-mob:max-w-[100vw]'>
                         <div className='pt-2 flex flex-row justify-start w-full'>
-                            {/* List out topics */}
                             {draft?.topics && draft.topics.map((topic, index) => {
-                                if (topic === "plebdevs") return;
+                                if (topic === "") return;
                                 return (
                                     <Tag className='mr-2 text-white' key={index} value={topic}></Tag>
                                 )
@@ -302,7 +313,9 @@ export default function Draft() {
             </div>
             <div className='w-[75vw] mx-auto mt-12 p-12 border-t-2 border-gray-300 max-tab:p-0 max-mob:p-0 max-tab:max-w-[100vw] max-mob:max-w-[100vw]'>
                 {
-                    draft?.content && <MDDisplay className='p-4 rounded-lg' source={draft.content} />
+                    (
+                        draft?.content && <MDDisplay className='p-4 rounded-lg' source={draft.content} />
+                    )
                 }
             </div>
         </div>