diff --git a/app/resources/css/app.css b/app/resources/css/app.css
index cc022fb..461a43c 100644
--- a/app/resources/css/app.css
+++ b/app/resources/css/app.css
@@ -1,17 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Work+Sans&display=swap");
 
-@import "@fortawesome/fontawesome-free/css/fontawesome.css";
-@import "@fortawesome/fontawesome-free/css/brands.css";
-@import "@fortawesome/fontawesome-free/css/solid.css";
-
-.light {
-    @import 'highlight.js/styles/github.css';
-}
-
-.dark {
-    @import 'highlight.js/styles/github-dark.css';
-}
-
 @import "tailwindcss";
 
 @custom-variant dark (&:where(.dark, .dark *));
@@ -25,14 +13,21 @@
     --font-sans: Work Sans;
 }
 
-@import "./markdown.css";
+@import "@fortawesome/fontawesome-free/css/fontawesome.css";
+@import "@fortawesome/fontawesome-free/css/brands.css";
+@import "@fortawesome/fontawesome-free/css/solid.css";
 
 /* @plugin "@tailwindcss/typography"; */
+@import "./markdown.css";
+
+.light {
+    @import 'highlight.js/styles/github.css';
+}
+
+.dark {
+    @import 'highlight.js/styles/github-dark.css';
+}
 
 [x-cloak] {
     @apply hidden;
 }
-
-.footer-icon {
-    @apply w-6 h-6;
-}
diff --git a/app/views/components/file.twig b/app/views/components/file.twig
index 3092fd0..760f82e 100644
--- a/app/views/components/file.twig
+++ b/app/views/components/file.twig
@@ -18,7 +18,7 @@
         {% if file.isFile %}
             <div class="ml-2">
                 <button title="{{ translate('file.info') }}" @click.prevent="$dispatch('show-file-info', { file: '{{ url(file.getPathname) | escape('js') }}' })"
-                    class="justify-center items-center rounded-full w-8 h-8 -m-1 cursor-pointer md:invisible hover:bg-slate-300 hover:shadow-sm dark:hover:bg-violet-900 group-hover:visible"
+                    class="justify-center items-center rounded-full w-8 h-8 -m-1 cursor-pointer transition md:invisible hover:bg-slate-300 hover:shadow-sm hover:scale-110 dark:hover:bg-violet-900 group-hover:visible"
                 >
                     <i class="fas fa-info-circle"></i>
                 </button>
diff --git a/app/views/components/footer.twig b/app/views/components/footer.twig
index 6189304..f0b1dd8 100644
--- a/app/views/components/footer.twig
+++ b/app/views/components/footer.twig
@@ -5,16 +5,20 @@
         </p>
 
         <div class="flex">
-            <a href="https://github.com/DirectoryLister/DirectoryLister" title="GitHub" class="text-slate-400 mx-2 hover:text-github">
-                <i class="fab fa-github fa-lg"></i>
+            <a href="https://github.com/DirectoryLister/DirectoryLister" title="GitHub" class="text-slate-400 mx-2 transition hover:text-github hover:scale-125 dark:hover:text-white">
+                <i class="fab fa-github fa-xl"></i>
             </a>
 
-            <a href="https://bsky.app/profile/directorylister.com" title="Bluesky" class="text-slate-400 mx-2 hover:text-bluesky">
-                <i class="fab fa-bluesky fa-lg"></i>
+            <a href="https://bsky.app/profile/directorylister.com" title="Bluesky" class="text-slate-400 mx-2 transition hover:text-bluesky hover:scale-125">
+                <i class="fab fa-bluesky fa-xl"></i>
             </a>
 
-            <a href="https://github.com/DirectoryLister/DirectoryLister/discussions" title="Discussions" class="text-slate-400 mx-2 hover:text-violet-600">
-                <i class="fas fa-comments fa-lg"></i>
+            <a href="https://github.com/DirectoryLister/DirectoryLister/discussions" title="Discussions" class="text-slate-400 mx-2 transition hover:text-violet-600 hover:scale-125">
+                <i class="fas fa-comments fa-xl"></i>
+            </a>
+
+            <a href="https://github.com/sponsors/PHLAK" title="Sponsor" class="text-slate-400 mx-2 transition hover:text-pink-600 hover:scale-125">
+                <i class="fas fa-heart fa-xl"></i>
             </a>
         </div>
     </div>
diff --git a/app/views/components/scroll-to-top.twig b/app/views/components/scroll-to-top.twig
index 55297aa..776bdff 100644
--- a/app/views/components/scroll-to-top.twig
+++ b/app/views/components/scroll-to-top.twig
@@ -2,7 +2,7 @@
     x-init="visible = window.scrollY > 10" x-show="visible" x-transition.opacity
 >
     <div class="container flex justify-end mx-auto px-4 py-10 xl:max-w-screen-xl">
-        <button title="{{ translate('scroll_to_top') }}" class="flex justify-center items-center w-12 h-12 right-0 rounded-full shadow-lg bg-sky-600 text-white cursor-pointer pointer-events-auto hover:bg-sky-700 dark:bg-violet-700 dark:hover:bg-violet-800"
+        <button title="{{ translate('scroll_to_top') }}" class="flex justify-center items-center w-12 h-12 right-0 rounded-full shadow-lg bg-sky-600 text-white cursor-pointer pointer-events-auto transition hover:bg-sky-700 dark:bg-violet-700 dark:hover:bg-violet-800 hover:scale-110"
             @click="window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });" @scroll.window="visible = window.scrollY > 10"
         >
             <i class="fas fa-arrow-up fa-lg"></i>