diff --git a/.github/workflows/publish-docker-images.yaml b/.github/workflows/publish-docker-images.yaml
index e48572cf2..308967965 100644
--- a/.github/workflows/publish-docker-images.yaml
+++ b/.github/workflows/publish-docker-images.yaml
@@ -1,4 +1,4 @@
-name: Publish NPM Packages
+name: Publish Docker Images
 
 on:
   push:
@@ -8,6 +8,8 @@ on:
 jobs:
   publish-docker-images:
     runs-on: ubuntu-latest
+    env:
+      NODE_OPTIONS: --dns-result-order=ipv4first --no-network-family-autoselection --network-family-autoselection-attempt-timeout=5000
     steps:
       - name: checkout
         uses: actions/checkout@v1
@@ -30,13 +32,13 @@ jobs:
         id: metaapp
         uses: docker/metadata-action@v3
         with:
-          images: codelit/courselit-app
+          images: egjoka/courselit-app
 
       - name: Docker meta for the queue 
         id: metaqueue
         uses: docker/metadata-action@v3
         with:
-          images: codelit/courselit-queue
+          images: egjoka/courselit-queue
 
       - name: Build and push app 
         id: docker_build_app
diff --git a/apps/docs/src/pages/en/website/blocks.md b/apps/docs/src/pages/en/website/blocks.md
index a937bd2c6..24e6b014e 100644
--- a/apps/docs/src/pages/en/website/blocks.md
+++ b/apps/docs/src/pages/en/website/blocks.md
@@ -35,8 +35,8 @@ You will also see the newly added link on the header itself.
 
 3. Click on the pencil icon against the newly added link to edit it as shown above.
 4. Change the label (displayed as text on the header block) and the URL (where the user should be taken upon clicking the label on the header) and click `Done` to save.
-![Header edit link](/assets/pages/header-edit-link.png)
- </details>
+   ![Header edit link](/assets/pages/header-edit-link.png)
+   </details>
 
 ### [Rich Text](#rich-text)
 
@@ -60,8 +60,8 @@ You can also use the floating controls to do the same as shown below.
     > Double-clicking the text to select won't work due to a bug. We are working on it.
 2. Click on the floating `link` button to reveal a popup text input.
 3. In the popup text input, enter the URL as shown below.
-![Create a hyperlink in rich text block](/assets/pages/rich-text-create-hyperlink.gif)
- </details>
+   ![Create a hyperlink in rich text block](/assets/pages/rich-text-create-hyperlink.gif)
+   </details>
 
 ### [Hero](#hero)
 
@@ -85,9 +85,9 @@ Following is how it looks on a page.
 
 3. In the button text field, add the text that will be visible on the button.
 4. In the button action, enter the URL the user should be taken to upon clicking.
-a. If the URL is from your own school, use its relative form, i.e., `/courses`.
-b. If the URL is from some external website, use the absolute (complete) URL, i.e., `https://website.com/courses`.
- </details>
+   a. If the URL is from your own school, use its relative form, i.e., `/courses`.
+   b. If the URL is from some external website, use the absolute (complete) URL, i.e., `https://website.com/courses`.
+   </details>
 
 ### [Grid](#grid)
 
@@ -130,9 +130,9 @@ A grid block comes in handy when you want to show some sort of list, for example
 
 3. In the button text field, add the text that will be visible on the button.
 4. In the button action, enter the URL the user should be taken to upon clicking.
-a. If the URL is from your own school, use its relative form, i.e., `/courses`.
-b. If the URL is from some external website, use the absolute (complete) URL, i.e., `https://website.com/courses`.
- </details>
+   a. If the URL is from your own school, use its relative form, i.e., `/courses`.
+   b. If the URL is from some external website, use the absolute (complete) URL, i.e., `https://website.com/courses`.
+   </details>
 
 ### [Featured](#featured)
 
@@ -268,7 +268,7 @@ In the `Design` panel, you can customize:
 - Maximum width
 - Vertical padding
 - Social media links (Facebook, Twitter, Instagram, LinkedIn, YouTube, Discord, GitHub)
-  </details>
+    </details>
 
 ## [Shared blocks](#shared-blocks)
 
diff --git a/apps/docs/src/pages/en/website/themes.md b/apps/docs/src/pages/en/website/themes.md
index 0700d2e29..2d7bed189 100644
--- a/apps/docs/src/pages/en/website/themes.md
+++ b/apps/docs/src/pages/en/website/themes.md
@@ -192,14 +192,14 @@ The typography editor lets you customize text styles across your website. These
 - Header 3: Smaller titles for subsections
 - Header 4: Small titles for minor sections
 - Preheader: Introductory text that appears above headers
-  </details>
+    </details>
 
 <details>
 <summary>Subheaders</summary>
 
 - Subheader 1: Primary subheaders for section introductions
 - Subheader 2: Secondary subheaders for supporting text
-  </details>
+    </details>
 
 <details>
 <summary>Body Text</summary>
@@ -207,7 +207,7 @@ The typography editor lets you customize text styles across your website. These
 - Text 1: Main body text for content
 - Text 2: Secondary body text for supporting content
 - Caption: Small text for image captions and footnotes
-  </details>
+    </details>
 
 <details>
 <summary>Interactive Elements</summary>
@@ -215,7 +215,7 @@ The typography editor lets you customize text styles across your website. These
 - Link: Text for clickable links
 - Button: Text for buttons and calls-to-action
 - Input: Text for form fields and search boxes
-  </details>
+    </details>
 
 For each text style, you can customize:
 
