diff --git a/frontend/.env.development b/frontend/.env.development
index 334871c..4d7568c 100644
--- a/frontend/.env.development
+++ b/frontend/.env.development
@@ -1 +1 @@
-VUE_APP_API_BASE_URL=http://localhost:8000/
\ No newline at end of file
+VUE_APP_API_BASE_URL=http://127.0.0.1:8000/api/
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 54e11f2..e1cb7cb 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16,11 +16,16 @@
       "devDependencies": {
         "@babel/core": "^7.12.16",
         "@babel/eslint-parser": "^7.12.16",
+        "@babel/preset-typescript": "^7.12.0",
         "@vue/cli-plugin-babel": "~5.0.0",
         "@vue/cli-plugin-eslint": "~5.0.0",
+        "@vue/cli-plugin-typescript": "^5.0.8",
         "@vue/cli-service": "~5.0.0",
+        "@vue/tsconfig": "^0.4.0",
         "eslint": "^7.32.0",
-        "eslint-plugin-vue": "^8.0.3"
+        "eslint-plugin-vue": "^8.0.3",
+        "ts-loader": "^9.5.1",
+        "typescript": "~4.9.0"
       }
     },
     "node_modules/@achrinza/node-ipc": {
@@ -744,6 +749,22 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.9.tgz",
+      "integrity": "sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-syntax-unicode-sets-regex": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
@@ -1554,6 +1575,26 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.26.3.tgz",
+      "integrity": "sha512-6+5hpdr6mETwSKjmJUdYw0EIkATiQhnELWlE3kJFBwSg/BGIVwVaVbX+gOXBCdc7Ln1RXZxyWGecIXhUfnl7oA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.25.9",
+        "@babel/helper-create-class-features-plugin": "^7.25.9",
+        "@babel/helper-plugin-utils": "^7.25.9",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9",
+        "@babel/plugin-syntax-typescript": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-unicode-escapes": {
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.9.tgz",
@@ -1720,6 +1761,26 @@
         "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
       }
     },
+    "node_modules/@babel/preset-typescript": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.26.0.tgz",
+      "integrity": "sha512-NMk1IGZ5I/oHhoXEElcm+xUnL/szL6xflkFZmoEU9xj1qSJXpiS7rsspYo92B4DRCDvZn2erT5LdsCeXAKNCkg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.25.9",
+        "@babel/helper-validator-option": "^7.25.9",
+        "@babel/plugin-syntax-jsx": "^7.25.9",
+        "@babel/plugin-transform-modules-commonjs": "^7.25.9",
+        "@babel/plugin-transform-typescript": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/runtime": {
       "version": "7.26.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
@@ -2342,6 +2403,13 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/webpack-env": {
+      "version": "1.18.5",
+      "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.18.5.tgz",
+      "integrity": "sha512-wz7kjjRRj8/Lty4B+Kr0LN6Ypc/3SymeCCGSbaXp2leH0ZVg/PriNiOwNj4bD4uphI7A8NXS4b6Gl373sfO5mA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.5.13",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.13.tgz",
@@ -2666,6 +2734,39 @@
         "@vue/cli-service": "^3.0.0 || ^4.0.0 || ^5.0.0-0"
       }
     },
+    "node_modules/@vue/cli-plugin-typescript": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-typescript/-/cli-plugin-typescript-5.0.8.tgz",
+      "integrity": "sha512-JKJOwzJshBqsmp4yLBexwVMebOZ4VGJgbnYvmHVxasJOStF2RxwyW28ZF+zIvASGdat4sAUuo/3mAQyVhm7JHg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.12.16",
+        "@types/webpack-env": "^1.15.2",
+        "@vue/cli-shared-utils": "^5.0.8",
+        "babel-loader": "^8.2.2",
+        "fork-ts-checker-webpack-plugin": "^6.4.0",
+        "globby": "^11.0.2",
+        "thread-loader": "^3.0.0",
+        "ts-loader": "^9.2.5",
+        "webpack": "^5.54.0"
+      },
+      "peerDependencies": {
+        "@vue/cli-service": "^3.0.0 || ^4.0.0 || ^5.0.0-0",
+        "cache-loader": "^4.1.0",
+        "typescript": ">=2",
+        "vue": "^2 || ^3.2.13",
+        "vue-template-compiler": "^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "cache-loader": {
+          "optional": true
+        },
+        "vue-template-compiler": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vue/cli-plugin-vuex": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.8.tgz",
@@ -3023,6 +3124,13 @@
       "integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==",
       "license": "MIT"
     },
