diff --git a/.dockerignore b/.dockerignore
index 9b8d514..919559f 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,4 +1,11 @@
-.react-router
-build
 node_modules
-README.md
\ No newline at end of file
+build
+.react-router
+out
+*.log
+.env
+.git
+.gitignore
+README.md
+docker-compose.yml
+Dockerfile*
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index c4fb88d..2c0e09f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,7 @@ out/
 
 # React Router
 /.react-router/
-/build/
\ No newline at end of file
+/build/
+
+# pnpm
+.pnpm-store
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
deleted file mode 100644
index 207bf93..0000000
--- a/Dockerfile
+++ /dev/null
@@ -1,22 +0,0 @@
-FROM node:20-alpine AS development-dependencies-env
-COPY . /app
-WORKDIR /app
-RUN npm ci
-
-FROM node:20-alpine AS production-dependencies-env
-COPY ./package.json package-lock.json /app/
-WORKDIR /app
-RUN npm ci --omit=dev
-
-FROM node:20-alpine AS build-env
-COPY . /app/
-COPY --from=development-dependencies-env /app/node_modules /app/node_modules
-WORKDIR /app
-RUN npm run build
-
-FROM node:20-alpine
-COPY ./package.json package-lock.json /app/
-COPY --from=production-dependencies-env /app/node_modules /app/node_modules
-COPY --from=build-env /app/build /app/build
-WORKDIR /app
-CMD ["npm", "run", "start"]
\ No newline at end of file
diff --git a/Dockerfile.backend b/Dockerfile.backend
new file mode 100644
index 0000000..39f2d9f
--- /dev/null
+++ b/Dockerfile.backend
@@ -0,0 +1,41 @@
+# Backend Dockerfile
+
+FROM node:22-bookworm-slim
+WORKDIR /app
+
+# Install Chrome dependencies
+RUN apt-get update
+RUN apt install -y \
+  libnss3 \
+  libdbus-1-3 \
+  libatk1.0-0 \
+  libgbm-dev \
+  libasound2 \
+  libxrandr2 \
+  libxkbcommon-dev \
+  libxfixes3 \
+  libxcomposite1 \
+  libxdamage1 \
+  libatk-bridge2.0-0 \
+  libpango-1.0-0 \
+  libcairo2 \
+  libcups2
+
+# Install pnpm
+RUN npm install -g pnpm
+
+# Copy package files and install dependencies
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile
+
+# Copy source code
+COPY . .
+
+# Create output directory for rendered videos
+RUN mkdir -p /app/out
+
+# Expose port
+EXPOSE 8000
+
+# Start the backend
+CMD ["pnpm", "dlx", "tsx", "app/videorender/videorender.ts"] 
\ No newline at end of file
diff --git a/Dockerfile.frontend b/Dockerfile.frontend
new file mode 100644
index 0000000..2a98a7c
--- /dev/null
+++ b/Dockerfile.frontend
@@ -0,0 +1,21 @@
+# Frontend Dockerfile
+
+FROM node:20-bookworm-slim
+WORKDIR /app
+
+# Install pnpm
+RUN npm install -g pnpm
+
+# Copy package files and install dependencies
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile
+
+# Copy source code and build
+COPY . .
+RUN pnpm run build
+
+# Expose port
+EXPOSE 3000
+
+# Start the application
+CMD ["pnpm", "run", "start"] 
\ No newline at end of file
diff --git a/app/components/timeline/VideoPlayerSection.tsx b/app/components/timeline/VideoPlayerSection.tsx
index 870dbe2..efdad74 100644
--- a/app/components/timeline/VideoPlayerSection.tsx
+++ b/app/components/timeline/VideoPlayerSection.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { VideoPlayer } from "~/remotion/VideoPlayer"
+import { VideoPlayer } from "~/video-compositions/VideoPlayer"
 import type { PlayerRef } from "@remotion/player"
 import { type TimelineDataItem } from "./types"
 
diff --git a/app/remotion/Root.tsx b/app/remotion/Root.tsx
deleted file mode 100644
index a45d0cf..0000000
--- a/app/remotion/Root.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-// import React from 'react';
-// import { Composition } from 'remotion';
-// import { MyComposition } from './Composition';
-
-// export const RemotionRoot: React.FC = () => {
-//     return (
-//         <>
-//             <Composition
-//                 id="Empty"
-//                 component={MyComposition}
-//                 durationInFrames={60}
-//                 fps={30}
-//                 width={1280}
-//                 height={720}
-//             />
-//         </>
-//     );
-// };
-
-import { Composition } from 'remotion';
-import { MyComp } from './MyComp';
-
-export const MyVideo = () => {
-    return (
-        <>
-            <Composition component={MyComp} durationInFrames={120} width={1920} height={1080} fps={30} id="my-comp" defaultProps={{ text: 'World' }} />
-        </>
-    );
-};
\ No newline at end of file
diff --git a/app/remotion/Composition.tsx b/app/video-compositions/Composition.tsx
similarity index 97%
rename from app/remotion/Composition.tsx
rename to app/video-compositions/Composition.tsx
index 711a798..b24aff8 100644
--- a/app/remotion/Composition.tsx
+++ b/app/video-compositions/Composition.tsx
@@ -4,4 +4,4 @@ export const MyComposition = () => {
             <p>hello world</p>
         </>
     )