@@ -243,7 +243,7 @@ CourseLit provides a carefully curated selection of professional fonts, organize
 - **Mulish**: A geometric sans-serif with a modern feel
 - **Nunito**: A well-balanced font with rounded terminals
 - **Work Sans**: A clean, modern font with a geometric feel
-  </details>
+    </details>
 
 <details>
 <summary>Serif Fonts</summary>
@@ -253,7 +253,7 @@ CourseLit provides a carefully curated selection of professional fonts, organize
 - **Playfair Display**: An elegant serif font for headings
 - **Roboto Slab**: A serif variant of Roboto
 - **Source Serif 4**: A serif font designed for digital reading
-  </details>
+    </details>
 
 <details>
 <summary>Display Fonts</summary>
@@ -264,7 +264,7 @@ CourseLit provides a carefully curated selection of professional fonts, organize
 - **Rubik**: A sans-serif with a geometric feel
 - **Oswald**: A reworking of the classic style
 - **Bebas Neue**: A display font with a strong personality
-  </details>
+    </details>
 
 <details>
 <summary>Modern Fonts</summary>
@@ -272,7 +272,7 @@ CourseLit provides a carefully curated selection of professional fonts, organize
 - **Lato**: A sans-serif font with a warm feel
 - **PT Sans**: A font designed for public use
 - **Quicksand**: A display sans-serif with rounded terminals
-  </details>
+    </details>
 
 Each font is optimized for web use and includes multiple weights for flexibility in design. All fonts support Latin characters and are carefully selected for their readability and professional appearance.
 
