diff --git a/.env.example b/.env.example
index 821e903..f46c8c7 100644
--- a/.env.example
+++ b/.env.example
@@ -1,5 +1,6 @@
 POSTGRES_PORT=5432
 EXPRESS_PORT=3000
+FRONTEND_PORT=8080
 
 POSTGRES_USER=postgres
 POSTGRES_PASSWORD=postgres
diff --git a/docker-compose.yml b/docker-compose.yml
index f21adcc..96250c1 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -21,3 +21,13 @@ services:
     ports:
       - "${EXPRESS_PORT}:3000"
 
+  vue:
+    build: frontend
+    container_name: frontend
+    ports:
+      - "${FRONTEND_PORT}:8080"
+
+
+    volumes:
+      - ./frontend:/app
+
diff --git a/frontend/.dockerignore b/frontend/.dockerignore
new file mode 100644
index 0000000..3298622
--- /dev/null
+++ b/frontend/.dockerignore
@@ -0,0 +1,3 @@
+node_modules
+.gitignore
+README.md
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 0000000..e8524c9
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,11 @@
+FROM node:18
+
+COPY . /app
+WORKDIR /app
+
+RUN npm install
+
+EXPOSE 8080
+
+ENTRYPOINT ["npm", "run", "serve"]
+
diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
index d5bf1d5..3be8534 100644
--- a/frontend/src/components/Login.vue
+++ b/frontend/src/components/Login.vue
@@ -1,7 +1,7 @@
 <template>
   <h2>Enter a username</h2>
   <div class="form-floating mb-3">
-    <input type="email" class="form-control" id="floatingInput" placeholder="example name" v-model="username">
+    <input class="form-control" id="floatingInput" placeholder="example name" v-model="username">
     <label for="floatingInput">Username</label>
     <RRButton @click="setUser()" text="Confirm"></RRButton>
   </div>