diff --git a/.github/actions/run-cypress-tests/action.yaml b/.github/actions/run-cypress-tests/action.yaml
index a4d845b..e657886 100644
--- a/.github/actions/run-cypress-tests/action.yaml
+++ b/.github/actions/run-cypress-tests/action.yaml
@@ -15,7 +15,7 @@ runs:
 
     - name: Setup Docker project
       shell: bash
-      run: make build up-dev
+      run: make build-ci up-ci
 
     - name: Install dependencies
       shell: bash
diff --git a/.gitignore b/.gitignore
index f74c7d3..8ac86da 100644
--- a/.gitignore
+++ b/.gitignore
@@ -188,6 +188,18 @@ postgres_data
 .vscode
 ollama
 data
-media
+
+media/images
+media/videos
+media/audio
+media/pdfs
+media/spreadsheets
+media/presentations
+media/documents
+media/recordings
+media/download_summary.txt
+
 cypress/screenshots
-cypress/videos
\ No newline at end of file
+cypress/videos
+
+docker-compose.dev.local.yml
\ No newline at end of file
diff --git a/Makefile b/Makefile
index b33f273..94bc27d 100644
--- a/Makefile
+++ b/Makefile
@@ -1,6 +1,6 @@
 .DEFAULT_GOAL := help
 
-COMPOSE_DEV = docker compose -f docker-compose.yml -f docker-compose.dev.yml
+COMPOSE_DEV = docker compose -f docker-compose.yml -f docker-compose.dev.local.yml
 COMPOSE_PROD = docker compose -f docker-compose.yml
 
 .PHONY: help deps build pull up up-dev down setup deploy
@@ -53,5 +53,11 @@ setup:
 deploy:
 	ansible-playbook -i ./ansible/inventory.yaml ./ansible/deploy_site.yaml -v
 
+build-ci:
+	docker compose -f docker-compose.yml -f docker-compose.dev.yml build
+
+up-ci:
+	docker compose -f docker-compose.yml -f docker-compose.dev.yml up -d --force-recreate
+
 cypress-start:
 	DISPLAY=:0 npx cypress open
\ No newline at end of file
diff --git a/README.md b/README.md
index 03c7580..ed586f0 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@
 
 ## 📋 Overview
 