@@ -290,7 +290,7 @@ The interactives editor allows you to customize the appearance of interactive el
 - Shadow effects: From None to 2X Large
 - Custom styles: Add your own custom styles using [supported Tailwind classes](#supported-tailwind-classes)
 - Disabled state: How the button looks when it can't be clicked
-  </details>
+    </details>
 
 <details>
 <summary>Link</summary>
@@ -300,7 +300,7 @@ The interactives editor allows you to customize the appearance of interactive el
 - Text shadow: Add depth to your links
 - Custom styles: Add your own custom styles using [supported Tailwind classes](#supported-tailwind-classes)
 - Disabled state: How the link looks when it can't be clicked
-  </details>
+    </details>
 
 <details>
 <summary>Card</summary>
@@ -309,7 +309,7 @@ The interactives editor allows you to customize the appearance of interactive el
 - Border style: Choose from various border styles
 - Shadow effects: Add depth to your cards
 - Custom styles: Add your own custom styles using [supported Tailwind classes](#supported-tailwind-classes)
-  </details>
+    </details>
 
 <details>
 <summary>Input</summary>
@@ -320,7 +320,7 @@ The interactives editor allows you to customize the appearance of interactive el
 - Shadow effects: Add depth to your input fields
 - Custom styles: Add your own custom styles using [supported Tailwind classes](#supported-tailwind-classes)
 - Disabled state: How the input looks when it can't be used
-  </details>
+    </details>
 
 ### 4. Structure
 
@@ -332,14 +332,14 @@ The structure editor lets you customize the layout of your pages, like section p
 <summary>Page</summary>
 
 - Maximum width options: - 2XL (42rem): Compact layout - 3XL (48rem): Standard layout - 4XL (56rem): Wide layout - 5XL (64rem): Extra wide layout - 6XL (72rem): Full width layout
-  </details>
+    </details>
 
 <details>
 <summary>Section</summary>
 
 - Horizontal padding: Space on the left and right sides (None to 9X Large)
 - Vertical padding: Space on the top and bottom (None to 9X Large)
-  </details>
+    </details>
 
 ## Publishing Changes
 
@@ -387,7 +387,7 @@ When adding custom styles to interactive elements, you can use the following Tai
 - `text-6xl`: 6X large text
 - `text-7xl`: 7X large text
 - `text-8xl`: 8X large text
-  </details>
+    </details>
 
 <details>
 <summary>Padding</summary>
@@ -399,7 +399,7 @@ When adding custom styles to interactive elements, you can use the following Tai
 #### Horizontal Padding
 
 - `px-4` to `px-20`: Horizontal padding from 1rem to 5rem
-  </details>
+    </details>
 
 <details>
 <summary>Colors</summary>
@@ -454,7 +454,7 @@ Variants available: `hover`, `disabled`, `dark`
 - `ease-out`: Ease out
 - `ease-in-out`: Ease in and out
 - `ease-linear`: Linear
-  </details>
+    </details>
 
 <details>
 <summary>Transforms</summary>
@@ -481,7 +481,7 @@ Variants available: `hover`, `disabled`, `dark`
 - `scale-110`: 110% scale
 - `scale-125`: 125% scale
 - `scale-150`: 150% scale
-  </details>
+    </details>
 
 <details>
 <summary>Shadows</summary>
diff --git a/apps/web/components/community/index.tsx b/apps/web/components/community/index.tsx
index 9eeb8e600..fba026fe6 100644
--- a/apps/web/components/community/index.tsx
+++ b/apps/web/components/community/index.tsx
@@ -579,13 +579,46 @@ export function CommunityForum({
     const uploadFile = async (file: File) => {
         try {
             const presignedUrl = await getPresignedUrl();
-            const media = await uploadToServer(presignedUrl, file);
-            return media;
+
+            // Use chunked upload for files larger than 10MB
+            const useChunkedUpload = file.size > 10 * 1024 * 1024;
+
+            if (useChunkedUpload) {
+                const media = await uploadFileInChunks(presignedUrl, file);
+                return media;
+            } else {
+                const media = await uploadToServer(presignedUrl, file);
+                return media;
+            }
         } catch (err) {
             throw new Error(`Media upload: ${err.message}`);
         }
     };
 
+    const uploadFileInChunks = async (
+        presignedUrl: string,
+        file: File,
+    ): Promise<Media> => {
+        const { uploadFileInChunks: uploadChunked } = await import(
+            "../../lib/chunked-upload"
+        );
+
+        return uploadChunked({
+            file,
+            presignedUrl,
+            access: "public",
+            caption: file.name,
+            group: community?.name,
+            onProgress: (progress) => {
+                // You can add progress tracking here if needed
+                console.error(`Upload progress: ${progress.percentage}%`);
+            },
+            onError: (error) => {
+                console.error("Chunked upload error:", error);
+            },
+        });
+    };
+
     const uploadToServer = async (
         presignedUrl: string,
         file: File,
diff --git a/apps/web/components/public/lesson-viewer/index.tsx b/apps/web/components/public/lesson-viewer/index.tsx
index 8a906eb60..d3c350f2d 100644
--- a/apps/web/components/public/lesson-viewer/index.tsx
+++ b/apps/web/components/public/lesson-viewer/index.tsx
@@ -187,7 +187,7 @@ const LessonViewer = ({
 
     return (
         <div className="h-full">
-            <article className="flex flex-col pb-[100px] lg:max-w-[40rem] xl:max-w-[48rem] mx-auto">
+            <article className="flex flex-col pb-[100px] lg:max-w-[40rem] xl:max-w-[70rem] mx-auto">
                 {!lesson && !error && (
                     <div className="flex flex-col">
                         <Skeleton className="h-12 w-full mb-4" />
@@ -224,6 +224,7 @@ const LessonViewer = ({
                             <div>
                                 <video
                                     controls
+                                    autoPlay
                                     controlsList="nodownload" // eslint-disable-line react/no-unknown-property
                                     key={lesson.lessonId}
                                     className="w-full rounded mb-2"
@@ -274,11 +275,11 @@ const LessonViewer = ({
                         )}
                         {String.prototype.toUpperCase.call(LESSON_TYPE_PDF) ===
                             lesson.type && (
-                            <div>
+                            <div className="flex flex-col h-screen">
                                 <iframe
                                     frameBorder="0"
                                     width="100%"
-                                    height="500"
+                                    className="flex-1 min-h-[70vh]"
                                     src={`${
                                         lesson.media && lesson.media.file
                                     }#view=fit`}
diff --git a/apps/web/lib/chunked-upload.ts b/apps/web/lib/chunked-upload.ts
new file mode 100644
index 000000000..7c5654149
--- /dev/null
+++ b/apps/web/lib/chunked-upload.ts
@@ -0,0 +1,151 @@
+import { Media } from "@courselit/common-models";
+import {
+    initializeChunkedUpload,
+    uploadChunk,
+    completeChunkedUpload,
+    abortChunkedUpload,
+    ChunkedUploadInit,
+} from "../services/medialit";
+
+const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB chunks
+
+export interface ChunkedUploadProgress {
+    uploadedChunks: number;
+    totalChunks: number;
+    percentage: number;
+    uploadedBytes: number;
+    totalBytes: number;
+}
+
+export interface ChunkedUploadOptions {
+    file: File;
+    presignedUrl: string;
+    access?: string;
+    caption?: string;
+    group?: string;
+    onProgress?: (progress: ChunkedUploadProgress) => void;
+    onError?: (error: Error) => void;
+    chunkSize?: number;
+}
+
+export class ChunkedUploader {
+    private file: File;
+    private presignedUrl: string;
+    private options: ChunkedUploadOptions;
+    private uploadId: string | null = null;
+    private aborted = false;
+    private chunkSize: number;
+
+    constructor(options: ChunkedUploadOptions) {
+        this.file = options.file;
+        this.presignedUrl = options.presignedUrl;
+        this.options = options;
+        this.chunkSize = options.chunkSize || CHUNK_SIZE;
+    }
+
+    async upload(): Promise<Media> {
+        try {
+            const totalChunks = Math.ceil(this.file.size / this.chunkSize);
+
+            // Initialize chunked upload
+            const initParams: ChunkedUploadInit = {
+                fileName: this.file.name,
+                fileSize: this.file.size,
+                mimeType: this.file.type,
+                totalChunks,
+                access: this.options.access,
+                caption: this.options.caption,
+                group: this.options.group,
+            };
+
+            const initResponse = await initializeChunkedUpload(
+                initParams,
+                this.presignedUrl,
+            );
+            this.uploadId = initResponse.uploadId;
+
+            // Upload chunks
+            let uploadedBytes = 0;
+            for (
+                let chunkNumber = 0;
+                chunkNumber < totalChunks;
+                chunkNumber++
+            ) {
+                if (this.aborted) {
+                    throw new Error("Upload aborted");
+                }
+
+                const start = chunkNumber * this.chunkSize;
+                const end = Math.min(start + this.chunkSize, this.file.size);
+                const chunk = this.file.slice(start, end);
+
+                await uploadChunk(
+                    this.uploadId,
+                    chunkNumber,
+                    chunk,
+                    this.presignedUrl,
+                );
+
+                uploadedBytes += chunk.size;
+
+                // Report progress
+                if (this.options.onProgress) {
+                    const progress: ChunkedUploadProgress = {
+                        uploadedChunks: chunkNumber + 1,
+                        totalChunks,
+                        percentage: Math.round(
+                            (uploadedBytes / this.file.size) * 100,
+                        ),
+                        uploadedBytes,
+                        totalBytes: this.file.size,
+                    };
+                    this.options.onProgress(progress);
+                }
+            }
+
+            // Complete upload
+            const media = await completeChunkedUpload(
+                this.uploadId,
+                this.presignedUrl,
+            );
+            return media;
+        } catch (error) {
+            if (this.uploadId && !this.aborted) {
+                try {
+                    await abortChunkedUpload(this.uploadId, this.presignedUrl);
+                } catch (abortError) {
+                    console.error(
+                        "Failed to abort chunked upload:",
+                        abortError,
+                    );
+                }
+            }
+
+            if (this.options.onError) {
+                this.options.onError(error as Error);
+            }
+            throw error;
+        }
+    }
+
+    async abort(): Promise<void> {
+        this.aborted = true;
+        if (this.uploadId) {
+            await abortChunkedUpload(this.uploadId, this.presignedUrl);
+        }
+    }
+}
+
+export async function uploadFileInChunks(
+    options: ChunkedUploadOptions,
+): Promise<Media> {
+    const uploader = new ChunkedUploader(options);
+    return uploader.upload();
+}
+
+export function shouldUseChunkedUpload(
+    file: File,
+    threshold: number = 10 * 1024 * 1024,
+): boolean {
+    return file.size > threshold; // Default 10MB threshold
+}
diff --git a/apps/web/package.json b/apps/web/package.json
index 80c2bfe61..62abda36c 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,103 +1,103 @@
 {
-  "name": "@courselit/web",
-  "version": "0.61.12",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "prettier": "prettier --write **/*.ts"
-  },
-  "dependencies": {
-    "@courselit/common-logic": "workspace:^",
-    "@courselit/common-models": "workspace:^",
-    "@courselit/components-library": "workspace:^",
-    "@courselit/icons": "workspace:^",
-    "@courselit/page-blocks": "workspace:^",
-    "@courselit/page-models": "workspace:^",
-    "@courselit/page-primitives": "workspace:^",
-    "@courselit/state-management": "workspace:^",
-    "@courselit/utils": "workspace:^",
-    "@courselit/email-editor": "workspace:^",
-    "@hookform/resolvers": "^3.9.1",
-    "@radix-ui/react-alert-dialog": "^1.1.2",
-    "@radix-ui/react-avatar": "^1.1.3",
-    "@radix-ui/react-checkbox": "^1.1.4",
-    "@radix-ui/react-collapsible": "^1.1.3",
-    "@radix-ui/react-compose-refs": "^1.1.1",
-    "@radix-ui/react-dialog": "^1.1.6",
-    "@radix-ui/react-dropdown-menu": "^2.1.6",
-    "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-radio-group": "^1.2.3",
-    "@radix-ui/react-scroll-area": "^1.2.3",
-    "@radix-ui/react-select": "^2.1.6",
-    "@radix-ui/react-separator": "^1.1.2",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-switch": "^1.1.3",
-    "@radix-ui/react-tabs": "^1.1.3",
-    "@radix-ui/react-toast": "^1.2.6",
-    "@radix-ui/react-toggle": "^1.1.6",
-    "@radix-ui/react-toggle-group": "^1.1.7",
-    "@radix-ui/react-tooltip": "^1.1.8",
-    "@radix-ui/react-visually-hidden": "^1.1.0",
-    "@stripe/stripe-js": "^5.4.0",
-    "@types/base-64": "^1.0.0",
-    "archiver": "^5.3.1",
-    "aws4": "^1.13.2",
-    "base-64": "^1.0.0",
-    "chart.js": "^4.4.7",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.1",
-    "color-convert": "^3.1.0",
-    "cookie": "^0.4.2",
-    "date-fns": "^4.1.0",
-    "graphql": "^16.10.0",
-    "graphql-type-json": "^0.3.2",
-    "lodash.debounce": "^4.0.8",
-    "lucide-react": "^0.475.0",
-    "mongodb": "^6.15.0",
-    "mongoose": "^8.13.1",
-    "next": "^14.2.4",
-    "next-auth": "5.0.0-beta.19",
-    "next-themes": "^0.4.6",
-    "nodemailer": "^6.7.2",
-    "pug": "^3.0.2",
-    "razorpay": "^2.9.4",
-    "react": "^18.2.0",
-    "react-chartjs-2": "^5.3.0",
-    "react-csv": "^2.2.2",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.54.1",
-    "react-redux": "^8.1.2",
-    "recharts": "^2.15.1",
-    "remirror": "^3.0.1",
-    "sharp": "^0.33.2",
-    "slugify": "^1.6.5",
-    "stripe": "^17.5.0",
-    "tailwind-merge": "^2.5.4",
-    "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.24.1"
-  },
-  "devDependencies": {
-    "@types/bcryptjs": "^2.4.2",
-    "@types/cookie": "^0.4.1",
-    "@types/mongodb": "^4.0.7",
-    "@types/node": "17.0.21",
-    "@types/nodemailer": "^6.4.4",
-    "@types/pug": "^2.0.6",
-    "@types/react": "18.2.31",
-    "@types/react-redux": "^7.1.23",
-    "@types/redux-thunk": "^2.1.0",
-    "eslint": "8.48.0",
-    "eslint-config-next": "^14.0.4",
-    "eslint-config-prettier": "^9.0.0",
-    "postcss": "^8.4.27",
-    "prettier": "^3.0.2",
-    "tailwind-config": "workspace:^",
-    "tailwindcss": "^3.4.1",
-    "tsconfig": "workspace:^",
-    "typescript": "^5.6.2"
-  }
+    "name": "@courselit/web",
+    "version": "0.61.12",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint",
+        "prettier": "prettier --write **/*.ts"
+    },
+    "dependencies": {
+        "@courselit/common-logic": "workspace:^",
+        "@courselit/common-models": "workspace:^",
+        "@courselit/components-library": "workspace:^",
+        "@courselit/icons": "workspace:^",
+        "@courselit/page-blocks": "workspace:^",
+        "@courselit/page-models": "workspace:^",
+        "@courselit/page-primitives": "workspace:^",
+        "@courselit/state-management": "workspace:^",
+        "@courselit/utils": "workspace:^",
+        "@courselit/email-editor": "workspace:^",
+        "@hookform/resolvers": "^3.9.1",
+        "@radix-ui/react-alert-dialog": "^1.1.2",
+        "@radix-ui/react-avatar": "^1.1.3",
+        "@radix-ui/react-checkbox": "^1.1.4",
+        "@radix-ui/react-collapsible": "^1.1.3",
+        "@radix-ui/react-compose-refs": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-dropdown-menu": "^2.1.6",
+        "@radix-ui/react-label": "^2.1.2",
+        "@radix-ui/react-popover": "^1.1.6",
+        "@radix-ui/react-radio-group": "^1.2.3",
+        "@radix-ui/react-scroll-area": "^1.2.3",
+        "@radix-ui/react-select": "^2.1.6",
+        "@radix-ui/react-separator": "^1.1.2",
+        "@radix-ui/react-slot": "^1.1.2",
+        "@radix-ui/react-switch": "^1.1.3",
+        "@radix-ui/react-tabs": "^1.1.3",
+        "@radix-ui/react-toast": "^1.2.6",
+        "@radix-ui/react-toggle": "^1.1.6",
+        "@radix-ui/react-toggle-group": "^1.1.7",
+        "@radix-ui/react-tooltip": "^1.1.8",
+        "@radix-ui/react-visually-hidden": "^1.1.0",
+        "@stripe/stripe-js": "^5.4.0",
+        "@types/base-64": "^1.0.0",
+        "archiver": "^5.3.1",
+        "aws4": "^1.13.2",
+        "base-64": "^1.0.0",
+        "chart.js": "^4.4.7",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.1",
+        "color-convert": "^3.1.0",
+        "cookie": "^0.4.2",
+        "date-fns": "^4.1.0",
+        "graphql": "^16.10.0",
+        "graphql-type-json": "^0.3.2",
+        "lodash.debounce": "^4.0.8",
+        "lucide-react": "^0.475.0",
+        "mongodb": "^6.15.0",
+        "mongoose": "^8.13.1",
+        "next": "^14.2.4",
+        "next-auth": "5.0.0-beta.19",
+        "next-themes": "^0.4.6",
+        "nodemailer": "^6.7.2",
+        "pug": "^3.0.2",
+        "razorpay": "^2.9.4",
+        "react": "^18.2.0",
+        "react-chartjs-2": "^5.3.0",
+        "react-csv": "^2.2.2",
+        "react-dom": "^18.2.0",
+        "react-hook-form": "^7.54.1",
+        "react-redux": "^8.1.2",
+        "recharts": "^2.15.1",
+        "remirror": "^3.0.1",
+        "sharp": "^0.33.2",
+        "slugify": "^1.6.5",
+        "stripe": "^17.5.0",
+        "tailwind-merge": "^2.5.4",
+        "tailwindcss-animate": "^1.0.7",
+        "zod": "^3.24.1"
+    },
+    "devDependencies": {
+        "@types/bcryptjs": "^2.4.2",
+        "@types/cookie": "^0.4.1",
+        "@types/mongodb": "^4.0.7",
+        "@types/node": "17.0.21",
+        "@types/nodemailer": "^6.4.4",
+        "@types/pug": "^2.0.6",
+        "@types/react": "18.2.31",
+        "@types/react-redux": "^7.1.23",
+        "@types/redux-thunk": "^2.1.0",
+        "eslint": "8.48.0",
+        "eslint-config-next": "^14.0.4",
+        "eslint-config-prettier": "^9.0.0",
+        "postcss": "^8.4.27",
+        "prettier": "^3.0.2",
+        "tailwind-config": "workspace:^",
+        "tailwindcss": "^3.4.1",
+        "tsconfig": "workspace:^",
+        "typescript": "^5.6.2"
+    }
 }
diff --git a/apps/web/services/medialit.ts b/apps/web/services/medialit.ts
index 73b534742..18115ff28 100644
--- a/apps/web/services/medialit.ts
+++ b/apps/web/services/medialit.ts
@@ -1,5 +1,5 @@
 import { Media } from "@courselit/common-models";
-import { responses } from "../config/strings.ts";
+import { responses } from "../config/strings";
 
 const medialitServer = process.env.MEDIALIT_SERVER || "https://medialit.cloud";
 
@@ -108,11 +108,7 @@ export async function deleteMedia(mediaId: string): Promise<boolean> {
         throw new Error(response.error);
     }
 
-    if (response.message === "success") {
-        return true;
-    } else {
-        throw new Error(response.message);
-    }
+    return response.message === "success";
 }
 
 function checkMediaLitAPIKeyOrThrow() {
@@ -120,3 +116,136 @@ function checkMediaLitAPIKeyOrThrow() {
         throw new Error(responses.medialit_apikey_notfound);
     }
 }
+
+// Chunked upload functions
+export interface ChunkedUploadInit {
+    fileName: string;
+    fileSize: number;
+    mimeType: string;
+    totalChunks: number;
+    access?: string;
+    caption?: string;
+    group?: string;
+}
+
+export interface ChunkedUploadResponse {
+    uploadId: string;
+    message: string;
+}
+
+export interface ChunkUploadResponse {
+    message: string;
+    uploadedChunks: number;
+    totalChunks: number;
+}
+
+export async function initializeChunkedUpload(
+    params: ChunkedUploadInit,
+    presignedUrl: string,
+): Promise<ChunkedUploadResponse> {
+    // Extract base URL and query params from presigned URL
+    const url = new URL(presignedUrl);
+    const baseUrl = `${url.protocol}//${url.host}`;
+    const queryParams = url.search;
+
+    // Construct chunked init URL
+    const initUrl = `${baseUrl}/media/chunked/init${queryParams}`;
+
+    const response = await fetch(initUrl, {
+        method: "POST",
+        headers: {
+            "content-type": "application/json",
+        },
+        body: JSON.stringify(params),
+    });
+
+    if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || "Failed to initialize chunked upload");
+    }
+
+    return response.json();
+}
+
+export async function uploadChunk(
+    uploadId: string,
+    chunkNumber: number,
+    chunk: Blob,
+    presignedUrl: string,
+): Promise<ChunkUploadResponse> {
+    const formData = new FormData();
+    formData.append("chunk", chunk);
+    formData.append("chunkNumber", chunkNumber.toString());
+
+    // Extract base URL and query params from presigned URL
+    const url = new URL(presignedUrl);
+    const baseUrl = `${url.protocol}//${url.host}`;
+    const queryParams = url.search;
+
+    // Construct chunk upload URL
+    const uploadUrl = `${baseUrl}/media/chunked/upload/${uploadId}${queryParams}`;
+
+    const response = await fetch(uploadUrl, {
+        method: "POST",
+        body: formData,
+    });
+
+    if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || "Failed to upload chunk");
+    }
+
+    return response.json();
+}
+
+export async function completeChunkedUpload(
+    uploadId: string,
+    presignedUrl: string,
+): Promise<Media> {
+    // Extract base URL and query params from presigned URL
+    const url = new URL(presignedUrl);
+    const baseUrl = `${url.protocol}//${url.host}`;
+    const queryParams = url.search;
+
+    // Construct complete upload URL
+    const completeUrl = `${baseUrl}/media/chunked/complete/${uploadId}${queryParams}`;
+
+    const response = await fetch(completeUrl, {
+        method: "POST",
+        headers: {
+            "content-type": "application/json",
+        },
+    });
+
+    if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || "Failed to complete chunked upload");
+    }
+
+    return response.json();
+}
+
+export async function abortChunkedUpload(
+    uploadId: string,
+    presignedUrl: string,
+): Promise<void> {
+    // Extract base URL and query params from presigned URL
+    const url = new URL(presignedUrl);
+    const baseUrl = `${url.protocol}//${url.host}`;
+    const queryParams = url.search;
+
+    // Construct abort upload URL
+    const abortUrl = `${baseUrl}/media/chunked/abort/${uploadId}${queryParams}`;
+
+    const response = await fetch(abortUrl, {
+        method: "DELETE",
+        headers: {
+            "content-type": "application/json",
+        },
+    });
+
+    if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || "Failed to abort chunked upload");
+    }
+}
diff --git a/packages/components-library/src/chunked-upload.ts b/packages/components-library/src/chunked-upload.ts
new file mode 100644
index 000000000..efecd8e92
--- /dev/null
+++ b/packages/components-library/src/chunked-upload.ts
@@ -0,0 +1,274 @@
+export interface ChunkedUploadInit {
+    fileName: string;
+    fileSize: number;
+    mimeType: string;
+    totalChunks: number;
+    access?: string;
+    caption?: string;
+    group?: string;
+}
+
+export interface ChunkedUploadResponse {
+    uploadId: string;
+    message: string;
+}
+
+export interface ChunkUploadResponse {
+    message: string;
+    uploadedChunks: number;
+    totalChunks: number;
+}
+
+export interface ChunkedUploadProgress {
+    uploadedChunks: number;
+    totalChunks: number;
+    percentage: number;
+    uploadedBytes: number;
+    totalBytes: number;
+}
+
+export interface ChunkedUploadOptions {
+    file: File;
+    presignedUrl: string;
+    access?: string;
+    caption?: string;
+    group?: string;
+    onProgress?: (progress: ChunkedUploadProgress) => void;
+    onError?: (error: Error) => void;
+    chunkSize?: number;
+}
+
+const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB chunks
+
+async function initializeChunkedUpload(
+    params: ChunkedUploadInit,
+    presignedUrl: string,
+): Promise<ChunkedUploadResponse> {
+    // Extract base URL and query params from presigned URL
+    const url = new URL(presignedUrl);
+    const baseUrl = `${url.protocol}//${url.host}`;
+    const queryParams = url.search;
+
+    // Construct chunked init URL
+    const initUrl = `${baseUrl}/media/chunked/init${queryParams}`;
+
+    const response = await fetch(initUrl, {
+        method: "POST",
+        headers: {
+            "content-type": "application/json",
+        },
+        body: JSON.stringify(params),
+    });
+
+    if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || "Failed to initialize chunked upload");
+    }
+
+    return response.json();
+}
+
+async function uploadChunk(
+    uploadId: string,
+    chunkNumber: number,
+    chunk: Blob,
+    presignedUrl: string,
+): Promise<ChunkUploadResponse> {
+    const formData = new FormData();
+    formData.append("chunk", chunk);
+    formData.append("chunkNumber", chunkNumber.toString());
+
+    // Extract base URL and query params from presigned URL
+    const url = new URL(presignedUrl);
+    const baseUrl = `${url.protocol}//${url.host}`;
+    const queryParams = url.search;
+
+    // Construct chunk upload URL
+    const uploadUrl = `${baseUrl}/media/chunked/upload/${uploadId}${queryParams}`;
+
+    const response = await fetch(uploadUrl, {
+        method: "POST",
+        body: formData,
+    });
+
+    if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || "Failed to upload chunk");
+    }
+
+    return response.json();
+}
+
+async function completeChunkedUpload(
+    uploadId: string,
+    presignedUrl: string,
+): Promise<any> {
+    // Extract base URL and query params from presigned URL
+    const url = new URL(presignedUrl);
+    const baseUrl = `${url.protocol}//${url.host}`;
+    const queryParams = url.search;
+
+    // Construct complete upload URL
+    const completeUrl = `${baseUrl}/media/chunked/complete/${uploadId}${queryParams}`;
+
+    const response = await fetch(completeUrl, {
+        method: "POST",
+        headers: {
+            "content-type": "application/json",
+        },
+    });
+
+    if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || "Failed to complete chunked upload");
+    }
+
+    return response.json();
+}
+
+async function abortChunkedUpload(
+    uploadId: string,
+    presignedUrl: string,
+): Promise<void> {
+    // Extract base URL and query params from presigned URL
+    const url = new URL(presignedUrl);
+    const baseUrl = `${url.protocol}//${url.host}`;
+    const queryParams = url.search;
+
+    // Construct abort upload URL
+    const abortUrl = `${baseUrl}/media/chunked/abort/${uploadId}${queryParams}`;
+
+    const response = await fetch(abortUrl, {
+        method: "DELETE",
+        headers: {
+            "content-type": "application/json",
+        },
+    });
+
+    if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || "Failed to abort chunked upload");
+    }
+}
+
+export class ChunkedUploader {
+    private file: File;
+    private presignedUrl: string;
+    private options: ChunkedUploadOptions;
+    private uploadId: string | null = null;
+    private aborted = false;
+    private chunkSize: number;
+
+    constructor(options: ChunkedUploadOptions) {
+        this.file = options.file;
+        this.presignedUrl = options.presignedUrl;
+        this.options = options;
+        this.chunkSize = options.chunkSize || CHUNK_SIZE;
+    }
+
+    async upload(): Promise<any> {
+        try {
+            const totalChunks = Math.ceil(this.file.size / this.chunkSize);
+
+            // Initialize chunked upload
+            const initParams: ChunkedUploadInit = {
+                fileName: this.file.name,
+                fileSize: this.file.size,
+                mimeType: this.file.type,
+                totalChunks,
+                access: this.options.access,
+                caption: this.options.caption,
+                group: this.options.group,
+            };
+
+            const initResponse = await initializeChunkedUpload(
+                initParams,
+                this.presignedUrl,
+            );
+            this.uploadId = initResponse.uploadId;
+
+            // Upload chunks
+            let uploadedBytes = 0;
+            for (
+                let chunkNumber = 0;
+                chunkNumber < totalChunks;
+                chunkNumber++
+            ) {
+                if (this.aborted) {
+                    throw new Error("Upload aborted");
+                }
+
+                const start = chunkNumber * this.chunkSize;
+                const end = Math.min(start + this.chunkSize, this.file.size);
+                const chunk = this.file.slice(start, end);
+
+                await uploadChunk(
+                    this.uploadId,
+                    chunkNumber,
+                    chunk,
+                    this.presignedUrl,
+                );
+
+                uploadedBytes += chunk.size;
+
+                // Report progress
+                if (this.options.onProgress) {
+                    const progress: ChunkedUploadProgress = {
+                        uploadedChunks: chunkNumber + 1,
+                        totalChunks,
+                        percentage: Math.round(
+                            (uploadedBytes / this.file.size) * 100,
+                        ),
+                        uploadedBytes,
+                        totalBytes: this.file.size,
+                    };
+                    this.options.onProgress(progress);
+                }
+            }
+
+            // Complete upload
+            const media = await completeChunkedUpload(
+                this.uploadId,
+                this.presignedUrl,
+            );
+            return media;
+        } catch (error) {
+            if (this.uploadId && !this.aborted) {
+                try {
+                    await abortChunkedUpload(this.uploadId, this.presignedUrl);
+                } catch (abortError) {
+                    console.error(
+                        "Failed to abort chunked upload:",
+                        abortError,
+                    );
+                }
+            }
+
+            if (this.options.onError) {
+                this.options.onError(error as Error);
+            }
+            throw error;
+        }
+    }
+
+    async abort(): Promise<void> {
+        this.aborted = true;
+        if (this.uploadId) {
+            await abortChunkedUpload(this.uploadId, this.presignedUrl);
+        }
+    }
+}
+
+export async function uploadFileInChunks(
+    options: ChunkedUploadOptions,
+): Promise<any> {
+    const uploader = new ChunkedUploader(options);
+    return uploader.upload();
+}
+
+export function shouldUseChunkedUpload(
+    file: File,
+    threshold: number = 10 * 1024 * 1024,
+): boolean {
+    return file.size > threshold; // Default 10MB threshold
+}
diff --git a/packages/components-library/src/index.ts b/packages/components-library/src/index.ts
index 2c37c6571..33e20b94c 100644
--- a/packages/components-library/src/index.ts
+++ b/packages/components-library/src/index.ts
@@ -38,6 +38,11 @@ import CssIdField from "./css-id-field";
 import Select from "./select";
 import Tooltip from "./tooltip";
 import DragAndDrop from "./drag-and-drop";
