diff --git a/src/app/intro/page.tsx b/src/app/intro/page.tsx
index e5c663a4..66b9d4be 100644
--- a/src/app/intro/page.tsx
+++ b/src/app/intro/page.tsx
@@ -1,24 +1,10 @@
-'use client';
-
 import Image from 'next/image';
-import { useRouter } from 'next/navigation';
 
 import Onboarding1Image from '@/assets/images/onboarding-1.jpg';
-import Button from '@/components/common/Button';
-import { PATH } from '@/constants/common/path';
+import StartButton from '@/components/common/Button/StartButton';
 import { ONBOARDING_CONTENT } from '@/constants/intro/onBoardingContent';
 
 const OnBoardingPage = () => {
-  const router = useRouter();
-
-  const handleStart = () => {
-    const token = localStorage.getItem('accessToken');
-    if (!token) {
-      router.push(PATH.LOGIN);
-      return;
-    }
-    router.push(PATH.HOME);
-  };
   return (
     <div className="w-full text-center">
       <div>
@@ -39,7 +25,8 @@ const OnBoardingPage = () => {
             alt="온보딩 - 위시풀 이미지"
             fill
             priority
-            sizes="100vw"
+            fetchPriority="high"
+            sizes="(max-width: 430px) 100vw, 430px"
             className="object-cover"
           />
         </div>
@@ -52,8 +39,7 @@ const OnBoardingPage = () => {
               src={section.imageSrc}
               alt={section.imageAlt}
               fill
-              priority
-              sizes="100vw"
+              sizes="(max-width: 430px) 100vw, 430px"
               className="object-cover"
             />
           </div>
@@ -65,7 +51,7 @@ const OnBoardingPage = () => {
       ))}
       <div className="fixed inset-x-0 bottom-0">
         <div className="bottom-0 mx-auto w-full max-w-[430px] bg-[linear-gradient(180deg,_rgba(255,255,255,0)_0%,_#fff_100%)] p-[2rem]">
-          <Button onClick={handleStart}>WishpooL 시작하기</Button>
+          <StartButton />
         </div>
       </div>
     </div>
diff --git a/src/components/common/Button/StartButton.tsx b/src/components/common/Button/StartButton.tsx
new file mode 100644
index 00000000..7c120a61
--- /dev/null
+++ b/src/components/common/Button/StartButton.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import Button from '@/components/common/Button';
+import { PATH } from '@/constants/common/path';
+
+export default function StartButton() {
+  const router = useRouter();
+
+  const handleStart = () => {
+    const token = localStorage.getItem('accessToken');
+    router.push(token ? PATH.HOME : PATH.LOGIN);
+  };
+
+  return <Button onClick={handleStart}>WishpooL 시작하기</Button>;
+}
diff --git a/src/styles/font.ts b/src/styles/font.ts
index 87fb04a8..a7909bf7 100644
--- a/src/styles/font.ts
+++ b/src/styles/font.ts
@@ -2,16 +2,6 @@ import localFont from 'next/font/local';
 
 export const suite = localFont({
   src: [
-    {
-      path: '../../public/fonts/suite/SUITE-Light.woff2',
-      weight: '300',
-      style: 'normal',
-    },
-    {
-      path: '../../public/fonts/suite/SUITE-Regular.woff2',
-      weight: '400',
-      style: 'normal',
-    },
     {
       path: '../../public/fonts/suite/SUITE-Medium.woff2',
       weight: '500',
@@ -27,16 +17,6 @@ export const suite = localFont({
       weight: '700',
       style: 'normal',
     },
-    {
-      path: '../../public/fonts/suite/SUITE-ExtraBold.woff2',
-      weight: '800',
-      style: 'normal',
-    },
-    {
-      path: '../../public/fonts/suite/SUITE-Heavy.woff2',
-      weight: '900',
-      style: 'normal',
-    },
   ],
   variable: '--font-suite',
   display: 'swap',