diff --git a/assets/scss/partials/footer.scss b/assets/scss/partials/footer.scss
new file mode 100644
index 0000000..44adb40
--- /dev/null
+++ b/assets/scss/partials/footer.scss
@@ -0,0 +1,41 @@
+#back-to-top {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 1000;
+  display: none;
+}
+
+#back-to-top button {
+  padding: 8px;
+  border: none;
+  border-radius: 8px;
+  background-color: var(--button-float-bg);
+  box-shadow: 0 3px 5px var(--button-float-shadow);
+  cursor: pointer;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease;
+}
+
+#back-to-top button:hover {
+  background-color: var(--button-float-bg-hover);
+  box-shadow: 0 5px 8px var(--button-float-shadow-hover);
+  transform: translateY(-2px);
+}
+
+#back-to-top button svg {
+  width: 16px;
+  height: 16px;
+  // fill: var(--button-float-arrow);
+  stroke: var(--button-float-arrow);
+  transition: stroke 0.3s ease;
+}
+
+#back-to-top button:hover svg {
+  // fill: var(--button-float-arrow);
+  stroke: var(--button-float-arrow);
+}
diff --git a/assets/scss/partials/variables.scss b/assets/scss/partials/variables.scss
new file mode 100644
index 0000000..fbb86d9
--- /dev/null
+++ b/assets/scss/partials/variables.scss
@@ -0,0 +1,18 @@
+/* 
+*   Footer back to top style
+*/
+:root {
+  --button-float-bg: #f9f9fc;
+  --button-float-bg-hover: #ececf6;
+  --button-float-arrow: #2c3e50;
+  --button-float-shadow: rgba(0, 0, 0, 0.1);
+  --button-float-shadow-hover: rgba(0, 0, 0, 0.15);
+}
+
+[data-scheme="dark"] {
+  --button-float-bg: #424242;
+  --button-float-bg-hover: #383838;
+  --button-float-arrow: rgba(255, 255, 255, 0.7);
+  --button-float-shadow: rgba(0, 0, 0, 0.3);
+  --button-float-shadow-hover: rgba(0, 0, 0, 0.5);
+}
diff --git a/layouts/layouts/components/script.html b/layouts/layouts/components/script.html
new file mode 100644
index 0000000..14dde2f
--- /dev/null
+++ b/layouts/layouts/components/script.html
@@ -0,0 +1,19 @@
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+      const backToTop = document.getElementById("back-to-top");
+
+      // Show or hide the button on scroll
+      window.addEventListener("scroll", function () {
+          if (window.scrollY > 400) {
+              backToTop.style.display = "block";
+          } else {
+              backToTop.style.display = "none";
+          }
+      });
+
+      // Scroll to the top
+      backToTop.addEventListener("click", function () {
+          window.scrollTo({ top: 0, behavior: "smooth" });
+      });
+  });
+</script>
diff --git a/layouts/layouts/partials/footer/custom.html b/layouts/layouts/partials/footer/custom.html
new file mode 100644
index 0000000..731c013
--- /dev/null
+++ b/layouts/layouts/partials/footer/custom.html
@@ -0,0 +1,9 @@
+<div id="back-to-top">
+  <button>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 
+      viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="18 15 12 9 6 15"></polyline>
+    </svg>
+  </button>
+</div>