diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index cbfa5e4c..5c200e55 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -1,5 +1,5 @@
 <template>
-    <h1 v-t="'titles.feed'" class="my-4 text-center font-bold" />
+    <h1 v-t="'titles.feed'" class="my-4 text-center font-bold p-15" />
 
     <div class="flex flex-col flex-wrap gap-2 children:(flex items-center gap-1) md:flex-row md:items-center">
         <span>
diff --git a/src/components/ImportPage.vue b/src/components/ImportPage.vue
index 91825a65..4d36f035 100644
--- a/src/components/ImportPage.vue
+++ b/src/components/ImportPage.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="text-center">
+    <div class="text-center p-15">
         <form>
             <div>
                 <input ref="fileSelector" type="file" @change="fileChange" />
diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
index 459c79b6..7148a719 100644
--- a/src/components/LoginPage.vue
+++ b/src/components/LoginPage.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex justify-center">
+    <div class="flex justify-center p-15">
         <h1 v-t="'titles.login'" class="my-4 text-center font-bold" />
         <i class="i-fa6-solid:circle-info ml-2 mt-6 cursor-pointer" :title="$t('info.login_note')" />
     </div>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 1ce4d3a9..0cb8fabe 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,6 +1,6 @@
 <template>
     <nav class="fixed top-0 left-0 w-full flex flex-wrap items-center justify-center px-2 pb-2.5 sm:px-4 bg-dark-4">
-        <div class="flex flex-1 justify-start">
+        <div class="flex flex-1 justify-start p-2">
             <router-link class="flex items-center text-3xl font-bold font-sans" :to="homePagePath"
                 ><img
                     alt="logo"
diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index 4bf99118..198b65d9 100644
--- a/src/components/PlaylistPage.vue
+++ b/src/components/PlaylistPage.vue
@@ -6,7 +6,7 @@
 
         <CollapsableText v-if="playlist?.description" :text="playlist.description" />
 
-        <div class="mt-1 flex justify-between <md:flex-col md:items-center">
+        <div class="mt-1 flex justify-between <md:flex-col md:items-center p-15">
             <div>
                 <router-link class="link flex items-center gap-3" :to="playlist.uploaderUrl || '/'">
                     <img loading="lazy" :src="playlist.uploaderAvatar" class="h-12 rounded-full" />
diff --git a/src/components/PlaylistVideos.vue b/src/components/PlaylistVideos.vue
index 67da19f1..536da4cf 100644
--- a/src/components/PlaylistVideos.vue
+++ b/src/components/PlaylistVideos.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="scrollable" class="h-screen-sm overflow-x-scroll">
+    <div ref="scrollable" class="h-screen-sm overflow-x-scroll p-15">
         <VideoItem
             v-for="(related, index) in playlist.relatedStreams"
             :key="related.url"
diff --git a/src/components/PlaylistsPage.vue b/src/components/PlaylistsPage.vue
index 2f74bc48..1a609018 100644
--- a/src/components/PlaylistsPage.vue
+++ b/src/components/PlaylistsPage.vue
@@ -1,7 +1,7 @@
 <template>
     <h2 v-t="'titles.playlists'" class="my-4 font-bold" />
 
-    <div class="mb-3 flex justify-between">
+    <div class="mb-3 flex justify-between p-15">
         <button v-t="'actions.create_playlist'" class="btn" @click="showCreatePlaylistModal = true" />
         <div class="flex">
             <button v-if="playlists.length > 0" v-t="'actions.export_to_json'" class="btn" @click="exportPlaylists" />
diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index 9259360d..04e636a7 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex">
+    <div class="flex p-15">
         <button @click="$router.go(-1) || $router.push('/')">
             <i class="i-fa6-solid:chevron-left" /><span v-t="'actions.back'" class="ml-1.5" />
         </button>
diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue
index 52139d1b..765bf83b 100644
--- a/src/components/RegisterPage.vue
+++ b/src/components/RegisterPage.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex justify-center">
+    <div class="flex justify-center p-15">
         <h1 v-t="'titles.register'" class="my-4 text-center font-bold" />
         <i class="i-fa6-solid:circle-info ml-2 mt-6 cursor-pointer" :title="$t('info.register_note')" />
     </div>
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 54d0cd4d..63a3b723 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -1,5 +1,5 @@
 <template>
-    <h1 class="my-2 text-center" v-text="$route.query.search_query" />
+    <h1 class="my-2 text-center p-15" v-text="$route.query.search_query" />
 
     <label for="ddlSearchFilters">
         <strong v-text="`${$t('actions.filter')}:`" />
diff --git a/src/components/SubscriptionsPage.vue b/src/components/SubscriptionsPage.vue
index 0fdce6bf..8e8839f5 100644
--- a/src/components/SubscriptionsPage.vue
+++ b/src/components/SubscriptionsPage.vue
@@ -1,5 +1,5 @@
 <template>
-    <h1 v-t="'titles.subscriptions'" class="my-4 text-center font-bold" />
+    <h1 v-t="'titles.subscriptions'" class="my-4 text-center font-bold p-15" />
     <!-- import / export section -->
     <div class="flex flex-wrap justify-between">
         <div class="flex gap-1">
diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue
index 34d0bf22..8fd9199b 100644
--- a/src/components/TrendingPage.vue
+++ b/src/components/TrendingPage.vue
@@ -1,5 +1,5 @@
 <template>
-    <h1 v-t="'titles.trending'" class="my-4 text-center font-bold" />
+    <h1 v-t="'titles.trending'" class="my-4 text-center font-bold p-15" />
 
     <hr />
 
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 214e731b..fb4afdc2 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="video && isEmbed" class="absolute left-0 top-0 z-50 h-full w-full bg-black">
+    <div v-if="video && isEmbed" class="absolute left-0 z-50 h-full w-full bg-black">
         <VideoPlayer
             ref="videoPlayer"
             :video="video"