diff --git a/src/components/FloatingActions.astro b/src/components/FloatingActions.astro
new file mode 100644
index 0000000..985bf79
--- /dev/null
+++ b/src/components/FloatingActions.astro
@@ -0,0 +1,224 @@
+<div class="floating-actions">
+    <button
+        id="theme-toggle-fab"
+        aria-label="Toggle theme"
+        title="Toggle theme"
+    >
+        <svg
+            class="theme-toggle-icon"
+            viewBox="0 0 24 24"
+            width="20"
+            height="20"
+            aria-hidden="true"
+        >
+            <path
+                class="sun"
+                fill-rule="evenodd"
+                d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"
+            ></path>
+            <path
+                class="moon"
+                fill-rule="evenodd"
+                d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"
+            ></path>
+        </svg>
+    </button>
+
+    <button id="back-to-top" aria-label="Back to top" title="Back to top">
+        <svg
+            viewBox="0 0 24 24"
+            width="20"
+            height="20"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+        >
+            <path d="M18 15l-6-6-6 6"></path>
+        </svg>
+    </button>
+</div>
+
+<style>
+    .floating-actions {
+        position: fixed;
+        right: 1.25rem;
+        bottom: 1.25rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        z-index: 1000;
+    }
+
+    #theme-toggle-fab,
+    #back-to-top {
+        width: 3rem;
+        height: 3rem;
+        border: #a7a7a7 1.5px solid;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.92);
+        color: #222;
+        /* box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16); */
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        backdrop-filter: blur(6px);
+    }
+
+    #theme-toggle-fab {
+        position: relative;
+    }
+
+    #theme-toggle-fab {
+        position: relative;
+    }
+
+    .theme-toggle-icon {
+        width: 1.2rem;
+        height: 1.2rem;
+        fill: currentColor;
+    }
+
+    .theme-toggle-icon .sun,
+    .theme-toggle-icon .moon {
+        transform-origin: center;
+        transition:
+            opacity 0.2s ease,
+            transform 0.2s ease;
+    }
+
+    .theme-toggle-icon .sun {
+        opacity: 1;
+        transform: scale(1) rotate(0deg);
+    }
+
+    .theme-toggle-icon .moon {
+        opacity: 0;
+        transform: scale(0.75) rotate(-20deg);
+    }
+
+    :global(.dark) .theme-toggle-icon .sun {
+        opacity: 0;
+        transform: scale(0.75) rotate(20deg);
+    }
+
+    :global(.dark) .theme-toggle-icon .moon {
+        opacity: 1;
+        transform: scale(1) rotate(0deg);
+    }
+
+    #theme-toggle-fab,
+    #back-to-top {
+        /* opacity: 0; */
+        visibility: hidden;
+        transform: translateY(150px);
+        transition:
+            opacity 0.2s ease,
+            transform 0.27s ease,
+            visibility 0.2s ease;
+    }
+
+    #theme-toggle-fab.show,
+    #back-to-top.show {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+    }
+
+    #theme-toggle-fab.show:hover,
+    #back-to-top.show:hover {
+        transform: translateY(-2px);
+    }
+
+    :global(.dark) #theme-toggle-fab,
+    :global(.dark) #back-to-top {
+        background: rgba(34, 34, 34, 0.92);
+        color: #f5f5f5;
+        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
+        border: #515151 2px solid;
+    }
+
+    @media (max-width: 640px) {
+        .floating-actions {
+            right: 1rem;
+            bottom: 1rem;
+            gap: 0.65rem;
+        }
+
+        #theme-toggle-fab,
+        #back-to-top {
+            width: 2.75rem;
+            height: 2.75rem;
+        }
+    }
+</style>
+
+<script>
+    const initFloatingActions = () => {
+        const backToTop = document.getElementById("back-to-top");
+        const themeToggle = document.getElementById("theme-toggle-fab");
+
+        if (backToTop && backToTop.dataset.bound !== "true") {
+            const toggleBackToTop = () => {
+                if (window.scrollY > 300) {
+                    backToTop.classList.add("show");
+                } else {
+                    backToTop.classList.remove("show");
+                }
+            };
+
+            backToTop.addEventListener("click", () => {
+                window.scrollTo({
+                    top: 0,
+                    behavior: "smooth",
+                });
+            });
+
+            window.addEventListener("scroll", toggleBackToTop, {
+                passive: true,
+            });
+            toggleBackToTop();
+            backToTop.dataset.bound = "true";
+        }
+
+        if (themeToggle && themeToggle.dataset.bound !== "true") {
+            const togglethemeToggle = () => {
+                if (window.scrollY > 300) {
+                    themeToggle.classList.add("show");
+                } else {
+                    themeToggle.classList.remove("show");
+                }
+            };
+
+            const root = document.documentElement;
+
+            const applyTheme = (theme: string) => {
+                if (theme === "dark") {
+                    root.classList.add("dark");
+                    localStorage.setItem("color-theme", "dark");
+                } else {
+                    root.classList.remove("dark");
+                    localStorage.setItem("color-theme", "light");
+                }
+            };
+
+            themeToggle.addEventListener("click", () => {
+                const isDark = root.classList.contains("dark");
+                applyTheme(isDark ? "light" : "dark");
+            });
+
+            window.addEventListener("scroll", togglethemeToggle, {
+                passive: true,
+            });
+
+            togglethemeToggle();
+            themeToggle.dataset.bound = "true";
+        }
+    };
+
+    initFloatingActions();
+    document.addEventListener("astro:page-load", initFloatingActions);
+</script>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index e555598..66bacf7 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -3,6 +3,7 @@ import Footer from "@/components/Footer.astro";
 import Header from "@/components/Header.astro";
 import { ClientRouter } from "astro:transitions";
 import SEO from "@/components/SEO.astro";
