diff --git a/website/Dockerfile b/website/Dockerfile
index 7fda515..22f3387 100644
--- a/website/Dockerfile
+++ b/website/Dockerfile
@@ -1,14 +1,15 @@
-ARG VER=1.23
-
-FROM "docker.io/golang:$VER" as build
+FROM docker.io/golang:1.23 AS build
WORKDIR /build/
-ARG VER
-COPY main.go .
-RUN printf "module main\ngo $VER" > go.mod && CGO_ENABLED=0 go build -o /app
+COPY go.mod go.sum .
+RUN go mod download
+COPY src/ .
+RUN CGO_ENABLED=0 go build -o /app
FROM scratch
-COPY --from=build /app /app
-COPY static/ /static/
-COPY html/ /html/
+COPY --from=build /app .
+COPY html/ html/
+COPY css/ css/
+COPY static/ static/
+COPY tmpl/ tmpl/
EXPOSE 3000
-CMD ["/app"]
+CMD ["./app"]
diff --git a/website/compose.yaml b/website/compose.yaml
index 89ab5a7..2660b08 100644
--- a/website/compose.yaml
+++ b/website/compose.yaml
@@ -4,3 +4,19 @@ services:
build: .
ports:
- "3000:3000"
+ develop:
+ watch:
+ - action: rebuild
+ path: src/
+ - action: sync+restart
+ path: tmpl/
+ target: tmpl/
+ - action: sync+restart
+ path: html/
+ target: html/
+ - action: sync
+ path: css/
+ target: css/
+ - action: sync
+ path: static/
+ target: static/
diff --git a/website/css/about.css b/website/css/about.css
new file mode 100644
index 0000000..9283733
--- /dev/null
+++ b/website/css/about.css
@@ -0,0 +1,171 @@
+:root {
+ --primary-color: #000000;
+ --background-color: #f5f5f5;
+ --text-color: #333;
+ --secondary-text-color: #777;
+}
+
+.content {
+ margin: 20px auto;
+ max-width: 900px;
+ padding: 40px;
+ background-color: var(--background-color);
+ color: var(--text-color);
+ border-radius: 8px;
+ font-family: 'Open Sans', Arial, sans-serif;
+ position: relative;
+ overflow: hidden;
+}
+
+.title {
+ font-size: 2.5em;
+ color: var(--primary-color);
+ margin-bottom: 30px;
+ text-align: center;
+ animation: fadeInDown 1s ease;
+}
+
+.section-title {
+ font-size: 1.8em;
+ color: var(--primary-color);
+ margin-top: 40px;
+ margin-bottom: 20px;
+ position: relative;
+ animation: fadeInLeft 1s ease;
+}
+
+.section-title::after {
+ content: '';
+ width: 50px;
+ height: 3px;
+ background-color: var(--primary-color);
+ position: absolute;
+ bottom: -10px;
+ left: 0;
+}
+
+p, li {
+ line-height: 1.6;
+ font-size: 1.1em;
+ animation: fadeIn 1s ease;
+}
+
+ul {
+ margin-left: 20px;
+ list-style-type: disc;
+}
+
+.features ul li {
+ margin-bottom: 10px;
+}
+
+.team-list {
+ list-style-type: none;
+ padding: 0;
+}
+
+.team-list li {
+ margin-bottom: 8px;
+ font-weight: bold;
+ color: var(--text-color);
+}
+
+.back-link-container {
+ text-align: center;
+ margin-top: 40px;
+ animation: fadeInUp 1s ease;
+}
+
+.back-link {
+ text-decoration: none;
+ color: var(--primary-color);
+ font-weight: bold;
+ border: 2px solid var(--primary-color);
+ padding: 10px 20px;
+ border-radius: 5px;
+ transition: background-color 0.3s, color 0.3s;
+}
+
+.back-link:hover {
+ background-color: var(--primary-color);
+ color: #fff;
+}
+
+@keyframes fadeInDown {
+ from {
+ opacity: 0;
+ transform: translateY(-20px);
+ } to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes fadeInLeft {
+ from {
+ opacity: 0;
+ transform: translateX(-20px);
+ } to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ } to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ } to {
+ opacity: 1;
+ }
+}
+
+@media (max-width: 768px) {
+ .content {
+ padding: 20px;
+ }
+
+ .title {
+ font-size: 2em;
+ }
+
+ .section-title {
+ font-size: 1.5em;
+ }
+
+ p, li {
+ font-size: 1em;
+ }
+}
+
+@media (max-width: 480px) {
+ .content {
+ padding: 15px;
+ }
+
+ .title {
+ font-size: 1.8em;
+ }
+
+ .section-title {
+ font-size: 1.2em;
+ }
+
+ p, li {
+ font-size: 0.9em;
+ }
+}
+
+a {
+ color: var(--primary-color);
+ text-decoration: none;
+}
diff --git a/website/css/index.css b/website/css/index.css
new file mode 100644
index 0000000..de47602
--- /dev/null
+++ b/website/css/index.css
@@ -0,0 +1,16 @@
+body {
+ margin: 0;
+}
+
+div {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+}
+
+.title {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 3em;
+}
diff --git a/website/css/style.css b/website/css/style.css
new file mode 100644
index 0000000..bda2311
--- /dev/null
+++ b/website/css/style.css
@@ -0,0 +1,4 @@
+a.nostyle {
+ color: inherit;
+ cursor: pointer;
+}
diff --git a/website/go.mod b/website/go.mod
new file mode 100644
index 0000000..3a3a5a6
--- /dev/null
+++ b/website/go.mod
@@ -0,0 +1,3 @@
+module main
+
+go 1.23.3
diff --git a/website/go.sum b/website/go.sum
new file mode 100644
index 0000000..e69de29
diff --git a/website/html/about.html b/website/html/about.html
new file mode 100644
index 0000000..12529e0
--- /dev/null
+++ b/website/html/about.html
@@ -0,0 +1,63 @@
+
+
+
+ {{template "head.tmpl". }}
+
+
+
+
What is Icing?
+
+
+
+ Icing is a simple, lightweight, and efficient dialer designed to
+ replace your everyday phone app. It ensures end-to-end encryption of
+ telephone communications by implementing a home-made, analogic-based
+ voice encryption. Inspired by SRTP (Secure Real-time Transport
+ Protocol), using ECDH (Elliptic Curve Diffie-Hellman).
+
+
+
+
+
Key Features
+
+ -
+ End-to-End Encryption: Secure your calls with
+ robust encryption protocols.
+
+ -
+ Transparent: If your peer doesn't use Icing, the
+ call remains completely normal.
+
+ -
+ Analogic-based: An open-source, exportable,
+ protocol that works without internet.
+
+
+
+
+
+
How It Works
+
+ Icing generates a cryptographic key pair for you. Share your public key
+ with a neat QR code.
+
+
+ During a call between two Icing users, voices are encrypted,
+ compressed, and transmitted via the telephone network using the Icing
+ Acoustic Protocol.
+
+
+
+
+
The Team
+
+ - {{template "stephane"}}
+ - {{template "alexis"}}
+ - {{template "ange"}}
+ - {{template "bartosz"}}
+ - {{template "florian"}}
+
+
+
+
+
diff --git a/website/html/description.html b/website/html/description.html
deleted file mode 100644
index 296db36..0000000
--- a/website/html/description.html
+++ /dev/null
@@ -1,229 +0,0 @@
-
-
-
-
-
Project Description
-
-
-
What is Icing?
-
- Icing is a simple, lightweight, and efficient dialer designed to replace your everyday phone app. It ensures end-to-end encryption of telephone communications by implementing a home-made, analogic-based voice encryption. Inspired by SRTP (Secure Real-time Transport Protocol), using ECDH (Elliptic Curve Diffie-Hellman).
-
-
-
-
-
Key Features
-
- - End-to-End Encryption: Secure your calls with robust encryption protocols.
- - Transparent: If your peer doesn't use Icing, the call remains completely normal.
- - Analogic-based: An open-source, exportable, protocol that works without internet.
-
-
-
-
-
How It Works
-
- Icing generates a cryptographic key pair for you. Share your public key with a neat QR code.
-
-
- During a call between two Icing users, voices are encrypted, compressed, and transmitted via the telephone network using the Icing Acoustic Protocol.
-
-
-
-
-
Our Team
-
- We are a team of five dedicated individuals working on this solution:
-
-
-
-
-
-
diff --git a/website/html/index.html b/website/html/index.html
index e1ec852..7e79f0a 100644
--- a/website/html/index.html
+++ b/website/html/index.html
@@ -1,31 +1,13 @@
-
+ {{template "head.tmpl" .}}
-