diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..a16b2c9
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,12 @@
+version: '3.8'
+
+services:
+  photobooth:
+    image: nginx:alpine
+    container_name: photobooth
+    volumes:
+      - ./dist:/usr/share/nginx/html
+      - ./nginx.conf:/etc/nginx/conf.d/default.conf
+    ports:
+      - '8080:80'
+    restart: unless-stopped
\ No newline at end of file
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..5d4fa99
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,51 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Enable gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types
+        text/plain
+        text/css
+        text/xml
+        text/javascript
+        application/javascript
+        application/xml+rss
+        application/json;
+
+    # Handle static assets with caching
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+        try_files $uri =404;
+    }
+
+    # Handle service worker
+    location /sw.js {
+        add_header Cache-Control "no-cache";
+        try_files $uri =404;
+    }
+
+    # Handle manifest
+    location /manifest.webmanifest {
+        add_header Content-Type "application/manifest+json";
+        try_files $uri =404;
+    }
+
+    # Handle all other routes - fallback to index.html for SPA routing
+    location / {
+        try_files $uri $uri/ /index.html;
+        add_header Cache-Control "no-cache, no-store, must-revalidate";
+        add_header Pragma "no-cache";
+        add_header Expires "0";
+    }
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+}
\ No newline at end of file
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
new file mode 100644
index 0000000..0dbd893
Binary files /dev/null and b/public/favicon-16x16.png differ
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
new file mode 100644
index 0000000..1d3c44f
Binary files /dev/null and b/public/favicon-32x32.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
index df36fcf..91f6215 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/icon-192x192.png b/public/icon-192x192.png
new file mode 100644
index 0000000..b5730de
Binary files /dev/null and b/public/icon-192x192.png differ
diff --git a/public/icon-192x192.svg b/public/icon-192x192.svg
deleted file mode 100644
index 8e2bdb7..0000000
--- a/public/icon-192x192.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="192" height="192" xmlns="http://www.w3.org/2000/svg">
-  <rect width="192" height="192" fill="#667eea" rx="24"/>
-  <text x="96" y="120" font-family="Arial" font-size="72" fill="white" text-anchor="middle">📷</text>
-</svg>
\ No newline at end of file
diff --git a/public/icon-512x512.png b/public/icon-512x512.png
new file mode 100644
index 0000000..2c69700
Binary files /dev/null and b/public/icon-512x512.png differ
diff --git a/src/views/PrintStepView.vue b/src/views/PrintStepView.vue
index e5d3768..8517349 100644
--- a/src/views/PrintStepView.vue
+++ b/src/views/PrintStepView.vue
@@ -312,7 +312,7 @@ onMounted(() => {
       </div>
 
       <div class="final-image-display">
-        <img :src="finalImage" alt="Final Combined Image" />
+        <img v-if="finalImage" :src="finalImage" alt="Final Combined Image" />
       </div>
 
 
diff --git a/src/views/ShootingView.vue b/src/views/ShootingView.vue
index 69f6034..4c1205f 100644
--- a/src/views/ShootingView.vue
+++ b/src/views/ShootingView.vue
@@ -67,9 +67,9 @@ const applyFilmEffect = (context: CanvasRenderingContext2D, width: number, heigh
   const grainStrength = volume * 1.5;
 
   for (let i = 0; i < data.length; i += 4) {
-    let r = data[i];
-    let g = data[i + 1];
-    let b = data[i + 2];
+    let r = data[i]!;
+    let g = data[i + 1]!;
+    let b = data[i + 2]!;
 
     // --- STEP 1: Apply Contrast (ทำให้ภาพไม่แบน) ---
     // สูตร Contrast มาตรฐาน
diff --git a/src/views/UploadView.vue b/src/views/UploadView.vue
index 071f7a9..51c7e79 100644
--- a/src/views/UploadView.vue
+++ b/src/views/UploadView.vue
@@ -26,9 +26,9 @@ const applyFilmEffect = (context: CanvasRenderingContext2D, width: number, heigh
   const grainStrength = volume * 1.5;
 
   for (let i = 0; i < data.length; i += 4) {
-    let r = data[i];
-    let g = data[i + 1];
-    let b = data[i + 2];
+    let r = data[i]!;
+    let g = data[i + 1]!;
+    let b = data[i + 2]!;
 
     // --- STEP 1: Apply Contrast (ทำให้ภาพไม่แบน) ---
     // สูตร Contrast มาตรฐาน
diff --git a/vite.config.ts b/vite.config.ts
index 97da3d2..89b5a2f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -13,7 +13,7 @@ export default defineConfig({
     VitePWA({
       registerType: 'autoUpdate',
       manifest: {
-        name: 'DekThai Photobooth',
+        name: 'Photobooth-APU',
         short_name: 'Photobooth',
         description: 'Create beautiful photo strips with frames',
         theme_color: '#ffffff',