diff --git a/src/components/content/carousels/templates/CourseTemplate.js b/src/components/content/carousels/templates/CourseTemplate.js
index f1668b0..7a89251 100644
--- a/src/components/content/carousels/templates/CourseTemplate.js
+++ b/src/components/content/carousels/templates/CourseTemplate.js
@@ -80,7 +80,7 @@ export function CourseTemplate({ course, showMetaTags = true }) {
       </div>
       <CardHeader className="flex flex-row justify-between items-center p-4 border-b border-gray-700">
         <div className="flex items-center gap-4">
-          <i className="pi pi-book text-2xl text-[#f8f8ff]"></i>
+          <i className="pi pi-book text-2xl text-[#f8f8ff] max-mob:hidden max-tab:hidden"></i>
           <CardTitle className="text-xl sm:text-2xl text-[#f8f8ff]">{course.name}</CardTitle>
         </div>
         <div>
diff --git a/src/components/content/carousels/templates/DocumentTemplate.js b/src/components/content/carousels/templates/DocumentTemplate.js
index 47bed19..35f67b5 100644
--- a/src/components/content/carousels/templates/DocumentTemplate.js
+++ b/src/components/content/carousels/templates/DocumentTemplate.js
@@ -53,19 +53,6 @@ export function DocumentTemplate({ document, isLesson, showMetaTags }) {
 
     return (
         <Card className="overflow-hidden group hover:shadow-xl transition-all duration-300 bg-gray-800 m-2 border-none">
-            <CardHeader className="flex justify-between items-center p-4 border-b border-gray-700">
-                <div className="flex items-center gap-4">
-                    <i className="pi pi-file text-2xl text-[#f8f8ff]"></i>
-                    <CardTitle className="text-xl sm:text-2xl">{document.title}</CardTitle>
-                </div>
-                <div>
-                    {document?.price && document?.price > 0 ? (
-                        <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock" severity="info" text={`${document.price} sats`} />
-                    ) : (
-                        <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock-open" severity="success" text="Free" />
-                    )}
-                </div>
-            </CardHeader>
             <div className="relative w-full h-0" style={{ paddingBottom: "56.25%" }}>
                 <Image
                     alt="document thumbnail"
@@ -80,6 +67,19 @@ export function DocumentTemplate({ document, isLesson, showMetaTags }) {
                     <ZapDisplay zapAmount={zapAmount} event={document} zapsLoading={zapsLoading && zapAmount === 0} />
                 </div>
             </div>
+            <CardHeader className="flex flex-row justify-between items-center p-4">
+                <div className="flex items-center gap-4">
+                    <i className="pi pi-file text-2xl text-[#f8f8ff] max-mob:hidden max-tab:hidden"></i>
+                    <CardTitle className="text-xl sm:text-2xl text-[#f8f8ff]">{document.title}</CardTitle>
+                </div>
+                <div>
+                    {document?.price && document?.price > 0 ? (
+                        <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock" severity="info" text={`${document.price} sats`} />
+                    ) : (
+                        <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock-open" severity="success" text="Free" />
+                    )}
+                </div>
+            </CardHeader>
             <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-start`}>
                 <div className="flex flex-wrap gap-2 max-w-[65%]">
                     {document?.topics?.map((topic, index) => (
diff --git a/src/components/content/carousels/templates/VideoTemplate.js b/src/components/content/carousels/templates/VideoTemplate.js
index 285991f..1dd5a5d 100644
--- a/src/components/content/carousels/templates/VideoTemplate.js
+++ b/src/components/content/carousels/templates/VideoTemplate.js
@@ -54,22 +54,6 @@ export function VideoTemplate({ video, isLesson, showMetaTags }) {
 
     return (
         <Card className="overflow-hidden group hover:shadow-xl transition-all duration-300 bg-gray-800 m-2 border-none">
-            {/* Header with title and price */}
-            <CardHeader className="flex justify-between items-center p-4 border-b border-gray-700">
-                <div className="flex items-center gap-4">
-                    <i className="pi pi-video text-2xl text-[#f8f8ff]"></i>
-                    <CardTitle className="text-xl sm:text-2xl">{video.title}</CardTitle>
-                </div>
-                <div>
-                    {video?.price && video?.price > 0 ? (
-                        <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock" severity="info" text={`${video.price} sats`} />
-                    ) : (
-                        <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock-open" severity="success" text="Free" />
-                    )}
-                </div>
-            </CardHeader>
-
-            {/* Image section */}
             <div className="relative w-full h-0" style={{ paddingBottom: "56.25%" }}>
                 <Image
                     alt="video thumbnail"
@@ -84,8 +68,19 @@ export function VideoTemplate({ video, isLesson, showMetaTags }) {
                     <ZapDisplay zapAmount={zapAmount} event={video} zapsLoading={zapsLoading && zapAmount === 0} />
                 </div>
             </div>
-
-            {/* Content section with tags and duration */}
+            <CardHeader className="flex flex-row justify-between items-center p-4">
+                <div className="flex items-center gap-4">
+                    <i className="pi pi-video text-2xl text-[#f8f8ff] max-mob:hidden max-tab:hidden"></i>
+                    <CardTitle className="text-xl sm:text-2xl text-[#f8f8ff]">{video.title}</CardTitle>
+                </div>
+                <div>
+                    {video?.price && video?.price > 0 ? (
+                        <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock" severity="info" text={`${video.price} sats`} />
+                    ) : (
+                        <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock-open" severity="success" text="Free" />
+                    )}
+                </div>
+            </CardHeader>
             <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-start`}>
                 <div className="flex flex-wrap gap-2 max-w-[65%]">
                     {video?.topics?.map((topic, index) => (