diff --git a/src/app/[userNickname]/_components/FloatingButton.tsx b/src/app/[userNickname]/_components/FloatingButton.tsx
deleted file mode 100644
index 882737cd..00000000
--- a/src/app/[userNickname]/_components/FloatingButton.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- TODO
- - [ ] 클릭 시 옵션 메뉴 구현
- - [ ] 클릭 시 최상단으로 이동 구현
- - [ ] 다른 페이지에서도 사용할 수 있도록 공통 컴포넌트화(리팩토링)
- */
-
-import * as styles from './FloatingButton.css';
-
-import PlusIcon from '/public/icons/plus.svg';
-import ArrowUpIcon from '/public/icons/arrow_up.svg';
-
-export default function FloatingButton() {
-  return (
-    <div className={styles.container}>
-      <div className={styles.addButton}>
-        <PlusIcon alt="옵션 보기 버튼" className={styles.icon} />
-      </div>
-      <div className={styles.shareButton}>
-        <ArrowUpIcon alt="상단으로 이동하기 버튼" className={styles.icon} />
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/[userNickname]/collabolist/page.tsx b/src/app/[userNickname]/collabolist/page.tsx
index 64e49680..40339589 100644
--- a/src/app/[userNickname]/collabolist/page.tsx
+++ b/src/app/[userNickname]/collabolist/page.tsx
@@ -11,7 +11,9 @@ import { USER_DATA_ME } from '../mockData/user'; // 삭제 예정
 
 import Profile from '../_components/Profile';
 import Content from '../_components/Content';
-import FloatingButton from '../_components/FloatingButton';
+import FloatingContainer from '@/components/floatingButton/FloatingContainer';
+import PlusOptionFloatingButton from '@/components/floatingButton/PlusOptionFloatingButton';
+import ArrowUpFloatingButton from '@/components/floatingButton/ArrowUpFloatingButton';
 
 interface FeedPageProps {
   params: {
@@ -27,7 +29,10 @@ export default function CollaboListPage({ params, userId }: FeedPageProps) {
     <section>
       <Profile user={USER_DATA_ME} />
       <Content user={USER_DATA_ME} type="collabo" />
-      <FloatingButton />
+      <FloatingContainer>
+        <PlusOptionFloatingButton />
+        <ArrowUpFloatingButton />
+      </FloatingContainer>
     </section>
   );
 }
diff --git a/src/app/[userNickname]/mylist/page.tsx b/src/app/[userNickname]/mylist/page.tsx
index eb11c148..41d478f9 100644
--- a/src/app/[userNickname]/mylist/page.tsx
+++ b/src/app/[userNickname]/mylist/page.tsx
@@ -11,7 +11,9 @@ import { USER_DATA_ME } from '../mockData/user'; // 삭제 예정
 
 import Profile from '../_components/Profile';
 import Content from '../_components/Content';
-import FloatingButton from '../_components/FloatingButton';
+import FloatingContainer from '@/components/floatingButton/FloatingContainer';
+import PlusButton from '@/components/floatingButton/PlusOptionFloatingButton';
+import ArrowUpButton from '@/components/floatingButton/ArrowUpFloatingButton';
 
 interface FeedPageProps {
   params: {
@@ -29,7 +31,10 @@ export default function MyListPage({ params, userId }: FeedPageProps) {
     <section>
       <Profile user={USER_DATA_ME} />
       <Content user={USER_DATA_ME} type="my" />
-      <FloatingButton />
+      <FloatingContainer>
+        <PlusButton />
+        <ArrowUpButton />
+      </FloatingContainer>
     </section>
   );
 }
diff --git a/src/components/floatingButton/ArrowUpFloatingButton.tsx b/src/components/floatingButton/ArrowUpFloatingButton.tsx
new file mode 100644
index 00000000..5473fb4a
--- /dev/null
+++ b/src/components/floatingButton/ArrowUpFloatingButton.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+/**
+ TODO
+ - [x] 클릭 시 최상단으로 이동 구현
+ - [x] 스크롤에 따른 버튼 디자인 구현
+ - [x] 다른 페이지에서도 사용할 수 있도록 공통 컴포넌트화(리팩토링)
+ */
+
+import { useEffect, useState } from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+
+import * as styles from './FloatingContainer.css';
+import ArrowUpIcon from '/public/icons/arrow_up.svg';
+
+export default function ArrowUpFloatingButton() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const handleScrollToTop = () => {
+    if (!isVisible) return;
+
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  const visibleButton = () => {
+    if (window.scrollY < 500) {
+      setIsVisible(false);
+    } else {
+      setIsVisible(true);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', visibleButton);
+
+    return () => {
+      window.removeEventListener('scroll', visibleButton);
+    };
+  }, []);
+
+  return (
+    <div
+      className={styles.arrowUpButton}
+      onClick={handleScrollToTop}
+      style={assignInlineVars({
+        [styles.opacitySize]: isVisible ? '1' : '0',
+        [styles.cursor]: isVisible ? 'pointer' : 'default',
+      })}
+    >
+      <ArrowUpIcon alt="상단으로 이동하기 버튼" className={styles.icon} />
+    </div>
+  );
+}
diff --git a/src/app/[userNickname]/_components/FloatingButton.css.ts b/src/components/floatingButton/FloatingContainer.css.ts
similarity index 64%
rename from src/app/[userNickname]/_components/FloatingButton.css.ts
rename to src/components/floatingButton/FloatingContainer.css.ts
index 84e50a6f..4b7d2d46 100644
--- a/src/app/[userNickname]/_components/FloatingButton.css.ts
+++ b/src/components/floatingButton/FloatingContainer.css.ts
@@ -1,4 +1,7 @@
-import { style } from '@vanilla-extract/css';
+import { style, createVar } from '@vanilla-extract/css';
+
+export const opacitySize = createVar();
+export const cursor = createVar();
 
 export const container = style({
   position: 'fixed',
@@ -21,10 +24,12 @@ export const addButton = style({
   cursor: 'pointer',
 });
 
-export const shareButton = style([
+export const arrowUpButton = style([
   addButton,
   {
-    opacity: '0.5',
+    opacity: opacitySize,
+    transition: 'opacity 500ms ease',
+    cursor: cursor,
   },
 ]);
 
diff --git a/src/components/floatingButton/FloatingContainer.tsx b/src/components/floatingButton/FloatingContainer.tsx
new file mode 100644
index 00000000..7c06f659
--- /dev/null
+++ b/src/components/floatingButton/FloatingContainer.tsx
@@ -0,0 +1,9 @@
+import * as styles from './FloatingContainer.css';
+
+interface FloatingButtonProps {
+  children: React.ReactNode;
+}
+
+export default function FloatingContainer({ children }: FloatingButtonProps) {
+  return <div className={styles.container}>{children}</div>;
+}
diff --git a/src/components/floatingButton/PlusOptionFloatingButton.tsx b/src/components/floatingButton/PlusOptionFloatingButton.tsx
new file mode 100644
index 00000000..0be447ff
--- /dev/null
+++ b/src/components/floatingButton/PlusOptionFloatingButton.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+/**
+ TODO
+ - [ ] 클릭 시 옵션 메뉴 구현
+ - [ ] 다른 페이지에서도 사용할 수 있도록 공통 컴포넌트화(리팩토링)
+ */
+
+import * as styles from './FloatingContainer.css';
+import PlusIcon from '/public/icons/plus.svg';
+
+export default function PlusOptionFloatingButton() {
+  return (
+    <div className={styles.addButton}>
+      <PlusIcon alt="옵션 보기 버튼" className={styles.icon} />
+    </div>
+  );
+}