diff --git a/apps/web/app/api/subtitle/[id]/route.ts b/apps/web/app/api/subtitle/[id]/route.ts
new file mode 100644
index 0000000..304f016
--- /dev/null
+++ b/apps/web/app/api/subtitle/[id]/route.ts
@@ -0,0 +1,134 @@
+import {NextRequest, NextResponse} from 'next/server';
+import {createClient} from '@/lib/supabase/server';
+import {convertJsonToSrt} from "@/utils/convertJsonToSrt";
+
+export async function GET(req: NextRequest, context: { params: Promise<{ id: string }> }) {
+    const supabase = await createClient();
+
+    const params = await context.params;
+    const subtitleId = params.id;
+    try{
+        const{data: {user}} = await supabase.auth.getUser();
+        if(!user){
+            return NextResponse.json({error: 'Unauthorized'}, {status:401});
+        }
+
+
+
+        const {data: subtitleData, error: subtitleError} = await supabase
+            .from('subtitle_jobs')
+            .select("*")
+            .eq("id", subtitleId)
+            .eq("user_id", user.id)
+            .single();
+
+
+        if (subtitleError) {
+            return NextResponse.json({ message: 'Error fetching subtitle' }, { status: 500 });
+        }
+        // console.log(subtitleData);
+
+        return NextResponse.json(subtitleData);
+
+
+    }catch(error: unknown) {
+        console.error('Error fetching subtitles:', error);
+        return NextResponse.json({ message: 'Internal server error' }, { status: 500 });
+    }
+
+}
+
+
+
+export async function DELETE(
+    request: Request,
+    context: { params: Promise<{ id: string }> }
+) {
+    const supabase = await createClient();
+    const params = await context.params;
+    const subtitleId = params.id;
+    console.log(subtitleId);
+
+    try {
+        const { data: { user }, error: userError } = await supabase.auth.getUser();
+        if (userError || !user) {
+            return NextResponse.json({ message: 'Unauthorized' }, { status: 401 });
+        }
+
+        const { data: subtitle, error: subtitleError } = await supabase
+            .from('subtitle_jobs')
+            .delete()
+            .eq('id', subtitleId)
+            .eq('user_id', user.id)
+            .select('video_url')
+            .single();
+
+        console.log(subtitle)
+        if (subtitleError && subtitleError.code !== 'PGRST116' || !subtitle) {
+
+            console.error('Subtitle lookup error:', subtitleError);
+            NextResponse.json({ message: 'Subtitle lookup error' }, { status: 404 });
+        }
+
+        if (subtitle?.video_url) {
+            const bucketName = 'video_subtitles';
+            const filePath = subtitle.video_url.substring(
+                subtitle.video_url.indexOf(bucketName) + bucketName.length + 1
+            );
+            if (filePath) {
+                await supabase.storage.from(bucketName).remove([filePath]);
+            }
+        }
+
+        return NextResponse.json({ message: 'Script deleted successfully' });
+    } catch (error) {
+        console.error('Error deleting script:', error);
+        return NextResponse.json({ message: 'Internal server error' }, { status: 500 });
+    }
+}
+
+export async function PATCH(request: Request,     context: { params: Promise<{ id: string }> }) {
+    const supabase = await createClient();
+    const params = await context.params;
+    const subtitle_id = params.id;
+    try {
+        const { data: { user } } = await supabase.auth.getUser();
+        if (!user) {
+            return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+        }
+
+        const body = await request.json();
+        const { subtitle_json} = body;
+        console.log(subtitle_id);
+        console.log(subtitle_json.type);
+        if (!Array.isArray(subtitle_json)) {
+            return NextResponse.json({ error: 'Invalid subtitle format' }, { status: 400 });
+        }
+
+        const srtContent = convertJsonToSrt(subtitle_json);
+
+        const { error: updateError } = await supabase
+            .from("subtitle_jobs")
+            .update({
+                subtitles_json:JSON.stringify(subtitle_json)
+            })
+            .eq("id", subtitle_id)
+            .eq("user_id", user.id)
+            .single();
+
+        if (updateError) {
+            console.error(updateError);
+            return NextResponse.json({ error: 'Failed to update subtitles' }, { status: 500 });
+        }
+
+        return NextResponse.json({
+            success: true,
+            message: 'Subtitles updated successfully',
+            subtitles: subtitle_json,
+            srt: srtContent
+        });
+    } catch (error) {
+        console.error("Error in PATCH:", error);
+        return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+    }
+}
diff --git a/apps/web/app/api/subtitle/burnSubtitle/route.ts b/apps/web/app/api/subtitle/burnSubtitle/route.ts
new file mode 100644
index 0000000..dad5b9a
--- /dev/null
+++ b/apps/web/app/api/subtitle/burnSubtitle/route.ts
@@ -0,0 +1,89 @@
+import { NextResponse } from "next/server";
+import fs from "fs/promises";
+import path from "path";
+import os from "os";
+import { configureFFmpeg } from "@/utils/ffmpegConfig";
+import { fetchVideoAsBuffer } from "@/utils/videoUrlTools";
+import { convertJsonToSrt } from "@/utils/convertJsonToSrt";
+
+export const runtime = "nodejs";
+
+export async function POST(request: Request) {
+    try {
+        const { videoUrl, subtitles } = await request.json();
+
+        if (!videoUrl || !subtitles || !Array.isArray(subtitles)) {
+            return NextResponse.json(
+                { error: "Missing videoUrl or subtitles" },
+                { status: 400 }
+            );
+        }
+
+        console.log("Starting burnSubtitle process...");
+        console.log(" Video URL:", videoUrl);
+        console.log(" Subtitles received:", subtitles.length);
+
+        const videoBuffer = await fetchVideoAsBuffer(videoUrl);
+
+        const tmpDir = path.join(os.tmpdir(), "video_processing");
+        await fs.mkdir(tmpDir, { recursive: true });
+
+        const videoPath = path.join(tmpDir, `input_${Date.now()}.mp4`);
+        const srtPath = path.join(tmpDir, `subs_${Date.now()}.srt`);
+        const outputPath = path.join(tmpDir, `output_${Date.now()}.mp4`);
+
+        await fs.writeFile(videoPath, videoBuffer);
+        console.log("💾 Saved video to:", videoPath);
+
+        const srtContent = convertJsonToSrt(subtitles);
+        await fs.writeFile(srtPath, srtContent, "utf-8");
+
+        const ffmpeg = configureFFmpeg();
+
+        const safeSubtitlePath = srtPath
+            .replace(/\\/g, "/")
+            .replace(/:/g, "\\:");
+
+
+        await new Promise<void>((resolve, reject) => {
+            ffmpeg(videoPath)
+                .outputOptions(["-c:v", "libx264", "-c:a", "copy"])
+                .videoFilter(`subtitles='${safeSubtitlePath}'`)
+                .on("start", (cmd) => console.log(" FFmpeg command:", cmd))
+                .on("progress", (p) => console.log(`⏳ FFmpeg progress: ${p.percent?.toFixed(2)}%`))
+                .on("end", () => {
+                    console.log(" FFmpeg completed successfully");
+                    resolve();
+                })
+                .on("error", (err) => {
+                    console.error("Burn subtitle error:", err);
+                    reject(err);
+                })
+                .save(outputPath);
+        });
+
+        const outputBuffer = await fs.readFile(outputPath);
+        console.log(" Output video size:", outputBuffer.length);
+
+        await Promise.allSettled([
+            fs.unlink(videoPath),
+            fs.unlink(srtPath),
+            fs.unlink(outputPath),
+        ]);
+
+        return new NextResponse(outputBuffer, {
+            status: 200,
+            headers: {
+                "Content-Type": "video/mp4",
+                "Content-Disposition": "attachment; filename=video_with_subtitles.mp4",
+            },
+        });
+
+    } catch (error) {
+        console.error("BurnSubtitle route error:", error);
+        return NextResponse.json(
+            { error: error instanceof Error ? error.message : "Unknown error" },
+            { status: 500 }
+        );
+    }
+}
diff --git a/apps/web/app/api/subtitle/route.ts b/apps/web/app/api/subtitle/route.ts
new file mode 100644
index 0000000..bb7aed8
--- /dev/null
+++ b/apps/web/app/api/subtitle/route.ts
@@ -0,0 +1,371 @@
+import {NextResponse} from 'next/server';
+import {createClient} from '@/lib/supabase/server';
+import {extractAudioFromBuffer} from "@/utils/ExtractAudio";
+import path from "path";
+import os from "os";
+import fs from "fs/promises";
+import { GoogleGenAI } from '@google/genai';
+import {convertJsonToSrt} from '@/utils/convertJsonToSrt';
+import {fetchVideoAsBuffer, getFileNameFromUrl, getMimeTypeFromUrl} from "@/utils/videoUrlTools";
+
+async function waitForFileActive(ai: any, fileName: string, maxWaitTime = 120000) {
+    const startTime = Date.now();
+    const pollInterval = 3000; // Check every 3 seconds
+
+    console.log(`Polling for file status: ${fileName}`);
+
+    while (Date.now() - startTime < maxWaitTime) {
+        try {
+            const file = await ai.files.get({ name: fileName });
+
+            console.log(`File status: ${file.state} (${Math.round((Date.now() - startTime) / 1000)}s elapsed)`);
+
+            if (file.state === 'ACTIVE') {
+                return file;
+            }
+            if (file.state === 'FAILED') {
+                throw new Error(`File processing failed: ${file.stateDescription}`);
+            }
+
+            await new Promise(resolve => setTimeout(resolve, pollInterval));
+
+        } catch (error) {
+            console.error('Error checking file status:', error);
+            // Wait before retrying
+            await new Promise(resolve => setTimeout(resolve, pollInterval));
+        }
+    }
+    throw new Error(`File processing timeout for ${fileName} after ${maxWaitTime / 1000}s`);
+}
+
+
+export async function POST(request: Request) {
+    const supabase = await createClient();
+    let tempFilePath: string | null = null;
+
+    async function logErrorToDB(message: string, subtitleId: string) {
+        if (!subtitleId) return;
+        try {
+            await supabase
+                .from("subtitle_jobs")
+                .update({
+                    status: "error",
+                    error_message: message.slice(0, 5000)
+                })
+                .eq("id", subtitleId);
+        } catch (dbError) {
+            console.error(" Failed to record error in DB:", dbError);
+        }
+    }
+
+    try{
+        const{data: {user}} = await supabase.auth.getUser();
+
+        if(!user){
+            return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+        }
+        const body = await request.json();
+        const { subtitleId, language, targetLanguage, duration } = body;
+
+        const { data: profileData, error: profileError } = await supabase
+            .from('profiles')
+            .select('credits, ai_trained, youtube_connected')
+            .eq('user_id', user.id)
+            .single();
+
+        if (profileError || !profileData) {
+            await logErrorToDB('Profile not found or profile fetch failed', subtitleId);
+            return NextResponse.json({ error: 'Profile not found' }, { status: 404 });
+        }
+
+        if (!profileData.ai_trained && !profileData.youtube_connected) {
+            await logErrorToDB('AI training and YouTube connection are required', subtitleId);
+            return NextResponse.json({ message: 'AI training and YouTube connection are required' }, { status: 403 });
+        }
+
+        const typedProfileData = profileData
+
+        if (typedProfileData.credits < 1) {
+            await logErrorToDB('Insufficient credits', subtitleId);
+            return NextResponse.json({
+                error: 'Insufficient credits. Please upgrade your plan or earn more credits.'
+            }, { status: 403 });
+        }
+
+        const { data: subtitle, error: subtitleError } = await supabase
+            .from('subtitle_jobs')
+            .select('video_url')
+            .eq('user_id', user.id)
+            .eq('id', subtitleId)
+            .single();
+
+        if (subtitleError && subtitleError.code !== 'PGRST116' || !subtitle?.video_url) {
+            await logErrorToDB('Subtitle lookup failed or video_url missing', subtitleId);
+            console.error('Subtitle lookup error:', subtitleError);
+            NextResponse.json({ message: 'Subtitle lookup error' }, { status: 404 });
+        }
+        const video_url = subtitle ? subtitle.video_url: null;
+
+        const apiKey = process.env.GOOGLE_GENERATIVE_AI_API_KEY;
+        if (!apiKey) {
+            console.error('Google Generative AI API key is missing');
+            return NextResponse.json({ error: 'Server configuration error' }, { status: 500 });
+        }
+
+        const ai = new GoogleGenAI({ apiKey });
+
+        // Determine if auto-detect or specific language
+        const isAutoDetect = !language || language.toLowerCase() === 'auto detect' || language.toLowerCase() === 'auto';
+        const languageInstruction = isAutoDetect
+            ? "Automatically detect the language being spoken and transcribe in that language."
+            : `Transcribe the audio in ${language}.`;
+
+        // Determine target language instruction
+        const hasTargetLanguage = targetLanguage && targetLanguage.toLowerCase() !== 'none' && targetLanguage.toLowerCase() !== 'same';
+        const targetLanguageInstruction = hasTargetLanguage
+            ? `After transcription, translate all subtitle text to ${targetLanguage}. Maintain the same timestamps but provide the translated text.`
+            : "Provide subtitles in the original/detected language without translation.";
+
+        const prompt = `
+You are an expert, highly-accurate subtitle transcription service.
+Your task is to transcribe the provided audio file and generate precise, time-stamped subtitles.
+
+**LANGUAGE INSTRUCTION:** ${languageInstruction}
+
+**TARGET LANGUAGE INSTRUCTION:** ${targetLanguageInstruction}
+
+**CRITICAL RULES:**
+1.  **Format:** Your entire response MUST be a valid JSON object with two keys: "detected_language" (string) and "subtitles" (array). Do NOT include any text, headers, or markdown formatting (like \`\`\`json) before or after the object.
+2.  **Language Detection:** The "detected_language" field MUST contain the full name of the language detected in the audio (e.g., "English", "Spanish", "Hindi", "French", etc.).
+3.  **Translation:** ${hasTargetLanguage ? `Translate all subtitle text to ${targetLanguage} while keeping timestamps accurate. The subtitle text should be in ${targetLanguage}, not the original language.` : 'Provide subtitles in the detected/original language.'}
+4.  **Timestamps:** Timestamps MUST be in the exact \`HH:MM:SS.mmm\` format (hours:minutes:seconds.milliseconds).
+5.  **Punctuation:** Include correct punctuation (commas, periods, question marks) for readability.
+6.  **Silence:** Do NOT generate subtitle entries for periods of silence.
+7.  **Non-Speech:** (Optional) Transcribe significant non-speech sounds in brackets, e.g., [MUSIC], [LAUGHTER], [APPLAUSE].
+8.  **Accuracy:** Transcribe the audio verbatim. Do not paraphrase or correct the speaker's grammar. ${hasTargetLanguage ? `When translating, maintain the meaning and tone of the original speech.` : ''}
+9.  **SUBTITLE LENGTH:** Keep each subtitle entry SHORT and concise. Each subtitle should contain a maximum of 1-2 short sentences or 5-10 words. Break longer sentences into multiple subtitle entries with appropriate timestamps. This ensures subtitles are readable and don't cover the entire screen. Think of comfortable reading speed - viewers should be able to read the subtitle in 2-3 seconds.
+
+**Output Example:**
+{
+  "detected_language": "English",
+  "subtitles": [
+    { "start": "00:00:01.200", "end": "00:00:04.100", "text": "${hasTargetLanguage ? `[Translated text in ${targetLanguage}]` : 'Hello everyone, and welcome.'}" },
+    { "start": "00:00:04.350", "end": "00:00:07.000", "text": "${hasTargetLanguage ? `[Translated text in ${targetLanguage}]` : 'Today we\'re going to discuss...'}" },
+    { "start": "00:00:07.100", "end": "00:00:08.000", "text": "[MUSIC]" }
+  ]
+}
+`;
+
+        console.log('Converting file to buffer...');
+        const audioBuffer = await fetchVideoAsBuffer(video_url)
+        const fileName = getFileNameFromUrl(video_url);
+        console.log('Buffer length:', audioBuffer.length);
+
+        tempFilePath = path.join(os.tmpdir(), `${Date.now()}_${fileName}`);
+        console.log('Writing to temp file:', tempFilePath);
+        await fs.writeFile(tempFilePath, audioBuffer);
+        console.log("audio length", audioBuffer.length)
+
+        console.log('Uploading to Google AI...');
+        const newFileName = `${user.id}/${Date.now()}_${fileName}`;
+        const fileType = getMimeTypeFromUrl(video_url);
+        const [ myFile] = await Promise.all([
+            ai.files.upload({
+                file: tempFilePath,
+                config: { mimeType: fileType },
+            }),
+        ]);
+
+        console.log('File uploaded:', myFile);
+
+        await waitForFileActive(ai, myFile.name!);
+        const parts = [
+            { text: prompt },
+            {
+                fileData: {
+                    fileUri: myFile.uri,
+                    mimeType: myFile.mimeType
+                }
+            }
+        ];
+
+        console.log('Generating content...');
+        let result: any;
+
+        try {
+            result = await ai.models.generateContent({
+                model: "gemini-2.5-flash",
+                contents: [{ role: "user", parts }],
+            });
+            console.log('Generation complete');
+        } catch (geminiError) {
+            console.error('Gemini API error:', geminiError);
+            await logErrorToDB(`Gemini API error: ${geminiError}`, subtitleId);
+            return NextResponse.json({ error: 'Failed to generate subtitles from Gemini API' }, { status: 500 });
+        }
+
+        // Clean up temp file
+        if (tempFilePath) {
+            await fs.unlink(tempFilePath).catch(err =>
+                console.error('Failed to delete temp file:', err)
+            );
+        }
+
+        console.log(result.text);
+
+        let subtitlesData;
+        let cleanedText;
+        try {
+            const rawText = result.text;
+            cleanedText = rawText.replace(/```json/g, '').replace(/```/g, '').trim();
+            subtitlesData = JSON.parse(cleanedText);
+
+            // Validate the response structure
+            if (!subtitlesData.detected_language || !subtitlesData.subtitles) {
+                throw new Error('Invalid response structure from Gemini');
+            }
+        } catch (parseError) {
+            await logErrorToDB(`Failed to parse Gemini JSON: ${String(parseError)}`, subtitleId);
+
+            console.error('Failed to parse JSON from Gemini:', parseError, "Raw text:", result.text);
+            return NextResponse.json({ error: 'Failed to parse subtitle data' }, { status: 500 });
+        }
+
+        const subtitlesJson = subtitlesData.subtitles;
+        const detectedLanguage = subtitlesData.detected_language;
+
+        console.log('Detected language:', detectedLanguage);
+
+        const srtContent = convertJsonToSrt(subtitlesJson);
+        const {data, error: subtitleInsertError} = await supabase
+            .from("subtitle_jobs")
+            .update({
+                subtitles_json: JSON.stringify(subtitlesJson),
+                status: "done",
+                language: language,
+                detected_language: detectedLanguage,
+                target_language: targetLanguage,
+                duration: duration
+            })
+            .eq("id", subtitleId)
+            .eq("user_id", user.id)
+            .select()
+            .single();
+
+        if(subtitleInsertError){
+            await logErrorToDB(`Failed to update subtitles: ${subtitleInsertError.message}`, subtitleId);
+            console.log(subtitleInsertError);
+            return NextResponse.json({error: 'Failed to update subtitles'}, {status: 500});
+        }
+
+        const { error: updateError } = await supabase
+            .from('profiles')
+            .update({ credits: typedProfileData.credits - 1 })
+            .eq('user_id', user.id);
+
+        if (updateError) {
+            console.error('Error updating credits:', updateError);
+            return NextResponse.json({ error: 'Failed to update credits' }, { status: 500 });
+        }
+
+        console.log(data);
+        return NextResponse.json({
+            success: true,
+            detected_language: detectedLanguage,
+            target_language: hasTargetLanguage ? targetLanguage : detectedLanguage
+        });
+    } catch (error) {
+        console.error('Error in subtitle generation:', error);
+
+        // Clean up temp file on error
+        if (tempFilePath) {
+            fs.unlink(tempFilePath).catch(err =>
+                console.error('Failed to delete temp file:', err)
+            );
+        }
+
+        return NextResponse.json({ error: "Upload failed", status: 400 });
+    }
+}
+
+export async function GET(req: Request, res: Response) {
+    const supabase = await createClient();
+    try{
+        const{data: {user}} = await supabase.auth.getUser();
+        if(!user){
+            return NextResponse.json({error: 'Unauthorized'}, {status:401});
+        }
+
+        const {data: subtitleData, error: subtitleError} = await supabase
+            .from('subtitle_jobs')
+            .select("*")
+            .eq("user_id", user.id)
+            .order('created_at', { ascending: false })
+            .limit(10);
+
+
+        if (subtitleError) {
+            return NextResponse.json({ message: 'Error fetching subtitle' }, { status: 500 });
+        }
+        // console.log(subtitleData);
+
+        return NextResponse.json(subtitleData);
+
+
+    }catch(error: unknown) {
+        console.error('Error fetching subtitles:', error);
+        return NextResponse.json({ message: 'Internal server error' }, { status: 500 });
+    }
+
+
+
+}
+
+
+export async function PATCH(request: Request) {
+    const supabase = await createClient();
+
+    try {
+        const { data: { user } } = await supabase.auth.getUser();
+        if (!user) {
+            return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+        }
+
+        const body = await request.json();
+        const { subtitles, subtitle_id } = body; // Edited subtitle JSON
+        console.log(subtitle_id);
+        if (!Array.isArray(subtitles)) {
+            return NextResponse.json({ error: 'Invalid subtitle format' }, { status: 400 });
+        }
+
+        // Convert to SRT for consistency
+        const srtContent = convertJsonToSrt(subtitles);
+
+        // Store edited subtitles in the same way as POST
+        const { error: updateError } = await supabase
+            .from("subtitle_jobs")
+            .update({
+                subtitles_json: subtitles
+            })
+            .eq("id", subtitle_id)
+            .eq("user_id", user.id)
+            .single();
+
+        if (updateError) {
+            console.error(updateError);
+            return NextResponse.json({ error: 'Failed to update subtitles' }, { status: 500 });
+        }
+
+        return NextResponse.json({
+            success: true,
+            message: 'Subtitles updated successfully',
+            subtitles: subtitles,
+            srt: srtContent
+        });
+    } catch (error) {
+        console.error("Error in PATCH:", error);
+        return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+    }
+}
+
+
diff --git a/apps/web/app/api/subtitle/upload/route.ts b/apps/web/app/api/subtitle/upload/route.ts
new file mode 100644
index 0000000..f0391fd
--- /dev/null
+++ b/apps/web/app/api/subtitle/upload/route.ts
@@ -0,0 +1,88 @@
+import {NextResponse}  from "next/server";
+import {createClient} from '@/lib/supabase/server';
+
+
+async function UploadVideo(file: File, newFileName: string): Promise<string> {
+    const supabase = await createClient();
+
+    const { error: uploadError } = await supabase.storage
+        .from("video_subtitles")
+        .upload(newFileName, file);
+
+    if (uploadError) {
+        throw uploadError;
+    }
+
+    const { data: { publicUrl } } = supabase.storage
+        .from("video_subtitles")
+        .getPublicUrl(newFileName);
+
+    return publicUrl;
+}
+
+
+export async function POST(request: Request) {
+    const supabase = await createClient();
+
+    try {
+        const {data: {user}} = await supabase.auth.getUser();
+        if (!user) {
+            return NextResponse.json({error: 'Unauthorized'}, {status: 401});
+        }
+        const formData = await request.formData();
+        const file = formData.get('video') as File;
+        const durationStr = formData.get('duration') as string | null;
+        if (!file) {
+            return NextResponse.json({ error: 'No file provided.' }, { status: 400 });
+        }
+
+        if (!durationStr) {
+            return NextResponse.json({ error: 'No duration provided.' }, { status: 400 });
+        }
+
+        const duration = parseFloat(durationStr);
+        if (isNaN(duration)) {
+            return NextResponse.json({ error: 'Invalid duration format.' }, { status: 400 });
+        }
+
+        const maxSize = 200 * 1024 * 1024;
+        if (file.size > maxSize) {
+            return NextResponse.json({ error: 'File size must be less than 200MB' }, { status: 413 });
+        }
+
+        const maxDuration = 10 * 60;
+        if (duration > maxDuration) {
+            return NextResponse.json({ error: 'Video duration must be 10 minutes or less' }, { status: 400 });
+        }
+        const newFileName = `${user.id}/${Date.now()}_${file.name}`;
+        const video_url = await UploadVideo(file, newFileName);
+        const {data, error: subtitleInsertError} = await supabase
+            .from("subtitle_jobs")
+            .insert({
+                user_id: user.id,
+                video_path: video_url,
+                video_url: video_url,
+                duration: duration,
+            })
+            .select()
+            .single()
+
+        if(subtitleInsertError){
+            console.log(subtitleInsertError);
+            return NextResponse.json({error: 'Failed to update subtitles'}, {status: 500});
+        }
+
+        console.log(data)
+
+        return NextResponse.json({
+            success: true,
+            subtitleId: data.id,
+        });
+
+    }catch(error) {
+        console.log(error);
+        return NextResponse.json({error: "Upload failed", status: 400})
+    }
+
+
+}
diff --git a/apps/web/app/dashboard/subtitles/[id]/page.tsx b/apps/web/app/dashboard/subtitles/[id]/page.tsx
new file mode 100644
index 0000000..9187fe3
--- /dev/null
+++ b/apps/web/app/dashboard/subtitles/[id]/page.tsx
@@ -0,0 +1,183 @@
+"use client";
+
+import React, { useRef, useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import Link from 'next/link';
+import { motion } from 'motion/react'; // Using framer-motion
+import { Loader2, X, ArrowLeft } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+
+import { SubtitleHeader } from '@/components/dashboard/subtitles/SubtitleHeader';
+import { VideoPlayer } from '@/components/dashboard/subtitles/VideoPlayer';
+import { SubtitleEditorPanel } from '@/components/dashboard/subtitles/SubtitleEditorPanel';
+
+import { useSubtitleData } from '@/hooks/useSubtitleData';
+import { useVideoPlayer } from '@/hooks/useVideoPlayer';
+import { useSubtitleEditor } from '@/hooks/useSubtitleEditor';
+import { useSubtitleFileOperations } from '@/hooks/useSubtitleFileOperations';
+import { useSubtitleGeneration } from '@/hooks/useSubtitleGeneration';
+import {convertJsonToVTT} from "@/utils/vttHelper";
+import {useDebounce} from "@/hooks/useDebounce";
+import {SubtitleEditorSkeleton} from "@/components/dashboard/subtitles/skeleton/SubtitleEditorSkeleton";
+
+const containerVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+        opacity: 1,
+        y: 0,
+    }
+};
+
+const gridVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: { staggerChildren: 0.1, delayChildren: 0.2 }
+    }
+};
+
+const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+        opacity: 1,
+        y: 0,
+        transition: { duration: 0.3 }
+    }
+};
+
+
+
+export default function SubtitleEditorPage() {
+    const videoRef = useRef<HTMLVideoElement>(null);
+    const { id } = useParams();
+
+    const { subtitleData, subtitles, setSubtitles, isLoading, error, refetch } = useSubtitleData(id as string);
+    const { currentTime, videoDuration, currentSubtitle, seekTo } = useVideoPlayer(
+        videoRef,
+        subtitleData?.video_url,
+        subtitles
+    );
+    const { editingIndex, setEditingIndex, updateSubtitle, handleAddLine, handleDeleteLine } = useSubtitleEditor(
+        subtitles,
+        setSubtitles,
+        currentTime
+    );
+    const { isSaving, handleSave, handleDownload, handleFileUpload, handleDownloadVideo,downloadVideoLoading } = useSubtitleFileOperations(
+        id as string,
+        subtitles,
+        setSubtitles,
+        subtitleData?.video_path,
+        subtitleData?.video_url
+    );
+    const { isGenerating, handleGenerate } = useSubtitleGeneration(id as string, videoDuration, refetch);
+    const [subtitleUrl, setSubtitleUrl] = useState<string | null>(null);
+    const debouncedSubtitles = useDebounce(subtitles, 500);
+
+    useEffect(() => {
+        if (!debouncedSubtitles || debouncedSubtitles.length === 0) {
+            if (subtitleUrl) {
+                URL.revokeObjectURL(subtitleUrl);
+                setSubtitleUrl(null);
+            }
+            return;
+        }
+
+        const vttContent = convertJsonToVTT(debouncedSubtitles);
+        const blob = new Blob([vttContent], { type: 'text/vtt' });
+        const newSubtitleUrl = URL.createObjectURL(blob);
+        setSubtitleUrl(newSubtitleUrl);
+
+        return () => {
+            URL.revokeObjectURL(newSubtitleUrl);
+        };
+    }, [debouncedSubtitles]);
+
+    if (isLoading) {
+        return (
+            <SubtitleEditorSkeleton/>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="container mx-auto max-w-3xl p-4 md:p-8 text-center">
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.4 }}
+                >
+                    <Card className="p-8 border-red-100 shadow-lg">
+                        <X className="w-16 h-16 mx-auto text-red-500" />
+                        <h2 className="mt-4 text-2xl font-semibold">Error Loading Job</h2>
+                        <p className="mt-2 text-muted-foreground">{error}</p>
+                        <Button asChild className="mt-6 bg-black hover:bg-black/90">
+                            <Link href="/dashboard/subtitles">
+                                <ArrowLeft className="w-4 h-4 mr-2" /> Go Back
+                            </Link>
+                        </Button>
+                    </Card>
+                </motion.div>
+            </div>
+        );
+    }
+
+    return (
+        <motion.div
+            className="container mx-auto max-w-7xl space-y-6 p-4 md:p-8"
+            variants={containerVariants}
+            transition={{ duration: 0.4, ease: "easeOut" }}
+            initial="hidden"
+            animate="visible"
+        >
+            <div className="relative">
+                <div className="absolute inset-0 bg-gradient-to-r from-purple-50/50 via-transparent to-purple-50/50 blur-3xl -z-10" />
+                <SubtitleHeader
+                    videoPath={subtitleData?.video_path || 'Loading...'}
+                    isSaving={isSaving}
+                    hasSubtitles={subtitles.length > 0}
+                    onSave={handleSave}
+                    onDownload={handleDownload}
+                />
+            </div>
+
+            <motion.div
+                className="grid grid-cols-1 gap-6 lg:grid-cols-2"
+                variants={gridVariants}
+                initial="hidden"
+                animate="visible"
+            >
+                <motion.div variants={itemVariants} className="space-y-3">
+                    <VideoPlayer
+                        ref={videoRef}
+                        videoUrl={subtitleData?.video_url || ''}
+                        subtitleUrl={subtitleUrl}
+                        title={subtitleData?.video_path || 'Video Player'}
+                        onDownloadVideo={handleDownloadVideo}
+                        isDownloadDisabled={!subtitles.length || isSaving}
+                        downloadVideoLoading={downloadVideoLoading}
+                    />
+                </motion.div>
+
+
+                <motion.div variants={itemVariants} className="relative">
+                    <div className="absolute -inset-1 bg-gradient-to-br from-purple-100/20 to-transparent rounded-xl blur-xl -z-10" />
+                    <SubtitleEditorPanel
+                        subtitles={subtitles}
+                        currentSub={currentSubtitle}
+                        editingIndex={editingIndex}
+                        isGenerating={isGenerating}
+                        videoDuration={videoDuration}
+                        onAddLine={handleAddLine}
+                        onUpdate={updateSubtitle}
+                        onDelete={handleDeleteLine}
+                        onSetEditing={setEditingIndex}
+                        onSeek={seekTo}
+                        onGenerate={handleGenerate}
+                        onFileChange={handleFileUpload}
+                    />
+                </motion.div>
+            </motion.div>
+        </motion.div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/app/dashboard/subtitles/page.tsx b/apps/web/app/dashboard/subtitles/page.tsx
index d3962b3..3480146 100644
--- a/apps/web/app/dashboard/subtitles/page.tsx
+++ b/apps/web/app/dashboard/subtitles/page.tsx
@@ -1,377 +1,85 @@
-"use client"
-
-import type React from "react"
-import { useState } from "react"
-import { useRouter } from "next/navigation"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { useToast } from "@/components/ui/use-toast"
-import { Loader2, Upload, Download, Clock } from "lucide-react"
-import { Textarea } from "@/components/ui/textarea"
-
-export default function SubtitleGenerator() {
-  const { toast } = useToast()
-  const router = useRouter()
-  const [videoUrl, setVideoUrl] = useState("")
-  const [videoFile, setVideoFile] = useState<File | null>(null)
-  const [language, setLanguage] = useState("english")
-  const [loading, setLoading] = useState(false)
-  const [subtitles, setSubtitles] = useState("")
-  const [uploadProgress, setUploadProgress] = useState(0)
-  const [activeTab, setActiveTab] = useState("url")
-  const [isComingSoon] = useState(true) // Toggle this to false when feature is released
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (isComingSoon) return // Prevent interaction when coming soon
-    if (e.target.files && e.target.files[0]) {
-      setVideoFile(e.target.files[0])
-    }
-  }
-
-  const handleGenerateSubtitles = async () => {
-    if (isComingSoon) return // Prevent interaction when coming soon
-    if (activeTab === "url" && !videoUrl) {
-      toast({
-        title: "Video URL required",
-        description: "Please enter a YouTube video URL to generate subtitles.",
-        variant: "destructive",
-      })
-      return
-    }
-
-    if (activeTab === "upload" && !videoFile) {
-      toast({
-        title: "Video file required",
-        description: "Please upload a video file to generate subtitles.",
-        variant: "destructive",
-      })
-      return
-    }
-
-    setLoading(true)
-    setUploadProgress(0)
-
-    try {
-      // Simulate file upload progress
-      if (activeTab === "upload") {
-        const interval = setInterval(() => {
-          setUploadProgress((prev) => {
-            if (prev >= 100) {
-              clearInterval(interval)
-              return 100
+"use client";
+
+import { SubtitleUploader } from "@/components/dashboard/subtitles/subtitleUploader";
+import { SubtitleHistory } from "@/components/dashboard/subtitles/subtitleHistory";
+import { SubtitleResponse } from "@repo/validation/src/types/SubtitleTypes";
+import { useState, useEffect, useCallback } from "react";
+import { toast } from "sonner";
+import { motion } from "motion/react";
+
+export default function SubtitlesPage() {
+    const [subtitles, setSubtitles] = useState<SubtitleResponse[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const refreshSubtitles = useCallback(async () => {
+        try {
+            setError(null);
+
+            const res = await fetch("/api/subtitle");
+            if (!res.ok) {
+                throw new Error("Failed to fetch subtitle history");
             }
-            return prev + 10
-          })
-        }, 500)
-      }
-
-      // Simulate API call
-      await new Promise((resolve) => setTimeout(resolve, 5000))
-
-      // Sample subtitles for demonstration
-      const sampleSubtitles = `1
-00:00:00,000 --> 00:00:03,000
-Welcome to this video about content creation.
-
-2
-00:00:03,500 --> 00:00:07,000
-Today we're going to discuss how AI can help YouTubers.
-
-3
-00:00:07,500 --> 00:00:12,000
-Script AI makes it easy to generate personalized scripts for your videos.
-
-4
-00:00:12,500 --> 00:00:16,000
-Let's start by looking at the key features of this platform.
-
-5
-00:00:16,500 --> 00:00:20,000
-First, you can train the AI on your existing content.
-
-6
-00:00:20,500 --> 00:00:25,000
-This ensures that the scripts match your unique style and tone.`
-
-      setSubtitles(sampleSubtitles)
-
-      toast({
-        title: "Subtitles generated!",
-        description: "Your subtitles have been generated successfully.",
-      })
-    } catch (error: any) {
-      toast({
-        title: "Error generating subtitles",
-        description: error.message || "An unexpected error occurred",
-        variant: "destructive",
-      })
-    } finally {
-      setLoading(false)
-      setUploadProgress(0)
-    }
-  }
-
-  const handleDownloadSubtitles = () => {
-    if (isComingSoon || !subtitles) return
-
-    const blob = new Blob([subtitles], { type: "text/plain" })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement("a")
-    a.href = url
-    a.download = "subtitles.srt"
-    document.body.appendChild(a)
-    a.click()
-    document.body.removeChild(a)
-    URL.revokeObjectURL(url)
-  }
-
-  return (
-    <div className="container py-8 relative">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold tracking-tight">Subtitle Generator</h1>
-        <p className="text-slate-600 dark:text-slate-400 mt-1">Generate accurate subtitles for your YouTube videos</p>
-      </div>
-
-      <Tabs defaultValue="url" onValueChange={setActiveTab} className="w-full">
-        <TabsList className="grid w-full grid-cols-2">
-          <TabsTrigger value="url">YouTube URL</TabsTrigger>
-          <TabsTrigger value="upload">Upload Video</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="url">
-          <Card className="relative">
-            <CardHeader>
-              <CardTitle>Generate from YouTube URL</CardTitle>
-              <CardDescription>Enter a YouTube video URL to generate subtitles</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-6">
-              <div className="space-y-2">
-                <Label htmlFor="video-url">YouTube Video URL</Label>
-                <Input
-                  id="video-url"
-                  placeholder="https://www.youtube.com/watch?v=..."
-                  value={videoUrl}
-                  onChange={(e) => setVideoUrl(e.target.value)}
-                  disabled={loading || isComingSoon}
-                />
-                <p className="text-sm text-slate-500 dark:text-slate-400">
-                  Enter the full URL of the YouTube video you want to generate subtitles for
-                </p>
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="language">Language</Label>
-                <Select value={language} onValueChange={setLanguage} disabled={loading || isComingSoon}>
-                  <SelectTrigger id="language">
-                    <SelectValue placeholder="Select language" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="english">English</SelectItem>
-                    <SelectItem value="spanish">Spanish</SelectItem>
-                    <SelectItem value="french">French</SelectItem>
-                    <SelectItem value="german">German</SelectItem>
-                    <SelectItem value="japanese">Japanese</SelectItem>
-                    <SelectItem value="chinese">Chinese</SelectItem>
-                  </SelectContent>
-                </Select>
-                <p className="text-sm text-slate-500 dark:text-slate-400">Select the language of the video content</p>
-              </div>
-            </CardContent>
-            <CardFooter>
-              <Button
-                onClick={handleGenerateSubtitles}
-                className="w-full bg-slate-700 hover:bg-slate-800 text-white"
-                disabled={loading || isComingSoon}
-              >
-                {loading ? (
-                  <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    Generating...
-                  </>
-                ) : (
-                  "Generate Subtitles"
-                )}
-              </Button>
-            </CardFooter>
-
-            {isComingSoon && (
-              <div className="absolute inset-0 bg-slate-100/80 dark:bg-slate-900/80 backdrop-blur-sm flex items-center justify-center">
-                <div className="text-center space-y-4">
-                  <Clock className="h-12 w-12 mx-auto text-slate-500 dark:text-slate-400" />
-                  <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100">
-                    Coming Soon
-                  </h2>
-                  <p className="text-slate-600 dark:text-slate-400 max-w-md">
-                    Stay tuned to unlock this exciting feature to generate accurate subtitles for your YouTube videos!
-                  </p>
-                  <Button
-                    key="back-to-topics-url"
-                    variant="outline"
-                    onClick={() => router.push("/topics")}
-                    className="bg-slate-950 hover:bg-slate-900 text-white"
-                  >
-                    Back to Topics
-                  </Button>
-                </div>
-              </div>
-            )}
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="upload">
-          <Card className="relative">
-            <CardHeader>
-              <CardTitle>Upload Video</CardTitle>
-              <CardDescription>Upload a video file to generate subtitles</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-6">
-              <div className="space-y-2">
-                <Label htmlFor="video-file">Video File</Label>
-                <div className="flex items-center justify-center w-full">
-                  <label
-                    htmlFor="video-file"
-                    className="flex flex-col items-center justify-center w-full h-32 border-2 border-slate-300 border-dashed rounded-lg cursor-pointer bg-slate-50 dark:hover:bg-slate-800 dark:bg-slate-700 hover:bg-slate-100 dark:border-slate-600 dark:hover:border-slate-500"
-                  >
-                    <div className="flex flex-col items-center justify-center pt-5 pb-6">
-                      <Upload className="w-8 h-8 mb-3 text-slate-500 dark:text-slate-400" />
-                      <p className="mb-2 text-sm text-slate-500 dark:text-slate-400">
-                        <span className="font-semibold">Click to upload</span> or drag and drop
-                      </p>
-                      <p className="text-xs text-slate-500 dark:text-slate-400">MP4, MOV, or AVI (MAX. 500MB)</p>
-                    </div>
-                    <input
-                      id="video-file"
-                      type="file"
-                      className="hidden"
-                      accept="video/mp4,video/mov,video/avi"
-                      onChange={handleFileChange}
-                      disabled={loading || isComingSoon}
-                    />
-                  </label>
-                </div>
-                {videoFile && (
-                  <p className="text-sm text-slate-600 dark:text-slate-400">Selected file: {videoFile.name}</p>
-                )}
-              </div>
-
-              {uploadProgress > 0 && uploadProgress < 100 && (
-                <div className="w-full bg-slate-200 rounded-full h-2.5 dark:bg-slate-700">
-                  <div className="bg-slate-600 h-2.5 rounded-full" style={{ width: `${uploadProgress}%` }}></div>
-                  <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">Uploading: {uploadProgress}%</p>
-                </div>
-              )}
-
-              <div className="space-y-2">
-                <Label htmlFor="upload-language">Language</Label>
-                <Select value={language} onValueChange={setLanguage} disabled={loading || isComingSoon}>
-                  <SelectTrigger id="upload-language">
-                    <SelectValue placeholder="Select language" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="english">English</SelectItem>
-                    <SelectItem value="spanish">Spanish</SelectItem>
-                    <SelectItem value="french">French</SelectItem>
-                    <SelectItem value="german">German</SelectItem>
-                    <SelectItem value="japanese">Japanese</SelectItem>
-                    <SelectItem value="chinese">Chinese</SelectItem>
-                  </SelectContent>
-                </Select>
-                <p className="text-sm text-slate-500 dark:text-slate-400">Select the language of the video content</p>
-              </div>
-            </CardContent>
-            <CardFooter>
-              <Button
-                onClick={handleGenerateSubtitles}
-                className="w-full bg-slate-700 hover:bg-slate-800 text-white"
-                disabled={loading || !videoFile || isComingSoon}
-              >
-                {loading ? (
-                  <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    Generating...
-                  </>
-                ) : (
-                  "Generate Subtitles"
-                )}
-              </Button>
-            </CardFooter>
-
-            {isComingSoon && (
-              <div className="absolute inset-0 bg-slate-100/80 dark:bg-slate-900/80 backdrop-blur-sm flex items-center justify-center">
-                <div className="text-center space-y-4">
-                  <Clock className="h-12 w-12 mx-auto text-slate-500 dark:text-slate-400" />
-                  <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100">
-                    Coming Soon
-                  </h2>
-                  <p className="text-slate-600 dark:text-slate-400 max-w-md">
-                    Stay tuned to unlock this exciting feature to generate accurate subtitles for your YouTube videos!
-                  </p>
-                  <Button
-                    key="back-to-topics-upload"
-                    variant="outline"
-                    onClick={() => router.push("/topics")}
-                    className="bg-slate-950 hover:bg-slate-900 text-white"
-                  >
-                    Back to Topics
-                  </Button>
-                </div>
-              </div>
-            )}
-          </Card>
-        </TabsContent>
-      </Tabs>
-
-      {subtitles && (
-        <Card className="mt-8 relative">
-          <CardHeader>
-            <CardTitle>Generated Subtitles</CardTitle>
-            <CardDescription>Review and download your subtitles</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Textarea
-              value={subtitles}
-              onChange={(e) => setSubtitles(e.target.value)}
-              className="min-h-[300px] font-mono text-sm"
-              disabled={isComingSoon}
-            />
-          </CardContent>
-          <CardFooter className="flex justify-between">
-            <Button variant="outline" onClick={() => setSubtitles("")} disabled={isComingSoon}>
-              Clear
-            </Button>
-            <Button className="bg-slate-700 hover:bg-slate-800 text-white" onClick={handleDownloadSubtitles} disabled={isComingSoon}>
-              <Download className="mr-2 h-4 w-4" />
-              Download SRT
-            </Button>
-          </CardFooter>
-
-          {isComingSoon && (
-            <div className="absolute inset-0 bg-slate-100/80 dark:bg-slate-900/80 backdrop-blur-sm flex items-center justify-center">
-              <div className="text-center space-y-4">
-                <Clock className="h-12 w-12 mx-auto text-slate-500 dark:text-slate-400" />
-                <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100">
-                  Coming Soon
-                </h2>
-                <p className="text-slate-600 dark:text-slate-400 max-w-md">
-                  Stay tuned to unlock this exciting feature to generate accurate subtitles for your YouTube videos!
-                </p>
-                <Button
-                  key="back-to-topics-generated"
-                  variant="outline"
-                  onClick={() => router.push("/topics")}
-                  className="bg-slate-950 hover:bg-slate-900 text-white"
+            const data = await res.json();
+            console.log(data);
+            setSubtitles(data);
+        } catch (err) {
+            const errorMessage = err instanceof Error ? err.message : "Unknown error";
+            setError(errorMessage);
+            toast.error(`Error refreshing list: ${errorMessage}`);
+        } finally {
+            setIsLoading(false);
+        }
+    }, []);
+
+    useEffect(() => {
+        refreshSubtitles();
+    }, [refreshSubtitles]);
+
+    return (
+        <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-purple-50/30">
+            <div className="container mx-auto max-w-5xl space-y-8 p-4 md:p-8">
+                {/* Animated Header */}
+                <motion.div
+                    className="space-y-2 border-b border-gray-100 pb-6"
+                    initial={{ opacity: 0, y: -20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.5 }}
+                >
+                    <h1 className="text-4xl font-bold tracking-tight bg-gradient-to-r from-gray-900 via-gray-800 to-purple-900 bg-clip-text text-transparent">
+                        Subtitle Generator
+                    </h1>
+                    <p className="text-sm text-gray-500">
+                        Upload your videos and generate subtitles effortlessly
+                    </p>
+                </motion.div>
+
+                {/* Animated Uploader */}
+                <motion.div
+                    className="rounded-xl border border-gray-200 bg-white/80 backdrop-blur-sm shadow-sm hover:shadow-md transition-shadow duration-200"
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.5, delay: 0.1 }}
+                    whileHover={{ y: -2 }}
                 >
-                  Back to Topics
-                </Button>
-              </div>
+                    <SubtitleUploader onUploadSuccess={refreshSubtitles} />
+                </motion.div>
+
+                {/* Animated History */}
+                <motion.div
+                    className="rounded-xl border border-gray-200 bg-white/80 backdrop-blur-sm shadow-sm"
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.5, delay: 0.2 }}
+                >
+                    <SubtitleHistory
+                        subtitles={subtitles}
+                        isLoading={isLoading}
+                        error={error}
+                        refreshSubtitles={refreshSubtitles}
+                    />
+                </motion.div>
             </div>
-          )}
-        </Card>
-      )}
-    </div>
-  )
+        </div>
+    );
 }
