diff --git a/packages/next-common/assets/imgs/icons/systemTop.svg b/packages/next-common/assets/imgs/icons/systemTop.svg
new file mode 100644
index 0000000000..43a5efa9c7
--- /dev/null
+++ b/packages/next-common/assets/imgs/icons/systemTop.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/next-common/components/layout/DetailLayout/ScrollToTopButton.jsx b/packages/next-common/components/layout/DetailLayout/ScrollToTopButton.jsx
new file mode 100644
index 0000000000..0c02208cb8
--- /dev/null
+++ b/packages/next-common/components/layout/DetailLayout/ScrollToTopButton.jsx
@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import { animateScroll as scroll } from 'react-scroll';
+import SystemTop from "next-common/assets/imgs/icons/systemTop.svg";
+import styled from "styled-components";
+
+const ScrollToTopDiv = styled.div`
+ display:flex;
+ justify-content:center;
+ align-items:center;
+ position: fixed;
+ cursor:pointer;
+ bottom: 96px;
+ right: 24px;
+ z-index:1000;
+ border-radius: 8px;
+ border: 1px solid var(--color-neutral400, #E0E4EB);
+ background: var(--color-neutral100, #FFF);
+ box-shadow: 0px 6px 7px 0px rgba(30, 33, 52, 0.02), 0px 1.34px 1.564px 0px rgba(30, 33, 52, 0.01), 0px 0.399px 0.466px 0px rgba(30, 33, 52, 0.01)
+`;
+
+export default function ScrollToTopButton({scrollYShowPX = 800}){
+ const [showButton, setShowButton] = useState(false);
+
+ useEffect(() => {
+ const handleScroll = () => {
+ setShowButton(window.scrollY > scrollYShowPX);
+ };
+ window.addEventListener('scroll', handleScroll);
+ return () => window.removeEventListener('scroll', handleScroll);
+ }, []);
+
+ const handleClick = () => {
+ scroll.scrollToTop();
+ };
+
+ return (
+ showButton && (
+