diff --git a/.env b/.env
new file mode 100644
index 0000000..9a69c24
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+PORT=5000
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
index 48d429f..f85184d 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -10,6 +10,6 @@ COPY . .
 
 RUN go build -o main cmd/api/main.go
 
-EXPOSE 8080
+EXPOSE ${PORT}
 
 CMD ["./main"]
\ No newline at end of file
diff --git a/cmd/api/main.go b/cmd/api/main.go
index 41f6e71..7bc287b 100644
--- a/cmd/api/main.go
+++ b/cmd/api/main.go
@@ -2,6 +2,11 @@ package main
 
 import (
 	"fiber/internal/server"
+	"fmt"
+	"os"
+	"strconv"
+
+	_ "github.com/joho/godotenv/autoload"
 )
 
 func main() {
@@ -9,8 +14,8 @@ func main() {
 	server := server.New()
 
 	server.RegisterFiberRoutes()
-
-	err := server.Listen(":5000")
+	port, _ := strconv.Atoi(os.Getenv("PORT"))
+	err := server.Listen(fmt.Sprintf(":%d", port))
 	if err != nil {
 		panic("cannot start server")
 	}
diff --git a/docker-compose-prod.yml b/docker-compose-prod.yml
new file mode 100644
index 0000000..557b6fc
--- /dev/null
+++ b/docker-compose-prod.yml
@@ -0,0 +1,7 @@
+version: '3'
+
+services:
+  web:
+    image: ujstor/portfolio-web-go:1.0.2
+    ports:
+      - '${PORT}:${PORT}'
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index 9c5e21c..1b63c3f 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -2,6 +2,6 @@ version: '3'
 
 services:
   web:
-    image: ujstor/portfolio-web-go:1.0.1
+    build: .
     ports:
-      - '5000:5000'
\ No newline at end of file
+      - '${PORT}:${PORT}'
\ No newline at end of file
diff --git a/go.mod b/go.mod
index 7699cc0..9f7beba 100644
--- a/go.mod
+++ b/go.mod
@@ -2,10 +2,15 @@ module fiber
 
 go 1.21
 
+require (
+	github.com/gofiber/fiber/v2 v2.51.0
+	github.com/joho/godotenv v1.5.1
+	github.com/stretchr/testify v1.8.4
+)
+
 require (
 	github.com/andybalholm/brotli v1.0.6 // indirect
 	github.com/davecgh/go-spew v1.1.1 // indirect
-	github.com/gofiber/fiber/v2 v2.51.0 // indirect
 	github.com/google/uuid v1.4.0 // indirect
 	github.com/klauspost/compress v1.17.2 // indirect
 	github.com/mattn/go-colorable v0.1.13 // indirect
@@ -13,7 +18,6 @@ require (
 	github.com/mattn/go-runewidth v0.0.15 // indirect
 	github.com/pmezard/go-difflib v1.0.0 // indirect
 	github.com/rivo/uniseg v0.4.4 // indirect
-	github.com/stretchr/testify v1.8.4 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasthttp v1.51.0 // indirect
 	github.com/valyala/tcplisten v1.0.0 // indirect
diff --git a/go.sum b/go.sum
index 241382d..3dbf162 100644
--- a/go.sum
+++ b/go.sum
@@ -6,6 +6,8 @@ github.com/gofiber/fiber/v2 v2.51.0 h1:JNACcZy5e2tGApWB2QrRpenTWn0fq0hkFm6k0C86g
 github.com/gofiber/fiber/v2 v2.51.0/go.mod h1:xaQRZQJGqnKOQnbQw+ltvku3/h8QxvNi8o6JiJ7Ll0U=
 github.com/google/uuid v1.4.0 h1:MtMxsa51/r9yyhkyLsVeVt0B+BGQZzpQiTQ4eHZ8bc4=
 github.com/google/uuid v1.4.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
+github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
 github.com/klauspost/compress v1.17.2 h1:RlWWUY/Dr4fL8qk9YG7DTZ7PDgME2V4csBXA8L/ixi4=
 github.com/klauspost/compress v1.17.2/go.mod h1:ntbaceVETuRiXiv4DpjP66DpAtAGkEQskQzEyD//IeE=
 github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
@@ -32,6 +34,7 @@ golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.14.0 h1:Vz7Qs629MkJkGyHxUlRHizWJRG2j8fbQKjELVSNhy7Q=
 golang.org/x/sys v0.14.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
diff --git a/website/static/img/jpg/blueprint.png b/website/static/img/jpg/blueprint.png
index 5e7e026..2c7762c 100644
Binary files a/website/static/img/jpg/blueprint.png and b/website/static/img/jpg/blueprint.png differ
diff --git a/website/static/img/webp/blueprint.webp b/website/static/img/webp/blueprint.webp
index e9a5e35..e7b4d2b 100644
Binary files a/website/static/img/webp/blueprint.webp and b/website/static/img/webp/blueprint.webp differ
diff --git a/website/templates/index.html b/website/templates/index.html
index f5bfe6b..66a50d6 100644
--- a/website/templates/index.html
+++ b/website/templates/index.html
@@ -133,10 +133,15 @@ <h1>Featured Projects</h1>
       <!-- User Project #1: go-blueprint -->
       <div class="user-projects">
         <div class="images-right">
-          <picture>
-            <source type="image/webp" srcset="./static/img/webp/blueprint.webp" alt="Go-Blueprint" />
-            <img alt="blueprint" src="./static/img/jpg/blueprint.jpg" />
-          </picture>
+         <picture>
+           <source type="image/webp" 
+                   srcset="./static/img/webp/blueprint.webp" 
+                   sizes="(max-width: 600px) 480px, 800px" 
+                   alt="Go-Blueprint" />
+           <img src="./static/img/jpg/blueprint.jpg" 
+                alt="blueprint" 
+                style="width:auto;max-width:100%;" />
+        </picture>
         </div>
         <div class="contents" style="text-align: center">
           <h3>Go-Blueprint</h3>
@@ -167,8 +172,12 @@ <h3>Go-Blueprint</h3>
       <div class="user-projects">
         <div class="images-left">
           <picture>
-            <source type="image/webp" srcset="./static/img/webp/fastapi.webp" alt="Social Media FastAPI" />
-            <img alt="fastapi" src="./static/img/jpg/fastapi.jpg" />
+            <source type="image/webp" 
+                    srcset="./static/img/webp/fastapi.webp" 
+                    sizes="(max-width: 600px) 480px, 800px" />
+            <img src="./static/img/jpg/fastapi.jpg" 
+                 alt="Social Media FastAPI" 
+                 style="width:auto;max-width:100%;" />
           </picture>
         </div>
         <div class="contents-right" style="text-align: center">
@@ -216,8 +225,12 @@ <h3>Social Media FastAPI</h3>
       <div class="user-projects">
         <div class="images-right">
           <picture>
-            <source type="image/webp" srcset="./static/img/webp/probit.webp" alt="ProBit Global API" />
-            <img alt="probit" src="./static/img/jpg/probit.jpg" />
+            <source type="image/webp" 
+                    srcset="./static/img/webp/probit.webp" 
+                    sizes="(max-width: 600px) 480px, 800px" />
+            <img src="./static/img/jpg/probit.jpg" 
+                 alt="ProBit Global API" 
+                 style="width:auto;max-width:100%;" />
           </picture>
         </div>
         <div class="contents" style="text-align: center">
@@ -255,8 +268,12 @@ <h3>ProBit Global API</h3>
       <div class="user-projects">
         <div class="images-left">
           <picture>
-            <source type="image/webp" srcset="./static/img/webp/streamlit.webp" alt="Working Hours Analysis" />
-            <img alt="streamlit" src="./static/img/jpg/streamlit.jpg" />
+            <source type="image/webp" 
+                    srcset="./static/img/webp/streamlit.webp" 
+                    sizes="(max-width: 600px) 480px, 800px" />
+            <img src="./static/img/jpg/streamlit.jpg" 
+                 alt="Working Hours Analysis" 
+                 style="width:auto;max-width:100%;" />
           </picture>
         </div>
         <div class="contents-right" style="text-align: center">