diff --git a/src/global.css b/src/global.css
index 8eee2cd..19c53a2 100644
--- a/src/global.css
+++ b/src/global.css
@@ -1,11 +1,12 @@
 body {
   background-color: #353535;
   font-family: 'Iosevka', sans-serif;
+  margin: 0;
 }
 
 @font-face {
   font-family: 'Iosevka';
-  src: url('/public/fonts/sgr_iosevka_regular.woff2') format('woff2');
+  src: url('/fonts/sgr_iosevka_regular.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
 }
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index c7af5fe..5979ecf 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,7 @@ import App from './App.vue'
 import NowPlaying from './components/now-playing.vue'
 import GeneralXd from './components/general-xd.vue'
 import './global.css'
+import TvPlayer from './pages/tv-player.vue'
 
 const Home = {
   render() {
@@ -15,6 +16,7 @@ const Home = {
 const routes = [
   { path: '/', component: Home },
   { path: '/nowplay', component: NowPlaying },
+  { path: '/player', component: TvPlayer },
 ]
 
 export const router = createRouter({
diff --git a/src/pages/tv-player.vue b/src/pages/tv-player.vue
new file mode 100644
index 0000000..4b75c58
--- /dev/null
+++ b/src/pages/tv-player.vue
@@ -0,0 +1,41 @@
+<style scoped>
+.bg {
+  background-color: black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+}
+
+div {
+  margin: 0;
+  padding: 0;
+}
+
+.screen {
+  background-color: white;
+  aspect-ratio: 4 / 3;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+}
+
+p {
+  font-family: sans-serif;
+  color: black;
+  /* margin: 0; */
+  /* font-size: x-large; */
+}
+</style>
+
+<template>
+  <div class="bg">
+    <div class="screen">
+      <p>hello?...</p>
+    </div>
+  </div>
+</template>