+import {
+    uploadFileInChunks,
+    shouldUseChunkedUpload,
+    ChunkedUploader,
+} from "./chunked-upload";
 
 export { Button as Button2 } from "./components/ui/button";
 export * from "./components/ui/avatar";
@@ -105,4 +110,7 @@ export {
     CssIdField,
     DragAndDrop,
     getSymbolFromCurrency,
+    uploadFileInChunks,
+    shouldUseChunkedUpload,
+    ChunkedUploader,
 };
diff --git a/packages/components-library/src/media-selector/index.tsx b/packages/components-library/src/media-selector/index.tsx
index 91b1ec69e..bacc02127 100644
--- a/packages/components-library/src/media-selector/index.tsx
+++ b/packages/components-library/src/media-selector/index.tsx
@@ -9,7 +9,13 @@ import { FetchBuilder } from "@courselit/utils";
 import Form from "../form";
 import FormField from "../form-field";
 import React from "react";
-import { Button2, PageBuilderPropertyHeader, Tooltip, useToast } from "..";
+import {
+    Button2,
+    PageBuilderPropertyHeader,
+    Tooltip,
+    uploadFileInChunks,
+    useToast,
+} from "..";
 import { X } from "lucide-react";
 
 interface Strings {
@@ -71,8 +77,9 @@ const MediaSelector = (props: MediaSelectorProps) => {
     };
     const [uploadData, setUploadData] = useState(defaultUploadData);
     const fileInput: React.RefObject<HTMLInputElement> = React.createRef();
-    const [selectedFile, setSelectedFile] = useState();
+    const [selectedFile, setSelectedFile] = useState<File | undefined>();
     const [caption, setCaption] = useState("");
+    const [uploadProgress, setUploadProgress] = useState(0);
     const { toast } = useToast();
     const {
         strings,
@@ -95,10 +102,12 @@ const MediaSelector = (props: MediaSelectorProps) => {
         props.onSelection(media);
     };
 
-    const getPresignedUrl = async () => {
+    const getPresignedUrl = async (chunked = false) => {
         const fetch = new FetchBuilder()
             .setUrl(`${address.backend}/api/media/presigned`)
             .setIsGraphQLEndpoint(false)
+            .setPayload(JSON.stringify({ chunked }))
+            .setHeaders({ "Content-Type": "application/json" })
             .build();
         const response = await fetch.exec();
         return response.url;
@@ -112,30 +121,34 @@ const MediaSelector = (props: MediaSelectorProps) => {
     }, [dialogOpened]);
 
     const uploadToServer = async (presignedUrl: string): Promise<Media> => {
-        const fD = new FormData();
-        fD.append("caption", (uploadData.caption = caption));
-        fD.append("access", uploadData.public ? "public" : "private");
-        fD.append("file", selectedFile);
+        const file = selectedFile;
+        if (!file) {
+            throw new Error("No file selected");
+        }
+
+        const access = uploadData.public ? "public" : "private";
 
         setUploadData(
             Object.assign({}, uploadData, {
                 uploading: true,
             }),
         );
-        const res = await fetch(presignedUrl, {
-            method: "POST",
-            body: fD,
+
+        // Get a chunked presigned URL with longer validity
+        const chunkedPresignedUrl = await getPresignedUrl(true);
+
+        return uploadFileInChunks({
+            file,
+            presignedUrl: chunkedPresignedUrl,
+            access,
+            caption: uploadData.caption || caption,
+            onProgress: (progress) => {
+                setUploadProgress(progress.percentage);
+            },
+            onError: (error) => {
+                console.error("Chunked upload error:", error);
+            },
         });
-        if (res.status === 200) {
-            const media = await res.json();
-            if (media) {
-                delete media.group;
-            }
-            return media;
-        } else {
-            const resp = await res.json();
-            throw new Error(resp.error);
-        }
     };
 
     const uploadFile = async (e: React.FormEvent<HTMLFormElement>) => {
@@ -158,6 +171,7 @@ const MediaSelector = (props: MediaSelectorProps) => {
             setUploading(false);
             setSelectedFile(undefined);
             setCaption("");
+            setUploadProgress(0);
             setDialogOpened(false);
         }
     };
@@ -269,6 +283,22 @@ const MediaSelector = (props: MediaSelectorProps) => {
                                     className="mt-2"
                                     required
                                 />
+                                {uploading && (
+                                    <div className="flex flex-col gap-2">
+                                        <div className="flex justify-between text-sm">
+                                            <span>Upload Progress</span>
+                                            <span>{uploadProgress}%</span>
+                                        </div>
+                                        <div className="w-full bg-gray-200 rounded-full h-2">
+                                            <div
+                                                className="bg-blue-600 h-2 rounded-full transition-all duration-300"
+                                                style={{
+                                                    width: `${uploadProgress}%`,
+                                                }}
+                                            />
+                                        </div>
+                                    </div>
+                                )}
                                 <FormField
                                     label={"Caption"}
                                     name="caption"
diff --git a/services/app/Dockerfile b/services/app/Dockerfile
index f2d4ca5c5..c1e6bf14e 100644
--- a/services/app/Dockerfile
+++ b/services/app/Dockerfile
@@ -38,6 +38,9 @@ WORKDIR /app
 
 COPY --from=deps /app/ ./
 
+# Add ca-certificates to the builder image
+RUN apk add --no-cache ca-certificates 
+
 # Build all workspaces
 RUN pnpm run build