diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index e6abb66..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,124 +0,0 @@
-/* Container styles */
-.waldorf-vote-landing-page {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  max-width: 1200px;
-  margin: auto;
-}
-
-/* Header styles */
-.waldorf-header {
-  text-align: center;
-  margin-bottom: 20px;
-}
-
-.waldorf-logo-container {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 10px;
-}
-
-.waldorf-logo {
-  max-width: 80px;
-}
-
-.waldorf-main-content {
-  width: 100%;
-}
-
-/* Description styles */
-.waldorf-description {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 10px;
-  background: rgba(255, 255, 255, 0.9);
-  border-radius: 5px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  color: #555;
-  font-size: 1em;
-  line-height: 1.5;
-}
-
-/* Section styles */
-.waldorf-section {
-  background: #fff;
-  border-radius: 5px;
-  padding: 15px;
-  margin-bottom: 20px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.waldorf-section-title {
-  margin-bottom: 10px;
-  font-size: 1.4em;
-  color: #f89e23;
-  text-align: center;
-}
-
-.waldorf-vote-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.waldorf-vote-card {
-  padding: 10px;
-  border-left: 3px solid #f89e23;
-}
-
-.waldorf-link {
-  color: #646cff;
-  text-decoration: none;
-  font-weight: bold;
-}
-
-.waldorf-link:hover {
-  text-decoration: underline;
-}
-
-.waldorf-no-votes {
-  text-align: center;
-  color: #888;
-}
-
-/* Footer styles */
-.waldorf-footer {
-  margin-top: 20px;
-  text-align: center;
-}
-
-.waldorf-credits {
-  color: #888;
-}
-
-.waldorf-credits a {
-  color: #646cff;
-  text-decoration: none;
-}
-
-.waldorf-credits a:hover {
-  text-decoration: underline;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-  .waldorf-section-title {
-    font-size: 1.2em;
-  }
-}
-
-@media (max-width: 480px) {
-  .waldorf-section {
-    padding: 10px;
-    margin-bottom: 15px;
-  }
-
-  .waldorf-section-title {
-    font-size: 1em;
-  }
-
-  .waldorf-vote-card {
-    padding: 8px;
-  }
-}
diff --git a/src/App.jsx b/src/App.jsx
index 8753864..fe5dfae 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,7 +1,6 @@
 import { collection, getDocs } from "firebase/firestore";
 import moment from "moment-timezone";
 import { useLoaderData } from "react-router-dom";
-import "./App.css";
 import { db } from "./firebase";
 function App() {
   const { activeVotes, expiredVotes, scheduledVotes } = useLoaderData();
diff --git a/src/Vote.jsx b/src/Vote.jsx
index c7364d8..797c948 100644
--- a/src/Vote.jsx
+++ b/src/Vote.jsx
@@ -13,7 +13,7 @@ import { db } from "./firebase";
 import moment from "moment-timezone";
 
 import { breakpoint, confirm, snackbar } from "mdui";
-import "./vote.css";
+import { capitalizeWords } from "./admin/utils";
 export default function Vote() {
   const refs = useRef([]);
   const urlParams = new URLSearchParams(window.location.search);
@@ -33,7 +33,6 @@ export default function Vote() {
     description,
   } = vote;
 
-  
   const [firstName, setFirstName] = React.useState();
   const [lastName, setLastName] = React.useState();
   const [grade, setGrade] = React.useState();
@@ -49,19 +48,34 @@ export default function Vote() {
 
   React.useEffect(() => {
     document.title = title;
+  }, [title]);
 
-    if (localStorage.getItem(id) && !urlParams.get("preview")) {
-      if (urlParams.get("allowResubmission")) {
-        navigate(`/x/${id}?allowResubmission=true`);
-        window.location.href = `/x/${id}?allowResubmission=true`;
-        return;
-      }
-      navigate(`/x/${id}`);
-      window.location.href = `/x/${id}`;
+  const preview = urlParams.get("preview");
+
+
+  if (localStorage.getItem(id) && !urlParams.get("preview")) {
+    if (urlParams.get("allowResubmission")) {
+      navigate(`/x/${id}?allowResubmission=true`);
+      return;
     }
-  }, []);
+    navigate(`/x/${id}`);
+  }
+
+  if ((active === false || Date.now() > endTime.seconds * 1000) && !preview) {
+    snackbar({ message: "Die Wahl ist bereits beendet." });
+    navigate(`/r/${id}`);
+  }
+  if (Date.now() < startTime.seconds * 1000 && !preview) {
+    snackbar({
+      message:
+        "Die Wahl startet erst am " +
+        moment
+          .tz(startTime.seconds * 1000, "Europe/Berlin")
+          .format("dddd, D. MMMM YYYY, HH:mm"),
+    });
+    navigate("/");
+  }
 
-  const preview = urlParams.get("preview");
 
   const submitDisabled = () => {
     if (
@@ -122,39 +136,39 @@ export default function Vote() {
         setSending(false);
         if (error.code === "permission-denied") {
           snackbar({
-            message:
-              "Es ist ein Berechtigungsfehler aufgetreten.",
-              action:"Details",
-              onActionClick: () => {
-                console.error(error);
-                alert(
-                  "Es scheint, als sei die Wahl nicht mehr verfügbar. Bitte versuchen Sie es später erneut.\n"+error
-                )
-              }
+            message: "Es ist ein Berechtigungsfehler aufgetreten.",
+            action: "Details",
+            onActionClick: () => {
+              console.error(error);
+              alert(
+                "Es scheint, als sei die Wahl nicht mehr verfügbar. Bitte versuchen Sie es später erneut.\n" +
+                  error
+              );
+            },
           });
         } else if (error.message === "Network Error") {
-            snackbar({
-              message:
-                "Es ist ein Netzwerkfehler aufgetreten.",
-              action:"Details",
-              onActionClick: () => {
-                console.error(error);
-                alert(
-                  "Es scheint, als gäbe es ein Problem mit Ihrer Internetverbindung. Bitte überprüfen Sie diese und versuchen Sie es erneut.\n"+error
-                )
-              }
+          snackbar({
+            message: "Es ist ein Netzwerkfehler aufgetreten.",
+            action: "Details",
+            onActionClick: () => {
+              console.error(error);
+              alert(
+                "Es scheint, als gäbe es ein Problem mit Ihrer Internetverbindung. Bitte überprüfen Sie diese und versuchen Sie es erneut.\n" +
+                  error
+              );
+            },
           });
         } else {
           snackbar({
-            message:
-              "Es ist ein Fehler aufgetreten.",
-            action:"Details",
+            message: "Es ist ein Fehler aufgetreten.",
+            action: "Details",
             onActionClick: () => {
               console.error(error);
               alert(
-                "Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.\n"+error
-              )
-            }
+                "Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.\n" +
+                  error
+              );
+            },
           });
         }
       });
@@ -166,36 +180,6 @@ export default function Vote() {
     setExtraFieldsValues(newValues);
   };
 
-  React.useEffect(() => {
-    if ((active === false || Date.now() > endTime.seconds * 1000) && !preview) {
-      snackbar({ message: "Die Wahl ist bereits beendet." });
-      navigate(`/r/${id}`);
-    }
-    if (Date.now() < startTime.seconds * 1000 && !preview) {
-      snackbar({
-        message:
-          "Die Wahl startet erst am " +
-          moment
-            .tz(startTime.seconds * 1000, "Europe/Berlin")
-            .format("dddd, D. MMMM YYYY, HH:mm"),
-      });
-      navigate("/");
-    }
-  }, []);
-
-  const capitalizeWords = (str) => {
-    return str
-      .replace(/[^a-zA-ZäöüÄÖÜß\s-]/g, "") // Remove non-alphabetic characters except hyphens and umlauts
-      .replace(/\b\w/g, (char, index) => {
-        if (index === 0 || str[index - 1].match(/\s/)) {
-          return char.toUpperCase();
-        } else if (str[index - 1] === "-") {
-          return char.toUpperCase();
-        }
-        return char;
-      }); // Capitalize words correctly
-  };
-
   return (
     <div className="container">
       <mdui-dialog open={confirmDialog} headline="Bestätigen">
@@ -339,6 +323,7 @@ export default function Vote() {
             <div className="flex-wrap">
               {options.map((e) => (
                 <mdui-card
+                  key={e.id}
                   clickable={
                     selected[index] !== e.id && !selected.includes(e.id)
                   }
diff --git a/src/admin/index.css b/src/admin/admin.css
similarity index 100%
rename from src/admin/index.css
rename to src/admin/admin.css
diff --git a/src/admin/auth/Login.tsx b/src/admin/auth/Login.tsx
index c03c016..e8b45b7 100644
--- a/src/admin/auth/Login.tsx
+++ b/src/admin/auth/Login.tsx
@@ -5,7 +5,6 @@ import {
 import { alert, prompt, snackbar } from "mdui";
 import React from "react";
 import { auth } from "../../firebase";
-import "../../vote.css";
 
 export default function Login() {
   const [loading, setLoading] = React.useState(false);
diff --git a/src/admin/index.jsx b/src/admin/index.jsx
index 5620c7a..3f1ee30 100644
--- a/src/admin/index.jsx
+++ b/src/admin/index.jsx
@@ -3,14 +3,14 @@ import React from "react";
 import { Outlet } from "react-router-dom";
 import { auth } from "../firebase";
 
-import "./index.css";
+import "./admin.css";
 
 import { confirm, snackbar } from "mdui";
 import { useNavigate } from "react-router-dom";
 import Login from "./auth/Login";
 import DrawerList from "./navigation/DrawerList";
 
-export default function Admin(props) {
+export default function Admin() {
   const [authUser, setAuthUser] = React.useState(false);
   const [loading, setLoading] = React.useState(true);
 
diff --git a/src/admin/utils.js b/src/admin/utils.js
deleted file mode 100644
index 8e3a031..0000000
--- a/src/admin/utils.js
+++ /dev/null
@@ -1,33 +0,0 @@
-export function generateRandomHash(length = 4) {
-  let hash = "";
-  const characters =
-    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-
-  for (let i = 0; i < length; i++) {
-    hash += characters.charAt(Math.floor(Math.random() * characters.length));
-  }
-
-  return hash;
-}
-
-export const deepEqual = (a, b) => {
-  if (a === b) return true;
-  if (
-    typeof a !== "object" ||
-    a === null ||
-    typeof b !== "object" ||
-    b === null
-  )
-    return false;
-
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-
-  if (keysA.length !== keysB.length) return false;
-
-  for (let key of keysA) {
-    if (!keysB.includes(key) || !deepEqual(a[key], b[key])) return false;
-  }
-
-  return true;
-};
diff --git a/src/admin/utils.ts b/src/admin/utils.ts
new file mode 100644
index 0000000..ab5ef65
--- /dev/null
+++ b/src/admin/utils.ts
@@ -0,0 +1,71 @@
+/**
+ * Generates a random hash string of a specified length.
+ *
+ * @param {number} [length=4] - The length of the hash to generate. Defaults to 4 if not specified.
+ * @returns {string} A randomly generated hash string consisting of uppercase letters, lowercase letters, and digits.
+ */
+export function generateRandomHash(length = 4) {
+  let hash = "";
+  const characters =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  const array = new Uint32Array(length);
+  crypto.getRandomValues(array);
+  for (let i = 0; i < length; i++) {
+    hash += characters.charAt(array[i] % characters.length);
+  }
+
+  return hash;
+}
+
+/**
+ * Compares two values to determine if they are deeply equal.
+ *
+ * This function performs a deep comparison between two values to determine if they are equivalent.
+ * It handles comparisons for objects, arrays, and primitive values.
+ *
+ * @param a - The first value to compare.
+ * @param b - The second value to compare.
+ * @returns `true` if the values are deeply equal, otherwise `false`.
+ */
+export const deepEqual = (a: any, b: any): boolean => {
+  if (a === b) return true;
+  if (
+    typeof a !== "object" ||
+    a === null ||
+    typeof b !== "object" ||
+    b === null
+  )
+    return false;
+
+  const keysA: string[] = Object.keys(a);
+  const keysB: string[] = Object.keys(b);
+
+  if (keysA.length !== keysB.length) return false;
+
+  for (let key of keysA) {
+    if (!keysB.includes(key) || !deepEqual(a[key], b[key])) return false;
+  }
+
+  return true;
+};
+
+/**
+ * Capitalizes the first letter of each word in a given string.
+ * Words are defined as sequences of alphabetic characters, including umlauts (ä, ö, ü, Ä, Ö, Ü, ß).
+ * Non-alphabetic characters (except hyphens and umlauts) are removed from the string.
+ *
+ * @param {string} str - The input string to be transformed.
+ * @returns {string} - The transformed string with each word capitalized.
+ */
+export const capitalizeWords = (str: string): string => {
+  return str
+    .replace(/[^a-zA-ZäöüÄÖÜß\s-]/g, "") // Remove non-alphabetic characters except hyphens and umlauts
+    .replace(/\b\w/g, (char: string, index: number): string => {
+      if (index === 0 || str[index - 1].match(/\s/)) {
+        return char.toUpperCase();
+      } else if (str[index - 1] === "-") {
+        return char.toUpperCase();
+      }
+      return char;
+    }); // Capitalize words correctly
+};
diff --git a/src/admin/vote/Edit.jsx b/src/admin/vote/Edit.jsx
index 89324cf..dc6f349 100644
--- a/src/admin/vote/Edit.jsx
+++ b/src/admin/vote/Edit.jsx
@@ -126,6 +126,7 @@ export default function Edit() {
         result[key] = [vote[key], newVote[key]];
       }
       return result;
+
     }, {});
 
     if (Object.keys(changes).length > 0) {
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index d6b0236..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,135 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-.button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  transition: border-color 0.25s;
-  cursor: pointer;
-  text-align: center;
-  color: white;
-}
-.button:hover {
-  border-color: #646cff;
-  color: white;
-}
-.button:focus,
-.button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-  color: white;
-}
-
-input {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  transition: border-color 0.25s;
-  cursor: pointer;
-  text-align: center;
-  color: white;
-}
-input:hover {
-  border-color: #646cff;
-  color: white;
-}
-input:focus,
-.button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-  color: white;
-}
-
-.button.disabled {
-  background-color: #5a5a5a;
-  cursor: default;
-}
-.button.disabled:hover {
-  border-color: #5a5a5a;
-}
-
-.button.active {
-  background-color: #f89e23;
-  cursor: default;
-}
-.button.active:hover {
-  border-color: #f89e23;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  .button {
-    background-color: #f9f9f9;
-    color: gray;
-  }
-  .button:hover {
-    background-color: white;
-    color: black;
-  }
-  .button.disabled {
-    background-color: #5a5a5a;
-    cursor: default;
-    color: black;
-  }
-  .button.disabled:hover {
-    border-color: #5a5a5a;
-  }
-  .button.active {
-    background-color: #f89e23;
-    cursor: default;
-    color: black;
-  }
-  .button.active:hover {
-    border-color: #f89e23;
-  }
-  input.button {
-    color: black;
-  }
-}
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index 0ef77b5..6e61ad0 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -18,6 +18,13 @@
   scroll-padding-top: 10px;
 }
 
+body {
+  font-family: Arial, sans-serif;
+  min-height: 100dvh;
+  margin: 0;
+  padding: 0;
+}
+
 .wrapper {
   max-width: 100%;
   display: flex;
@@ -40,14 +47,12 @@ a:hover {
   color: #f89e24;
 }
 
-h3 {
-  font-weight: 100;
+h1 {
+  text-align: center;
 }
 
-.two-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 20px;
+h3 {
+  font-weight: 100;
 }
 
 input {
@@ -58,19 +63,35 @@ input {
   font-size: 20px;
 }
 
-h1 {
-  text-align: center;
+input:hover {
+  border-color: #1b4485;
 }
-.vote {
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+button {
   width: 100%;
-  max-width: 500px;
+  padding: 10px;
+  background-color: #1b4485;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  font-size: 20px;
 }
 
-body {
-  font-family: Arial, sans-serif;
-  min-height: 100dvh;
-  margin: 0;
-  padding: 0;
+button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+button:not(:disabled):hover {
+  background-color: #f89e24;
 }
 
 .vote {
@@ -94,16 +115,6 @@ body {
   margin-bottom: 5px;
 }
 
-input {
-  width: calc(100% - 20px);
-  padding: 10px;
-  /* margin-bottom: 15px; */
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-input:hover {
-  border-color: #1b4485;
-}
 .options {
   display: flex;
   flex-wrap: wrap;
@@ -111,7 +122,7 @@ input:hover {
 }
 
 .option {
-  flex: 1 1 45%; /* Nimmt 45% der Breite des Containers, sodass zwei in eine Zeile passen */
+  flex: 1 1 45%;
   background-color: #f9f9f9;
   border: 2px solid #e0e0e0;
   border-radius: 4px;
@@ -141,12 +152,12 @@ input:hover {
   font-weight: bold;
 }
 
-.option .teacher {
+.option .teacher,
+.option .description {
   font-size: 14px;
 }
 
 .option .description {
-  font-size: 14px;
   margin-top: 10px;
 }
 
@@ -155,25 +166,13 @@ input:hover {
   font-style: italic;
 }
 
-button {
-  width: 100%;
-  padding: 10px;
-  background-color: #1b4485;
-  color: #fff;
+.option.nohover {
   border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-  font-size: 20px;
-}
-
-button:disabled {
-  background-color: #ccc;
-  cursor: not-allowed;
+  cursor: default;
 }
 
-button:not(:disabled):hover {
-  background-color: #f89e24;
+.option.nohover:hover {
+  border: none;
 }
 
 .credits {
@@ -186,8 +185,8 @@ button:not(:disabled):hover {
 
 .delete-button {
   width: 30px;
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
   height: 100%;
   background-color: transparent;
   color: black;
@@ -203,15 +202,7 @@ button:not(:disabled):hover {
 }
 
 .extrafield input {
-  margin: 0px;
-}
-
-.option.nohover {
-  border: none;
-  cursor: default;
-}
-.option.nohover:hover {
-  border: none;
+  margin: 0;
 }
 
 .admin {
@@ -239,13 +230,16 @@ button:not(:disabled):hover {
   margin: 20px;
   cursor: pointer;
 }
+
 .assignments-option:hover {
   background-color: #e0e0e0;
 }
+
 .assignments-title {
   font-size: 20px;
   font-weight: bold;
 }
+
 .assignments-info {
   display: flex;
   justify-content: space-between;
@@ -254,6 +248,7 @@ button:not(:disabled):hover {
   user-select: none;
   gap: 3px;
 }
+
 .attention .assignments-numbers {
   color: red;
 }
@@ -269,9 +264,11 @@ button:not(:disabled):hover {
   width: 65vw;
   overflow: auto;
 }
+
 .left.small {
   width: max-content;
 }
+
 .right {
   width: 65vw;
   overflow: auto;
@@ -316,6 +313,7 @@ button:not(:disabled):hover {
   user-select: none;
   background-color: #e0e0e0;
 }
+
 .action:hover {
   background-color: #e4e4e4;
 }
@@ -325,6 +323,7 @@ button:not(:disabled):hover {
   color: #1b4485;
   outline: 1px solid black;
 }
+
 .project-link:hover {
   color: #f89e24;
 }
@@ -344,7 +343,15 @@ button:not(:disabled):hover {
 .flex-row {
   display: flex;
   justify-content: space-between;
+  gap: 20px;
+}
+
+.flex-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
 }
+
 .column {
   display: block;
 }
@@ -353,19 +360,13 @@ button:not(:disabled):hover {
   width: 400%;
 }
 
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.help > h2{
+.help > h2 {
   margin-bottom: 10px !important;
 }
 
-.fixed-action{
-  position: fixed; 
-  bottom: 1rem; 
+.fixed-action {
+  position: fixed;
+  bottom: 1rem;
   right: 1rem;
 }
 
@@ -377,61 +378,116 @@ input::-webkit-inner-spin-button {
 .justify-between {
   justify-content: space-between;
   align-items: center;
-
 }
 
-.align-center{
+.align-center {
   display: flex;
   gap: 10px;
   align-items: center;
 }
 
-.justify-end{
-  flex:1;
+.justify-end {
+  flex: 1;
   display: flex;
   justify-content: flex-end;
   align-items: center;
-
 }
 
-.p-10{
+.p-10 {
   padding: 10px;
 }
 
-.w-100{
+.w-100 {
   width: 100%;
 }
 
-.no-display{
+.no-display {
   display: none;
 }
 
-@media only screen and (max-width: 600px) {
-  .vote {
+.time-label {
+  font-size: 12px;
+  font-style: italic;
+  text-align: center;
+  width: 100%;
+  margin-top: -40px;
+  margin-bottom: 50px;
+}
+
+.container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.card {
+  width: 60vw;
+  padding: 50px !important;
+  margin: 50px;
+}
+
+.option-card {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 20px;
+  flex: 1 1 45%;
+}
+
+.option-card.selected {
+  border: 5px solid rgb(var(--mdui-color-primary)) !important;
+}
+
+.button-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+@media (max-width: 800px) {
+  .card {
     width: 100%;
-    margin: 0px;
+    padding: 15px !important;
+    margin: 0;
+    min-height: 100dvh;
   }
-  .option {
+
+  .option-card {
+    width: 100%;
     flex: 1 1 100%;
   }
+
   .flex-row {
     flex-direction: column;
+    gap: 10px;
+  }
+
+  .button-container {
+    flex-direction: column;
+    gap: 10px;
   }
+
+  .vote-title {
+    font-size: 30px !important;
+  }
+
+    .vote {
+    width: 100%;
+    margin: 0;
+  }
+
+  .option {
+    flex: 1 1 100%;
+  }
+
   .column {
     display: flex;
     flex-direction: column;
     margin-bottom: 10px;
   }
+
   .grade {
     width: calc(100% - 20px);
   }
-}
 
-.time-label {
-  font-size: 12px;
-  font-style: italic;
-  text-align: center;
-  width: 100%;
-  margin-top: -40px;
-  margin-bottom: 50px;
-}
+}
\ No newline at end of file
diff --git a/src/vote.css b/src/vote.css
deleted file mode 100644
index a5a5420..0000000
--- a/src/vote.css
+++ /dev/null
@@ -1,77 +0,0 @@
-.container {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.card {
-  width: 60vw;
-  padding: 50px !important;
-  margin: 50px;
-}
-
-@media (max-width: 768px) {
-  .card {
-    width: 100%;
-    padding: 15px !important;
-    margin: 0;
-    min-height: 100vh;
-  }
-}
-
-.option-card {
-  width: 50%;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 20px;
-  flex: 1 1 45%;
-}
-
-.option-card.selected {
-  border: 5px solid rgb(var(--mdui-color-primary)) !important;
-}
-
-@media (max-width: 768px) {
-  .option-card {
-    width: 100%;
-    flex: 1 1 100%;
-  }
-}
-
-.flex-row {
-  display: flex;
-  flex-direction: row;
-  gap: 20px;
-}
-
-@media (max-width: 768px) {
-  .flex-row {
-    flex-direction: column;
-    gap: 10px;
-  }
-}
-
-.flex-wrap {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-}
-
-.button-container {
-  display: flex;
-  justify-content: space-between;
-}
-
-@media (max-width: 768px) {
-  .button-container {
-    flex-direction: column;
-    gap: 10px;
-  }
-}
-
-@media (max-width: 768px) {
-  .vote-title {
-    font-size: 30px !important;
-  }
-}