diff --git a/nginx/vue/src/components/spotify/Listening.vue b/nginx/vue/src/components/spotify/Listening.vue
index ad5533e..fa2e1e2 100644
--- a/nginx/vue/src/components/spotify/Listening.vue
+++ b/nginx/vue/src/components/spotify/Listening.vue
@@ -1,11 +1,11 @@
 <template>
-    <div v-if="song.is_playing" class="spotify-now-playing">
+    <div v-if="song.is_playing" class="center-content">
         <img :src="song.item.album.images[0].url" />
         <p><strong>Song:</strong> {{ song.item.name }}</p>
         <p><strong>Artist:</strong> {{ song.item.artists[0].name }}</p>
         <p>Is what im currently listening to rnrnrn ^_^</p>
     </div>
-    <div v-else class="spotify-not-playing">
+    <div v-else class="center-content">
         <img src="/img/Untitled.png" />
         <p>I ain't listenin to nofin</p>
     </div>
@@ -40,21 +40,3 @@ export default {
     },
 };
 </script>
-
-<style scoped>
-.spotify-now-playing {
-    width: fit-content;
-    height: fit-content;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    box-shadow: 3px;
-}
-
-.spotify-not-playing {
-    border: 2px solid black;
-    align-items: center;
-    text-align: center;
-    background: white;
-}
-</style>
diff --git a/nginx/vue/src/components/spotify/Recent.vue b/nginx/vue/src/components/spotify/Recent.vue
index efff793..aac151d 100644
--- a/nginx/vue/src/components/spotify/Recent.vue
+++ b/nginx/vue/src/components/spotify/Recent.vue
@@ -2,12 +2,11 @@
     <div
         v-for="(song, idx) in played"
         :key="song.track.id || idx"
-        class="spotify-now-playing"
+        class="tile1"
     >
         <img :src="song.track.album.images[0].url" />
         <p><strong>Song:</strong> {{ song.track.name }}</p>
         <p><strong>Artist:</strong> {{ song.track.artists[0].name }}</p>
-        <p>Is what im currently listening to rnrnrn ^_^</p>
     </div>
 </template>
 
@@ -40,21 +39,3 @@ export default {
     },
 };
 </script>
-
-<style scoped>
-.spotify-now-playing {
-    width: fit-content;
-    height: fit-content;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    box-shadow: 3px;
-}
-
-.spotify-not-playing {
-    border: 2px solid black;
-    align-items: center;
-    text-align: center;
-    background: white;
-}
-</style>
diff --git a/nginx/vue/src/views/Home.vue b/nginx/vue/src/views/Home.vue
index fa030a6..de96ac5 100644
--- a/nginx/vue/src/views/Home.vue
+++ b/nginx/vue/src/views/Home.vue
@@ -6,16 +6,16 @@ import Radio from "@/components/Radio.vue";
 
 <template>
     <main>
-        <div class="bordered-1">
-            <div class="bordered-2">
+        <div class="border1 tile1">
+            <div class="border2">
                 <img src="/img/epic.jpeg" />
                 <h1>Welcome</h1>
                 <p>Hi im Adam</p>
             </div>
         </div>
 
-        <div class="bordered-1">
-            <div class="bordered-2">
+        <div class="border1 tile1">
+            <div class="border2">
                 <!-- <video>
                     <source src="/img/memes/1761540684738196.webm" />
                 </video> -->
@@ -49,17 +49,17 @@ import Radio from "@/components/Radio.vue";
             </div>
         </div> -->
 
-        <div class="bordered-1">
-            <SpotifyListening class="border" />
+        <div class="border1 tile1">
+            <SpotifyListening class="border2 bg-white" />
         </div>
 
-        <div class="bordered-1">
-            <SpotifyRecent class="border" />
-        </div>
-
-        <div class="bordered-1">
+        <div class="border1 tile1">
             <Radio />
         </div>
+
+        <div class="border1 tile3">
+            <SpotifyRecent class="border" />
+        </div>
     </main>
 </template>