diff --git a/README.md b/README.md
index 68ef8ff..a6c50f7 100644
--- a/README.md
+++ b/README.md
@@ -87,6 +87,45 @@ collab-canvas/
 ## 🚀 Getting Started
 
 Follow these steps to set up and run the project locally.
+- **Option 1: Docker (Recommended)** – The simplest way to get running with a single command.  
+- **Option 2: Manual Setup** – The traditional way if you want to manage the services yourself.
+
+## Option 1: Run with Docker (Recommended) 🐳
+
+This method starts the **client**, **server**, and a **MongoDB database** all at once.  
+You do **not** need Node.js or MongoDB installed on your machine.
+### Prequisites: you must have docker desktop installed and running 
+
+### Clone the Repository
+
+```bash
+git clone https://github.com/your-username/collab-canvas.git
+cd collab-canvas
+```
+
+### Run with Docker Compose
+
+```bash
+docker-compose up --build
+```
+
+Docker will build the images and start all three containers.
+
+Your application is now running:
+
+Frontend Client: http://localhost:3000
+
+Backend Server: http://localhost:5000
+
+MongoDB Database: Accessible to the server at mongodb://db:27017
+
+Note: The first build may take a few minutes. Subsequent builds will be faster.
+To stop all services, press Ctrl + C in your terminal, then run:
+```bash
+docker-compose down
+```
+
+## Option 2
 
 ### Prerequisites
 
diff --git a/client/.dockerignore b/client/.dockerignore
new file mode 100644
index 0000000..1dcef2d
--- /dev/null
+++ b/client/.dockerignore
@@ -0,0 +1,2 @@
+node_modules
+.env
\ No newline at end of file
diff --git a/client/Dockerfile b/client/Dockerfile
new file mode 100644
index 0000000..6e91e67
--- /dev/null
+++ b/client/Dockerfile
@@ -0,0 +1,7 @@
+FROM node:20-alpine
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+EXPOSE 5173
+CMD ["npm", "run", "dev", "--", "--host"]
\ No newline at end of file
diff --git a/client/src/components/StrokeControl.jsx b/client/src/components/StrokeControl.jsx
index 3b37285..cb5a3ba 100644
--- a/client/src/components/StrokeControl.jsx
+++ b/client/src/components/StrokeControl.jsx
@@ -1,5 +1,4 @@
-import { Slider } from "./ui/slider";
-
+import { Slider } from "./ui/Slider";
 export const StrokeControl = ({ strokeWidth, onStrokeWidthChange }) => {
     return (
         <div className="fixed right-6 top-1/2 -translate-y-1/2 z-50">
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..be3fe16
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,32 @@
+version: '3.8'
+
+services:
+
+  client:
+    build: ./client
+    ports:
+      - "3000:5173"
+    depends_on:
+      - server
+
+  server:
+    build: ./server
+    ports:
+      - "${SERVER_PORT:-5000}:5000"
+    environment:
+      PORT: 5000
+      CORS_ORIGIN: ${CORS_ORIGIN:-http://localhost:3000}
+      MONGO_URI: ${MONGO_URI:-mongodb://db:27017/collabcanvas}
+      JWT_SECRET: ${JWT_SECRET:-THIS_IS_A_DEFAULT_NOT_A_SECRET}
+    depends_on:
+      - db
+  
+  db:
+    image: mongo:latest
+    ports:
+      - "27017:27017"
+    volumes:
+      - mongo-data:/data/db
+
+volumes:
+  mongo-data:
\ No newline at end of file
diff --git a/server/.dockerignore b/server/.dockerignore
new file mode 100644
index 0000000..1dcef2d
--- /dev/null
+++ b/server/.dockerignore
@@ -0,0 +1,2 @@
+node_modules
+.env
\ No newline at end of file
diff --git a/server/.env.example b/server/.env.example
new file mode 100644
index 0000000..0ad76a7
--- /dev/null
+++ b/server/.env.example
@@ -0,0 +1,4 @@
+PORT=3000
+MONGO_URI=your_mongodb_connection_string_here
+CORS_ORIGIN=http://localhost:5173
+JWT_SECRET=your_jwt_secret_here
diff --git a/server/Dockerfile b/server/Dockerfile
new file mode 100644
index 0000000..92f5023
--- /dev/null
+++ b/server/Dockerfile
@@ -0,0 +1,8 @@
+FROM node:20-alpine
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+COPY . .
+EXPOSE 5000
+CMD ["npm", "run", "dev"]
\ No newline at end of file