diff --git a/Dockerfile b/Dockerfile
index 268d3c1..3a89bda 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,9 +1,16 @@
 FROM node:alpine AS build
 
+ARG api
+ARG pipedapi
+
 WORKDIR /app/
 
 COPY . .
 
+RUN sed -i "s/hyperpipeapi.onrender.com/$api/g" src/scripts/fetch.js src/components/Prefs.vue
+
+RUN sed -i "s/pipedapi.kavin.rocks/$pipedapi/g" src/scripts/fetch.js src/components/Prefs.vue
+
 RUN npm install && \
     npm run build
 
diff --git a/docker-compose.yml b/docker-compose.yml
index 5b17ac4..9e6bf4f 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -3,7 +3,11 @@ version: '3'
 services:
   hyperpipe-frontend:
     image: hyperpipe-frontend
-    build: .
+    build:
+      context: .
+      args:
+        pipedapi: pipedapi.kavin.rocks
+        api: hyperpipeapi.onrender.com
     container_name: hyperpipe-frontend
     restart: unless-stopped
     ports:
diff --git a/src/App.vue b/src/App.vue
index 2489a5d..5578ede 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -327,7 +327,10 @@ onMounted(() => {
   </template>
 
   <header v-if="!artist.state.title">
-    <div v-show="data.state.art" class="art bg-img"></div>
+    <div
+      v-show="data.state.art"
+      class="art bg-img"
+      :style="'--art: url(' + data.state.art + ')'"></div>
 
     <div class="wrapper">
       <NowPlaying @get-artist="getArtist" />
@@ -400,9 +403,6 @@ header {
   height: 175px;
   width: 175px;
 }
-.bg-img {
-  --art: v-bind('"url(" + data.state.art + ")"');
-}
 img,
 .card,
 .card-bg {