diff --git a/.env b/.env
index 64e27aa..a3c4967 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,4 @@
+VITE_BACKEND_DOMAIN=https://localhost:6767
+
 VITE_LASTFM_API=577403120879aadec2e6fd0d6160cca4
 LASTFM_SECRET=08baaf3b3050854d019ce5884e0d6d27
\ No newline at end of file
diff --git a/Caddyfile b/Caddyfile
new file mode 100644
index 0000000..560803e
--- /dev/null
+++ b/Caddyfile
@@ -0,0 +1,6 @@
+:80 {
+    root * /usr/share/caddy
+    encode gzip zstd
+    file_server
+    try_files {path} /index.html
+}
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..6d5878c
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,18 @@
+FROM node:22-slim AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+COPY . /app
+WORKDIR /app
+
+FROM base AS build
+ARG CI=true
+ARG VITE_BACKEND_DOMAIN
+ENV VITE_BACKEND_DOMAIN=$VITE_BACKEND_DOMAIN
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+RUN pnpm run build
+
+FROM caddy:alpine
+COPY Caddyfile /etc/caddy/Caddyfile
+COPY --from=build /app/dist /usr/share/caddy
+EXPOSE 80
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..714ea8b
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,10 @@
+services:
+  mva-frontend:
+    image: mva-frontend:latest
+    container_name: mva-frontend
+    ports:
+      - 1488:80
+    build:
+      context: .
+      args:
+        - VITE_BACKEND_DOMAIN=${VITE_BACKEND_DOMAIN}
diff --git a/src/components/now-playing.vue b/src/components/now-playing.vue
index 59c52df..c549a0f 100644
--- a/src/components/now-playing.vue
+++ b/src/components/now-playing.vue
@@ -3,6 +3,8 @@ import axios from 'axios'
 import { onMounted, onUnmounted, ref } from 'vue'
 import { ChangeTitle } from '@/utils/change-title'
 
+const backendUrl = import.meta.env.VITE_BACKEND_DOMAIN
+
 // api
 const lastfmapi = import.meta.env.VITE_LASTFM_API
 const lastfmusername = 'snsxd'
@@ -43,14 +45,14 @@ onMounted(() => {
         if (artist.value != trackData[0].artist['#text'])
           ChangeTitle(artist, artist.value, trackData[0].artist['#text'])
         if (track.value != trackData[0].name) {
-          labelurl.value = `http://localhost:3000/cover/${trackData[0].artist['#text'].replace('/', '')}/${trackData[0].album['#text']}/${trackData[0].album.mbid ? trackData[0].album.mbid : '0'}`
+          labelurl.value = `${backendUrl}/cover/${trackData[0].artist['#text'].replace('/', '')}/${trackData[0].album['#text']}/${trackData[0].album.mbid ? trackData[0].album.mbid : '0'}`
           console.log(labelurl.value)
           ChangeTitle(track, track.value, trackData[0].name)
         }
       } else {
         if (header.value !== 'silence...') ChangeTitle(header, header.value, 'silence...')
         primary_color.value = '#656565'
-        labelurl.value = `http://localhost:3000/cover/0/0/0`
+        labelurl.value = `${backendUrl}/cover/0/0/0`
         if (artist.value != trackData[0].artist['#text'])
           ChangeTitle(artist, artist.value, trackData[0].artist['#text'])
         if (track.value != trackData[0].name) ChangeTitle(track, track.value, trackData[0].name)