diff --git a/apps/value-based-design/src/app/(content)/workshops/[module]/[lesson]/(view)/shared-page.tsx b/apps/value-based-design/src/app/(content)/workshops/[module]/[lesson]/(view)/shared-page.tsx
index 7fcaa273b..41c863750 100644
--- a/apps/value-based-design/src/app/(content)/workshops/[module]/[lesson]/(view)/shared-page.tsx
+++ b/apps/value-based-design/src/app/(content)/workshops/[module]/[lesson]/(view)/shared-page.tsx
@@ -10,7 +10,9 @@ import { Transcript } from '@/app/(content)/_components/video-transcript-rendere
 import { WorkshopPricing } from '@/app/(content)/workshops/_components/workshop-pricing-server'
 import { WorkshopResourceList } from '@/app/(content)/workshops/_components/workshop-resource-list'
 import Exercise from '@/app/(content)/workshops/[module]/[lesson]/(view)/exercise/_components/exercise'
+import { CloudinaryDownloadButton } from '@/components/image-uploader/cloudinary-download-button'
 import { PlayerContainerSkeleton } from '@/components/player-skeleton'
+import { getAllImageResourcesForResource } from '@/lib/image-resource-query'
 import type { Lesson } from '@/lib/lessons'
 import {
 	getLessonMuxPlaybackId,
@@ -109,7 +111,7 @@ export async function LessonPage({
 								</AccordionItem>
 							</Accordion>
 							<div className="flex flex-col py-5 sm:py-8">
-								<LessonBody lesson={lesson} />
+								<LessonBody lesson={lesson} moduleSlug={params.module} />
 								<TranscriptContainer
 									className="block 2xl:hidden"
 									lessonId={lesson?.id}
@@ -196,11 +198,21 @@ async function PlayerContainer({
 	)
 }
 
-async function LessonBody({ lesson }: { lesson: Lesson | null }) {
+async function LessonBody({
+	lesson,
+	moduleSlug,
+}: {
+	lesson: Lesson | null
+	moduleSlug: string
+}) {
 	if (!lesson) {
 		notFound()
 	}
 
+	const downloadableAssets = await getAllImageResourcesForResource({
+		resourceId: lesson.id,
+	})
+	const abilityLoader = getAbilityForResource(lesson.fields.slug, moduleSlug)
 	const githubUrl = lesson.fields?.github
 	const gitpodUrl = lesson.fields?.gitpod
 
@@ -269,6 +281,13 @@ async function LessonBody({ lesson }: { lesson: Lesson | null }) {
 										</Link>
 									</Button>
 								)}
+								{downloadableAssets.length > 0 && (
+									<CloudinaryDownloadButton
+										resourceId={lesson.id}
+										lessonTitle={lesson.fields?.title}
+										abilityLoader={abilityLoader}
+									/>
+								)}
 							</div>
 						</div>
 					</div>
diff --git a/apps/value-based-design/src/app/(content)/workshops/[module]/[lesson]/edit/_components/edit-lesson-form.tsx b/apps/value-based-design/src/app/(content)/workshops/[module]/[lesson]/edit/_components/edit-lesson-form.tsx
index cc30ec7a9..0acdea2ee 100644
--- a/apps/value-based-design/src/app/(content)/workshops/[module]/[lesson]/edit/_components/edit-lesson-form.tsx
+++ b/apps/value-based-design/src/app/(content)/workshops/[module]/[lesson]/edit/_components/edit-lesson-form.tsx
@@ -4,12 +4,14 @@ import * as React from 'react'
 import { useParams } from 'next/navigation'
 import { LessonMetadataFormFields } from '@/app/(content)/tutorials/[module]/[lesson]/edit/_components/edit-lesson-form-metadata'
 import { onLessonSave } from '@/app/(content)/tutorials/[module]/[lesson]/edit/actions'
+import { DownloadableImageResourceUploader } from '@/components/image-uploader/downloadable-image-resource-uploader'
 import { env } from '@/env.mjs'
 import { useIsMobile } from '@/hooks/use-is-mobile'
 import { sendResourceChatMessage } from '@/lib/ai-chat-query'
 import { Lesson, LessonSchema } from '@/lib/lessons'
 import { updateLesson } from '@/lib/lessons-query'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { DownloadIcon } from 'lucide-react'
 import { useSession } from 'next-auth/react'
 import { useTheme } from 'next-themes'
 import { useForm, type UseFormReturn } from 'react-hook-form'
@@ -76,6 +78,22 @@ export function EditLessonForm({ lesson }: Omit<EditLessonFormProps, 'form'>) {
 			user={session?.data?.user}
 			onSave={onLessonSaveWithModule}
 			theme={theme}
+			tools={[
+				{
+					id: 'downloadable-media',
+					label: 'Downloadable Media',
+					icon: () => (
+						<DownloadIcon strokeWidth={1.5} size={24} width={18} height={18} />
+					),
+					toolComponent: (
+						<DownloadableImageResourceUploader
+							key={'downloadable-image-uploader'}
+							belongsToResourceId={lesson.id}
+							uploadDirectory={`lessons`}
+						/>
+					),
+				},
+			]}
 		>
 			<LessonMetadataFormFields
 				initialVideoResourceId={initialVideoResourceId}
diff --git a/apps/value-based-design/src/components/image-uploader/cloudinary-download-button.tsx b/apps/value-based-design/src/components/image-uploader/cloudinary-download-button.tsx
new file mode 100644
index 000000000..8fe877eb0
--- /dev/null
+++ b/apps/value-based-design/src/components/image-uploader/cloudinary-download-button.tsx
@@ -0,0 +1,114 @@
+'use client'
+
+import { use } from 'react'
+import { api } from '@/trpc/react'
+import { cn } from '@/utils/cn'
+import { AbilityForResource } from '@/utils/get-current-ability-rules'
+import { TRPCError } from '@trpc/server'
+import { Download, Lock } from 'lucide-react'
+
+import { Button } from '@coursebuilder/ui'
+
+export const CloudinaryDownloadButton: React.FC<{
+	resourceId: string
+	lessonTitle: string
+	abilityLoader?: Promise<AbilityForResource>
+}> = ({ resourceId, lessonTitle, abilityLoader }) => {
+	const ability = abilityLoader ? use(abilityLoader) : null
+	const canView = ability?.canView
+
+	const { mutateAsync: download, status } =
+		api.imageResources.download.useMutation({
+			onSuccess: (response) => {
+				if (response instanceof TRPCError) {
+					throw new Error('Sorry, I could not find that file.')
+				}
+
+				const byteCharacters = atob(response.data)
+				const byteNumbers = new Array(byteCharacters.length)
+				for (let i = 0; i < byteCharacters.length; i++) {
+					byteNumbers[i] = byteCharacters.charCodeAt(i)
+				}
+				const byteArray = new Uint8Array(byteNumbers)
+				const blob = new Blob([byteArray], { type: 'application/zip' })
+
+				// Create download link and trigger download
+				const url = URL.createObjectURL(blob)
+				const link = document.createElement('a')
+				link.href = url
+				link.download = response.fileName
+				document.body.appendChild(link)
+				link.click()
+				document.body.removeChild(link)
+				URL.revokeObjectURL(url)
+			},
+		})
+
+	const downloadButton = canView ? (
+		<>
+			<Download className="h-5 w-5" /> Download
+		</>
+	) : (
+		<>
+			<Lock className="h-5 w-5" /> Download
+		</>
+	)
+
+	return (
+		<Button
+			onClick={() => {
+				download({ resourceId, lessonTitle })
+			}}
+			variant="outline"
+			className={cn(
+				'relative h-full w-full cursor-pointer',
+				!canView && 'cursor-not-allowed opacity-50',
+			)}
+			disabled={!canView || status === 'pending'}
+		>
+			<div
+				className={cn(
+					'inset-0 flex items-center justify-center gap-2 transition-all duration-300 ease-in-out',
+					status === 'pending' ? 'opacity-0' : 'opacity-100',
+				)}
+			>
+				{downloadButton}
+			</div>
+			<div
+				className={cn(
+					'absolute inset-0 flex items-center justify-center gap-2 transition-all duration-300 ease-in-out',
+					status === 'pending' ? 'opacity-100' : 'opacity-0',
+				)}
+			>
+				<Spinner className="h-5 w-5" />
+			</div>
+		</Button>
+	)
+}
+
+const Spinner: React.FunctionComponent<{
+	className?: string
+}> = ({ className = 'w-8 h-8', ...rest }) => (
+	<svg
+		className={cn('animate-spin', className)}
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		{...rest}
+	>
+		<title>Loading</title>
+		<circle
+			opacity={0.25}
+			cx="12"
+			cy="12"
+			r="10"
+			stroke="currentColor"
+			strokeWidth="4"
+		/>
+		<path
+			opacity={0.75}
+			fill="currentColor"
+			d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+		/>
+	</svg>
+)
diff --git a/apps/value-based-design/src/components/image-uploader/cloudinary-upload-button.tsx b/apps/value-based-design/src/components/image-uploader/cloudinary-upload-button.tsx
index 6b92838c0..dace662c3 100644
--- a/apps/value-based-design/src/components/image-uploader/cloudinary-upload-button.tsx
+++ b/apps/value-based-design/src/components/image-uploader/cloudinary-upload-button.tsx
@@ -8,10 +8,12 @@ import { useSession } from 'next-auth/react'
 
 import { Button } from '@coursebuilder/ui'
 
-export const CloudinaryUploadButton: React.FC<{ dir: string; id: string }> = ({
-	dir,
-	id,
-}) => {
+export const CloudinaryUploadButton: React.FC<{
+	dir: string
+	id: string
+	is_downloadable?: boolean
+	resourceOfId?: string
+}> = ({ dir, id, is_downloadable = false, resourceOfId }) => {
 	const session = useSession()
 	const cloudinaryRef = React.useRef<any>()
 	const widgetRef = React.useRef<any>()
@@ -20,6 +22,8 @@ export const CloudinaryUploadButton: React.FC<{ dir: string; id: string }> = ({
 		cloudinaryRef.current = (window as any).cloudinary
 	}, [])
 
+	const folder = is_downloadable ? `${dir}/${id}/downloadables` : `${dir}/${id}`
+
 	return session?.data?.user ? (
 		<div>
 			<Script
@@ -41,7 +45,7 @@ export const CloudinaryUploadButton: React.FC<{ dir: string; id: string }> = ({
 								cloudName: env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
 								uploadPreset: env.NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET,
 								// inline_container: '#cloudinary-upload-widget-container',
-								folder: `${dir}/${id}`,
+								folder,
 							},
 							(error: any, result: any) => {
 								if (!error && result && result.event === 'success') {
@@ -49,6 +53,9 @@ export const CloudinaryUploadButton: React.FC<{ dir: string; id: string }> = ({
 									createImageResource({
 										asset_id: result.info.asset_id,
 										secure_url: result.info.url,
+										public_id: result.info.public_id,
+										is_downloadable,
+										resourceOfId: id,
 									})
 								}
 							},
diff --git a/apps/value-based-design/src/components/image-uploader/downloadable-image-resource-browser.tsx b/apps/value-based-design/src/components/image-uploader/downloadable-image-resource-browser.tsx
new file mode 100644
index 000000000..6f78a3e4b
--- /dev/null
+++ b/apps/value-based-design/src/components/image-uploader/downloadable-image-resource-browser.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import { useSocket } from '@/hooks/use-socket'
+import { api } from '@/trpc/react'
+
+export const DownloadableImageResourceBrowser = ({
+	resourceId,
+}: {
+	resourceId: string
+}) => {
+	const { data: images = [], refetch } =
+		api.imageResources.getAllForResource.useQuery({ resourceId })
+
+	useSocket({
+		onMessage: (messageEvent) => {
+			try {
+				const messageData = JSON.parse(messageEvent.data)
+				if (messageData.name === 'image.resource.created') {
+					refetch()
+				}
+			} catch (error) {
+				// noting to do
+			}
+		},
+	})
+
+	return (
+		<div>
+			<h3 className="inline-flex px-5 text-lg font-bold">Media Browser</h3>
+			<div className="grid grid-cols-3 gap-1 px-5">
+				{images.map((asset) => {
+					return asset?.url ? (
+						<div
+							key={asset.id}
+							className="flex items-center justify-center overflow-hidden rounded border"
+						>
+							<img
+								src={asset.url}
+								alt={asset.id}
+								onDragStart={(e) => {
+									e.dataTransfer.setData(
+										'text/plain',
+										`![](${e.currentTarget.src})`,
+									)
+								}}
+							/>
+						</div>
+					) : null
+				})}
+			</div>
+		</div>
+	)
+}
diff --git a/apps/value-based-design/src/components/image-uploader/downloadable-image-resource-uploader.tsx b/apps/value-based-design/src/components/image-uploader/downloadable-image-resource-uploader.tsx
new file mode 100644
index 000000000..90f89d928
--- /dev/null
+++ b/apps/value-based-design/src/components/image-uploader/downloadable-image-resource-uploader.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { CloudinaryUploadButton } from '@/components/image-uploader/cloudinary-upload-button'
+import { DownloadableImageResourceBrowser } from '@/components/image-uploader/downloadable-image-resource-browser'
+
+import { ScrollArea } from '@coursebuilder/ui'
+
+export function DownloadableImageResourceUploader(props: {
+	uploadDirectory: string
+	belongsToResourceId: string
+}) {
+	return (
+		<>
+			<div>
+				<h2>Downloadable Media</h2>
+			</div>
+			<ScrollArea className="h-[var(--pane-layout-height)] overflow-y-auto">
+				<CloudinaryUploadButton
+					dir={props.uploadDirectory}
+					id={props.belongsToResourceId}
+					is_downloadable={true}
+				/>
+				<React.Suspense fallback={<div>Loading...</div>}>
+					<DownloadableImageResourceBrowser
+						resourceId={props.belongsToResourceId}
+					/>
+				</React.Suspense>
+			</ScrollArea>
+		</>
+	)
+}
diff --git a/apps/value-based-design/src/env.mjs b/apps/value-based-design/src/env.mjs
index 30b9830c2..6a29de944 100644
--- a/apps/value-based-design/src/env.mjs
+++ b/apps/value-based-design/src/env.mjs
@@ -72,6 +72,8 @@ export const env = createEnv({
 		POSTMARK_KEY: z.string().optional(),
 		SLACK_TOKEN: z.string().optional(),
 		SLACK_DEFAULT_CHANNEL_ID: z.string().optional(),
+		CLOUDINARY_API_SECRET: z.string().optional(),
+		CLOUDINARY_API_KEY: z.string().optional(),
 	},
 
 	/**
@@ -126,6 +128,8 @@ export const env = createEnv({
 			process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
 		NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET:
 			process.env.NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET,
+		CLOUDINARY_API_SECRET: process.env.CLOUDINARY_API_SECRET,
+		CLOUDINARY_API_KEY: process.env.CLOUDINARY_API_KEY,
 		TWITTER_CLIENT_ID: process.env.TWITTER_CLIENT_ID,
 		TWITTER_CLIENT_SECRET: process.env.TWITTER_CLIENT_SECRET,
 		UPSTASH_REDIS_REST_URL: process.env.UPSTASH_REDIS_REST_URL,
diff --git a/apps/value-based-design/src/lib/image-resource-query.ts b/apps/value-based-design/src/lib/image-resource-query.ts
index 4a39433de..8b3b598c1 100644
--- a/apps/value-based-design/src/lib/image-resource-query.ts
+++ b/apps/value-based-design/src/lib/image-resource-query.ts
@@ -1,7 +1,7 @@
 'use server'
 
 import { db } from '@/db'
-import { contentResource } from '@/db/schema'
+import { contentResource, contentResourceResource } from '@/db/schema'
 import { IMAGE_RESOURCE_CREATED_EVENT } from '@/inngest/events/image-resource-created'
 import { inngest } from '@/inngest/inngest.server'
 import { getServerAuthSession } from '@/server/auth'
@@ -12,11 +12,16 @@ const ImageResourceSchema = z.object({
 	id: z.string(),
 	url: z.string(),
 	alt: z.string().optional().nullable(),
+	is_downloadable: z.boolean().optional().nullable(),
+	public_id: z.string().optional().nullable(),
 })
 
 export async function createImageResource(input: {
 	asset_id: string
 	secure_url: string
+	public_id?: string
+	resourceOfId?: string
+	is_downloadable: boolean
 }) {
 	const { session, ability } = await getServerAuthSession()
 	const user = session?.user
@@ -25,24 +30,52 @@ export async function createImageResource(input: {
 		throw new Error('Unauthorized')
 	}
 
-	await db
-		.insert(contentResource)
-		.values({
-			id: input.asset_id,
-			type: 'imageResource',
-			fields: {
-				state: 'ready',
-				url: input.secure_url,
-			},
-			createdById: user.id,
-		})
-		.then((result) => {
-			return result
-		})
-		.catch((error) => {
-			console.error(error)
-			throw error
+	if (input.is_downloadable && input.resourceOfId) {
+		await db
+			.insert(contentResource)
+			.values({
+				id: input.asset_id,
+				type: 'imageResource',
+				fields: {
+					state: 'ready',
+					url: input.secure_url,
+					public_id: input.public_id,
+					is_downloadable: input.is_downloadable,
+				},
+				createdById: user.id,
+			})
+			.then((result) => {
+				return result
+			})
+			.catch((error) => {
+				console.error(error)
+				throw error
+			})
+
+		await db.insert(contentResourceResource).values({
+			resourceOfId: input.resourceOfId,
+			resourceId: input.asset_id,
 		})
+	} else {
+		await db
+			.insert(contentResource)
+			.values({
+				id: input.asset_id,
+				type: 'imageResource',
+				fields: {
+					state: 'ready',
+					url: input.secure_url,
+				},
+				createdById: user.id,
+			})
+			.then((result) => {
+				return result
+			})
+			.catch((error) => {
+				console.error(error)
+				throw error
+			})
+	}
 
 	await inngest.send({
 		name: IMAGE_RESOURCE_CREATED_EVENT,
@@ -71,3 +104,29 @@ export async function getAllImageResources() {
 		return parsed.success ? parsed.data : []
 	})
 }
+
+export async function getAllImageResourcesForResource({
+	resourceId,
+}: {
+	resourceId: string
+}) {
+	const query = sql`
+      SELECT    
+        cr.id as id,
+        JSON_EXTRACT (cr.fields, "$.url") AS url,
+        JSON_EXTRACT (cr.fields, "$.alt") AS alt,
+        JSON_EXTRACT (cr.fields, "$.public_id") AS public_id
+      FROM
+        ${contentResource} as cr
+      JOIN ${contentResourceResource} as crr ON cr.id = crr.resourceId
+      WHERE
+        cr.type = 'imageResource'
+        AND crr.resourceOfId = ${resourceId}
+      ORDER BY
+        cr.createdAt DESC
+    `
+	return db.execute(query).then((result) => {
+		const parsed = z.array(ImageResourceSchema).safeParse(result.rows)
+		return parsed.success ? parsed.data : []
+	})
+}
diff --git a/apps/value-based-design/src/lib/module.ts b/apps/value-based-design/src/lib/module.ts
index 6d7ee44d3..887a4aa82 100644
--- a/apps/value-based-design/src/lib/module.ts
+++ b/apps/value-based-design/src/lib/module.ts
@@ -48,6 +48,7 @@ export const ModuleSchema = z.object({
 					'lesson',
 					'section',
 					'videoResource',
+					'imageResource',
 					'linkResource',
 					'exercise',
 					'problem',
@@ -67,6 +68,7 @@ export const ModuleSchema = z.object({
 							type: z.enum([
 								'lesson',
 								'videoResource',
+								'imageResource',
 								'exercise',
 								'solution',
 								'problem',
@@ -85,7 +87,12 @@ export const ModuleSchema = z.object({
 										resourceOfId: z.string(),
 										resource: z.object({
 											id: z.string(),
-											type: z.enum(['solution', 'videoResource', 'problem']),
+											type: z.enum([
+												'solution',
+												'videoResource',
+												'imageResource',
+												'problem',
+											]),
 											fields: z.object({
 												slug: z.string().optional().nullable(),
 												title: z.string().min(2).max(90).optional().nullable(),
diff --git a/apps/value-based-design/src/trpc/api/routers/imageResource.ts b/apps/value-based-design/src/trpc/api/routers/imageResource.ts
index ce49c1759..e060f08f2 100644
--- a/apps/value-based-design/src/trpc/api/routers/imageResource.ts
+++ b/apps/value-based-design/src/trpc/api/routers/imageResource.ts
@@ -1,8 +1,78 @@
-import { getAllImageResources } from '@/lib/image-resource-query'
+import { env } from 'process'
+import {
+	getAllImageResources,
+	getAllImageResourcesForResource,
+} from '@/lib/image-resource-query'
 import { createTRPCRouter, publicProcedure } from '@/trpc/api/trpc'
+import slugify from '@sindresorhus/slugify'
+import { TRPCError } from '@trpc/server'
+import { observable } from '@trpc/server/observable'
+import cloudinary from 'cloudinary'
+import { z } from 'zod'
 
 export const imageResourceRouter = createTRPCRouter({
 	getAll: publicProcedure.query(async () => {
 		return getAllImageResources()
 	}),
+	getAllForResource: publicProcedure
+		.input(
+			z.object({
+				resourceId: z.string(),
+			}),
+		)
+		.query(async ({ input }) => {
+			console.log({ input })
+
+			return getAllImageResourcesForResource({
+				resourceId: input.resourceId,
+			})
+		}),
+	download: publicProcedure
+		.input(
+			z.object({
+				resourceId: z.string(),
+				lessonTitle: z.string(),
+			}),
+		)
+		.mutation(async ({ input }) => {
+			const images = await getAllImageResourcesForResource({
+				resourceId: input.resourceId,
+			})
+
+			const publicIds = images.map((image) => image.public_id)
+
+			cloudinary.v2.config({
+				cloud_name: env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
+				api_key: env.CLOUDINARY_API_KEY,
+				api_secret: env.CLOUDINARY_API_SECRET,
+				secure: true,
+			})
+
+			if (publicIds.length > 0) {
+				let url = cloudinary.v2.utils.download_zip_url({
+					public_ids: publicIds,
+				})
+				const response = await fetch(url)
+
+				if (!response.ok) {
+					throw new TRPCError({
+						code: 'INTERNAL_SERVER_ERROR',
+						message: 'Failed to fetch zip file from Cloudinary',
+					})
+				}
+
+				const buffer = await response.arrayBuffer()
+				const base64 = Buffer.from(buffer).toString('base64')
+
+				return {
+					fileName: `${slugify(input.lessonTitle)}-downloads.zip`,
+					data: base64,
+				}
+			}
+
+			return new TRPCError({
+				code: 'NOT_FOUND',
+				message: 'No images found',
+			})
+		}),
 })