-Scraperr enables you to extract data from websites with precision using XPath selectors. This self-hosted application provides a clean interface to manage scraping jobs, view results, and export data.
+Scrape websites without writing a single line of code.
 
 > 📚 **[Check out the docs](https://scraperr-docs.pages.dev)** for a comprehensive quickstart guide and detailed information.
 
@@ -29,7 +29,7 @@ Scraperr enables you to extract data from websites with precision using XPath se
 - **Custom Headers**: Add JSON headers to your scraping requests
 - **Media Downloads**: Automatically download images, videos, and other media
 - **Results Visualization**: View scraped data in a structured table format
-- **Data Export**: Export your results in various formats
+- **Data Export**: Export your results in markdown and csv formats
 - **Notifcation Channels**: Send completion notifcations, through various channels
 
 ## 🚀 Getting Started
diff --git a/api/backend/constants.py b/api/backend/constants.py
index d009219..0939855 100644
--- a/api/backend/constants.py
+++ b/api/backend/constants.py
@@ -4,3 +4,13 @@ import os
 DATABASE_PATH = "data/database.db"
 RECORDINGS_DIR = Path("media/recordings")
 RECORDINGS_ENABLED = os.getenv("RECORDINGS_ENABLED", "true").lower() == "true"
+MEDIA_DIR = Path("media")
+MEDIA_TYPES = [
+    "audio",
+    "documents",
+    "images",
+    "pdfs",
+    "presentations",
+    "spreadsheets",
+    "videos",
+]
diff --git a/api/backend/job/scraping/collect_media.py b/api/backend/job/scraping/collect_media.py
index 6cab8f3..e62f587 100644
--- a/api/backend/job/scraping/collect_media.py
+++ b/api/backend/job/scraping/collect_media.py
@@ -1,6 +1,7 @@
 import os
 from pathlib import Path
-from urllib.parse import urlparse
+import re
+from urllib.parse import urljoin, urlparse
 from typing import Dict, List
 
 import aiohttp
@@ -9,12 +10,12 @@ from playwright.async_api import Page
 from api.backend.utils import LOG
 
 
-async def collect_media(page: Page) -> dict[str, list[dict[str, str]]]:
+async def collect_media(id: str, page: Page) -> dict[str, list[dict[str, str]]]:
     media_types = {
         "images": "img",
         "videos": "video",
         "audio": "audio",
-        "pdfs": 'a[href$=".pdf"]',
+        "pdfs": 'a[href$=".pdf"], a[href*=".pdf#page="]',
         "documents": 'a[href$=".doc"], a[href$=".docx"], a[href$=".txt"], a[href$=".rtf"]',
         "presentations": 'a[href$=".ppt"], a[href$=".pptx"]',
         "spreadsheets": 'a[href$=".xls"], a[href$=".xlsx"], a[href$=".csv"]',
@@ -48,6 +49,11 @@ async def collect_media(page: Page) -> dict[str, list[dict[str, str]]]:
                     root_domain = f"{root_url.scheme}://{root_url.netloc}"
                     url = f"{root_domain}{url}"
 
+                if url and re.match(r"^[\w\-]+/", url):
+                    root_url = urlparse(page.url)
+                    root_domain = f"{root_url.scheme}://{root_url.netloc}"
+                    url = urljoin(root_domain + "/", url)
+
                 if url and url.startswith(("http://", "https://")):
                     try:
                         parsed = urlparse(url)
@@ -67,15 +73,20 @@ async def collect_media(page: Page) -> dict[str, list[dict[str, str]]]:
                             }.get(media_type, "")
                             filename += ext
 
-                        file_path = media_dir / filename
+                        if not os.path.exists(media_dir / id):
+                            os.makedirs(media_dir / id, exist_ok=True)
+
+                        file_path = media_dir / id / f"{filename}"
 
                         async with session.get(url) as response:
                             response.raise_for_status()
+
                             with open(file_path, "wb") as f:
                                 while True:
                                     chunk = await response.content.read(8192)
                                     if not chunk:
                                         break
+
                                     f.write(chunk)
 
                         urls.append({"url": url, "local_path": str(file_path)})
diff --git a/api/backend/job/scraping/scraping_utils.py b/api/backend/job/scraping/scraping_utils.py
index bd71043..bffceaf 100644
--- a/api/backend/job/scraping/scraping_utils.py
+++ b/api/backend/job/scraping/scraping_utils.py
@@ -8,7 +8,7 @@ from api.backend.job.scraping.collect_media import collect_media as collect_medi
 
 
 async def scrape_content(
-    page: Page, pages: Set[Tuple[str, str]], collect_media: bool
+    id: str, page: Page, pages: Set[Tuple[str, str]], collect_media: bool
 ) -> str:
     last_height = await page.evaluate("document.body.scrollHeight")
 
@@ -27,6 +27,6 @@ async def scrape_content(
 
     if collect_media:
         LOG.info("Collecting media")
-        await collect_media_utils(page)
+        await collect_media_utils(id, page)
 
     return html
diff --git a/api/backend/routers/job_router.py b/api/backend/routers/job_router.py
index 13c1be5..2a13b90 100644
--- a/api/backend/routers/job_router.py
+++ b/api/backend/routers/job_router.py
@@ -42,7 +42,7 @@ from api.backend.job.cron_scheduling.cron_scheduling import (
 from api.backend.job.utils.clean_job_format import clean_job_format
 from api.backend.job.utils.stream_md_from_job_results import stream_md_from_job_results
 
-from api.backend.constants import RECORDINGS_DIR
+from api.backend.constants import MEDIA_DIR, MEDIA_TYPES, RECORDINGS_DIR
 
 LOG = logging.getLogger(__name__)
 
@@ -244,3 +244,30 @@ async def get_recording(id: str):
     return FileResponse(
         path, headers={"Content-Type": "video/mp4", "Accept-Ranges": "bytes"}
     )
+
+
+@job_router.get("/get-media")
+async def get_media(id: str):
+    try:
+        files: dict[str, list[str]] = {}
+
+        for media_type in MEDIA_TYPES:
+            path = MEDIA_DIR / media_type / f"{id}"
+
+            files[media_type] = [file.name for file in path.glob("*")]
+
+        return JSONResponse(content={"files": files})
+    except Exception as e:
+        LOG.error(f"Exception occurred: {e}")
+        traceback.print_exc()
+        return JSONResponse(content={"error": str(e)}, status_code=500)
+
+
+@job_router.get("/media")
+async def get_media_file(id: str, type: str, file: str):
+    path = MEDIA_DIR / type / f"{id}" / file
+
+    if not path.exists():
+        return JSONResponse(content={"error": "Media file not found."}, status_code=404)
+
+    return FileResponse(path)
diff --git a/api/backend/scraping.py b/api/backend/scraping.py
index 6024e28..21b7699 100644
--- a/api/backend/scraping.py
+++ b/api/backend/scraping.py
@@ -1,5 +1,4 @@
 import logging
-from pickle import FALSE
 import random
 from typing import Any, Optional, cast
 
@@ -40,6 +39,7 @@ def sxpath(context: etree._Element, xpath: str):
 
 
 async def make_site_request(
+    id: str,
     url: str,
     headers: Optional[dict[str, Any]],
     multi_page_scrape: bool = False,
@@ -71,14 +71,14 @@ async def make_site_request(
 
         try:
             await page.goto(url, timeout=60000)
-            await page.wait_for_load_state("networkidle", timeout=10000)
+            await page.wait_for_load_state("networkidle")
 
             final_url = page.url
 
             visited_urls.add(url)
             visited_urls.add(final_url)
 
-            html_content = await scrape_content(page, pages, collect_media)
+            html_content = await scrape_content(id, page, pages, collect_media)
 
             html_content = await page.content()
             pages.add((html_content, final_url))
@@ -112,6 +112,7 @@ async def make_site_request(
 
         if link not in visited_urls and is_same_domain(link, original_url):
             await make_site_request(
+                id,
                 link,
                 headers=headers,
                 multi_page_scrape=multi_page_scrape,
@@ -136,11 +137,20 @@ async def collect_scraped_elements(page: tuple[str, str], xpaths: list[Element])
 
         for e in el:  # type: ignore
             text = (
-                "\t".join(str(t) for t in e.itertext())
+                " ".join(str(t) for t in e.itertext())
                 if isinstance(e, etree._Element)
                 else str(e)  # type: ignore
             )
 
+            text = text.strip()
+            text = text.replace("\n", " ")
+            text = text.replace("\t", " ")
+            text = text.replace("\r", " ")
+            text = text.replace("\f", " ")
+            text = text.replace("\v", " ")
+            text = text.replace("\b", " ")
+            text = text.replace("\a", " ")
+
             captured_element = CapturedElement(
                 xpath=elem.xpath, text=text, name=elem.name
             )
@@ -154,6 +164,7 @@ async def collect_scraped_elements(page: tuple[str, str], xpaths: list[Element])
 
 
 async def scrape(
+    id: str,
     url: str,
     xpaths: list[Element],
     headers: Optional[dict[str, Any]] = None,
@@ -167,6 +178,7 @@ async def scrape(
     pages: set[tuple[str, str]] = set()
 
     await make_site_request(
+        id,
         url,
         headers=headers,
         multi_page_scrape=multi_page_scrape,
diff --git a/api/backend/worker/job_worker.py b/api/backend/worker/job_worker.py
index e550a39..e8a130e 100644
--- a/api/backend/worker/job_worker.py
+++ b/api/backend/worker/job_worker.py
@@ -76,6 +76,7 @@ async def process_job():
                     proxies = []
 
             scraped = await scrape(
+                job["id"],
                 job["url"],
                 [Element(**j) for j in job["elements"]],
                 job["job_options"]["custom_headers"],
diff --git a/cypress/e2e/submit-job.cy.ts b/cypress/e2e/submit-job.cy.ts
index 4d4ccf1..e36824b 100644
--- a/cypress/e2e/submit-job.cy.ts
+++ b/cypress/e2e/submit-job.cy.ts
@@ -30,5 +30,59 @@ describe.only("Job", () => {
       "exist"
     );
     cy.contains("div", "Completed", { timeout: 20000 }).should("exist");
+
+    cy.get("tbody tr")
+      .first()
+      .within(() => {
+        cy.get('input[type="checkbox"]').click();
+      });
+
+    cy.get("[data-testid='DeleteIcon']").click();
+
+    cy.contains("div", "https://example.com", { timeout: 10000 }).should(
+      "not.exist"
+    );
+  });
+
+  it("should create a job with advanced options (media)", () => {
+    cy.intercept("POST", "/api/submit-scrape-job").as("submitScrapeJob");
+
+    cy.visit("/");
+
+    cy.get("button").contains("Advanced Job Options").click();
+
+    cy.get('[data-cy="collect-media-checkbox"]').click();
+    cy.get("body").type("{esc}");
+
+    cy.get('[data-cy="url-input"]').type("https://books.toscrape.com");
+    cy.get('[data-cy="name-field"]').type("example");
+    cy.get('[data-cy="xpath-field"]').type("//body");
+    cy.get('[data-cy="add-button"]').click();
+
+    cy.get("button").contains("Submit").click();
+
+    cy.get("li").contains("Jobs").click();
+
+    cy.contains("div", "https://books.toscrape.com", { timeout: 10000 }).should(
+      "exist"
+    );
+
+    cy.contains("div", "Completed", { timeout: 20000 }).should("exist");
+    cy.get("li").contains("Media").click();
+
+    cy.get("div[id='select-job']").click();
+    cy.get("li[role='option']").click();
+
+    cy.get("[data-testid='media-grid']", { timeout: 10000 }).should("exist");
+
+    cy.get("li").contains("Jobs").click();
+
+    cy.get("tbody tr")
+      .first()
+      .within(() => {
+        cy.get('input[type="checkbox"]').click();
+      });
+
+    cy.get("[data-testid='DeleteIcon']").click();
   });
 });
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index 9306d8c..c44c1f2 100644
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -1,6 +1,9 @@
 version: "3"
 services:
   scraperr:
+    build:
+      context: .
+      dockerfile: docker/frontend/Dockerfile
     command: ["npm", "run", "dev"]
     volumes:
       - "$PWD/src:/app/src"
@@ -10,6 +13,9 @@ services:
       - "$PWD/package-lock.json:/app/package-lock.json"
       - "$PWD/tsconfig.json:/app/tsconfig.json"
   scraperr_api:
+    build:
+      context: .
+      dockerfile: docker/api/Dockerfile
     environment:
       - LOG_LEVEL=INFO
     volumes:
diff --git a/docker-compose.yml b/docker-compose.yml
index 7625d5c..e5d5e2e 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,9 +1,6 @@
 services:
   scraperr:
     image: jpyles0524/scraperr:latest
-    build:
-      context: .
-      dockerfile: docker/frontend/Dockerfile
     container_name: scraperr
     command: ["npm", "run", "start"]
     environment:
@@ -16,9 +13,6 @@ services:
   scraperr_api:
     init: True
     image: jpyles0524/scraperr_api:latest
-    build:
-      context: .
-      dockerfile: docker/api/Dockerfile
     environment:
       - LOG_LEVEL=INFO
     container_name: scraperr_api
diff --git a/docs/main_page.png b/docs/main_page.png
index ea94c17..1e351a3 100644
Binary files a/docs/main_page.png and b/docs/main_page.png differ
diff --git a/src/components/ai/JobSelector.tsx b/src/components/ai/JobSelector.tsx
index 316d251..c2feb4c 100644
--- a/src/components/ai/JobSelector.tsx
+++ b/src/components/ai/JobSelector.tsx
@@ -1,15 +1,20 @@
-import React, { useState, Dispatch } from "react";
+import React, { useState, Dispatch, useEffect } from "react";
 import { Job } from "../../types";
 import Box from "@mui/material/Box";
 import InputLabel from "@mui/material/InputLabel";
 import FormControl from "@mui/material/FormControl";
 import Select from "@mui/material/Select";
 import Popover from "@mui/material/Popover";
-import { Typography, MenuItem, useTheme } from "@mui/material";
+import {
+  Typography,
+  MenuItem,
+  useTheme,
+  ClickAwayListener,
+} from "@mui/material";
 import { SxProps } from "@mui/material";
 
 interface Props {
-  sxProps: SxProps;
+  sxProps?: SxProps;
   setSelectedJob:
     | Dispatch<React.SetStateAction<Job | null>>
     | ((job: Job) => void);
@@ -44,6 +49,12 @@ export const JobSelector = ({
 
   const open = Boolean(anchorEl);
 
+  useEffect(() => {
+    if (!open) {
+      setAnchorEl(null);
+    }
+  }, [open]);
+
   return (
     <Box sx={sxProps}>
       <FormControl fullWidth>
@@ -80,57 +91,63 @@ export const JobSelector = ({
           </>
         ) : null}
       </FormControl>
-      <Popover
-        id="mouse-over-popover"
-        sx={{
-          pointerEvents: "none",
-          padding: 0,
-        }}
-        open={open}
-        anchorEl={anchorEl}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "left",
-        }}
-        onClose={handlePopoverClose}
-      >
-        {popoverJob && (
-          <Box
+
+      {open && (
+        <ClickAwayListener onClickAway={handlePopoverClose}>
+          <Popover
+            id="mouse-over-popover"
             sx={{
-              border:
-                theme.palette.mode === "light"
-                  ? "2px solid black"
-                  : "2px solid white",
+              pointerEvents: "none",
+              padding: 0,
             }}
+            open={open}
+            anchorEl={anchorEl}
+            anchorOrigin={{
+              vertical: "bottom",
+              horizontal: "left",
+            }}
+            transformOrigin={{
+              vertical: "top",
+              horizontal: "left",
+            }}
+            onClose={handlePopoverClose}
           >
-            <Typography
-              variant="body1"
-              sx={{ paddingLeft: 1, paddingRight: 1 }}
-            >
-              {popoverJob.url}
-            </Typography>
-            <div className="flex flex-row w-full justify-end mb-1">
-              <Typography
-                variant="body2"
+            {popoverJob && (
+              <Box
                 sx={{
-                  paddingLeft: 1,
-                  paddingRight: 1,
-                  color: theme.palette.mode === "dark" ? "#d3d7e6" : "#5b5d63",
-                  fontStyle: "italic",
+                  border:
+                    theme.palette.mode === "light"
+                      ? "2px solid black"
+                      : "2px solid white",
                 }}
               >
-                {popoverJob.time_created
-                  ? new Date(popoverJob.time_created).toLocaleString()
-                  : "Unknown"}
-              </Typography>
-            </div>
-          </Box>
-        )}
-      </Popover>
+                <Typography
+                  variant="body1"
+                  sx={{ paddingLeft: 1, paddingRight: 1 }}
+                >
+                  {popoverJob.url}
+                </Typography>
+                <div className="flex flex-row w-full justify-end mb-1">
+                  <Typography
+                    variant="body2"
+                    sx={{
+                      paddingLeft: 1,
+                      paddingRight: 1,
+                      color:
+                        theme.palette.mode === "dark" ? "#d3d7e6" : "#5b5d63",
+                      fontStyle: "italic",
+                    }}
+                  >
+                    {popoverJob.time_created
+                      ? new Date(popoverJob.time_created).toLocaleString()
+                      : "Unknown"}
+                  </Typography>
+                </div>
+              </Box>
+            )}
+          </Popover>
+        </ClickAwayListener>
+      )}
     </Box>
   );
 };
diff --git a/src/components/common/advanced-job-options/dialog/advanced-job-options-dialog.tsx b/src/components/common/advanced-job-options/dialog/advanced-job-options-dialog.tsx
index 588bcc0..6cd7148 100644
--- a/src/components/common/advanced-job-options/dialog/advanced-job-options-dialog.tsx
+++ b/src/components/common/advanced-job-options/dialog/advanced-job-options-dialog.tsx
@@ -140,6 +140,7 @@ export const AdvancedJobOptionsDialog = ({
                   <Checkbox
                     checked={jobOptions.collect_media}
                     onChange={handleCollectMediaChange}
+                    data-cy="collect-media-checkbox"
                   />
                 }
                 label={
diff --git a/src/components/common/csv-table/csv-table.tsx b/src/components/common/csv-table/csv-table.tsx
index c5ef4ed..d6fd934 100644
--- a/src/components/common/csv-table/csv-table.tsx
+++ b/src/components/common/csv-table/csv-table.tsx
@@ -131,8 +131,9 @@ export const CsvTable: React.FC<CsvTableProps> = ({ csv, className }) => {
                           <Typography variant="body2" color="text.secondary">
                             {row.text
                               ? row.text
-                                  .replace(/(\r\n|\n|\r)/g, " ")
-                                  .replace(/\t/g, " ")
+                                  .replace(/[\n\t\r]+/g, " ")
+                                  .replace(/\s+/g, " ")
+                                  .trim()
                               : "No text available"}
                           </Typography>
                         </Paper>
diff --git a/src/components/common/media-viewer/audio/audio-viewer.tsx b/src/components/common/media-viewer/audio/audio-viewer.tsx
new file mode 100644
index 0000000..930768e
--- /dev/null
+++ b/src/components/common/media-viewer/audio/audio-viewer.tsx
@@ -0,0 +1,40 @@
+
+import { Box, Typography } from "@mui/material";
+
+interface AudioViewerProps {
+  mediaUrl: string;
+  selectedMedia: string;
+  onError: () => void;
+}
+
+export const AudioViewer = ({
+  mediaUrl,
+  selectedMedia,
+  onError,
+}: AudioViewerProps) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "column",
+        height: "100%",
+        gap: 2,
+      }}
+    >
+      <Typography variant="h6">{selectedMedia}</Typography>
+      <audio
+        controls
+        onError={onError}
+        style={{
+          width: "80%",
+          maxWidth: "500px",
+        }}
+      >
+        <source src={mediaUrl} type="audio/mpeg" />
+        Your browser does not support the audio element.
+      </audio>
+    </Box>
+  );
+};
diff --git a/src/components/common/media-viewer/audio/index.ts b/src/components/common/media-viewer/audio/index.ts
new file mode 100644
index 0000000..349d620
--- /dev/null
+++ b/src/components/common/media-viewer/audio/index.ts
@@ -0,0 +1 @@
+export * from "./audio-viewer";
diff --git a/src/components/common/media-viewer/image/image-viewer.tsx b/src/components/common/media-viewer/image/image-viewer.tsx
new file mode 100644
index 0000000..10decf0
--- /dev/null
+++ b/src/components/common/media-viewer/image/image-viewer.tsx
@@ -0,0 +1,36 @@
+import { Box, useTheme } from "@mui/material";
+
+export const ImageViewer = ({
+  mediaUrl,
+  selectedMedia,
+}: {
+  mediaUrl: string;
+  selectedMedia: string;
+}) => {
+  const theme = useTheme();
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100%",
+        width: "100%",
+        overflow: "hidden",
+        position: "relative",
+      }}
+    >
+      <img
+        src={mediaUrl}
+        alt={selectedMedia}
+        style={{
+          maxHeight: "100%",
+          maxWidth: "100%",
+          objectFit: "contain",
+          borderRadius: "4px",
+          boxShadow: theme.shadows[4],
+        }}
+      />
+    </Box>
+  );
+};
diff --git a/src/components/common/media-viewer/image/index.ts b/src/components/common/media-viewer/image/index.ts
new file mode 100644
index 0000000..44b51d7
--- /dev/null
+++ b/src/components/common/media-viewer/image/index.ts
@@ -0,0 +1 @@
+export * from "./image-viewer";
diff --git a/src/components/common/media-viewer/index.ts b/src/components/common/media-viewer/index.ts
new file mode 100644
index 0000000..bb46356
--- /dev/null
+++ b/src/components/common/media-viewer/index.ts
@@ -0,0 +1 @@
+export * from "./media-viewer";
diff --git a/src/components/common/media-viewer/media-viewer.tsx b/src/components/common/media-viewer/media-viewer.tsx
new file mode 100644
index 0000000..70e2407
--- /dev/null
+++ b/src/components/common/media-viewer/media-viewer.tsx
@@ -0,0 +1,75 @@
+import { Box, Typography } from "@mui/material";
+import { ImageViewer } from "./image";
+import { VideoViewer } from "./video";
+import { AudioViewer } from "./audio";
+import { PDFViewer } from "./pdf-viewer";
+
+interface MediaViewerProps {
+  selectedMedia: string;
+  activeTab: string;
+  getMediaUrl: (fileName: string) => string;
+  onError: (error: string) => void;
+}
+
+export const MediaViewer = ({
+  selectedMedia,
+  activeTab,
+  getMediaUrl,
+  onError,
+}: MediaViewerProps) => {
+  if (!selectedMedia) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100%",
+        }}
+      >
+        <Typography variant="body1" color="textSecondary">
+          Select a file to view
+        </Typography>
+      </Box>
+    );
+  }
+
+  const mediaUrl = getMediaUrl(selectedMedia);
+
+  switch (activeTab) {
+    case "images":
+      return <ImageViewer mediaUrl={mediaUrl} selectedMedia={selectedMedia} />;
+    case "videos":
+      return (
+        <VideoViewer
+          mediaUrl={mediaUrl}
+          onError={() => onError("Error loading video")}
+        />
+      );
+    case "audio":
+      return (
+        <AudioViewer
+          mediaUrl={mediaUrl}
+          selectedMedia={selectedMedia}
+          onError={() => onError("Error loading audio")}
+        />
+      );
+    case "pdfs":
+      return <PDFViewer mediaUrl={mediaUrl} selectedMedia={selectedMedia} />;
+    default:
+      return (
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            height: "100%",
+          }}
+        >
+          <Typography variant="body1">
+            {selectedMedia} - Download this file to view it
+          </Typography>
+        </Box>
+      );
+  }
+};
diff --git a/src/components/common/media-viewer/pdf-viewer/index.ts b/src/components/common/media-viewer/pdf-viewer/index.ts
new file mode 100644
index 0000000..e1ce37f
--- /dev/null
+++ b/src/components/common/media-viewer/pdf-viewer/index.ts
@@ -0,0 +1 @@
+export * from "./pdf-viewer";
diff --git a/src/components/common/media-viewer/pdf-viewer/pdf-viewer.tsx b/src/components/common/media-viewer/pdf-viewer/pdf-viewer.tsx
new file mode 100644
index 0000000..63318dd
--- /dev/null
+++ b/src/components/common/media-viewer/pdf-viewer/pdf-viewer.tsx
@@ -0,0 +1,33 @@
+import { Box, useTheme } from "@mui/material";
+
+interface PDFViewerProps {
+  mediaUrl: string;
+  selectedMedia: string;
+}
+
+export const PDFViewer = ({ mediaUrl, selectedMedia }: PDFViewerProps) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        borderRadius: 1,
+      }}
+    >
+      <iframe
+        src={`${mediaUrl}#view=fitH`}
+        style={{
+          width: "100%",
+          height: "100%",
+          border: "none",
+          borderRadius: "4px",
+          boxShadow: theme.shadows[4],
+        }}
+        title={selectedMedia}
+      />
+    </Box>
+  );
+};
diff --git a/src/components/common/media-viewer/tile-grid-view/index.ts b/src/components/common/media-viewer/tile-grid-view/index.ts
new file mode 100644
index 0000000..981163a
--- /dev/null
+++ b/src/components/common/media-viewer/tile-grid-view/index.ts
@@ -0,0 +1 @@
+export * from "./tile-grid-view";
diff --git a/src/components/common/media-viewer/tile-grid-view/tile-grid-view.tsx b/src/components/common/media-viewer/tile-grid-view/tile-grid-view.tsx
new file mode 100644
index 0000000..86bc30a
--- /dev/null
+++ b/src/components/common/media-viewer/tile-grid-view/tile-grid-view.tsx
@@ -0,0 +1,114 @@
+import { MediaFiles } from "@/components/pages/media/id/id";
+import {
+  Card,
+  CardActionArea,
+  CardMedia,
+  CardContent,
+  Typography,
+  Box,
+  Grid,
+  useTheme,
+} from "@mui/material";
+
+interface TileGridViewProps {
+  mediaFiles: MediaFiles;
+  activeTab: string;
+  selectedMedia: string;
+  handleMediaSelect: (fileName: string) => void;
+  getMediaUrl: (fileName: string) => string;
+}
+
+export const TileGridView = ({
+  mediaFiles,
+  activeTab,
+  selectedMedia,
+  handleMediaSelect,
+  getMediaUrl,
+}: TileGridViewProps) => {
+  const theme = useTheme();
+
+  return (
+    <Grid container spacing={2} sx={{ p: 2 }} data-testid="media-grid">
+      {mediaFiles[activeTab].map((fileName: string) => (
+        <Grid item xs={6} sm={4} md={3} lg={2} key={fileName}>
+          <Card
+            sx={{
+              height: "100%",
+              display: "flex",
+              flexDirection: "column",
+              borderColor:
+                selectedMedia === fileName
+                  ? theme.palette.primary.main
+                  : "transparent",
+              borderWidth: 2,
+              borderStyle: "solid",
+              transition: "all 0.2s",
+              "&:hover": {
+                transform: "translateY(-4px)",
+                boxShadow: theme.shadows[6],
+              },
+            }}
+          >
+            <CardActionArea onClick={() => handleMediaSelect(fileName)}>
+              <CardMedia
+                component="div"
+                sx={{
+                  pt: "75%",
+                  position: "relative",
+                  backgroundColor:
+                    theme.palette.mode === "light"
+                      ? theme.palette.grey[100]
+                      : theme.palette.grey[800],
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+              >
+                {activeTab === "images" ? (
+                  <Box
+                    component="img"
+                    src={getMediaUrl(fileName)}
+                    alt={fileName}
+                    sx={{
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width: "100%",
+                      height: "100%",
+                      objectFit: "contain",
+                      p: 1,
+                    }}
+                    onError={(e) => {
+                      const target = e.target as HTMLImageElement;
+                      if (target.src !== "/placeholder-image.png") {
+                        target.src = "";
+                      }
+                    }}
+                  />
+                ) : (
+                  <Typography
+                    variant="body2"
+                    color="textSecondary"
+                    sx={{
+                      position: "absolute",
+                      top: "50%",
+                      left: "50%",
+                      transform: "translate(-50%, -50%)",
+                    }}
+                  >
+                    {fileName.split(".").pop()?.toUpperCase() || "FILE"}
+                  </Typography>
+                )}
+              </CardMedia>
+              <CardContent sx={{ flexGrow: 1, p: 1 }}>
+                <Typography variant="body2" noWrap title={fileName}>
+                  {fileName}
+                </Typography>
+              </CardContent>
+            </CardActionArea>
+          </Card>
+        </Grid>
+      ))}
+    </Grid>
+  );
+};
diff --git a/src/components/common/media-viewer/video/index.ts b/src/components/common/media-viewer/video/index.ts
new file mode 100644
index 0000000..8d3e92b
--- /dev/null
+++ b/src/components/common/media-viewer/video/index.ts
@@ -0,0 +1 @@
+export * from "./video-viewer";
diff --git a/src/components/common/media-viewer/video/video-viewer.tsx b/src/components/common/media-viewer/video/video-viewer.tsx
new file mode 100644
index 0000000..9e3daa2
--- /dev/null
+++ b/src/components/common/media-viewer/video/video-viewer.tsx
@@ -0,0 +1,39 @@
+import { Box, useTheme } from "@mui/material";
+
+export const VideoViewer = ({
+  mediaUrl,
+  onError,
+}: {
+  mediaUrl: string;
+  onError: () => void;
+}) => {
+  const theme = useTheme();
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "hidden",
+        borderRadius: 1,
+      }}
+    >
+      <video
+        className="h-full w-full object-contain"
+        controls
+        onError={onError}
+        style={{
+          maxHeight: "100%",
+          maxWidth: "100%",
+          borderRadius: "4px",
+          boxShadow: theme.shadows[4],
+        }}
+      >
+        <source src={mediaUrl} type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+    </Box>
+  );
+};
diff --git a/src/components/common/nav-drawer/nav-items/nav-items.tsx b/src/components/common/nav-drawer/nav-items/nav-items.tsx
index 2e372be..a490f23 100644
--- a/src/components/common/nav-drawer/nav-items/nav-items.tsx
+++ b/src/components/common/nav-drawer/nav-items/nav-items.tsx
@@ -7,7 +7,7 @@ import TerminalIcon from "@mui/icons-material/Terminal";
 import BarChart from "@mui/icons-material/BarChart";
 import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
 import { List } from "@mui/material";
