diff --git a/src/components/HomePage.jsx b/src/components/HomePage.jsx
index 797265b..e43c2b1 100644
--- a/src/components/HomePage.jsx
+++ b/src/components/HomePage.jsx
@@ -2,6 +2,7 @@ import React from 'react'
 import Navbar from './Navbar/Navbar'
 import Homebox from './Homebox/Homebox'
 import Contentbox from './Contentbox/Contentbox'
+import ToTopButton from './ToTop/ToTopButton'
 
 function HomePage(props) {
   return (
@@ -9,6 +10,7 @@ function HomePage(props) {
     <Navbar />
     <Homebox />
     <Contentbox />
+    <ToTopButton />
     </>
   )
 }
diff --git a/src/components/ToTop/ToTopButton.jsx b/src/components/ToTop/ToTopButton.jsx
new file mode 100644
index 0000000..1a5b6ec
--- /dev/null
+++ b/src/components/ToTop/ToTopButton.jsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import "./totop.css"
+import ArrowUp from "../../images/arrow-up.svg"
+import { useState } from 'react'
+
+const ToTopButton = () => {
+  const [visible, setVisible] = useState(false);
+
+  window.addEventListener("scroll", () => {
+    if (window.scrollY > 50) setVisible(true);
+    else setVisible(false);
+  })
+
+  try {
+    document.getElementById('toTopButton').addEventListener("click", () => {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      })
+    })
+  } catch (e) {
+    console.log("Whoops")
+  }
+  
+  return (
+    <div id='toTopButton' className={visible ? "round-button" : "round-button-hidden"}>
+        <img src={ArrowUp} className='filter-white' />
+    </div>
+  )
+}
+
+export default ToTopButton
\ No newline at end of file
diff --git a/src/components/ToTop/totop.css b/src/components/ToTop/totop.css
new file mode 100644
index 0000000..b8b9d67
--- /dev/null
+++ b/src/components/ToTop/totop.css
@@ -0,0 +1,37 @@
+.round-button-hidden {
+    background-color: dodgerblue;
+    font-size: 2rem;
+    border-radius: 50%;
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    right: 2%;
+    bottom: 4%;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    transform: scale(0);
+}
+
+.round-button {
+    background-color: dodgerblue;
+    font-size: 2rem;
+    border-radius: 50%;
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    right: 2%;
+    bottom: 4%;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.round-button:hover {
+    background-color: rgb(11, 129, 247);
+    transition: all 0.2s ease;
+}
\ No newline at end of file
diff --git a/src/images/arrow-up.svg b/src/images/arrow-up.svg
new file mode 100644
index 0000000..ea805e7
--- /dev/null
+++ b/src/images/arrow-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#eee8e8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
\ No newline at end of file