diff --git a/src/components/Buttons/bottom/ScrollToBottomButton.module.css b/src/components/Buttons/bottom/ScrollToBottomButton.module.css
deleted file mode 100644
index e8ce027e9..000000000
--- a/src/components/Buttons/bottom/ScrollToBottomButton.module.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.scrollToBottomButton {
-  position: fixed;
-  bottom: 10px;
-  right: 20px;
-  border-radius: 30px;
-  background-color: transparent;
-  border: 1px solid #ccc;
-  padding: 10px;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-  z-index: 1000;
-  transition: background-color 0.3s, box-shadow 0.3s;
-}
-
-.scrollToBottomButton:hover {
-  background-color: var(--ifm-color-primary-dark);
-  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
-}
diff --git a/src/components/Buttons/bottom/ScrollTopToBottom.module.css b/src/components/Buttons/bottom/ScrollTopToBottom.module.css
new file mode 100644
index 000000000..994c534ff
--- /dev/null
+++ b/src/components/Buttons/bottom/ScrollTopToBottom.module.css
@@ -0,0 +1,20 @@
+.scrollToBottomButton {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #28a745;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 10px;
+  cursor: pointer;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  transition: opacity 0.3s;
+  opacity: 0.8;
+  z-index: 1000;
+}
+
+.scrollToBottomButton:hover {
+  background-color: #218838;
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/src/components/Buttons/bottom/ScrollToBottomButton.jsx b/src/components/Buttons/bottom/ScrollTopToButton.jsx
similarity index 65%
rename from src/components/Buttons/bottom/ScrollToBottomButton.jsx
rename to src/components/Buttons/bottom/ScrollTopToButton.jsx
index 0d3a3691c..74342bd6d 100644
--- a/src/components/Buttons/bottom/ScrollToBottomButton.jsx
+++ b/src/components/Buttons/bottom/ScrollTopToButton.jsx
@@ -1,21 +1,23 @@
 import React, { useEffect, useState } from "react";
 import { FaArrowDown } from "react-icons/fa";
-import styles from "./ScrollToBottomButton.module.css";
+import styles from "./ScrollTopToBottom.module.css";
 
-export default function ScrollToBottomButton() {
-  const [showButton, setShowButton] = useState(true);
+export default function ScrollTopToBottom() {
+  const [showButton, setShowButton] = useState(false);
 
   const scrollToBottom = () => {
     window.scrollTo({
       top: document.documentElement.scrollHeight,
       behavior: "smooth",
     });
-    setShowButton(false);
   };
 
   const handleScroll = () => {
-    if (window.scrollY === 0) {
+    const bottomThreshold = document.documentElement.scrollHeight - window.innerHeight - 100;
+    if (window.scrollY < bottomThreshold) {
       setShowButton(true);
+    } else {
+      setShowButton(false);
     }
   };
 
@@ -33,4 +35,4 @@ export default function ScrollToBottomButton() {
       </button>
     )
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/Buttons/top/ScrollToTopButton.jsx b/src/components/Buttons/top/ScrollBottomToTop.jsx
similarity index 88%
rename from src/components/Buttons/top/ScrollToTopButton.jsx
rename to src/components/Buttons/top/ScrollBottomToTop.jsx
index 295d42956..fd05c6d37 100644
--- a/src/components/Buttons/top/ScrollToTopButton.jsx
+++ b/src/components/Buttons/top/ScrollBottomToTop.jsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { FaArrowUp } from "react-icons/fa";
-import styles from "./ScrollToTopButton.module.css";
+import styles from "./ScrollBottomToTop.module.css";
 
-export default function ScrollToTopButton() {
+export default function ScrollBottomToTop() {
   const [showButton, setShowButton] = useState(false);
 
   const scrollToTop = () => {
diff --git a/src/components/Buttons/top/ScrollBottomToTop.module.css b/src/components/Buttons/top/ScrollBottomToTop.module.css
new file mode 100644
index 000000000..2952cd218
--- /dev/null
+++ b/src/components/Buttons/top/ScrollBottomToTop.module.css
@@ -0,0 +1,20 @@
+.scrollToTopButton {
+  position: fixed;
+  bottom: 80px;
+  right: 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 10px;
+  cursor: pointer;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  transition: opacity 0.3s;
+  opacity: 0.8;
+  z-index: 1000;
+}
+
+.scrollToTopButton:hover {
+  background-color: #0056b3;
+  opacity: 1;
+}
diff --git a/src/components/Buttons/top/ScrollToTopButton.module.css b/src/components/Buttons/top/ScrollToTopButton.module.css
deleted file mode 100644
index 1df83474a..000000000
--- a/src/components/Buttons/top/ScrollToTopButton.module.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.scrollToTopButton {
-  position: fixed;
-  bottom: 50px;
-  right: 20px;
-  border-radius: 30px;
-  background-color: transparent;
-  border: 1px solid #ccc;
-  padding: 10px;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-  z-index: 1000;
-  transition: background-color 0.3s, box-shadow 0.3s;
-}
-
-.scrollToTopButton:hover {
-  background-color: var(--ifm-color-primary-dark);
-  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
-}
diff --git a/src/components/HomePage/ResourcesSection.tsx b/src/components/HomePage/ResourcesSection.tsx
index e56c2c4d7..fc9b371e7 100644
--- a/src/components/HomePage/ResourcesSection.tsx
+++ b/src/components/HomePage/ResourcesSection.tsx
@@ -18,7 +18,7 @@ interface Resource {
 
 const ALL_RESOURCES: Resource[] = [
   {
-    url: "https://www.codeharborhub.live/docs/",
+    url: "https://codeharborhub.github.io/docs/",
     type: "tutorial",
     title: "Tutorial: For Beginners",
     description:
@@ -27,7 +27,7 @@ const ALL_RESOURCES: Resource[] = [
     duration: "10 min",
   },
   {
-    url: "https://www.codeharborhub.live/courses/",
+    url: "https://codeharborhub.github.io/courses/",
     type: "courses",
     title: "Courses: For Advanced Users",
     description:
@@ -36,7 +36,7 @@ const ALL_RESOURCES: Resource[] = [
     duration: "3 min",
   },
   {
-    url: "https://www.codeharborhub.live/blog/",
+    url: "https://codeharborhub.github.io/blog/",
     type: "blog",
     title: "Blog: For All Users",
     description:
@@ -45,7 +45,7 @@ const ALL_RESOURCES: Resource[] = [
     duration: "7 min",
   },
   {
-    url: "https://www.codeharborhub.live/dsa/",
+    url: "https://codeharborhub.github.io/dsa/",
     type: "dsa",
     title: "DSA: For Competitive Programmers",
     description:
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 60b0361d8..e3d5ddadf 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -12,8 +12,8 @@ import Tweet from "../components/Tweet";
 import Tweets, { type TweetItem } from "../data/tweets";
 import { motion } from "framer-motion";
 import ResourcesSection from "../components/HomePage/ResourcesSection";
-import ScrollToTopButton from "../components/Buttons/bottom/ScrollToBottomButton";
-import ScrollToBottomButton from "../components/Buttons/top/ScrollToTopButton";
+import ScrollTopToButton from "../components/Buttons/bottom/ScrollTopToButton";
+import ScrollBottomToTop from "../components/Buttons/top/ScrollBottomToTop";
 
 function TweetsSection() {
   const tweetColumns = [[], [], []];
@@ -145,8 +145,8 @@ export default function Home() {
 
         <TweetsSection />
 
-        <ScrollToTopButton />
-        <ScrollToBottomButton />
+        <ScrollTopToButton />
+        <ScrollBottomToTop />
       </main>
     </Layout>
   );