-import { Schedule, VideoFile } from "@mui/icons-material";
+import { Folder, Schedule, VideoFile } from "@mui/icons-material";
 
 const items = [
   {
@@ -40,6 +40,11 @@ const items = [
     text: "Recordings",
     href: "/recordings",
   },
+  {
+    icon: <Folder />,
+    text: "Media",
+    href: "/media",
+  },
 ];
 
 export const NavItems = () => {
diff --git a/src/components/jobs/JobQueue.tsx b/src/components/jobs/JobQueue.tsx
index 206034b..3bd0beb 100644
--- a/src/components/jobs/JobQueue.tsx
+++ b/src/components/jobs/JobQueue.tsx
@@ -7,20 +7,15 @@ import {
   TableHead,
   TableRow,
   Box,
-  Typography,
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
   Checkbox,
   Button,
   Tooltip,
   IconButton,
   TableContainer,
 } from "@mui/material";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import StarIcon from "@mui/icons-material/Star";
 import { Job } from "../../types";
-import { AutoAwesome, VideoCameraBack } from "@mui/icons-material";
+import { AutoAwesome, Image, VideoCameraBack } from "@mui/icons-material";
 import { useRouter } from "next/router";
 
 interface stringMap {
@@ -59,7 +54,7 @@ export const JobQueue = ({
       <Table sx={{ tableLayout: "fixed", width: "100%" }}>
         <TableHead>
           <TableRow>
-            <TableCell>Select</TableCell>
+            <TableCell sx={{ width: "280px" }}>Select</TableCell>
             <TableCell>Id</TableCell>
             <TableCell>Url</TableCell>
             <TableCell>Elements</TableCell>
@@ -72,7 +67,7 @@ export const JobQueue = ({
         <TableBody sx={{ overflow: "auto" }}>
           {filteredJobs.map((row, index) => (
             <TableRow key={index}>
-              <TableCell padding="checkbox">
+              <TableCell padding="checkbox" sx={{ width: "280px" }}>
                 <Checkbox
                   checked={selectedJobs.has(row.id)}
                   onChange={() => onSelectJob(row.id)}
@@ -122,6 +117,19 @@ export const JobQueue = ({
                     </IconButton>
                   </span>
                 </Tooltip>
+                {row.job_options.collect_media && (
+                  <Tooltip title="View Media">
+                    <span>
+                      <IconButton
+                        onClick={() => {
+                          router.replace(`/media?id=${row.id}`);
+                        }}
+                      >
+                        <Image />
+                      </IconButton>
+                    </span>
+                  </Tooltip>
+                )}
               </TableCell>
               <TableCell sx={{ maxWidth: 100, overflow: "auto" }}>
                 <Box
@@ -167,7 +175,7 @@ export const JobQueue = ({
                 </Box>
               </TableCell>
               <TableCell sx={{ maxWidth: 50, overflow: "auto" }}>
-                <Box sx={{ maxHeight: 100, overflow: "auto" }}>
+                <Box sx={{ maxWidth: 100, maxHeight: 100, overflow: "auto" }}>
                   <Box
                     className="rounded-md p-2 text-center"
                     sx={{ bgcolor: colors[row.status] }}
diff --git a/src/components/pages/media/id/id.tsx b/src/components/pages/media/id/id.tsx
new file mode 100644
index 0000000..d2b6093
--- /dev/null
+++ b/src/components/pages/media/id/id.tsx
@@ -0,0 +1,392 @@
+import { JobSelector } from "@/components/ai";
+import { fetchJobs } from "@/lib";
+import { Job } from "@/types";
+import {
+  Box,
+  useTheme,
+  Typography,
+  CircularProgress,
+  Alert,
+  Paper,
+  Tabs,
+  Tab,
+} from "@mui/material";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useState, useEffect } from "react";
+import { TileGridView } from "@/components/common/media-viewer/tile-grid-view";
+import { MediaViewer } from "@/components/common/media-viewer";
+
+export interface MediaFiles {
+  audio: string[];
+  documents: string[];
+  images: string[];
+  pdfs: string[];
+  presentations: string[];
+  spreadsheets: string[];
+  videos: string[];
+  [key: string]: string[];
+}
+
+export const MediaId = () => {
+  const searchParams = useSearchParams();
+  const theme = useTheme();
+  const router = useRouter();
+
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [jobs, setJobs] = useState<Job[]>([]);
+  const [selectedJob, setSelectedJob] = useState<Job | null>(null);
+  const [mediaFiles, setMediaFiles] = useState<MediaFiles | null>(null);
+  const [activeTab, setActiveTab] = useState<string>("images");
+  const [selectedMedia, setSelectedMedia] = useState<string | null>(null);
+
+  const currentId = searchParams.get("id");
+  const mediaType = searchParams.get("type") || "images";
+  const mediaName = searchParams.get("file");
+
+  const handleSelectJob = (job: Job | null) => {
+    if (job) {
+      router.push(`/media?id=${job.id}`);
+    }
+  };
+
+  const handleTabChange = (_event: React.SyntheticEvent, newValue: string) => {
+    setActiveTab(newValue);
+    router.push(`/media?id=${currentId}&type=${newValue}`);
+  };
+
+  const handleMediaSelect = (fileName: string) => {
+    setSelectedMedia(fileName);
+    router.push(`/media?id=${currentId}&type=${activeTab}&file=${fileName}`);
+  };
+
+  // Fetch jobs on mount
+  useEffect(() => {
+    fetchJobs(setJobs);
+  }, []);
+
+  // Set selected job when currentId changes
+  useEffect(() => {
+    if (!currentId) {
+      setSelectedJob(null);
+      return;
+    }
+
+    const job = jobs.find((j) => j.id === currentId);
+    setSelectedJob(job || null);
+  }, [currentId, jobs]);
+
+  // Fetch media files when selected job changes
+  useEffect(() => {
+    if (!selectedJob?.id) {
+      setError("No job ID provided");
+      setLoading(false);
+      return;
+    }
+
+    const fetchMediaFiles = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const res = await fetch(`/api/media/get-media?id=${selectedJob.id}`);
+
+        if (!res.ok) {
+          throw new Error(`Media not found (status: ${res.status})`);
+        }
+
+        const data = await res.json();
+        setMediaFiles(data.files);
+
+        const hasMediaType = mediaType && data.files[mediaType]?.length > 0;
+
+        if (hasMediaType && activeTab !== mediaType) {
+          setActiveTab(mediaType);
+        } else if (!hasMediaType && !activeTab) {
+          // Only set a default tab if activeTab is not set
+          const firstNonEmpty = Object.entries(data.files).find(
+            ([_, files]) => Array.isArray(files) && files.length > 0
+          );
+          if (firstNonEmpty) {
+            setActiveTab(firstNonEmpty[0]);
+          }
+        }
+      } catch (err) {
+        setError(
+          err instanceof Error ? err.message : "Failed to fetch media files"
+        );
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchMediaFiles();
+  }, [selectedJob?.id]);
+
+  // Set selected media when mediaName changes
+  useEffect(() => {
+    if (mediaName && mediaName !== selectedMedia) {
+      setSelectedMedia(mediaName);
+    }
+  }, [mediaName, selectedMedia]);
+
+  // Get media file URL
+  const getMediaUrl = (fileName: string) => {
+    if (!currentId || !activeTab) return "";
+    return `/api/media?id=${currentId}&type=${activeTab}&file=${fileName}`;
+  };
+
+  const renderMediaThumbnails = () => {
+    if (
+      !mediaFiles ||
+      !mediaFiles[activeTab] ||
+      mediaFiles[activeTab].length === 0
+    ) {
+      return (
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            height: "100%",
+            p: 3,
+          }}
+        >
+          <Typography variant="body2" color="textSecondary">
+            No {activeTab} files available
+          </Typography>
+        </Box>
+      );
+    }
+
+    return (
+      <TileGridView
+        mediaFiles={mediaFiles}
+        activeTab={activeTab}
+        selectedMedia={selectedMedia || ""}
+        handleMediaSelect={handleMediaSelect}
+        getMediaUrl={getMediaUrl}
+      />
+    );
+  };
+
+  return (
+    <Box
+      sx={{
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        position: "relative",
+        borderRadius: 2,
+        overflow: "hidden",
+        border: `1px solid ${theme.palette.divider}`,
+        backgroundColor: theme.palette.background.paper,
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "flex-end",
+          p: 1,
+          borderBottom: `1px solid ${theme.palette.divider}`,
+          backgroundColor:
+            theme.palette.mode === "light"
+              ? theme.palette.grey[50]
+              : theme.palette.grey[900],
+          zIndex: 10,
+        }}
+      >
+        <Box sx={{ width: "300px" }}>
+          <JobSelector
+            setSelectedJob={handleSelectJob}
+            selectedJob={selectedJob}
+            setJobs={setJobs}
+            jobs={jobs}
+          />
+        </Box>
+      </Box>
+
+      {loading ? (
+        <Box
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          justifyContent="center"
+          sx={{ flex: 1 }}
+          gap={2}
+        >
+          <CircularProgress />
+          <Typography variant="body2" color="textSecondary">
+            Loading media...
+          </Typography>
+        </Box>
+      ) : error ? (
+        <Box
+          sx={{
+            flex: 1,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            backgroundColor:
+              theme.palette.mode === "light"
+                ? theme.palette.grey[100]
+                : theme.palette.grey[900],
+            p: 2,
+          }}
+        >
+          <Paper
+            elevation={3}
+            sx={{
+              p: 3,
+              maxWidth: "500px",
+              width: "100%",
+              backgroundColor: theme.palette.background.paper,
+              borderRadius: 2,
+            }}
+          >
+            <Alert
+              severity="error"
+              variant="filled"
+              sx={{
+                mb: 2,
+                backgroundColor: theme.palette.error.main,
+              }}
+            >
+              {error}
+            </Alert>
+            <Typography variant="body2" color="textSecondary" sx={{ mt: 2 }}>
+              Please select a different job from the dropdown menu above or
+              check if media browsing is enabled.
+            </Typography>
+          </Paper>
+        </Box>
+      ) : (
+        <>
+          <Box
+            sx={{
+              borderBottom: 1,
+              borderColor: "divider",
+              backgroundColor:
+                theme.palette.mode === "light"
+                  ? theme.palette.grey[50]
+                  : theme.palette.grey[900],
+            }}
+          >
+            <Tabs
+              value={activeTab}
+              onChange={handleTabChange}
+              variant="scrollable"
+              scrollButtons="auto"
+              aria-label="media type tabs"
+            >
+              {mediaFiles &&
+                Object.entries(mediaFiles).map(([type, files]) => (
+                  <Tab
+                    key={type}
+                    value={type}
+                    label={`${type.charAt(0).toUpperCase() + type.slice(1)} (${
+                      files.length
+                    })`}
+                    disabled={!files.length}
+                  />
+                ))}
+            </Tabs>
+          </Box>
+
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              flex: 1,
+              height: "calc(100% - 48px)",
+              overflow: "hidden",
+            }}
+          >
+            {selectedMedia && mediaType && mediaName ? (
+              <Box
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  height: "100%",
+                }}
+              >
+                <Box
+                  sx={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    p: 1,
+                    borderBottom: `1px solid ${theme.palette.divider}`,
+                    backgroundColor:
+                      theme.palette.mode === "light"
+                        ? theme.palette.grey[50]
+                        : theme.palette.grey[900],
+                  }}
+                >
+                  <Typography variant="subtitle1" noWrap>
+                    {selectedMedia}
+                  </Typography>
+                  <Box>
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        cursor: "pointer",
+                        color: theme.palette.primary.main,
+                        "&:hover": {
+                          textDecoration: "underline",
+                        },
+                      }}
+                      onClick={async () => {
+                        setSelectedMedia(null);
+                        await router.push(
+                          `/media?id=${currentId}&type=${mediaType}`
+                        );
+                      }}
+                    >
+                      Back to Gallery
+                    </Typography>
+                  </Box>
+                </Box>
+                <Box
+                  sx={{
+                    flex: 1,
+                    backgroundColor:
+                      theme.palette.mode === "light"
+                        ? theme.palette.grey[100]
+                        : theme.palette.grey[900],
+                    overflow: "hidden",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    p: 2,
+                  }}
+                >
+                  <MediaViewer
+                    selectedMedia={selectedMedia}
+                    activeTab={activeTab}
+                    getMediaUrl={getMediaUrl}
+                    onError={() => setError("Error loading media")}
+                  />
+                </Box>
+              </Box>
+            ) : (
+              <Box
+                sx={{
+                  flex: 1,
+                  overflow: "auto",
+                  backgroundColor:
+                    theme.palette.mode === "light"
+                      ? theme.palette.grey[100]
+                      : theme.palette.grey[900],
+                }}
+              >
+                {renderMediaThumbnails()}
+              </Box>
+            )}
+          </Box>
+        </>
+      )}
+    </Box>
+  );
+};
diff --git a/src/components/pages/media/id/index.ts b/src/components/pages/media/id/index.ts
new file mode 100644
index 0000000..8dc7786
--- /dev/null
+++ b/src/components/pages/media/id/index.ts
@@ -0,0 +1 @@
+export { MediaId } from "./id";
diff --git a/src/lib/helpers/parse-job-options.ts b/src/lib/helpers/parse-job-options.ts
index 5b17a1d..a13561e 100644
--- a/src/lib/helpers/parse-job-options.ts
+++ b/src/lib/helpers/parse-job-options.ts
@@ -17,6 +17,10 @@ export const parseJobOptions = (
       custom_cookies: null,
     };
 
+    if (jsonOptions.collect_media) {
+      newJobOptions.collect_media = true;
+    }
+
     if (
       jsonOptions.custom_headers &&
       Object.keys(jsonOptions.custom_headers).length
diff --git a/src/pages/api/media/get-media.ts b/src/pages/api/media/get-media.ts
new file mode 100644
index 0000000..387e5a0
--- /dev/null
+++ b/src/pages/api/media/get-media.ts
@@ -0,0 +1,24 @@
+import { NextApiRequest, NextApiResponse } from "next";
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const { id } = req.query;
+
+  try {
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/get-media?id=${id}`
+    );
+
+    if (!response.ok) {
+      throw new Error(`Error: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    res.status(200).json(data);
+  } catch (error) {
+    console.error("Error streaming video:", error);
+    res.status(404).json({ error: "Error streaming video" });
+  }
+}
diff --git a/src/pages/api/media/index.ts b/src/pages/api/media/index.ts
new file mode 100644
index 0000000..6c4990c
--- /dev/null
+++ b/src/pages/api/media/index.ts
@@ -0,0 +1,33 @@
+import { NextApiRequest, NextApiResponse } from "next";
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const { id, type, file } = req.query;
+
+  if (!id || !type || !file) {
+    return res.status(400).json({ error: "Missing required parameters" });
+  }
+
+  try {
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/media?id=${id}&type=${type}&file=${file}`
+    );
+
+    if (!response.ok) {
+      throw new Error(`Error: ${response.statusText}`);
+    }
+
+    const contentType =
+      response.headers.get("content-type") || "application/octet-stream";
+
+    res.setHeader("Content-Type", contentType);
+
+    const arrayBuffer = await response.arrayBuffer();
+    res.status(200).send(Buffer.from(arrayBuffer));
+  } catch (error) {
+    console.error("Error streaming media:", error);
+    res.status(404).json({ error: "Error retrieving media file" });
+  }
+}
diff --git a/src/pages/media/index.tsx b/src/pages/media/index.tsx
new file mode 100644
index 0000000..70cf8fc
--- /dev/null
+++ b/src/pages/media/index.tsx
@@ -0,0 +1 @@
+export { MediaId as default } from "@/components/pages/media/id";
diff --git a/src/types/job.ts b/src/types/job.ts
index 9433500..ca7a21e 100644
--- a/src/types/job.ts
+++ b/src/types/job.ts
@@ -7,7 +7,7 @@ export interface Job {
   result: Object;
   time_created: Date;
   status: string;
-  job_options: Object;
+  job_options: RawJobOptions;
   favorite: boolean;
   chat?: Message[];
 }