+    "node_modules/@vue/tsconfig": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@vue/tsconfig/-/tsconfig-0.4.0.tgz",
+      "integrity": "sha512-CPuIReonid9+zOG/CGTT05FXrPYATEqoDGNrEaqS4hwcw5BUNM2FguC0mOwJD4Jr16UpRVl9N0pY3P+srIbqmg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@vue/vue-loader-v15": {
       "name": "vue-loader",
       "version": "15.11.1",
@@ -6367,6 +6475,132 @@
         }
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.3.tgz",
+      "integrity": "sha512-SbH/l9ikmMWycd5puHJKTkZJKddF4iRLyW3DeZ08HTI7NGyLS38MXd/KGgeWumQO7YNQbW2u/NtPT2YowbPaGQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.8.3",
+        "@types/json-schema": "^7.0.5",
+        "chalk": "^4.1.0",
+        "chokidar": "^3.4.2",
+        "cosmiconfig": "^6.0.0",
+        "deepmerge": "^4.2.2",
+        "fs-extra": "^9.0.0",
+        "glob": "^7.1.6",
+        "memfs": "^3.1.2",
+        "minimatch": "^3.0.4",
+        "schema-utils": "2.7.0",
+        "semver": "^7.3.2",
+        "tapable": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "yarn": ">=1.0.0"
+      },
+      "peerDependencies": {
+        "eslint": ">= 6",
+        "typescript": ">= 2.7",
+        "vue-template-compiler": "*",
+        "webpack": ">= 4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        },
+        "vue-template-compiler": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/cosmiconfig": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.7.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
+      "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.4",
+        "ajv": "^6.12.2",
+        "ajv-keywords": "^3.4.1"
+      },
+      "engines": {
+        "node": ">= 8.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/tapable": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
+      "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
@@ -10971,6 +11205,67 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/ts-loader": {
+      "version": "9.5.1",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.5.1.tgz",
+      "integrity": "sha512-rNH3sK9kGZcH9dYzC7CewQm4NtxJTjSEVRJ2DyBZR7f8/wcta+iV44UPCXc5+nzDzivKtlzV6c9P4e+oFhDLYg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "enhanced-resolve": "^5.0.0",
+        "micromatch": "^4.0.0",
+        "semver": "^7.3.4",
+        "source-map": "^0.7.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "typescript": "*",
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/ts-loader/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/ts-loader/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/ts-loader/node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -11015,6 +11310,20 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/undici-types": {
       "version": "6.19.8",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 6c908a3..e7f9fc1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,11 +16,16 @@
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
+    "@babel/preset-typescript": "^7.12.0",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-typescript": "^5.0.8",
     "@vue/cli-service": "~5.0.0",
+    "@vue/tsconfig": "^0.4.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3"
+    "eslint-plugin-vue": "^8.0.3",
+    "ts-loader": "^9.5.1",
+    "typescript": "~4.9.0"
   },
   "eslintConfig": {
     "root": true,
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index bf144e3..8583b77 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,21 +1,16 @@
 <template>
   <div id="app">
-    <VideoDetails class="big-title"/>
+    <router-view class="big-title"/>
   </div>
 </template>
 
 <script>
-import VideoDetails from "./components/LatestVideo.vue";
-
 export default {
-  components: {
-    VideoDetails,
-  },
+  name: 'App'
 };
 </script>
 
 <style>
-
 *,
 *::before,
 *::after {
@@ -24,11 +19,10 @@ export default {
   box-sizing: border-box;
 }
 
-
 .big-title {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Countdown.vue b/frontend/src/components/Countdown.vue
new file mode 100644
index 0000000..e3d2173
--- /dev/null
+++ b/frontend/src/components/Countdown.vue
@@ -0,0 +1,23 @@
+<template>
+
+</template>
+
+
+
+
+<script setup>
+
+var next_upload_date = new Date()
+console.log(next_upload_date)
+
+next_upload_date.setDate(new Date().getDate)
+console.log(next_upload_date)
+
+
+</script>
+
+
+
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/UploadTimer.vue b/frontend/src/components/UploadTimer.vue
new file mode 100644
index 0000000..ab56c68
--- /dev/null
+++ b/frontend/src/components/UploadTimer.vue
@@ -0,0 +1,90 @@
+<template>
+    <div class="background-container">
+    <div class="countdown-timer">
+      <p>Next video upload in:</p>
+      <p>
+        {{ countdown.hours }} hours, {{ countdown.minutes }} minutes, {{ countdown.seconds }} seconds
+      </p>
+    </div>
+</div>
+</template>
+  
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+  
+/**
+ * Calculates the next occurrence of noon (12pm UTC).
+ * @returns {Date} - A Date object representing the next noon.
+ */
+function getNextNoon() {
+    const now = new Date();
+    const nextNoon = new Date();
+  
+    nextNoon.setHours(12, 0, 0, 0); 
+    if (now >= nextNoon) {
+      nextNoon.setDate(nextNoon.getDate() + 1); 
+    }
+    return nextNoon;
+  }
+  
+const countdown = ref({
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  });
+  
+let interval = null;
+  
+/**
+ * Get a countdown to the next upload time (12pm UTC).
+ * @param {Function} callback - A function to handle the countdown values.
+ */
+function updateCountdown() {
+    const now = new Date().getTime();
+    const nextUpload = getNextNoon().getTime();
+  
+    const timeDistance = nextUpload - now;
+    if (timeDistance <= 0) {
+      clearInterval(interval); 
+      countdown.value = { hours: 0, minutes: 0, seconds: 0 };
+      return;
+    }
+  
+    countdown.value.hours = Math.floor(
+      (timeDistance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+    );
+    countdown.value.minutes = Math.floor(
+      (timeDistance % (1000 * 60 * 60)) / (1000 * 60)
+    );
+    countdown.value.seconds = Math.floor((timeDistance % (1000 * 60)) / 1000);
+  }
+  
+
+onMounted(() => {
+    updateCountdown(); 
+    interval = setInterval(updateCountdown, 1000); 
+  });
+  
+onUnmounted(() => {
+    clearInterval(interval); 
+  });
+</script>
+  
+<style scoped>
+.countdown-timer {
+    font-family: Arial, sans-serif;
+    color: #444;
+    text-align: center;
+    padding: 10px;
+}
+
+.background-container {
+  background-image: linear-gradient(to right, #3b3933 , rgb(66, 46, 1));
+  background-size: cover;
+  min-height: 100vh;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+</style>
+  
\ No newline at end of file
diff --git a/frontend/src/main.js b/frontend/src/main.ts
similarity index 100%
rename from frontend/src/main.js
rename to frontend/src/main.ts
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.ts
similarity index 75%
rename from frontend/src/router/index.js
rename to frontend/src/router/index.ts
index 4746b64..f3087dc 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.ts
@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import LatestVideo from '@/components/LatestVideo.vue'; 
+import UploadTimer from '@/components/UploadTimer.vue';
 
 const routes = [
   {
@@ -10,6 +11,10 @@ const routes = [
     path: '/today/videos/latest',
     component: LatestVideo, 
   },
+  {
+    path: '/today/videos/next',
+    component: UploadTimer
+  },
 ];
 
 const router = createRouter({
diff --git a/frontend/src/shims-vue.d.ts b/frontend/src/shims-vue.d.ts
new file mode 100644
index 0000000..3804a43
--- /dev/null
+++ b/frontend/src/shims-vue.d.ts
@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..fd294ce
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env",
+      "node"
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ],
+  "vueCompilerOptions": {
+    "target": 3,
+    "experimentalDisableTemplateSupport": false
+  }
+}
\ No newline at end of file
diff --git a/frontend/vue.config.js b/frontend/vue.config.js
index 910e297..598b02d 100644
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@@ -1,4 +1,23 @@
 const { defineConfig } = require('@vue/cli-service')
+
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  configureWebpack: {
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          loader: 'ts-loader',
+          options: {
+            appendTsSuffixTo: [/\.vue$/],
+            transpileOnly: true
+          }
+        }
+      ]
+    },
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js', '.vue']
+    }
+  }
 })
+