diff --git a/src/App.svelte b/src/App.svelte
index 999e4e7..daa35b0 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -7,7 +7,6 @@
   import Cursor from '@components/layout/Cursor.svelte'
   import LanguageSwitcher from '@components/ui/LanguageSwitcher.svelte'
 
-  import Footer from '@components/layout/Footer.svelte'
   import Home from '@views/Home.svelte'
   import About from '@views/About.svelte'
   import Expertise from '@views/Expertise.svelte'
@@ -96,7 +95,6 @@
     {/each}
   </div>
 </main>
-<Footer />
 <LanguageSwitcher />
 
 <style>
@@ -129,7 +127,6 @@
 
   .main {
     position: relative;
-    z-index: 1;
     overflow: hidden;
     height: 100vh;
   }
diff --git a/src/components/layout/Footer.svelte b/src/components/layout/Footer.svelte
index 5cc29be..1858b61 100644
--- a/src/components/layout/Footer.svelte
+++ b/src/components/layout/Footer.svelte
@@ -32,7 +32,7 @@
   }
 </script>
 
-<footer class="site-footer">
+<footer class="page-scrollable-footer">
   <div class="footer-main">
 
     <!-- Logo -->
@@ -115,14 +115,17 @@
 </footer>
 
 <style>
-  .site-footer {
+  footer {
     width: 100vw;
     background: #0d0e22;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: -2;
+  }
+
+  :global(.about .page-scrollable-footer) {
+    margin-left: -16.6vw;
+  }
+  
+  :global(.blog .page-scrollable-footer) {
+    margin-left: -12.4vw;
   }
 
   /* --- Main row --- */
diff --git a/src/styles/layout.css b/src/styles/layout.css
index 44b6993..b0c36eb 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -17,11 +17,6 @@
 .page-scrollable {
   height: 100%;
   overflow-y: auto;
-  margin-bottom: var(--footer-height);
-}
-
-.page-scrollable .page-container {
-  margin-bottom: var(--footer-height);
 }
 
 /* Vertical Lines */
diff --git a/src/views/About.svelte b/src/views/About.svelte
index e4734b9..5c5c300 100644
--- a/src/views/About.svelte
+++ b/src/views/About.svelte
@@ -3,6 +3,7 @@
   import { slides } from '@state/slides.svelte'
 
   import { t } from '@i18n'
+  import Footer from '@components/layout/Footer.svelte'
 
   let { data } = $props()
 
@@ -152,9 +153,10 @@
         </div>
       </section>
     {/if}
-  
-  </div>
+
+    <Footer />
   </div>
+</div>
 
 
 <style>
diff --git a/src/views/Article.svelte b/src/views/Article.svelte
index c62fe69..5248d9c 100644
--- a/src/views/Article.svelte
+++ b/src/views/Article.svelte
@@ -5,6 +5,7 @@
    */
 
   import { t } from '@i18n'
+  import Footer from '@components/layout/Footer.svelte'
 
   let { data, onBack } = $props()
 
@@ -114,6 +115,7 @@
   {/if}
 </article>
 
+<Footer />
 </div>
 
 <style>
diff --git a/src/views/Blog.svelte b/src/views/Blog.svelte
index a2f354f..d4295b6 100644
--- a/src/views/Blog.svelte
+++ b/src/views/Blog.svelte
@@ -5,6 +5,7 @@
 
   import Article from '@views/Article.svelte'
   import { t } from '@i18n'
+  import Footer from '@components/layout/Footer.svelte'
 
   let { data } = $props()
 
@@ -176,6 +177,7 @@
         <p class="blog-loading">{t('loading')}</p>
       {/if}
 
+      <Footer />
     </div>
 
   {/if}