+import FloatingActions from "@/components/FloatingActions.astro";
 
 const {
 	pageTitle,
@@ -23,48 +24,7 @@ const {
 		<meta name="generator" content={Astro.generator} />
 		<title>{pageTitle}</title>
 	</head>
-	<div class="floating-actions">
-		<button
-			id="theme-toggle-fab"
-			aria-label="Toggle theme"
-			title="Toggle theme"
-		>
-			<svg
-				class="theme-toggle-icon"
-				viewBox="0 0 24 24"
-				width="20"
-				height="20"
-				aria-hidden="true"
-			>
-				<path
-					class="sun"
-					fill-rule="evenodd"
-					d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"
-				></path>
-				<path
-					class="moon"
-					fill-rule="evenodd"
-					d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"
-				></path>
-			</svg>
-		</button>
-
-		<button id="back-to-top" aria-label="Back to top" title="Back to top">
-			<svg
-				viewBox="0 0 24 24"
-				width="20"
-				height="20"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2.2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				aria-hidden="true"
-			>
-				<path d="M18 15l-6-6-6 6"></path>
-			</svg>
-		</button>
-	</div>
+	<FloatingActions />
 	<body>
 		<Header />
 		<main class="page-content">
@@ -81,184 +41,4 @@ const {
 		width: 100%;
 		height: 100%;
 	}
-
-	.floating-actions {
-		position: fixed;
-		right: 1.25rem;
-		bottom: 1.25rem;
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-		z-index: 1000;
-	}
-
-	#theme-toggle-fab,
-	#back-to-top {
-		width: 3rem;
-		height: 3rem;
-		border: #a7a7a7 1.5px solid;
-		border-radius: 999px;
-		background: rgba(255, 255, 255, 0.92);
-		color: #222;
-		/* box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16); */
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		backdrop-filter: blur(6px);
-	}
-
-	#theme-toggle-fab {
-		position: relative;
-	}
-
-	#theme-toggle-fab {
-		position: relative;
-	}
-
-	.theme-toggle-icon {
-		width: 1.2rem;
-		height: 1.2rem;
-		fill: currentColor;
-	}
-
-	.theme-toggle-icon .sun,
-	.theme-toggle-icon .moon {
-		transform-origin: center;
-		transition:
-			opacity 0.2s ease,
-			transform 0.2s ease;
-	}
-
-	.theme-toggle-icon .sun {
-		opacity: 1;
-		transform: scale(1) rotate(0deg);
-	}
-
-	.theme-toggle-icon .moon {
-		opacity: 0;
-		transform: scale(0.75) rotate(-20deg);
-	}
-
-	:global(.dark) .theme-toggle-icon .sun {
-		opacity: 0;
-		transform: scale(0.75) rotate(20deg);
-	}
-
-	:global(.dark) .theme-toggle-icon .moon {
-		opacity: 1;
-		transform: scale(1) rotate(0deg);
-	}
-
-	#theme-toggle-fab,
-	#back-to-top {
-		/* opacity: 0; */
-		visibility: hidden;
-		transform: translateY(150px);
-		transition:
-			opacity 0.2s ease,
-			transform 0.27s ease,
-			visibility 0.2s ease;
-	}
-
-	#theme-toggle-fab.show,
-	#back-to-top.show {
-		opacity: 1;
-		visibility: visible;
-		transform: translateY(0);
-	}
-
-	#theme-toggle-fab.show:hover,
-	#back-to-top.show:hover {
-		transform: translateY(-2px);
-	}
-
-	:global(.dark) #theme-toggle-fab,
-	:global(.dark) #back-to-top {
-		background: rgba(34, 34, 34, 0.92);
-		color: #f5f5f5;
-		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
-		border: #515151 2px solid;
-	}
-
-	@media (max-width: 640px) {
-		.floating-actions {
-			right: 1rem;
-			bottom: 1rem;
-			gap: 0.65rem;
-		}
-
-		#theme-toggle-fab,
-		#back-to-top {
-			width: 2.75rem;
-			height: 2.75rem;
-		}
-	}
 </style>