\ No newline at end of file
diff --git a/apps/web/components/dashboard/subtitles/GenerateSubtitlesForm.tsx b/apps/web/components/dashboard/subtitles/GenerateSubtitlesForm.tsx
new file mode 100644
index 0000000..5816f87
--- /dev/null
+++ b/apps/web/components/dashboard/subtitles/GenerateSubtitlesForm.tsx
@@ -0,0 +1,239 @@
+"use client";
+
+import React, {useEffect, useState} from 'react';
+import {Button} from '@/components/ui/button';
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
+import {Label} from '@/components/ui/label';
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select';
+import {Info, Loader2, Plus, Sparkles} from 'lucide-react';
+import {toast} from 'sonner';
+
+type GenerateSubtitlesFormProps = {
+    isGenerating: boolean;
+    videoDuration: number | null;
+    onGenerate: (sourceLanguage: string, targetLanguage: string) => void;
+};
+
+const sourceLanguages = [
+    { value: 'auto', label: 'Auto Detect' },
+    { value: 'English', label: 'English' },
+    { value: 'Spanish', label: 'Spanish' },
+    { value: 'French', label: 'French' },
+    { value: 'German', label: 'German' },
+    { value: 'Hindi', label: 'Hindi' },
+    { value: 'Japanese', label: 'Japanese' },
+    { value: 'Portuguese', label: 'Portuguese' },
+    { value: 'Chinese', label: 'Chinese' },
+    { value: 'Arabic', label: 'Arabic' },
+    { value: 'Russian', label: 'Russian' },
+    { value: 'Italian', label: 'Italian' },
+    { value: 'Korean', label: 'Korean' },
+    { value: 'Dutch', label: 'Dutch' },
+    { value: 'Turkish', label: 'Turkish' },
+    { value: 'Polish', label: 'Polish' },
+    { value: 'Vietnamese', label: 'Vietnamese' },
+    { value: 'Indonesian', label: 'Indonesian' },
+    { value: 'Thai', label: 'Thai' },
+    { value: 'Bengali', label: 'Bengali' },
+];
+
+const targetLanguages = [
+    { value: 'same', label: 'Same as Source (No Translation)' },
+    ...sourceLanguages.filter(lang => lang.value !== 'auto')
+];
+
+export function GenerateSubtitlesForm({
+                                          isGenerating,
+                                          videoDuration,
+                                          onGenerate
+                                      }: GenerateSubtitlesFormProps) {
+    const [sourceLanguage, setSourceLanguage] = useState('auto');
+    const [targetLanguage, setTargetLanguage] = useState('same');
+    const [showTranslationHint, setShowTranslationHint] = useState(false);
+
+    // Auto-update target language hint when source changes
+    useEffect(() => {
+        if (sourceLanguage !== 'auto' && targetLanguage !== 'same' && sourceLanguage === targetLanguage) {
+            setShowTranslationHint(true);
+        } else {
+            setShowTranslationHint(false);
+        }
+    }, [sourceLanguage, targetLanguage]);
+
+    const handleSourceLanguageChange = (value: string) => {
+        setSourceLanguage(value);
+
+        if (value !== 'auto' && value === targetLanguage) {
+            toast.info("Tip: Source and target are the same. Consider using 'Same as Source' for better performance.");
+        }
+    };
+
+    const handleTargetLanguageChange = (value: string) => {
+        setTargetLanguage(value);
+
+        if (sourceLanguage !== 'auto' && sourceLanguage === value) {
+            toast.info("Tip: Consider using 'Same as Source' when not translating.");
+        }
+    };
+
+    const handleSubmit = async () => {
+        if (!videoDuration || videoDuration <= 0) {
+            toast.error("Video metadata not loaded yet. Please wait.");
+            return;
+        }
+
+        if (!sourceLanguage) {
+            toast.error("Please select a video language.");
+            return;
+        }
+
+        if (!targetLanguage) {
+            toast.error("Please select a subtitle language.");
+            return;
+        }
+
+        if (videoDuration > 600) {
+            toast.warning("This video is quite long. Processing may take several minutes.");
+        }
+
+        const isTranslating = targetLanguage !== 'same' &&
+            (sourceLanguage === 'auto' || sourceLanguage !== targetLanguage);
+
+        if (isTranslating) {
+            toast.info("Generating subtitles with translation. This may take longer.");
+        } else {
+            toast.info("Generating subtitles without translation.");
+        }
+
+        onGenerate(sourceLanguage, targetLanguage);
+    };
+
+    const getEstimatedTime = () => {
+        if (!videoDuration) return null;
+        const minutes = Math.ceil(videoDuration / 60);
+        return Math.max(1, Math.ceil(minutes * 0.3));
+    };
+
+    const estimatedTime = getEstimatedTime();
+    const isTranslating = targetLanguage !== 'same' &&
+        (sourceLanguage === 'auto' || sourceLanguage !== targetLanguage);
+
+    return (
+        <Card className="w-full max-w-sm mb-4 text-left border-purple-200">
+            <CardHeader className="p-6 pb-4">
+                <CardTitle className="text-lg flex items-center">
+                    <Sparkles className="w-4 h-4 mr-2" />
+                    Generate / Translate Subtitles (AI)
+                </CardTitle>
+            </CardHeader>
+            <CardContent className="p-6 pt-0">
+                <div className="space-y-4">
+                    <div className="space-y-2">
+                        <Label htmlFor="source-language" className="text-xs font-medium">
+                            Video Language
+                        </Label>
+                        <Select
+                            value={sourceLanguage}
+                            onValueChange={handleSourceLanguageChange}
+                            disabled={isGenerating}
+                        >
+                            <SelectTrigger id="source-language">
+                                <SelectValue placeholder="Select video language" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {sourceLanguages.map((lang) => (
+                                    <SelectItem key={lang.value} value={lang.value}>
+                                        {lang.label}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                        <p className="text-xs text-muted-foreground">
+                            Language spoken in the video
+                        </p>
+                    </div>
+
+                    {/* Target Language Dropdown */}
+                    <div className="space-y-2">
+                        <Label htmlFor="target-language" className="text-xs font-medium">
+                            Subtitle Language
+                        </Label>
+                        <Select
+                            value={targetLanguage}
+                            onValueChange={handleTargetLanguageChange}
+                            disabled={isGenerating}
+                        >
+                            <SelectTrigger id="target-language">
+                                <SelectValue placeholder="Select subtitle language" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {targetLanguages.map((lang) => (
+                                    <SelectItem key={lang.value} value={lang.value}>
+                                        {lang.label}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                        <p className="text-xs text-muted-foreground">
+                            {isTranslating ? 'Subtitles will be translated' : 'No translation applied'}
+                        </p>
+                    </div>
+
+                    {/* Info message for same language selection */}
+                    {showTranslationHint && (
+                        <div className="flex items-start gap-2 p-3 bg-blue-50 border border-blue-200 rounded-md">
+                            <Info className="w-4 h-4 mt-0.5 text-blue-600 flex-shrink-0" />
+                            <p className="text-xs text-blue-900">
+                                Source and target are the same. Consider selecting "Same as Source" for faster processing.
+                            </p>
+                        </div>
+                    )}
+
+                    {/* Estimated time display */}
+                    {estimatedTime && !isGenerating && (
+                        <div className="text-xs text-muted-foreground text-center pt-2">
+                            Estimated time: ~{estimatedTime} {estimatedTime === 1 ? 'minute' : 'minutes'}
+                        </div>
+                    )}
+
+                    {/* ADDED: Credit cost information */}
+                    {!isGenerating && (
+                        <div className="text-xs text-muted-foreground text-center pt-1 pb-2">
+                            This action will use <strong>1 credit</strong>.
+                        </div>
+                    )}
+
+                    <Button
+                        onClick={handleSubmit}
+                        disabled={isGenerating || !videoDuration || videoDuration <= 0}
+                        className="w-full bg-black hover:bg-black/90"
+                    >
+                        {isGenerating ? (
+                            <>
+                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                Processing...
+                            </>
+                        ) : (
+                            <>
+                                <Plus className="mr-2 h-4 w-4" />
+                                {isTranslating ? 'Generate & Translate' : 'Generate Subtitles'}
+                            </>
+                        )}
+                    </Button>
+                </div>
+
+                {!videoDuration && (
+                    <p className="mt-4 text-xs text-center text-muted-foreground">
+                        Waiting for video to load...
+                    </p>
+                )}
+
+                {isGenerating && (
+                    <p className="mt-4 text-xs text-center text-muted-foreground">
+                        This may take a few minutes. Please don't close this tab.
+                    </p>
+                )}
+            </CardContent>
+        </Card>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/components/dashboard/subtitles/SubtitleEditorPanel.tsx b/apps/web/components/dashboard/subtitles/SubtitleEditorPanel.tsx
new file mode 100644
index 0000000..4b500a3
--- /dev/null
+++ b/apps/web/components/dashboard/subtitles/SubtitleEditorPanel.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import React from 'react';
+import { motion } from 'motion/react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Plus } from 'lucide-react';
+import { SubtitleLine } from '@repo/validation/src/types/SubtitleTypes';
+import { SubtitleEmptyState } from './SubtitleEmptyState';
+import { SubtitleList } from './SubtitleList';
+
+type SubtitleEditorPanelProps = {
+    subtitles: SubtitleLine[];
+    currentSub: SubtitleLine | undefined;
+    editingIndex: number | null;
+    isGenerating: boolean;
+    videoDuration: number | null;
+    onAddLine: () => void;
+    onUpdate: (idx: number, field: keyof SubtitleLine, val: string) => void;
+    onDelete: (idx: number) => void;
+    onSetEditing: (idx: number | null) => void;
+    onSeek: (time: string) => void;
+    onGenerate: (language: string, targetLanguage: string) => void;
+    onFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+const cardVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+        opacity: 1,
+        y: 0,
+
+    }
+};
+
+export function SubtitleEditorPanel({
+                                        subtitles,
+                                        currentSub,
+                                        editingIndex,
+                                        isGenerating,
+                                        videoDuration,
+                                        onAddLine,
+                                        onUpdate,
+                                        onDelete,
+                                        onSetEditing,
+                                        onSeek,
+                                        onGenerate,
+                                        onFileChange
+                                    }: SubtitleEditorPanelProps) {
+
+    const hasSubtitles = subtitles.length > 0;
+
+    return (
+        <motion.div
+            variants={cardVariants}
+            transition={{ duration: 0.3, ease: "easeOut" }}
+            initial="hidden"
+            animate="visible"
+        >
+            <Card className="border-purple-200/60 shadow-lg bg-gradient-to-br from-white to-purple-50/20 h-full flex flex-col overflow-hidden">
+                <CardHeader className="flex flex-row items-center justify-between border-b border-purple-100/50 px-6 py-4 bg-gradient-to-b from-white to-purple-50/30">
+                    <div>
+                        <CardTitle className="text-xl bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">
+                            Subtitles
+                        </CardTitle>
+                        <p className="text-sm text-muted-foreground mt-0.5">
+                            {hasSubtitles ? `${subtitles.length} ${subtitles.length === 1 ? 'line' : 'lines'}` : 'No subtitles yet'}
+                        </p>
+                    </div>
+
+                    {hasSubtitles && (
+                        <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={onAddLine}
+                                className="border-purple-200 hover:bg-purple-50 hover:border-purple-300 transition-all shadow-sm"
+                            >
+                                <Plus className="mr-2 h-4 w-4" /> Add Line
+                            </Button>
+                        </motion.div>
+                    )}
+                </CardHeader>
+
+                <CardContent className="p-0 flex-grow overflow-hidden">
+                    {!hasSubtitles ? (
+                        <SubtitleEmptyState
+                            isGenerating={isGenerating}
+                            videoDuration={videoDuration}
+                            onGenerate={onGenerate}
+                            onFileChange={onFileChange}
+                            onAddLineManually={onAddLine}
+                        />
+                    ) : (
+                        <div className="p-4 h-full">
+                            <SubtitleList
+                                subtitles={subtitles}
+                                currentSub={currentSub}
+                                editingIndex={editingIndex}
+                                onUpdate={onUpdate}
+                                onDelete={onDelete}
+                                onSetEditing={onSetEditing}
+                                onSeek={onSeek}
+                            />
+                        </div>
+                    )}
+                </CardContent>
+            </Card>
+        </motion.div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/components/dashboard/subtitles/SubtitleEmptyState.tsx b/apps/web/components/dashboard/subtitles/SubtitleEmptyState.tsx
new file mode 100644
index 0000000..71ab83f
--- /dev/null
+++ b/apps/web/components/dashboard/subtitles/SubtitleEmptyState.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import React from 'react';
+import { motion } from 'motion/react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Upload } from 'lucide-react';
+import { GenerateSubtitlesForm } from './GenerateSubtitlesForm';
+
+type SubtitleEmptyStateProps = {
+    isGenerating: boolean;
+    videoDuration: number | null;
+    onGenerate: (language: string, targetLanguage: string) => void;
+    onFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onAddLineManually: () => void;
+};
+
+const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: { staggerChildren: 0.1, delayChildren: 0.1 }
+    }
+};
+
+const itemVariants = {
+    hidden: { opacity: 0, y: 10 },
+    visible: {
+        opacity: 1,
+        y: 0,
+    }
+};
+
+export function SubtitleEmptyState({
+                                       isGenerating,
+                                       videoDuration,
+                                       onGenerate,
+                                       onFileChange,
+                                       onAddLineManually
+                                   }: SubtitleEmptyStateProps) {
+    return (
+        <motion.div
+            className="flex min-h-[500px] flex-col items-center justify-center p-4 py-10 text-center"
+            variants={containerVariants}
+            initial="hidden"
+            animate="visible"
+        >
+            <motion.div variants={itemVariants} className="mb-6">
+                <h3 className="text-lg font-semibold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">
+                    Get Started with Subtitles
+                </h3>
+                <p className="mt-2 text-sm text-muted-foreground">
+                    Choose an option below to begin
+                </p>
+            </motion.div>
+
+            <motion.div variants={itemVariants} transition= {{ duration: 0.3, ease: "easeOut" }}>
+                <GenerateSubtitlesForm
+                    isGenerating={isGenerating}
+                    videoDuration={videoDuration}
+                    onGenerate={onGenerate}
+                />
+            </motion.div>
+
+            <motion.div variants={itemVariants} transition= {{ duration: 0.3, ease: "easeOut" }} className="relative w-full max-w-sm my-6">
+                <div className="absolute inset-0 flex items-center">
+                    <span className="w-full border-t border-purple-100" />
+                </div>
+                <div className="relative flex justify-center text-xs uppercase">
+                    <span className="bg-background px-3 text-muted-foreground font-medium">
+                        Or
+                    </span>
+                </div>
+            </motion.div>
+
+            <motion.div variants={itemVariants} transition= {{ duration: 0.3, ease: "easeOut" }} className="w-full max-w-sm">
+                <Card className="border-purple-200/60 shadow-lg bg-gradient-to-br from-white to-purple-50/20">
+                    <CardHeader className="p-6 pb-4">
+                        <CardTitle className="text-lg flex items-center justify-center">
+                            <Upload className="w-5 h-5 mr-2 text-purple-600" />
+                            Upload File
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent className="p-6 pt-0">
+                        <input
+                            type="file"
+                            id="file-upload"
+                            className="hidden"
+                            accept=".srt"
+                            onChange={onFileChange}
+                        />
+                        <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+                            <Button
+                                asChild
+                                variant="outline"
+                                className="w-full border-purple-200 hover:bg-purple-50 hover:border-purple-300 transition-all"
+                            >
+                                <label htmlFor="file-upload" className="cursor-pointer">
+                                    <Upload className="mr-2 h-4 w-4" />
+                                    Upload .SRT File
+                                </label>
+                            </Button>
+                        </motion.div>
+                        <p className="text-xs text-muted-foreground mt-3">
+                            Import existing subtitle files
+                        </p>
+                    </CardContent>
+                </Card>
+            </motion.div>
+
+            <motion.p
+                variants={itemVariants}
+                transition= {{ duration: 0.3, ease: "easeOut" }}
+                className="text-xs text-muted-foreground mt-6"
+            >
+                Need more control?{' '}
+                <Button
+                    variant="link"
+                    size="sm"
+                    className="p-0 h-auto text-purple-600 hover:text-purple-700"
+                    onClick={onAddLineManually}
+                >
+                    Add lines manually
+                </Button>
+            </motion.p>
+        </motion.div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/components/dashboard/subtitles/SubtitleHeader.tsx b/apps/web/components/dashboard/subtitles/SubtitleHeader.tsx
new file mode 100644
index 0000000..daf9948
--- /dev/null
+++ b/apps/web/components/dashboard/subtitles/SubtitleHeader.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import React from 'react';
+import Link from 'next/link';
+import { motion } from 'motion/react';
+import { Button } from '@/components/ui/button';
+import { Save, Download, Loader2, ArrowLeft } from 'lucide-react';
+
+type SubtitleHeaderProps = {
+    videoPath: string;
+    isSaving: boolean;
+    hasSubtitles: boolean;
+    onSave: () => void;
+    onDownload: () => void;
+};
+
+const headerVariants = {
+    hidden: { opacity: 0, y: -20 },
+    visible: {
+        opacity: 1,
+        y: 0,
+    }
+};
+
+const buttonVariants = {
+    hover: { scale: 1.02 },
+    tap: { scale: 0.98 }
+};
+
+export function SubtitleHeader({ videoPath, isSaving, hasSubtitles, onSave, onDownload }: SubtitleHeaderProps) {
+    const fileName = videoPath.split("/").pop() || 'Untitled';
+
+    return (
+        <motion.div
+            className="relative border-b border-purple-100/50 px-6 py-5 bg-gradient-to-b from-white to-purple-50/20"
+            variants={headerVariants}
+            transition= {{ duration: 0.4, ease: "easeOut" }}
+            initial="hidden"
+            animate="visible"
+        >
+            <div className="flex flex-col gap-4">
+                <div className="flex items-center justify-between gap-4">
+                    <div className="min-w-0 flex-1">
+                        <motion.h1
+                            className="truncate text-xl sm:text-2xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent"
+                            title={fileName}
+                            initial={{ opacity: 0, x: -20 }}
+                            animate={{ opacity: 1, x: 0 }}
+                            transition={{ delay: 0.1, duration: 0.4 }}
+                        >
+                            Editing: {fileName}
+                        </motion.h1>
+                        <motion.p
+                            className="mt-1 text-sm text-muted-foreground"
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            transition={{ delay: 0.2, duration: 0.4 }}
+                        >
+                            {hasSubtitles ? 'Modify and export your subtitles' : 'No subtitles loaded yet'}
+                        </motion.p>
+                    </div>
+
+                    <motion.div
+                        variants={buttonVariants}
+                        whileHover="hover"
+                        whileTap="tap"
+                    >
+                        <Button
+                            asChild
+                            variant="outline"
+                            className="flex-shrink-0 h-9 w-9 p-0 sm:w-auto sm:px-4 border-purple-200 hover:bg-purple-50 hover:border-purple-300 transition-all shadow-sm"
+                        >
+                            <Link href="/dashboard/subtitles">
+                                <ArrowLeft className="h-4 w-4 sm:mr-2" />
+                                <span className="hidden sm:inline">Back</span>
+                            </Link>
+                        </Button>
+                    </motion.div>
+                </div>
+
+                <div className="flex flex-col-reverse sm:flex-row gap-3">
+                    <motion.div
+                        className="flex-1 sm:flex-initial"
+                        variants={buttonVariants}
+                        whileHover="hover"
+                        whileTap="tap"
+                    >
+                        <Button
+                            variant="outline"
+                            onClick={onDownload}
+                            disabled={!hasSubtitles}
+                            className="w-full sm:w-auto border-purple-200 hover:bg-purple-50 hover:border-purple-300 disabled:opacity-50 transition-all shadow-sm"
+                        >
+                            <Download className="mr-2 h-4 w-4" />
+                            Download SRT
+                        </Button>
+                    </motion.div>
+
+                    <motion.div
+                        className="flex-1 sm:flex-initial"
+                        variants={buttonVariants}
+                        whileHover="hover"
+                        whileTap="tap"
+                    >
+                        <Button
+                            onClick={onSave}
+                            disabled={isSaving || !hasSubtitles}
+                            className="w-full sm:w-auto bg-black hover:bg-black/90 disabled:opacity-50 shadow-md transition-all"
+                        >
+                            {isSaving ? (
+                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                            ) : (
+                                <Save className="mr-2 h-4 w-4" />
+                            )}
+                            {isSaving ? 'Saving...' : 'Save Changes'}
+                        </Button>
+                    </motion.div>
+                </div>
+            </div>
+
+            <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-purple-200 to-transparent" />
+        </motion.div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/components/dashboard/subtitles/SubtitleItem.tsx b/apps/web/components/dashboard/subtitles/SubtitleItem.tsx
new file mode 100644
index 0000000..180b789
--- /dev/null
+++ b/apps/web/components/dashboard/subtitles/SubtitleItem.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import React from 'react';
+import { motion } from 'motion/react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Edit2, Trash2, Check } from 'lucide-react';
+import { SubtitleLine } from '@repo/validation/src/types/SubtitleTypes';
+
+type SubtitleItemProps = {
+    subtitle: SubtitleLine;
+    index: number;
+    isCurrent: boolean;
+    isEditing: boolean;
+    onUpdate: (idx: number, field: keyof SubtitleLine, val: string) => void;
+    onDelete: (idx: number) => void;
+    onSetEditing: (idx: number | null) => void;
+    onSeek: (time: string) => void;
+};
+
+export function SubtitleItem({
+                                 subtitle,
+                                 index,
+                                 isCurrent,
+                                 isEditing,
+                                 onUpdate,
+                                 onDelete,
+                                 onSetEditing,
+                                 onSeek
+                             }: SubtitleItemProps) {
+
+    const handleSeekStart = () => onSeek(subtitle.start);
+
+    if (isEditing) {
+        return (
+            <motion.div
+                className="rounded-lg border border-purple-300 bg-purple-50/50 p-4"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.2 }}
+            >
+                <div className="space-y-3">
+                    <div className="flex gap-2 items-center">
+                        <Input
+                            type="text"
+                            value={subtitle.start}
+                            onChange={(e) => onUpdate(index, 'start', e.target.value)}
+                            className="font-mono text-sm border-purple-200 focus-visible:ring-purple-400"
+                            placeholder="00:00:00.000"
+                        />
+                        <span className="text-muted-foreground">→</span>
+                        <Input
+                            type="text"
+                            value={subtitle.end}
+                            onChange={(e) => onUpdate(index, 'end', e.target.value)}
+                            className="font-mono text-sm border-purple-200 focus-visible:ring-purple-400"
+                            placeholder="00:00:00.000"
+                        />
+                    </div>
+                    <Textarea
+                        value={subtitle.text}
+                        onChange={(e) => onUpdate(index, 'text', e.target.value)}
+                        placeholder="Subtitle text..."
+                        className="text-sm border-purple-200 focus-visible:ring-purple-400"
+                        rows={3}
+                    />
+                    <Button
+                        onClick={() => onSetEditing(null)}
+                        className="w-full bg-black hover:bg-black/90"
+                        size="sm"
+                    >
+                        <Check className="w-4 h-4 mr-2" /> Done
+                    </Button>
+                </div>
+            </motion.div>
+        );
+    }
+
+    return (
+        <motion.div
+            className={`group rounded-lg border p-4 transition-colors ${
+                isCurrent
+                    ? 'bg-purple-50/50 border-purple-200'
+                    : 'bg-white border-gray-200 hover:border-purple-100'
+            }`}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.2 }}
+        >
+            <div className="space-y-2">
+                <div className="flex justify-between items-start">
+                    <span
+                        className="text-xs text-muted-foreground font-mono cursor-pointer hover:text-purple-600 transition-colors"
+                        onClick={handleSeekStart}
+                    >
+                        {subtitle.start} → {subtitle.end}
+                    </span>
+                    <div className="flex -mt-1 -mr-1 gap-1">
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => onSetEditing(index)}
+                            className="h-7 w-7 hover:bg-purple-50"
+                        >
+                            <Edit2 className="w-3.5 h-3.5 text-purple-600" />
+                        </Button>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => onDelete(index)}
+                            className="h-7 w-7 hover:bg-red-50"
+                        >
+                            <Trash2 className="w-3.5 h-3.5 text-red-500" />
+                        </Button>
+                    </div>
+                </div>
+                <p
+                    className="text-sm leading-relaxed cursor-pointer hover:text-purple-600 transition-colors"
+                    onClick={handleSeekStart}
+                >
+                    {subtitle.text}
+                </p>
+            </div>
+        </motion.div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/components/dashboard/subtitles/SubtitleList.tsx b/apps/web/components/dashboard/subtitles/SubtitleList.tsx
new file mode 100644
index 0000000..4d95609
--- /dev/null
+++ b/apps/web/components/dashboard/subtitles/SubtitleList.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import React from 'react';
+import { motion } from 'motion/react';
+import { SubtitleLine } from '@repo/validation/src/types/SubtitleTypes';
+import { SubtitleItem } from './SubtitleItem';
+
+type SubtitleListProps = {
+    subtitles: SubtitleLine[];
+    currentSub: SubtitleLine | undefined;
+    editingIndex: number | null;
+    onUpdate: (idx: number, field: keyof SubtitleLine, val: string) => void;
+    onDelete: (idx: number) => void;
+    onSetEditing: (idx: number | null) => void;
+    onSeek: (time: string) => void;
+};
+
+const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: { staggerChildren: 0.05 }
+    }
+};
+
+export function SubtitleList({
+                                 subtitles,
+                                 currentSub,
+                                 editingIndex,
+                                 onUpdate,
+                                 onDelete,
+                                 onSetEditing,
+                                 onSeek
+                             }: SubtitleListProps) {
+    return (
+        <motion.div
+            className="h-96 space-y-3 overflow-y-auto rounded-lg border border-purple-200/60 bg-gradient-to-b from-white to-purple-50/20 p-4 shadow-inner"
+            initial="hidden"
+            animate="visible"
+            variants={containerVariants}
+        >
+            <style jsx>{`
+                div::-webkit-scrollbar {
+                    width: 8px;
+                }
+                div::-webkit-scrollbar-track {
+                    background: rgb(250 245 255);
+                    border-radius: 4px;
+                }
+                div::-webkit-scrollbar-thumb {
+                    background: rgb(216 180 254);
+                    border-radius: 4px;
+                }
+                div::-webkit-scrollbar-thumb:hover {
+                    background: rgb(192 132 252);
+                }
+            `}</style>
+
+            {subtitles.map((sub, idx) => (
+                <SubtitleItem
+                    key={idx}
+                    subtitle={sub}
+                    index={idx}
+                    isCurrent={currentSub === sub}
+                    isEditing={editingIndex === idx}
+                    onUpdate={onUpdate}
+                    onDelete={onDelete}
+                    onSetEditing={onSetEditing}
+                    onSeek={onSeek}
+                />
+            ))}
+        </motion.div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/components/dashboard/subtitles/VideoPlayer.tsx b/apps/web/components/dashboard/subtitles/VideoPlayer.tsx
new file mode 100644
index 0000000..62a9678
--- /dev/null
+++ b/apps/web/components/dashboard/subtitles/VideoPlayer.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import React from 'react';
+import { motion } from 'motion/react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Download, Loader2 } from 'lucide-react';
+
+type VideoPlayerProps = {
+    videoUrl: string;
+    title: string;
+    subtitleUrl: string | null;
+    onDownloadVideo: () => Promise<void>;
+    isDownloadDisabled: boolean;
+    downloadVideoLoading: boolean;
+};
+
+export const VideoPlayer = React.forwardRef<HTMLVideoElement, VideoPlayerProps>(
+
+
+    ({ videoUrl, title, subtitleUrl, onDownloadVideo, isDownloadDisabled, downloadVideoLoading }, ref) => {
+        return (
+            <Card className="group overflow-hidden lg:sticky lg:top-12 border border-white/20 shadow-xl transition-shadow duration-300 backdrop-blur-xl bg-white/40">
+                <CardContent className="p-4 space-y-3">
+                    <div className="relative aspect-video w-full overflow-hidden bg-black rounded-lg">
+                        <video
+                            ref={ref}
+                            key={videoUrl}
+                            src={videoUrl}
+                            title={title}
+                            controls
+                            crossOrigin="anonymous"
+                            className="h-full w-full object-contain"
+                        >
+                            {subtitleUrl && (
+                                <track
+                                    key={subtitleUrl}
+                                    src={subtitleUrl}
+                                    kind="subtitles"
+                                    label="English"
+                                    default
+                                />
+                            )}
+                            Your browser does not support the video tag.
+                        </video>
+
+                        <div className="absolute inset-0 pointer-events-none ring-1 ring-inset ring-white/10 rounded-lg" />
+                    </div>
+
+                    {/* Download button */}
+                    <motion.div
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: 0.2 }}
+                    >
+                        <Button
+                            variant="outline"
+                            size="lg"
+                            className="w-full bg-black/80 hover:bg-black text-white  border-white/10 hover:border-white/20 backdrop-blur-sm shadow-lg hover:shadow-xl transition-all"
+                            onClick={onDownloadVideo}
+                            disabled={isDownloadDisabled || downloadVideoLoading}
+                        >
+                            {downloadVideoLoading ? (
+                                <>
+                                    <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                                    Downloading...
+                                </>
+                            ) : (
+                                <>
+                                    <Download className="mr-2 h-5 w-5" />
+                                    Download Video with Subtitles
+                                </>
+                            )}
+                        </Button>
+                    </motion.div>
+                </CardContent>
+            </Card>
+        );
+    }
+);
+
+VideoPlayer.displayName = "VideoPlayer";
\ No newline at end of file
diff --git a/apps/web/components/dashboard/subtitles/skeleton/SubtitleEditorSkeleton.tsx b/apps/web/components/dashboard/subtitles/skeleton/SubtitleEditorSkeleton.tsx
new file mode 100644
index 0000000..aa4fcee
--- /dev/null
+++ b/apps/web/components/dashboard/subtitles/skeleton/SubtitleEditorSkeleton.tsx
@@ -0,0 +1,74 @@
+
+import React from "react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Card } from "@/components/ui/card";
+
+export function SubtitleEditorSkeleton() {
+    return (
+        <div className="flex flex-col gap-6 p-4 md:p-6 lg:p-8 max-w-7xl mx-auto">
+            {/* Header Section */}
+            <div className="flex justify-between items-center pb-4 border-b border-gray-100">
+                <div className="flex flex-col gap-1">
+                    <Skeleton className="h-6 w-80 mb-1" /> {/* Title */}
+                    <Skeleton className="h-4 w-64" /> {/* Description */}
+                </div>
+                <Skeleton className="h-9 w-24 rounded-md" /> {/* Back Button */}
+            </div>
+
+            {/* Action Buttons */}
+            <div className="flex gap-3">
+                <Skeleton className="h-9 w-32 rounded-md" /> {/* Download SRT */}
+                <Skeleton className="h-9 w-36 rounded-md" /> {/* Save Changes */}
+            </div>
+
+            {/* Main Content Area: Video Player + Subtitle Editor */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {/* Left Column: Video Player */}
+                <div className="flex flex-col gap-4">
+                    <Card className="p-0 overflow-hidden">
+                        {/* Video Aspect Ratio Placeholder */}
+                        <div className="relative w-full" style={{ paddingBottom: '56.25%' }}> {/* 16:9 aspect ratio */}
+                            <Skeleton className="absolute inset-0 w-full h-full rounded-b-none" />
+                        </div>
+                        <div className="p-4 border-t">
+                            <Skeleton className="h-9 w-full rounded-md" /> {/* Download Video with Subtitles */}
+                        </div>
+                    </Card>
+                </div>
+
+                {/* Right Column: Subtitle Editor */}
+                <div className="flex flex-col gap-4">
+                    <div className="flex justify-between items-center">
+                        <Skeleton className="h-6 w-36" /> {/* Subtitles title */}
+                        <Skeleton className="h-9 w-24 rounded-md" /> {/* Add Line button */}
+                    </div>
+
+                    {/* Subtitle Lines */}
+                    {Array.from({ length: 4 }).map((_, index) => (
+                        <Card key={index} className="p-4 flex flex-col gap-2">
+                            <div className="flex justify-between items-center">
+                                <Skeleton className="h-4 w-48" /> {/* Timestamp */}
+                                <div className="flex gap-2">
+                                    <Skeleton className="h-6 w-6 rounded-md" /> {/* Edit icon */}
+                                    <Skeleton className="h-6 w-6 rounded-md" /> {/* Delete icon */}
+                                </div>
+                            </div>
+                            <Skeleton className="h-10 w-full" /> {/* Textarea */}
+                        </Card>
+                    ))}
+                    {/* Add one more small one for variety */}
+                    <Card className="p-4 flex flex-col gap-2">
+                        <div className="flex justify-between items-center">
+                            <Skeleton className="h-4 w-32" /> {/* Timestamp */}
+                            <div className="flex gap-2">
+                                <Skeleton className="h-6 w-6 rounded-md" /> {/* Edit icon */}
+                                <Skeleton className="h-6 w-6 rounded-md" /> {/* Delete icon */}
+                            </div>
+                        </div>
+                        <Skeleton className="h-8 w-11/12" /> {/* Textarea */}
+                    </Card>
+                </div>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/components/dashboard/subtitles/skeleton/SubtitleHistorySkeleton.tsx b/apps/web/components/dashboard/subtitles/skeleton/SubtitleHistorySkeleton.tsx
new file mode 100644
index 0000000..768f726
--- /dev/null
+++ b/apps/web/components/dashboard/subtitles/skeleton/SubtitleHistorySkeleton.tsx
@@ -0,0 +1,55 @@
+
+import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Skeleton } from "@/components/ui/skeleton";
+import { FileVideo } from "lucide-react";
+
+
+export function SubtitleHistorySkeleton() {
+    const skeletonRows = Array.from({ length: 4 });
+
+    return (
+        <Card className="border-0 shadow-none">
+            <CardContent className="p-0">
+                <div className="overflow-hidden">
+                    <Table>
+                        <TableHeader>
+                            <TableRow className="hover:bg-transparent border-b border-gray-100">
+                                <TableHead className="font-semibold">File</TableHead>
+                                <TableHead className="font-semibold">Date</TableHead>
+                                <TableHead className="font-semibold">Status</TableHead>
+                                <TableHead className="font-semibold">Language</TableHead>
+                                <TableHead className="text-right font-semibold">Actions</TableHead>
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                            {skeletonRows.map((_, index) => (
+                                <TableRow key={index} className="border-b border-gray-50">
+                                    <TableCell>
+                                        <Skeleton className="h-4 w-3/4" />
+                                    </TableCell>
+                                    <TableCell>
+                                        <Skeleton className="h-4 w-[100px]" />
+                                    </TableCell>
+                                    <TableCell>
+                                        {/* Skeleton for the Badge */}
+                                        <Skeleton className="h-6 w-[90px] rounded-full" />
+                                    </TableCell>
+                                    <TableCell>
+                                        {/* Skeleton for the Language code */}
+                                        <Skeleton className="h-4 w-[40px]" />
+                                    </TableCell>
+                                    <TableCell className="text-right">
+                                        {/* Skeleton for the ... Button */}
+                                        <Skeleton className="h-8 w-8 rounded-md ml-auto" />
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/components/dashboard/subtitles/subtitleHistory.tsx b/apps/web/components/dashboard/subtitles/subtitleHistory.tsx
new file mode 100644
index 0000000..009c2b8
--- /dev/null
+++ b/apps/web/components/dashboard/subtitles/subtitleHistory.tsx
@@ -0,0 +1,296 @@
+"use client";
+
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { SubtitleResponse, SubtitleLine } from "@repo/validation/src/types/SubtitleTypes";
+import { AlertCircle, CheckCircle2, Download, Edit, Loader2, MoreHorizontal, Trash2, Clock, FileVideo } from "lucide-react";
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { toast } from "sonner";
+import { motion, AnimatePresence } from "motion/react";
+import { useRouter } from "next/navigation";
+import {SubtitleHistorySkeleton} from "@/components/dashboard/subtitles/skeleton/SubtitleHistorySkeleton";
+
+type SubtitleHistoryProps = {
+    subtitles: SubtitleResponse[];
+    isLoading: boolean;
+    error: string | null;
+    refreshSubtitles: () => Promise<void>;
+};
+
+const STATUS_CONFIG = {
+    done: { variant: "outline" as const, icon: CheckCircle2, color: "text-green-500" },
+    processing: { variant: "secondary" as const, icon: Loader2, color: "text-blue-500", animate: true },
+    queued: { variant: "outline" as const, icon: Clock, color: "text-gray-500" },
+    failed: { variant: "destructive" as const, icon: AlertCircle, color: "text-red-500" },
+};
+
+function convertJsonToSrt(subtitles: SubtitleLine[]): string {
+    return subtitles
+        .map((line, index) => `${index + 1}\n${line.start.replace(".", ",")} --> ${line.end.replace(".", ",")}\n${line.text}\n`)
+        .join("\n");
+}
+
+function convertJsonToVtt(subtitles: SubtitleLine[]): string {
+    return "WEBVTT\n\n" + subtitles
+        .map((line) => `${line.start} --> ${line.end}\n${line.text}\n`)
+        .join("\n");
+}
+
+function triggerDownload(content: string, filename: string) {
+    const blob = new Blob([content], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+}
+
+export function SubtitleHistory({ subtitles, isLoading, error, refreshSubtitles }: SubtitleHistoryProps) {
+    const [downloadingId, setDownloadingId] = useState<string | null>(null);
+    const [deletingId, setDeletingId] = useState<string | null>(null);
+    const [itemToDelete, setItemToDelete] = useState<SubtitleResponse | null>(null);
+    const router = useRouter();
+
+    const sortedData = useMemo(() =>
+            [...subtitles].sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()),
+        [subtitles]
+    );
+
+    const getFilename = (path: string) => path.split("/").pop() || path;
+
+    const handleDownload = async (item: SubtitleResponse, format: "srt" | "vtt") => {
+        setDownloadingId(item.id);
+        try {
+            const res = await fetch(`/api/subtitle/${item.id}`);
+            if (!res.ok) throw new Error("Failed to fetch subtitle data.");
+
+            const data: SubtitleResponse = await res.json();
+            const subtitles: SubtitleLine[] = JSON.parse(data.subtitles_json || "[]");
+            const filename = `${getFilename(item.video_path)}.${format}`;
+            const content = format === "srt" ? convertJsonToSrt(subtitles) : convertJsonToVtt(subtitles);
+
+            triggerDownload(content, filename);
+            toast.success(`Downloaded as ${format.toUpperCase()}`);
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : "Download failed");
+        } finally {
+            setDownloadingId(null);
+        }
+    };
+
+    const handleDeleteConfirm = async () => {
+        if (!itemToDelete) return;
+        setDeletingId(itemToDelete.id);
+        try {
+            const res = await fetch(`/api/subtitle/${itemToDelete.id}`, { method: "DELETE" });
+            if (!res.ok) throw new Error("Failed to delete item.");
+
+            toast.success(`Deleted "${getFilename(itemToDelete.video_path)}"`);
+            await refreshSubtitles();
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : "Delete failed");
+        } finally {
+            setDeletingId(null);
+            setItemToDelete(null);
+        }
+    };
+
+    const handleRowClick = (itemId: string, e: React.MouseEvent) => {
+        // Don't navigate if clicking on dropdown menu or its children
+        const target = e.target as HTMLElement;
+        if (target.closest('[role="menu"]') || target.closest('button')) {
+            return;
+        }
+        router.push(`/dashboard/subtitles/${itemId}`);
+    };
+
+    const StatusIcon = ({ status }: { status: SubtitleResponse["status"] }) => {
+        const config = STATUS_CONFIG[status];
+        const Icon = config.icon;
+        return <Icon className={`mr-2 h-4 w-4 ${config.color}`} />;
+    };
+
+    if (error) {
+        return (
+            <Card className="border-0 shadow-none">
+                <CardHeader className="border-b border-gray-100">
+                    <CardTitle className="flex items-center gap-2 text-lg">
+                        <FileVideo className="h-5 w-5 text-purple-600" />
+                        Subtitle History
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="flex flex-col items-center justify-center p-12 bg-red-50/50">
+                    <AlertCircle className="h-10 w-10 text-red-500 mb-2" />
+                    <p className="text-red-600 text-sm">Failed to load history: {error}</p>
+                </CardContent>
+            </Card>
+        );
+    }
+
+    return (
+        <>
+            <Card className="border-0 shadow-none">
+                <CardHeader className="border-b border-gray-100">
+                    <CardTitle className="flex items-center gap-2 text-lg">
+                        <FileVideo className="h-5 w-5 text-purple-600" />
+                        Subtitle History
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="p-0">
+                    {isLoading ? (
+                        <SubtitleHistorySkeleton/>
+                    ) : (
+                        <div className="overflow-hidden">
+                            <Table>
+                                <TableHeader>
+                                    <TableRow className="hover:bg-transparent border-b border-gray-100">
+                                        <TableHead className="font-semibold">File</TableHead>
+                                        <TableHead className="font-semibold">Date</TableHead>
+                                        <TableHead className="font-semibold">Status</TableHead>
+                                        <TableHead className="font-semibold">Language</TableHead>
+                                        <TableHead className="text-right font-semibold">Actions</TableHead>
+                                    </TableRow>
+                                </TableHeader>
+                                <TableBody>
+                                    <AnimatePresence mode="popLayout">
+                                        {sortedData && sortedData.length > 0 ? (
+                                            sortedData.map((item, index) => (
+                                                <motion.tr
+                                                    key={item.id}
+                                                    initial={{ opacity: 0, y: 20 }}
+                                                    animate={{ opacity: 1, y: 0 }}
+                                                    exit={{ opacity: 0, x: -100 }}
+                                                    transition={{ delay: index * 0.08, duration: 0.3 }}
+                                                    onClick={(e) => handleRowClick(item.id, e)}
+                                                    className="border-b border-gray-50 hover:bg-purple-50/30 transition-colors cursor-pointer"
+                                                >
+                                                    <TableCell className="font-medium text-gray-900">
+                                                        {getFilename(item.video_path)}
+                                                    </TableCell>
+                                                    <TableCell className="text-gray-600">
+                                                        {new Date(item.created_at).toLocaleDateString()}
+                                                    </TableCell>
+                                                    <TableCell>
+                                                        <Badge variant={STATUS_CONFIG[item.status].variant} className="gap-1">
+                                                            <StatusIcon status={item.status} />
+                                                            <span className="capitalize">{item.status}</span>
+                                                        </Badge>
+                                                    </TableCell>
+                                                    <TableCell className="uppercase text-gray-600 text-sm font-medium">
+                                                        {item.language}
+                                                    </TableCell>
+                                                    <TableCell className="text-right">
+                                                        <DropdownMenu>
+                                                            <DropdownMenuTrigger asChild>
+                                                                <Button
+                                                                    variant="ghost"
+                                                                    size="icon"
+                                                                    disabled={deletingId === item.id}
+                                                                    className="hover:bg-purple-100"
+                                                                    onClick={(e) => e.stopPropagation()}
+                                                                >
+                                                                    {deletingId === item.id ? (
+                                                                        <Loader2 className="h-4 w-4 animate-spin" />
+                                                                    ) : (
+                                                                        <MoreHorizontal className="h-4 w-4" />
+                                                                    )}
+                                                                </Button>
+                                                            </DropdownMenuTrigger>
+                                                            <DropdownMenuContent align="end" className="w-48">
+                                                                <DropdownMenuItem asChild>
+                                                                    <Link href={`/dashboard/subtitles/${item.id}`} className="cursor-pointer">
+                                                                        <Edit className="mr-2 h-4 w-4" />
+                                                                        View / Edit
+                                                                    </Link>
+                                                                </DropdownMenuItem>
+                                                                {item.status === "done" && (
+                                                                    <DropdownMenuSub>
+                                                                        <DropdownMenuSubTrigger>
+                                                                            {downloadingId === item.id ? (
+                                                                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                                                            ) : (
+                                                                                <Download className="mr-2 h-4 w-4" />
+                                                                            )}
+                                                                            Download
+                                                                        </DropdownMenuSubTrigger>
+                                                                        <DropdownMenuSubContent>
+                                                                            <DropdownMenuItem onClick={() => handleDownload(item, 'srt')}>
+                                                                                as .srt
+                                                                            </DropdownMenuItem>
+                                                                            <DropdownMenuItem onClick={() => handleDownload(item, 'vtt')}>
+                                                                                as .vtt
+                                                                            </DropdownMenuItem>
+                                                                        </DropdownMenuSubContent>
+                                                                    </DropdownMenuSub>
+                                                                )}
+                                                                <DropdownMenuSeparator />
+                                                                <DropdownMenuItem
+                                                                    className="text-red-600 focus:text-red-600"
+                                                                    onSelect={(e) => {
+                                                                        e.preventDefault();
+                                                                        setItemToDelete(item);
+                                                                    }}
+                                                                >
+                                                                    <Trash2 className="mr-2 h-4 w-4" />
+                                                                    Delete
+                                                                </DropdownMenuItem>
+                                                            </DropdownMenuContent>
+                                                        </DropdownMenu>
+                                                    </TableCell>
+                                                </motion.tr>
+                                            ))
+                                        ) : (
+                                            <TableRow>
+                                                <TableCell colSpan={5} className="h-32 text-center">
+                                                    <div className="flex flex-col items-center gap-2 text-gray-500">
+                                                        <FileVideo className="h-10 w-10 text-gray-300" />
+                                                        <p className="text-sm">No subtitle history found. Upload a video to get started.</p>
+                                                    </div>
+                                                </TableCell>
+                                            </TableRow>
+                                        )}
+                                    </AnimatePresence>
+                                </TableBody>
+                            </Table>
+                        </div>
+                    )}
+                </CardContent>
+            </Card>
+
+            <AlertDialog open={!!itemToDelete} onOpenChange={(open) => !open && setItemToDelete(null)}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>Delete Subtitle File?</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            This action cannot be undone. This will permanently delete{" "}
+                            <span className="font-semibold text-gray-900">
+                                {itemToDelete && getFilename(itemToDelete.video_path)}
+                            </span>.
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+                        <AlertDialogAction
+                            className="bg-red-600 hover:bg-red-700"
+                            onClick={handleDeleteConfirm}
+                            disabled={deletingId === itemToDelete?.id}
+                        >
+                            {deletingId === itemToDelete?.id && (
+                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                            )}
+                            Delete
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/components/dashboard/subtitles/subtitleUploader.tsx b/apps/web/components/dashboard/subtitles/subtitleUploader.tsx
new file mode 100644
index 0000000..d2ced86
--- /dev/null
+++ b/apps/web/components/dashboard/subtitles/subtitleUploader.tsx
@@ -0,0 +1,153 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Loader2, UploadCloud, Film } from "lucide-react";
+import React, { useState } from "react";
+import { toast } from "sonner";
+import { useRouter } from "next/navigation";
+import { motion } from "motion/react";
+
+type SubtitleUploaderProps = {
+    onUploadSuccess: () => void;
+};
+
+export function SubtitleUploader({ onUploadSuccess }: SubtitleUploaderProps) {
+    const [file, setFile] = useState<File | null>(null);
+    const [duration, setDuration] = useState<number | null>(null);
+    const [isUploading, setIsUploading] = useState(false);
+    const router = useRouter();
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const selectedFile = e.target.files?.[0];
+        if (!selectedFile) return;
+
+        setFile(null);
+        setDuration(null);
+
+        const maxSize = 200 * 1024 * 1024;
+        if (selectedFile.size > maxSize) {
+            toast.error("File size must be less than 200MB");
+            e.target.value = "";
+            return;
+        }
+
+        const video = document.createElement("video");
+        video.preload = "metadata";
+        video.onloadedmetadata = () => {
+            URL.revokeObjectURL(video.src);
+            const videoDuration = video.duration;
+            const maxDuration = 10 * 60;
+
+            if (videoDuration > maxDuration) {
+                toast.error("Video duration must be 10 minutes or less");
+                e.target.value = "";
+                return;
+            }
+
+            setFile(selectedFile);
+            setDuration(videoDuration);
+        };
+        video.onerror = () => {
+            toast.error("Could not load video metadata. The file may be corrupt or unsupported.");
+            e.target.value = "";
+        };
+        video.src = URL.createObjectURL(selectedFile);
+    };
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        if (!file || !duration) return toast.warning("Please select a valid file.");
+
+        setIsUploading(true);
+        const formData = new FormData();
+        formData.append("video", file);
+        formData.append("duration", String(duration));
+
+        try {
+            const response = await fetch('/api/subtitle/upload', {
+                method: 'POST',
+                body: formData,
+            });
+
+            if (!response.ok) throw new Error("Upload failed. Server responded with an error.");
+
+            toast.success("Upload successful! Processing has started.");
+            onUploadSuccess();
+            const data = await response.json();
+            await router.push(`/dashboard/subtitles/${data.subtitleId}`);
+
+            setFile(null);
+            setDuration(null);
+        } catch (error) {
+            toast.error(`Upload failed: ${error instanceof Error ? error.message : "Unknown error"}`);
+        } finally {
+            setIsUploading(false);
+        }
+    };
+
+    return (
+        <Card className="border-0 shadow-none">
+            <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                    <Film className="h-5 w-5 text-purple-600" />
+                    Upload Video for Subtitles
+                </CardTitle>
+                <CardDescription>
+                    Upload your video file to start subtitle generation
+                </CardDescription>
+            </CardHeader>
+            <form onSubmit={handleSubmit}>
+                <CardContent>
+                    <label
+                        htmlFor="file-upload"
+                        className={`group relative flex w-full cursor-pointer flex-col items-center justify-center space-y-3 rounded-lg border-2 border-dashed p-12 transition-all ${
+                            isUploading
+                                ? "cursor-not-allowed opacity-50"
+                                : "border-gray-200 hover:border-purple-300 hover:bg-purple-50/50"
+                        }`}
+                    >
+                        <motion.div
+                            whileHover={!isUploading ? { scale: 1.05 } : {}}
+                            transition={{ type: "spring", stiffness: 400 }}
+                        >
+                            <UploadCloud className={`h-12 w-12 transition-colors ${
+                                file ? "text-purple-600" : "text-gray-400 group-hover:text-purple-500"
+                            }`} />
+                        </motion.div>
+                        <div className="space-y-1 text-center">
+                            <p className="font-medium text-gray-700">
+                                {file?.name || "Drop your video here or click to browse"}
+                            </p>
+                            <p className="text-sm text-gray-500">
+                                MP4, MOV, MKV • Max 200MB • 10 min max duration
+                            </p>
+                        </div>
+                    </label>
+                    <Input
+                        id="file-upload"
+                        type="file"
+                        accept="video/*"
+                        className="hidden"
+                        onChange={handleFileChange}
+                        disabled={isUploading}
+                    />
+                </CardContent>
+                <CardFooter>
+                    <Button
+                        type="submit"
+                        className="w-full"
+                        disabled={!file || !duration || isUploading}
+                    >
+                        {isUploading ? (
+                            <>
+                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                Uploading Video...
+                            </>
+                        ) : "Upload Video"}
+                    </Button>
+                </CardFooter>
+            </form>
+        </Card>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/components/landingPage/FeatureSection.tsx b/apps/web/components/landingPage/FeatureSection.tsx
index 963c109..208bd04 100644
--- a/apps/web/components/landingPage/FeatureSection.tsx
+++ b/apps/web/components/landingPage/FeatureSection.tsx
@@ -58,7 +58,7 @@ export default function FeatureSection() {
                 "Create eye-catching thumbnails that drive clicks and views.",
         },
         {
-            title: "Subtitle Generator",
+            title: "subtitle Generator",
             icon: FileText,
             description:
                 "Automatically generate accurate subtitles for your videos to improve accessibility.",
diff --git a/apps/web/components/landingPage/PricingSection.tsx b/apps/web/components/landingPage/PricingSection.tsx
index 44ea301..66a8703 100644
--- a/apps/web/components/landingPage/PricingSection.tsx
+++ b/apps/web/components/landingPage/PricingSection.tsx
@@ -11,7 +11,7 @@ export default function PricingSection() {
             "New idea research",
             "Script generation",
             "Thumbnail generation",
-            "Subtitle generation",
+            "subtitle generation",
             "Course module creation",
         ],
         proExtras: [
diff --git a/apps/web/hooks/useDebounce.ts b/apps/web/hooks/useDebounce.ts
new file mode 100644
index 0000000..7a57ce6
--- /dev/null
+++ b/apps/web/hooks/useDebounce.ts
@@ -0,0 +1,18 @@
+
+import { useState, useEffect } from 'react';
+
+export function useDebounce<T>(value: T, delay: number): T {
+    const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+
+    return debouncedValue;
+}
\ No newline at end of file
diff --git a/apps/web/hooks/useSubtitleData.ts b/apps/web/hooks/useSubtitleData.ts
new file mode 100644
index 0000000..4b9e6a3
--- /dev/null
+++ b/apps/web/hooks/useSubtitleData.ts
@@ -0,0 +1,54 @@
+import { useState, useEffect } from 'react';
+import { toast } from 'sonner';
+import { SubtitleResponse, SubtitleLine } from "@repo/validation/src/types/SubtitleTypes";
+
+export function useSubtitleData(id: string) {
+    const [subtitleData, setSubtitleData] = useState<SubtitleResponse | null>(null);
+    const [subtitles, setSubtitles] = useState<SubtitleLine[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const fetchData = async () => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const res = await fetch(`/api/subtitle/${id}`);
+            if (!res.ok) {
+                throw new Error('Failed to fetch subtitle data. Job not found.');
+            }
+            const data: SubtitleResponse = await res.json();
+            setSubtitleData(data);
+
+            let parsedSubtitles: SubtitleLine[] = [];
+            if (data.subtitles_json) {
+                try {
+                    parsedSubtitles = JSON.parse(data.subtitles_json as string);
+                } catch (e) {
+                    console.error("Failed to parse subtitle_json", e);
+                    toast.error("Failed to read existing subtitles. They may be corrupt.");
+                }
+            }
+            setSubtitles(Array.isArray(parsedSubtitles) ? parsedSubtitles : []);
+
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'An unknown error occurred');
+            toast.error(err instanceof Error ? err.message : 'An unknown error occurred');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        if (!id) return;
+        fetchData();
+    }, [id]);
+
+    return {
+        subtitleData,
+        subtitles,
+        setSubtitles,
+        isLoading,
+        error,
+        refetch: fetchData,
+    };
+}
\ No newline at end of file
diff --git a/apps/web/hooks/useSubtitleEditor.ts b/apps/web/hooks/useSubtitleEditor.ts
new file mode 100644
index 0000000..cdb0189
--- /dev/null
+++ b/apps/web/hooks/useSubtitleEditor.ts
@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { SubtitleLine } from "@repo/validation/src/types/SubtitleTypes";
+import { timeToSeconds, secondsToTime } from '@/utils/timeUtils';
+
+export function useSubtitleEditor(
+    subtitles: SubtitleLine[],
+    setSubtitles: (subtitles: SubtitleLine[]) => void,
+    currentTime: number
+) {
+    const [editingIndex, setEditingIndex] = useState<number | null>(null);
+
+    const updateSubtitle = (idx: number, field: keyof SubtitleLine, val: string) => {
+        const updated = [...subtitles];
+        updated[idx] = { ...updated[idx] as SubtitleLine, [field]: val };
+        setSubtitles(updated);
+    };
+
+    const handleAddLine = () => {
+        const newSub: SubtitleLine = {
+            start: secondsToTime(currentTime),
+            end: secondsToTime(currentTime + 2),
+            text: 'New subtitle'
+        };
+        const newSubtitles = [...subtitles, newSub].sort((a, b) =>
+            timeToSeconds(a.start) - timeToSeconds(b.start)
+        );
+        setSubtitles(newSubtitles);
+        setEditingIndex(newSubtitles.findIndex(sub => sub === newSub));
+    };
+
+    const handleDeleteLine = (idx: number) => {
+        setSubtitles(subtitles.filter((_, i) => i !== idx));
+        toast.success('Subtitle deleted');
+    };
+
+    return {
+        editingIndex,
+        setEditingIndex,
+        updateSubtitle,
+        handleAddLine,
+        handleDeleteLine,
+    };
+}
\ No newline at end of file
diff --git a/apps/web/hooks/useSubtitleFileOperations.ts b/apps/web/hooks/useSubtitleFileOperations.ts
new file mode 100644
index 0000000..e8b0fc2
--- /dev/null
+++ b/apps/web/hooks/useSubtitleFileOperations.ts
@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { SubtitleLine } from "@repo/validation/src/types/SubtitleTypes";
+import { parseSRT } from '@/utils/srtUtils';
+
+export function useSubtitleFileOperations(
+    id: string,
+    subtitles: SubtitleLine[],
+    setSubtitles: (subtitles: SubtitleLine[]) => void,
+    videoPath?: string,
+    videoUrl?: string
+) {
+    const [isSaving, setIsSaving] = useState(false);
+
+    const handleSave = async () => {
+        if (!id) return;
+        setIsSaving(true);
+        try {
+            const res = await fetch(`/api/subtitle/${id}`, {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ subtitle_json: subtitles }),
+            });
+            if (!res.ok) throw new Error('Save failed');
+            toast.success('Saved successfully!');
+        } catch (error) {
+            toast.error(error instanceof Error ? error.message : 'Unknown error');
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    const handleDownload = () => {
+        const srt = subtitles.map((s, i) =>
+            `${i + 1}\n${s.start.replace('.', ',')} --> ${s.end.replace('.', ',')}\n${s.text}\n`
+        ).join('\n');
+
+        const blob = new Blob([srt], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        const filename = (videoPath || 'subtitles.srt').split('/').pop()?.split('.').shift();
+        a.href = url;
+        a.download = `${filename}.srt`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    };
+
+    const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            const content = event.target?.result as string;
+            if (content) {
+                try {
+                    const parsed = parseSRT(content);
+                    if (parsed.length === 0) {
+                        throw new Error("Could not find any valid subtitle blocks.");
+                    }
+                    setSubtitles(parsed);
+                    toast.success(`Uploaded and parsed ${parsed.length} subtitle lines.`);
+                } catch (err) {
+                    const message = err instanceof Error ? err.message : "Unknown parsing error";
+                    toast.error(`Failed to parse SRT file: ${message}`);
+                }
+            } else {
+                toast.error("File is empty or could not be read.");
+            }
+        };
+        reader.onerror = () => toast.error("An error occurred while reading the file.");
+        reader.readAsText(file);
+        e.target.value = '';
+    };
+
+    const[downloadVideoLoading, setDownloadVideoLoading] = useState(false);
+
+    const handleDownloadVideo = async () => {
+        setDownloadVideoLoading(true);
+        const res = await fetch("/api/subtitle/burnSubtitle", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ videoUrl, subtitles }),
+        });
+
+        const blob = await res.blob();
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = "video_with_subs.mp4";
+        a.click();
+        URL.revokeObjectURL(url);
+        setDownloadVideoLoading(false);
+    };
+
+    return {
+        isSaving,
+        handleSave,
+        handleDownload,
+        handleFileUpload,
+        handleDownloadVideo,
+        downloadVideoLoading,
+    };
+}
\ No newline at end of file
diff --git a/apps/web/hooks/useSubtitleGeneration.ts b/apps/web/hooks/useSubtitleGeneration.ts
new file mode 100644
index 0000000..241a9bd
--- /dev/null
+++ b/apps/web/hooks/useSubtitleGeneration.ts
@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { useSupabase } from "@/components/supabase-provider";
+export function useSubtitleGeneration(
+    id: string,
+    videoDuration: number | null,
+    refetchData: () => Promise<void>
+) {
+    const [isGenerating, setIsGenerating] = useState(false);
+    const{user, fetchUserProfile} = useSupabase();
+
+    const handleGenerate = async (language: string, targetLanguage: string) => {
+        setIsGenerating(true);
+        try {
+            const res = await fetch('/api/subtitle', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    duration: videoDuration,
+                    language: language,
+                    targetLanguage: targetLanguage,
+                    subtitleId: id,
+                }),
+            });
+
+            if (!res.ok) {
+                const errorData = await res.json();
+                throw new Error(errorData.error || 'Subtitle generation failed to start.');
+            }
+            toast.success('Subtitle generation started! Refreshing data...');
+            await refetchData();
+            await fetchUserProfile(user?.id as string)
+
+        } catch (error) {
+            toast.error(error instanceof Error ? error.message : 'Unknown error');
+        } finally {
+            setIsGenerating(false);
+        }
+    };
+
+    return {
+        isGenerating,
+        handleGenerate,
+    };
+}
\ No newline at end of file
diff --git a/apps/web/hooks/useVideoPlayer.ts b/apps/web/hooks/useVideoPlayer.ts
new file mode 100644
index 0000000..ea48cb8
--- /dev/null
+++ b/apps/web/hooks/useVideoPlayer.ts
@@ -0,0 +1,48 @@
+import { useState, useEffect, RefObject } from 'react';
+import { SubtitleLine } from "@repo/validation/src/types/SubtitleTypes";
+import { timeToSeconds } from '@/utils/timeUtils';
+
+export function useVideoPlayer(
+    videoRef: RefObject<HTMLVideoElement | null>,
+    videoUrl: string | undefined,
+    subtitles: SubtitleLine[]
+) {
+    const [currentTime, setCurrentTime] = useState(0);
+    const [videoDuration, setVideoDuration] = useState<number | null>(null);
+
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video) return;
+
+        const updateTime = () => setCurrentTime(video.currentTime);
+        const onLoadedMetadata = () => setVideoDuration(video.duration);
+
+        video.addEventListener('timeupdate', updateTime);
+        video.addEventListener('loadedmetadata', onLoadedMetadata);
+
+        return () => {
+            video.removeEventListener('timeupdate', updateTime);
+            video.removeEventListener('loadedmetadata', onLoadedMetadata);
+        };
+    }, [videoUrl]);
+
+    // Find current subtitle
+    const currentSubtitle = subtitles.find(s => {
+        const start = timeToSeconds(s.start);
+        const end = timeToSeconds(s.end);
+        return currentTime >= start && currentTime <= end;
+    });
+
+    const seekTo = (time: string) => {
+        if (videoRef.current) {
+            videoRef.current.currentTime = timeToSeconds(time);
+        }
+    };
+
+    return {
+        currentTime,
+        videoDuration,
+        currentSubtitle,
+        seekTo,
+    };
+}
\ No newline at end of file
diff --git a/apps/web/lib/profileCheck.ts b/apps/web/lib/profileCheck.ts
new file mode 100644
index 0000000..af1d4b6
--- /dev/null
+++ b/apps/web/lib/profileCheck.ts
@@ -0,0 +1,51 @@
+
+import { SupabaseClient } from '@supabase/supabase-js';
+import { NextResponse } from 'next/server';
+
+export type ProfileData = {
+    id: string;
+    credits: number;
+    ai_trained: boolean;
+    youtube_connected: boolean;
+};
+
+export async function checkUserPermissions(supabase: SupabaseClient) {
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+
+    if (authError || !user) {
+        return { user: null, profile: null, error: NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) };
+    }
+
+    const { data: profile, error: profileError } = await supabase
+        .from('profiles')
+        .select('id, credits, ai_trained, youtube_connected')
+        .eq('user_id', user.id)
+        .single();
+
+    if (profileError || !profile) {
+        return { user, profile: null, error: NextResponse.json({ error: 'Profile not found' }, { status: 404 }) };
+    }
+
+    const typedProfile: ProfileData = profile as ProfileData;
+
+    if (!typedProfile.ai_trained && !typedProfile.youtube_connected) {
+        return { user, profile: typedProfile, error: NextResponse.json({ message: 'AI training and YouTube connection are required' }, { status: 403 }) };
+    }
+
+    if (typedProfile.credits < 1) {
+        return { user, profile: typedProfile, error: NextResponse.json({
+                error: 'Insufficient credits. Please upgrade your plan or earn more credits.'
+            }, { status: 403 }) };
+    }
+
+    return { user, profile: typedProfile, error: null };
+}
+
+export async function decrementUserCredits(supabase: SupabaseClient, userId: string, amount: number) {
+    const { error } = await supabase.rpc('decrement_user_credits', {
+        user_id_to_update: userId,
+        amount_to_decrement: amount
+    });
+
+    return { error };
+}
\ No newline at end of file
diff --git a/apps/web/package.json b/apps/web/package.json
index 8748e4f..766d1ba 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,6 +12,8 @@
   },
   "dependencies": {
     "@ai-sdk/openai": "^1.3.23",
+    "@ffmpeg-installer/ffmpeg": "^1.1.0",
+    "@ffprobe-installer/ffprobe": "^2.1.2",
     "@google/genai": "^1.12.0",
     "@hookform/resolvers": "^3.9.1",
     "@radix-ui/react-accordion": "latest",
@@ -63,6 +65,7 @@
     "cmdk": "1.0.4",
     "date-fns": "4.1.0",
     "embla-carousel-react": "8.5.1",
+    "fluent-ffmpeg": "^2.1.3",
     "input-otp": "1.4.1",
     "jsonrepair": "^3.13.0",
     "lenis": "^1.3.9",
@@ -95,6 +98,7 @@
     "@repo/config": "workspace:*",
     "@repo/jest-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
+    "@types/fluent-ffmpeg": "^2.1.27",
     "@types/node": "^22",
     "@types/react": "^19",
     "@types/react-dom": "^19",
diff --git a/apps/web/utils/ExtractAudio.ts b/apps/web/utils/ExtractAudio.ts
new file mode 100644
index 0000000..db265fa
--- /dev/null
+++ b/apps/web/utils/ExtractAudio.ts
@@ -0,0 +1,62 @@
+import { configureFFmpeg } from "@/utils/ffmpegConfig";
+import fs from "fs/promises";
+import path from "path";
+import crypto from "crypto";
+
+const ff = configureFFmpeg();
+
+
+export async function extractAudioFromBuffer(buffer: Buffer, fileName: string): Promise<Buffer> {
+    const tmpDir = process.env.VERCEL ? "/tmp" : path.join(process.cwd(), "tmp");
+
+    // Ensure temp directory exists
+    await fs.mkdir(tmpDir, { recursive: true });
+
+    const uniqueId = crypto.randomUUID();
+    const videoPath = path.join(tmpDir, `${uniqueId}-${fileName}`);
+    const audioPath = path.join(tmpDir, `${uniqueId}-audio.flac`);
+
+    try {
+        // 1️⃣ Save video buffer to temp file
+        await fs.writeFile(videoPath, buffer);
+
+        // 2️⃣ Extract + clean audio with FFmpeg
+        await new Promise<void>((resolve, reject) => {
+            ff(videoPath)
+                .output(audioPath)
+                .noVideo()
+                .audioCodec("flac") // lossless, smaller than WAV
+                .audioFilter([
+                    "highpass=f=200",
+                    "lowpass=f=3000",
+                    "afftdn=nf=-25",
+                    "loudnorm=I=-16:TP=-1.5"
+                ])
+                .on("end", () => resolve())
+                .on("error", (err) => reject(new Error(`FFmpeg error: ${err.message}`)))
+                .run();
+        });
+
+        // 3️⃣ Read processed audio
+        const audioBuffer = await fs.readFile(audioPath);
+        return audioBuffer;
+
+    } catch (error) {
+        console.error("Error during audio extraction:", error);
+        throw error;
+
+    } finally {
+        // 4️⃣ Cleanup temp files
+        await new Promise((res) => setTimeout(res, 100)); // small delay for file release
+        for (const filePath of [videoPath, audioPath]) {
+            try {
+                await fs.unlink(filePath);
+                console.log(`Deleted temp file: ${filePath}`);
+            } catch (e: any) {
+                if (e.code !== "ENOENT") {
+                    console.warn(`⚠ Failed to delete ${filePath}:`, e.message);
+                }
+            }
+        }
+    }
+}
diff --git a/apps/web/utils/convertJsonToSrt.ts b/apps/web/utils/convertJsonToSrt.ts
new file mode 100644
index 0000000..8e91b0c
--- /dev/null
+++ b/apps/web/utils/convertJsonToSrt.ts
@@ -0,0 +1,20 @@
+import { SubtitleLine } from "../../../packages/validations/src/types/SubtitleTypes";
+
+export function convertJsonToSrt(subtitles: SubtitleLine[]): string {
+    if (!subtitles || !Array.isArray(subtitles) || subtitles.length === 0) {
+        return '';
+    }
+
+    return subtitles
+        .filter(entry => {
+            return entry && entry.text.trim() !== '';
+        })
+        .map((entry, index) => {
+            const srtStart = entry.start.replace(/\./g, ',');
+            const srtEnd = entry.end.replace(/\./g, ',');
+            const indexNumber = index + 1;
+
+            return `${indexNumber}\n${srtStart} --> ${srtEnd}\n${entry.text.trim()}`;
+        })
+        .join('\n\n');
+}
diff --git a/apps/web/utils/ffmpegConfig.ts b/apps/web/utils/ffmpegConfig.ts
new file mode 100644
index 0000000..d36bcde
--- /dev/null
+++ b/apps/web/utils/ffmpegConfig.ts
@@ -0,0 +1,11 @@
+import ffmpeg from "fluent-ffmpeg";
+
+export const configureFFmpeg = () => {
+    const ffmpegPath = process.env.VERCEL
+        ? "/usr/bin/ffmpeg"
+        : "ffmpeg";
+
+    ffmpeg.setFfmpegPath(ffmpegPath);
+
+    return (input?: string) => ffmpeg(input);
+};
diff --git a/apps/web/utils/srtUtils.ts b/apps/web/utils/srtUtils.ts
new file mode 100644
index 0000000..592251a
--- /dev/null
+++ b/apps/web/utils/srtUtils.ts
@@ -0,0 +1,26 @@
+
+import { SubtitleLine } from "../../../packages/validations/src/types/SubtitleTypes";
+
+export const parseSRT = (srtContent: string): SubtitleLine[] => {
+    const subtitles: SubtitleLine[] = [];
+    const blocks = srtContent.trim().split(/\n\s*\n/);
+
+    for (const block of blocks) {
+        const lines = block.split('\n');
+        if (lines.length < 3) continue;
+
+        const timestampLine = lines[1];
+        const textLines = lines.slice(2);
+
+        const [start, end] = timestampLine ? timestampLine.split(' --> ') : [];
+
+        if (start && end && textLines.length > 0) {
+            subtitles.push({
+                start: start.replace(',', '.'),
+                end: end.replace(',', '.'),
+                text: textLines.join('\n'),
+            });
+        }
+    }
+    return subtitles;
+};
\ No newline at end of file
diff --git a/apps/web/utils/timeUtils.ts b/apps/web/utils/timeUtils.ts
new file mode 100644
index 0000000..e0e3ca4
--- /dev/null
+++ b/apps/web/utils/timeUtils.ts
@@ -0,0 +1,17 @@
+
+export const timeToSeconds = (timeStr: string): number => {
+    if (!timeStr || !/^\d\d:\d\d:\d\d\.\d+$/.test(timeStr)) {
+        return 0;
+    }
+    const [h, m, s] = timeStr.split(':');
+    const [sec, ms] = s ? s.split('.') : [s, '0'];
+    return parseInt(h as string) * 3600 + parseInt(m as string) * 60 + parseInt(sec as string) + parseInt(ms || '0' as string) / 1000;
+};
+
+export const secondsToTime = (sec: number): string => {
+    const h = Math.floor(sec / 3600);
+    const m = Math.floor((sec % 3600) / 60);
+    const s = Math.floor(sec % 60);
+    const ms = Math.floor((sec % 1) * 1000);
+    return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}.${ms.toString().padStart(3, '0')}`;
+};
\ No newline at end of file
diff --git a/apps/web/utils/videoUrlTools.ts b/apps/web/utils/videoUrlTools.ts
new file mode 100644
index 0000000..8d50b60
--- /dev/null
+++ b/apps/web/utils/videoUrlTools.ts
@@ -0,0 +1,43 @@
+export async function fetchVideoAsBuffer(videoUrl: string): Promise<Buffer> {
+    if (!videoUrl) throw new Error("Video URL is required");
+
+    const response = await fetch(videoUrl);
+    if (!response.ok || !response.body) {
+        throw new Error(`Failed to fetch video: ${response.statusText}`);
+    }
+
+    const arrayBuffer = await response.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+    console.log("Video downloaded as buffer, size:", buffer.length);
+
+    return buffer;
+}
+
+export function getFileNameFromUrl(url: string): string {
+    try {
+        const pathname = new URL(url).pathname;
+        const parts = pathname.split("/");
+        return parts[parts.length - 1] || `video-${Date.now()}.mp4`;
+    } catch {
+        return `video-${Date.now()}.mp4`;
+    }
+}
+
+export function getMimeTypeFromUrl(url: string): string {
+    const extension = url.split(".").pop()?.toLowerCase();
+
+    switch (extension) {
+        case "mp4":
+            return "video/mp4";
+        case "mov":
+            return "video/quicktime";
+        case "webm":
+            return "video/webm";
+        case "mkv":
+            return "video/x-matroska";
+        case "avi":
+            return "video/x-msvideo";
+        default:
+            return "application/octet-stream"; // fallback
+    }
+}
diff --git a/apps/web/utils/vttHelper.ts b/apps/web/utils/vttHelper.ts
new file mode 100644
index 0000000..06cdb3d
--- /dev/null
+++ b/apps/web/utils/vttHelper.ts
@@ -0,0 +1,15 @@
+
+export function convertJsonToVTT(jsonData: any[]) {
+    let vttContent = "WEBVTT\n\n";
+
+    jsonData.forEach((cue, index) => {
+        const start = cue.start;
+        const end = cue.end;
+
+        vttContent += `${index + 1}\n`;
+        vttContent += `${start} --> ${end}\n`;
+        vttContent += `${cue.text}\n\n`;
+    });
+
+    return vttContent;
+}
\ No newline at end of file
diff --git a/packages/supabase/migrations/20251012171558_update_plans_table.sql b/packages/supabase/migrations/20251012171558_update_plans_table.sql
index cca6e6b..5374af7 100644
--- a/packages/supabase/migrations/20251012171558_update_plans_table.sql
+++ b/packages/supabase/migrations/20251012171558_update_plans_table.sql
@@ -28,7 +28,7 @@ INSERT INTO plans (name, price_monthly, credits_monthly, features, is_active) VA
         {"feature": "New idea research", "limit": "limited"},
         {"feature": "Script generation", "limit": "limited"},
         {"feature": "Thumbnail generation", "limit": "limited"},
-        {"feature": "Subtitle generation", "limit": "limited"},
+        {"feature": "subtitle generation", "limit": "limited"},
         {"feature": "Course module creation", "limit": "limited"}
     ]'::jsonb,
     true
@@ -43,7 +43,7 @@ INSERT INTO plans (name, price_monthly, credits_monthly, features, is_active) VA
         {"feature": "New idea research", "limit": "unlimited"},
         {"feature": "Script generation", "limit": "unlimited"},
         {"feature": "Thumbnail generation", "limit": "unlimited"},
-        {"feature": "Subtitle generation", "limit": "unlimited"},
+        {"feature": "subtitle generation", "limit": "unlimited"},
         {"feature": "Audio dubbing", "limit": "unlimited"}
     ]'::jsonb,
     true
@@ -58,7 +58,7 @@ INSERT INTO plans (name, price_monthly, credits_monthly, features, is_active) VA
         {"feature": "New idea research", "limit": "unlimited"},
         {"feature": "Script generation", "limit": "unlimited"},
         {"feature": "Thumbnail generation", "limit": "unlimited"},
-        {"feature": "Subtitle generation", "limit": "unlimited"},
+        {"feature": "subtitle generation", "limit": "unlimited"},
         {"feature": "Course module creation", "limit": "unlimited"},
         {"feature": "Audio dubbing", "limit": "unlimited"},
         {"feature": "Advanced analytics", "limit": "included"},
diff --git a/packages/validations/src/types/SubtitleTypes.ts b/packages/validations/src/types/SubtitleTypes.ts
new file mode 100644
index 0000000..56fab9a
--- /dev/null
+++ b/packages/validations/src/types/SubtitleTypes.ts
@@ -0,0 +1,21 @@
+
+export type SubtitleResponse = {
+    id: string;
+    user_id: string;
+    video_path: string;
+    video_url: string;
+    subtitles_json: string;
+    status: "done" | "queued" | "processing" | "failed";
+    language: string;
+    detectedLanguage: string;
+    duration: string;
+    error_message: string;
+    created_at: string;
+    updated_at: string;
+};
+
+export type SubtitleLine = {
+    start: string;
+    end: string;
+    text: string;
+};
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 76b2fb0..a1c0bdb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -132,6 +132,12 @@ importers:
       '@ai-sdk/openai':
         specifier: ^1.3.23
         version: 1.3.24(zod@3.25.76)
+      '@ffmpeg-installer/ffmpeg':
+        specifier: ^1.1.0
+        version: 1.1.0
+      '@ffprobe-installer/ffprobe':
+        specifier: ^2.1.2
+        version: 2.1.2
       '@google/genai':
         specifier: ^1.12.0
         version: 1.13.0
@@ -285,6 +291,9 @@ importers:
       embla-carousel-react:
         specifier: 8.5.1
         version: 8.5.1(react@19.1.1)
+      fluent-ffmpeg:
+        specifier: ^2.1.3
+        version: 2.1.3
       input-otp:
         specifier: 1.4.1
         version: 1.4.1(react-dom@19.1.1)(react@19.1.1)
@@ -373,6 +382,9 @@ importers:
       '@repo/typescript-config':
         specifier: workspace:*
         version: link:../../packages/typescript-config
+      '@types/fluent-ffmpeg':
+        specifier: ^2.1.27
+        version: 2.1.27
       '@types/node':
         specifier: ^22
         version: 22.17.0
@@ -1048,6 +1060,161 @@ packages:
       levn: 0.4.1
     dev: true
 
+  /@ffmpeg-installer/darwin-arm64@4.1.5:
+    resolution: {integrity: sha512-hYqTiP63mXz7wSQfuqfFwfLOfwwFChUedeCVKkBtl/cliaTM7/ePI9bVzfZ2c+dWu3TqCwLDRWNSJ5pqZl8otA==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@ffmpeg-installer/darwin-x64@4.1.0:
+    resolution: {integrity: sha512-Z4EyG3cIFjdhlY8wI9aLUXuH8nVt7E9SlMVZtWvSPnm2sm37/yC2CwjUzyCQbJbySnef1tQwGG2Sx+uWhd9IAw==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@ffmpeg-installer/ffmpeg@1.1.0:
+    resolution: {integrity: sha512-Uq4rmwkdGxIa9A6Bd/VqqYbT7zqh1GrT5/rFwCwKM70b42W5gIjWeVETq6SdcL0zXqDtY081Ws/iJWhr1+xvQg==}
+    optionalDependencies:
+      '@ffmpeg-installer/darwin-arm64': 4.1.5
+      '@ffmpeg-installer/darwin-x64': 4.1.0
+      '@ffmpeg-installer/linux-arm': 4.1.3
+      '@ffmpeg-installer/linux-arm64': 4.1.4
+      '@ffmpeg-installer/linux-ia32': 4.1.0
+      '@ffmpeg-installer/linux-x64': 4.1.0
+      '@ffmpeg-installer/win32-ia32': 4.1.0
+      '@ffmpeg-installer/win32-x64': 4.1.0
+    dev: false
+
+  /@ffmpeg-installer/linux-arm64@4.1.4:
+    resolution: {integrity: sha512-dljEqAOD0oIM6O6DxBW9US/FkvqvQwgJ2lGHOwHDDwu/pX8+V0YsDL1xqHbj1DMX/+nP9rxw7G7gcUvGspSoKg==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@ffmpeg-installer/linux-arm@4.1.3:
+    resolution: {integrity: sha512-NDf5V6l8AfzZ8WzUGZ5mV8O/xMzRag2ETR6+TlGIsMHp81agx51cqpPItXPib/nAZYmo55Bl2L6/WOMI3A5YRg==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@ffmpeg-installer/linux-ia32@4.1.0:
+    resolution: {integrity: sha512-0LWyFQnPf+Ij9GQGD034hS6A90URNu9HCtQ5cTqo5MxOEc7Rd8gLXrJvn++UmxhU0J5RyRE9KRYstdCVUjkNOQ==}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@ffmpeg-installer/linux-x64@4.1.0:
+    resolution: {integrity: sha512-Y5BWhGLU/WpQjOArNIgXD3z5mxxdV8c41C+U15nsE5yF8tVcdCGet5zPs5Zy3Ta6bU7haGpIzryutqCGQA/W8A==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@ffmpeg-installer/win32-ia32@4.1.0:
+    resolution: {integrity: sha512-FV2D7RlaZv/lrtdhaQ4oETwoFUsUjlUiasiZLDxhEUPdNDWcH1OU9K1xTvqz+OXLdsmYelUDuBS/zkMOTtlUAw==}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@ffmpeg-installer/win32-x64@4.1.0:
+    resolution: {integrity: sha512-Drt5u2vzDnIONf4ZEkKtFlbvwj6rI3kxw1Ck9fpudmtgaZIHD4ucsWB2lCZBXRxJgXR+2IMSti+4rtM4C4rXgg==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@ffprobe-installer/darwin-arm64@5.0.1:
+    resolution: {integrity: sha512-vwNCNjokH8hfkbl6m95zICHwkSzhEvDC3GVBcUp5HX8+4wsX10SP3B+bGur7XUzTIZ4cQpgJmEIAx6TUwRepMg==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@ffprobe-installer/darwin-x64@5.1.0:
+    resolution: {integrity: sha512-J+YGscZMpQclFg31O4cfVRGmDpkVsQ2fZujoUdMAAYcP0NtqpC49Hs3SWJpBdsGB4VeqOt5TTm1vSZQzs1NkhA==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@ffprobe-installer/ffprobe@2.1.2:
+    resolution: {integrity: sha512-ZNvwk4f2magF42Zji2Ese16SMj9BS7Fui4kRjg6gTYTxY3gWZNpg85n4MIfQyI9nimHg4x/gT6FVkp/bBDuBwg==}
+    engines: {node: '>=14.21.2'}
+    optionalDependencies:
+      '@ffprobe-installer/darwin-arm64': 5.0.1
+      '@ffprobe-installer/darwin-x64': 5.1.0
+      '@ffprobe-installer/linux-arm': 5.2.0
+      '@ffprobe-installer/linux-arm64': 5.2.0
+      '@ffprobe-installer/linux-ia32': 5.2.0
+      '@ffprobe-installer/linux-x64': 5.2.0
+      '@ffprobe-installer/win32-ia32': 5.1.0
+      '@ffprobe-installer/win32-x64': 5.1.0
+    dev: false
+
+  /@ffprobe-installer/linux-arm64@5.2.0:
+    resolution: {integrity: sha512-X1VvWtlLs6ScP73biVLuHD5ohKJKsMTa0vafCESOen4mOoNeLAYbxOVxDWAdFz9cpZgRiloFj5QD6nDj8E28yQ==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@ffprobe-installer/linux-arm@5.2.0:
+    resolution: {integrity: sha512-PF5HqEhCY7WTWHtLDYbA/+rLS+rhslWvyBlAG1Fk8VzVlnRdl93o6hy7DE2kJgxWQbFaR3ZktPQGEzfkrmQHvQ==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@ffprobe-installer/linux-ia32@5.2.0:
+    resolution: {integrity: sha512-TFVK5sasXyXhbIG7LtPRDmtkrkOsInwKcL43iEvEw+D9vCS2rc//mn9/0Q+BR0UoJEiMK4+ApYr/3LLVUBPOCQ==}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@ffprobe-installer/linux-x64@5.2.0:
+    resolution: {integrity: sha512-D3UeqTLYPNs7pBWPLUYGehPdRVqU8eACox4OZy3pZUZatxye2YKlvBwEfaLdL1v2Z4FOAlLUhms0kY8m8kqSRA==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@ffprobe-installer/win32-ia32@5.1.0:
+    resolution: {integrity: sha512-5O3vOoNRxmut0/Nu9vSazTdSHasrr+zPT2B3Hm7kjmO3QVFcIfVImS6ReQnZeSy8JPJOqXts5kX5x/3KOX54XQ==}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@ffprobe-installer/win32-x64@5.1.0:
+    resolution: {integrity: sha512-jMGYeAgkrdn4e2vvYt/qakgHRE3CPju4bn5TmdPfoAm1BlX1mY9cyMd8gf5vSzI8gH8Zq5WQAyAkmekX/8TSTg==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@floating-ui/core@1.7.3:
     resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
     dependencies:
@@ -4334,6 +4501,12 @@ packages:
       '@types/serve-static': 1.15.8
     dev: true
 
+  /@types/fluent-ffmpeg@2.1.27:
+    resolution: {integrity: sha512-QiDWjihpUhriISNoBi2hJBRUUmoj/BMTYcfz+F+ZM9hHWBYABFAE6hjP/TbCZC0GWwlpa3FzvHH9RzFeRusZ7A==}
+    dependencies:
+      '@types/node': 20.19.9
+    dev: true
+
   /@types/glob@7.2.0:
     resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
     dependencies:
@@ -4978,6 +5151,10 @@ packages:
       tslib: 2.8.1
     dev: true
 
+  /async@0.2.10:
+    resolution: {integrity: sha512-eAkdoKxU6/LkKDBzLpT+t6Ff5EtfSF4wx1WfJiPEEV7WNLnDaRXk0oVysiEPm262roaachGexwUv94WhSgN5TQ==}
+    dev: false
+
   /asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 
@@ -6460,6 +6637,15 @@ packages:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
     dev: true
 
+  /fluent-ffmpeg@2.1.3:
+    resolution: {integrity: sha512-Be3narBNt2s6bsaqP6Jzq91heDgOEaDCJAXcE3qcma/EJBSy5FB4cvO31XBInuAuKBx8Kptf8dkhjK0IOru39Q==}
+    engines: {node: '>=18'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+    dependencies:
+      async: 0.2.10
+      which: 1.3.1
+    dev: false
+
   /follow-redirects@1.15.11:
     resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
     engines: {node: '>=4.0'}
@@ -10804,6 +10990,13 @@ packages:
       tr46: 0.0.3
       webidl-conversions: 3.0.1
 
+  /which@1.3.1:
+    resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
+    hasBin: true
+    dependencies:
+      isexe: 2.0.0
+    dev: false
+
   /which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}