-};
\ No newline at end of file
+}; 
\ No newline at end of file
diff --git a/app/remotion/MyComp.tsx b/app/video-compositions/MyComp.tsx
similarity index 81%
rename from app/remotion/MyComp.tsx
rename to app/video-compositions/MyComp.tsx
index f3aa78f..9d54d4c 100644
--- a/app/remotion/MyComp.tsx
+++ b/app/video-compositions/MyComp.tsx
@@ -1,4 +1,4 @@
-import { Sequence, OffthreadVideo } from "remotion";
+import { OffthreadVideo } from "remotion";
 
 
 export const MyComp: React.FC<{ videoURL: string }> = ({ videoURL }) => {
@@ -10,4 +10,4 @@ export const MyComp: React.FC<{ videoURL: string }> = ({ videoURL }) => {
             </div>
         </>
     )
-};
\ No newline at end of file
+}; 
\ No newline at end of file
diff --git a/app/video-compositions/Root.tsx b/app/video-compositions/Root.tsx
new file mode 100644
index 0000000..8f5711a
--- /dev/null
+++ b/app/video-compositions/Root.tsx
@@ -0,0 +1,10 @@
+import { Composition } from 'remotion';
+import { MyComp } from './MyComp';
+
+export const MyVideo = () => {
+    return (
+        <>
+            <Composition component={MyComp} durationInFrames={120} width={1920} height={1080} fps={30} id="my-comp" defaultProps={{ text: 'World' }} />
+        </>
+    );
+}; 
\ No newline at end of file
diff --git a/app/remotion/VideoPlayer.tsx b/app/video-compositions/VideoPlayer.tsx
similarity index 92%
rename from app/remotion/VideoPlayer.tsx
rename to app/video-compositions/VideoPlayer.tsx
index e9d86b3..852c883 100644
--- a/app/remotion/VideoPlayer.tsx
+++ b/app/video-compositions/VideoPlayer.tsx
@@ -1,5 +1,3 @@
-// this is the video player component. It basically takes the JSON representation of the timeline and renders it.
-
 import { Player, type PlayerRef } from '@remotion/player';
 import { Sequence, AbsoluteFill, Img, Video } from 'remotion';
 import React from 'react';
@@ -56,7 +54,7 @@ export function TimelineComposition({ timelineData, durationInFrames }: VideoPla
                                     textShadow: '2px 2px 4px rgba(0,0,0,0.5)',
                                     margin: 0,
                                     padding: '20px'
-                                }}>{scrubber.id}</p> {/* Using scrubber.id as placeholder for text content, update if actual text is available */}
+                                }}>{scrubber.id}</p>
                             </div>
                         </AbsoluteFill>
                     );
@@ -80,7 +78,6 @@ export function TimelineComposition({ timelineData, durationInFrames }: VideoPla
                     }
                     break;
                 default:
-                    // Optionally handle unknown media types or log a warning
                     console.warn(`Unknown media type: ${scrubber.mediaType}`);
                     break;
             }
@@ -119,4 +116,4 @@ export function VideoPlayer({ timelineData, durationInFrames, ref }: VideoPlayer
             controls
         />
     );
-}
\ No newline at end of file
+} 
\ No newline at end of file
diff --git a/app/remotion/index.ts b/app/video-compositions/index.ts
similarity index 74%
rename from app/remotion/index.ts
rename to app/video-compositions/index.ts
index 4dbf689..5e5a1bd 100644
--- a/app/remotion/index.ts
+++ b/app/video-compositions/index.ts
@@ -1,4 +1,4 @@
 import {registerRoot} from 'remotion';
 import {MyVideo} from './Root';
- 
-registerRoot(MyVideo);
\ No newline at end of file
+
+registerRoot(MyVideo); 
\ No newline at end of file
diff --git a/app/videorender/Composition.tsx b/app/videorender/Composition.tsx
index 16ae847..db81c01 100644
--- a/app/videorender/Composition.tsx
+++ b/app/videorender/Composition.tsx
@@ -1,5 +1,5 @@
 import { Composition, getInputProps } from 'remotion';
-import { TimelineComposition } from '../remotion/VideoPlayer';
+import { TimelineComposition } from '../video-compositions/VideoPlayer';
 
 export default function RenderComposition() {
     const inputProps = getInputProps();
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..0639717
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,34 @@
+services:
+  frontend:
+    build:
+      context: .
+      dockerfile: Dockerfile.frontend
+    container_name: videoeditor-frontend
+    ports:
+      - "3000:3000"
+    environment:
+      - VITE_API_URL=http://backend:8000
+    networks:
+      - videoeditor-network
+    depends_on:
+      - backend
+
+  backend:
+    build:
+      context: .
+      dockerfile: Dockerfile.backend
+    container_name: videoeditor-backend
+    ports:
+      - "8000:8000"
+    volumes:
+      - ./out:/app/out
+    networks:
+      - videoeditor-network
+    # Memory configuration for video rendering
+    mem_limit: 2g
+    memswap_limit: 2g
+    shm_size: 1g
+
+networks:
+  videoeditor-network:
+    driver: bridge
\ No newline at end of file
diff --git a/eslint.config.js b/eslint.config.js
index aa7028c..f86d829 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -69,7 +69,7 @@ export default [
     }
   },
   {
-    files: ['app/remotion/*.{ts,tsx}'],
+    files: ['app/video-compositions/*.{ts,tsx}'],
     plugins: {
       '@remotion': remotionPlugin
     },