diff --git a/frontend/src/ScrollToTopButton.jsx b/frontend/src/ScrollToTopButton.jsx
new file mode 100644
index 00000000000..bbf6295f241
--- /dev/null
+++ b/frontend/src/ScrollToTopButton.jsx
@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+import { IconButton } from '@chakra-ui/react';
+import { ArrowUpIcon } from '@chakra-ui/icons';
+
+const ScrollToTopButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleVisibility = () => {
+    if (window.scrollY > 200) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', toggleVisibility);
+    return () => window.removeEventListener('scroll', toggleVisibility);
+  }, []);
+
+  return (
+    isVisible && (
+      <IconButton
+        position="fixed"
+        bottom="20px"
+        right="20px"
+        colorScheme="teal"
+        icon={<ArrowUpIcon />}
+        onClick={scrollToTop}
+        aria-label="Scroll to top"
+        size="lg"
+        boxShadow="lg"
+        zIndex="1000"
+      />
+    )
+  );
+};
+
+export default ScrollToTopButton;
diff --git a/frontend/src/styles/Card.module.css b/frontend/src/styles/Card.module.css
index 9b6e94164a0..0a481cd3d7e 100644
--- a/frontend/src/styles/Card.module.css
+++ b/frontend/src/styles/Card.module.css
@@ -1,5 +1,8 @@
 .card {
   min-height: 320px;
+  border-radius: 15px;
+  box-shadow: 0px 0px 40px 8px rgba(134, 119, 206, 0.05);
+}
 }
 .announcement {
   background: linear-gradient(
diff --git a/frontend/src/styles/Hero.module.css b/frontend/src/styles/Hero.module.css
index 481395171f0..59d9e85357e 100644
--- a/frontend/src/styles/Hero.module.css
+++ b/frontend/src/styles/Hero.module.css
@@ -3,4 +3,7 @@
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
+  width: 90%;
+  margin: auto;
+  border-radius: 15px;
 }