-
-<script>
-	const initFloatingActions = () => {
-		const backToTop = document.getElementById("back-to-top");
-		const themeToggle = document.getElementById("theme-toggle-fab");
-
-		if (backToTop && backToTop.dataset.bound !== "true") {
-			const toggleBackToTop = () => {
-				if (window.scrollY > 300) {
-					backToTop.classList.add("show");
-				} else {
-					backToTop.classList.remove("show");
-				}
-			};
-
-			backToTop.addEventListener("click", () => {
-				window.scrollTo({
-					top: 0,
-					behavior: "smooth",
-				});
-			});
-
-			window.addEventListener("scroll", toggleBackToTop, {
-				passive: true,
-			});
-			toggleBackToTop();
-			backToTop.dataset.bound = "true";
-		}
-
-		if (themeToggle && themeToggle.dataset.bound !== "true") {
-			const togglethemeToggle = () => {
-				if (window.scrollY > 300) {
-					themeToggle.classList.add("show");
-				} else {
-					themeToggle.classList.remove("show");
-				}
-			};
-
-			const root = document.documentElement;
-
-			const applyTheme = (theme: string) => {
-				if (theme === "dark") {
-					root.classList.add("dark");
-					localStorage.setItem("color-theme", "dark");
-				} else {
-					root.classList.remove("dark");
-					localStorage.setItem("color-theme", "light");
-				}
-			};
-
-			themeToggle.addEventListener("click", () => {
-				const isDark = root.classList.contains("dark");
-				applyTheme(isDark ? "light" : "dark");
-			});
-
-			window.addEventListener("scroll", togglethemeToggle, {
-				passive: true,
-			});
-
-			togglethemeToggle();
-			themeToggle.dataset.bound = "true";
-		}
-	};
-
-	initFloatingActions();
-	document.addEventListener("astro:page-load", initFloatingActions);
-</script>