diff --git a/app/(sub-page)/components/navigation-items.tsx b/app/(sub-page)/components/navigation-items.tsx
index 51636d32..c1aefd3e 100644
--- a/app/(sub-page)/components/navigation-items.tsx
+++ b/app/(sub-page)/components/navigation-items.tsx
@@ -18,6 +18,7 @@ export default async function NavigationItems() {
       )}
       <NavigationItem href={'/tutorial'} label="튜토리얼" />
       <NavigationItem
+        target="_black"
         href={'https://soft-anorak-0ca.notion.site/e35e3b210995463fa748f35aab536f2c?pvs=74'}
         label="팀소개"
       />
@@ -28,11 +29,12 @@ export default async function NavigationItems() {
 interface NavigationItemProps {
   href: string;
   label: string;
+  target?: '_black' | '_self' | '_parent' | '_top';
 }
 
-export function NavigationItem({ href, label }: NavigationItemProps) {
+export function NavigationItem({ href, label, target }: NavigationItemProps) {
   return (
-    <Link href={href} className="flex items-center justify-between">
+    <Link href={href} target={target} className="flex items-center justify-between">
       <Button
         size={'xs'}
         className="text-black lg:text-white hover:text-slate-400 lg:text-base text-lg my-1"
diff --git a/app/(sub-page)/grade-upload/components/manual.tsx b/app/(sub-page)/grade-upload/components/manual.tsx
index 4c3f5aa8..ff7a11fb 100644
--- a/app/(sub-page)/grade-upload/components/manual.tsx
+++ b/app/(sub-page)/grade-upload/components/manual.tsx
@@ -2,11 +2,11 @@ export default function Manual() {
   return (
     <div className="flex justify-center">
       <div className="flex flex-col gap-6">
-        <h1 className="text-center text-2xl font-bold p-4 border-b-2 border-gray-100 md:text-4xl">
+        <h1 className="text-center text-2xl font-bold p-6 border-b-2 border-gray-100 md:text-4xl">
           한 번의 성적표 입력으로
           <br /> 맞춤형 결과를 확인하세요 !
         </h1>
-        <div className="text-base px-6 md:px-0 flex flex-col gap-2 md:text-lg">
+        <div className="px-6 flex flex-col gap-2 md:text-lg md:px-0">
           <div>
             1.
             <a
@@ -16,11 +16,11 @@ export default function Manual() {
             >
               MyiWeb MSI
             </a>
-            에 접속 후 로그인(PC환경 권장)
+            에 접속 후 로그인(PC환경)
           </div>
-          <div>2. 좌측 성적/졸업 메뉴 → 성적표(상담용,B4)클릭</div>
-          <div>3. 우측 상단 조회버튼 클릭 → 프린트 아이콘 클릭</div>
-          <div>4. 인쇄 정보의 대상(PDF로 저장) 설정 → 하단 저장 버튼 클릭 </div>
+          <div>2. 좌측 성적/졸업 메뉴 → 성적표(상담용,B4)</div>
+          <div>3. 우측 상단 조회버튼 → 프린트 아이콘 </div>
+          <div>4. 인쇄 정보의 대상(PDF로 저장) 설정 → 하단 저장 버튼 </div>
           <div>5. 저장한 파일 업로드 </div>
           <div className="text-xs md:text-sm text-primary">
             • 회원 가입한 학번과 일치하는 학번의 성적표를 입력해야 합니다.
diff --git a/app/(sub-page)/grade-upload/page.tsx b/app/(sub-page)/grade-upload/page.tsx
index ab0451cc..140f400f 100644
--- a/app/(sub-page)/grade-upload/page.tsx
+++ b/app/(sub-page)/grade-upload/page.tsx
@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 
 export default function GradeUploadPage() {
   return (
-    <ContentContainer className="flex flex-col justify-center gap-8 min-h-[70vh]">
+    <ContentContainer className="flex flex-col justify-center gap-8 min-h-[70vh] max-md:max-w-[600px]">
       <Manual />
       <UploadTakenLecture />
     </ContentContainer>
diff --git a/app/(sub-page)/result/page.tsx b/app/(sub-page)/result/page.tsx
index 4d640489..e931fd26 100644
--- a/app/(sub-page)/result/page.tsx
+++ b/app/(sub-page)/result/page.tsx
@@ -34,7 +34,7 @@ function ResultPage({ searchParams }: ResultPageProp) {
 
   return (
     <div className="flex justify-center items-end">
-      <ContentContainer className="md:w-[700px] p-4 py-6 md:p-8">
+      <ContentContainer className="max-md:max-w-[500px] md:w-[700px] p-4 py-6 md:p-8">
         <Suspense fallback={<UserInfoCardSkeleton />}>
           <UserInfoCard />
         </Suspense>
diff --git a/app/(sub-page)/sign-up/components/sign-up-success.tsx b/app/(sub-page)/sign-up/components/sign-up-success.tsx
index e0835982..a999bc0a 100644
--- a/app/(sub-page)/sign-up/components/sign-up-success.tsx
+++ b/app/(sub-page)/sign-up/components/sign-up-success.tsx
@@ -1,15 +1,15 @@
 import Button from '@/app/ui/view/atom/button/button';
 import TitleBox from '@/app/ui/view/molecule/title-box/title-box';
 import Link from 'next/link';
-
-// 내용이랑 스타일은 mock인 상태입니다.
+import Image from 'next/image';
+import maru from '../../../../public/assets/maru.png';
 export default function SignUpSuccess() {
   return (
     <>
       <TitleBox title={'회원가입 완료'} />
-      <div className="h-[260px] text-2xl font-bold  flex flex-col items-center justify-center space-y-2">
-        <div>회원가입이 완료되었습니다</div>
-        <div className="text-xl font-medium">로그인 후 졸업 사정 결과를 확인해보세요!</div>
+      <div className="text-2xl font-bold flex flex-col items-center justify-center space-y-2">
+        <Image src={maru} width={150} height={150} alt="main-book-background" className="max-md:w-24 mt-8" />
+        <div className="text-base md:text-lg font-light">이제 졸업 사정 결과를 확인해보세요!</div>
         <div className="pt-6">
           <Link href="/sign-in">
             <Button size={'md'} label={'로그인 하기'} />
diff --git a/app/(sub-page)/sign-up/components/sign-up-terms.tsx b/app/(sub-page)/sign-up/components/sign-up-terms.tsx
index 06503302..7dab8dc8 100644
--- a/app/(sub-page)/sign-up/components/sign-up-terms.tsx
+++ b/app/(sub-page)/sign-up/components/sign-up-terms.tsx
@@ -21,15 +21,15 @@ export default function SignUpTerm({ onNext }: SignUpTermProps) {
               검사대상인지 확인하세요!
               <ul className="list-disc ml-6 mt-2">
                 <li>
-                  대학: 경영대학, 법과대학, 사회과학대학, ICT융합대학, 인문대학,{' '}
-                  <span className="text-red-400">미래융합대학(불가)</span>
+                  대학: 경영대학, 법과대학, 사회과학대학, ICT융합대학, 인문대학,
+                  <span className="ml-1 text-red-400">미래융합대학(불가)</span>
                 </li>
                 <li>학번: 16 ~ 22학번</li>
               </ul>
             </li>
             <li>
-              교직, 다전공, 연계전공, 편입, 전과, 재외국민/외국인전형에 해당하는 사용자는 검사 기준이 따로 설정되지 않아
-              검사가 불가능합니다.
+              교직, 연계전공, 편입, 재외국민/외국인전형에 해당하는 사용자는 검사 기준이 따로 설정되지 않아 검사가
+              불가능합니다.
             </li>
             <li>검사를 위해선 성적표를 직접 업로드해야하므로 PC환경에서 진행하는 것을 권장합니다.</li>
             <li>
diff --git a/app/(sub-page)/tutorial/components/TutorialContent.tsx b/app/(sub-page)/tutorial/components/TutorialContent.tsx
new file mode 100644
index 00000000..e87aba74
--- /dev/null
+++ b/app/(sub-page)/tutorial/components/TutorialContent.tsx
@@ -0,0 +1,39 @@
+'use client';
+import Image from 'next/image';
+import { cn } from '@/app/utils/shadcn/utils';
+import { useState } from 'react';
+import { TutorialItem } from '../data';
+
+interface TestContentProps {
+  data: TutorialItem[];
+}
+
+function TutorialContent({ data }: TestContentProps) {
+  const [item, setItem] = useState<TutorialItem>(data[0]);
+
+  return (
+    <div className="flex flex-col gap-2 mx-[5%] lg:flex-row">
+      <Image alt="tutorial-image" width={1000} src={item.imageUrl} className="rounded-2xl" />
+      <ul className="flex flex-col w-full gap-1 md:py-2">
+        {Object.values(data).map((tutorial, index) => {
+          const { icon, content } = tutorial;
+          return (
+            <li
+              key={index}
+              className={cn(
+                'cursor-pointer flex items-center p-4 font-bold opacity-50 rounded-xl hover:opacity-70 md:p-6 md:text-xl',
+                tutorial === item ? 'bg-light-blue-1 opacity-100 hover:opacity-100' : 'hover:bg-gray-1',
+              )}
+              onClick={() => setItem(tutorial)}
+            >
+              {icon && <Image src={icon} alt="icon" width={8} height={8} className="w-8 mr-2" />}
+              <span className="w-[90%]">{content}</span>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+export default TutorialContent;
diff --git a/app/(sub-page)/tutorial/data.tsx b/app/(sub-page)/tutorial/data.tsx
index 115c6bb9..0c80143e 100644
--- a/app/(sub-page)/tutorial/data.tsx
+++ b/app/(sub-page)/tutorial/data.tsx
@@ -1,66 +1,66 @@
-import featureImage1 from '@/public/assets/tutorial/tutorial-feature1.png';
-import featureImage2 from '@/public/assets/tutorial/tutorial-feature2.png';
-import featureImage3 from '@/public/assets/tutorial/tutorial-feature3.png';
+import featureImage1 from '@/public/assets/tutorial/tutorial-feature1.gif';
+import featureImage2 from '@/public/assets/tutorial/tutorial-feature2.gif';
+import featureImage3 from '@/public/assets/tutorial/tutorial-feature3.gif';
 import uploadImage0 from '@/public/assets/tutorial/tutorial0.png';
 import uploadImage1 from '@/public/assets/tutorial/tutorial1.png';
 import uploadImage2 from '@/public/assets/tutorial/tutorial2.png';
 import uploadImage3 from '@/public/assets/tutorial/tutorial3.png';
 import uploadImage4 from '@/public/assets/tutorial/tutorial4.png';
+import file from '../../../public/assets/file.svg';
+import dimond from '../../../public/assets/dimond.svg';
 import { StaticImageData } from 'next/image';
 import Link from 'next/link';
 
-interface TutorialItem {
+export interface TutorialItem {
   imageUrl: StaticImageData;
-  title: string;
+  icon?: StaticImageData;
   content: React.ReactNode;
 }
 
 export const TUTORIAL_FEATRUE: TutorialItem[] = [
   {
     imageUrl: featureImage1,
-    title: 'first',
+    icon: file,
     content: '강의 커스텀을 통한 졸업 사정 예측',
   },
   {
     imageUrl: featureImage2,
-    title: 'second',
-    content: '카테고리별(교양 / 전공) 수강 학점 현황 조회',
+    content: '영역(공통교양 등)별 수강 현황 조회',
+    icon: dimond,
   },
   {
     imageUrl: featureImage3,
-    title: 'third',
-    content: '카테고리별(교양 / 전공) 미이수 과목 정보 및 잔여 학점 조회',
+    icon: dimond,
+    content: '카테고리(사고와 표현 등)별 기이수/미이수 과목 정보 및 학점 조회',
   },
 ];
 
 export const TUTORIAL_UPLOAD: TutorialItem[] = [
   {
     imageUrl: uploadImage0,
-    title: '1.',
     content: (
-      <Link href="https://msi.mju.ac.kr/servlet/security/MySecurityStart" target="_blank">
-        <span className="text-primary">MyiWeb MSI</span>에 접속 후 로그인(PC환경 권장)
-      </Link>
+      <>
+        <Link href="https://msi.mju.ac.kr/servlet/security/MySecurityStart" target="_blank">
+          1. <span className="text-primary">MyiWeb MSI</span>
+        </Link>
+        에 접속 후 로그인(PC환경)
+      </>
     ),
   },
   {
     imageUrl: uploadImage1,
-    title: '2.',
-    content: '좌측 성적/졸업 메뉴 → 성적표(상담용,B4)클릭',
+    content: '2. 좌측 성적/졸업 메뉴 → 성적표(상담용, B4)',
   },
   {
     imageUrl: uploadImage2,
-    title: '3.',
-    content: '우측 상단 조회버튼 클릭 → 프린트 아이콘 클릭 (모바일 환경에서는 뜨지 않을 수 있습니다.)',
+    content: '3. 우측 상단 조회버튼 → 프린트 아이콘 (모바일 지원 X)',
   },
   {
     imageUrl: uploadImage3,
-    title: '4.',
-    content: '인쇄 정보의 대상(PDF로 저장) 설정 → 하단 저장 버튼 클릭 (비율이 깨지지 않도록 조심해주세요.)',
+    content: '4. 인쇄 정보의 대상(PDF로 저장) 설정 → 하단 저장 버튼',
   },
   {
     imageUrl: uploadImage4,
-    title: '5.',
-    content: '저장한 파일 업로드',
+    content: '5. 저장한 파일 업로드',
   },
 ];
diff --git a/app/(sub-page)/tutorial/page.tsx b/app/(sub-page)/tutorial/page.tsx
index 029d5fe3..11f1a1f5 100644
--- a/app/(sub-page)/tutorial/page.tsx
+++ b/app/(sub-page)/tutorial/page.tsx
@@ -1,10 +1,9 @@
-import ImageCard from '@/app/ui/view/molecule/image-card/image-card';
-import TitleBox from '@/app/ui/view/molecule/title-box/title-box';
 import { cn } from '@/app/utils/shadcn/utils';
-import Image from 'next/image';
 import { TUTORIAL_FEATRUE, TUTORIAL_UPLOAD } from './data';
 import ContentContainer from '@/app/ui/view/atom/content-container/content-container';
 import type { Metadata } from 'next';
+import TutorialContent from './components/TutorialContent';
+import Link from 'next/link';
 
 export const metadata: Metadata = {
   title: '튜토리얼',
@@ -13,36 +12,28 @@ export const metadata: Metadata = {
 
 function TutorialPage() {
   return (
-    <ContentContainer className={cn('flex flex-col gap-10 p-1 py-10', 'md:gap-20')} size="lg">
+    <ContentContainer className={cn('flex flex-col gap-6 p-1 py-10', 'md:gap-20 max-md:max-w-[600px]')} size="lg">
       <h1 className={cn('text-center text-xl font-bold', 'md:text-3xl')}>튜토리얼</h1>
-      <p className={cn('w-[90%] m-auto break-keep text-center text-base text-gray-6 font-semibold', 'md:text-2xl')}>
-        명지인을 위한 졸업 요건 충족도 확인 서비스 ‘졸업을부탁해’ 입니다. <br />
-        우리 서비스의 주요 정보와 사용법을 확인해보세요
-      </p>
-      <TitleBox title="주요 기능">
-        <div className="flex gap-2 p-2">
-          {TUTORIAL_FEATRUE.map((feature, index) => (
-            <Image src={feature.imageUrl} alt={`feature-${index}`} key={index} className="max-w-[32%]" />
-          ))}
+      <section>
+        <div className="text-xl mx-[5%] py-4 font-bold text-gray-4 md:text-2xl md:py-8">
+          졸업 요건 충족도 확인 서비스
+          <br />
+          졸업을 부탁해의&nbsp;
+          <span className="max-sm:block md:hidden"></span>
+          <span className="text-primary">주요 기능과 사용법</span>을 소개해요
         </div>
-      </TitleBox>
-      <p className={cn('w-[90%] m-auto break-keep text-center text-base text-gray-6 font-semibold', 'md:text-2xl')}>
-        정보 제공을 위해서는 여러분의 이수과목 정보가 필요합니다.
-        <br /> PDF 업로드를 진행해주세요.
-      </p>
-      <TitleBox title="PDF 파일 업로드 방법">
-        <div className="flex overflow-scroll gap-8 w-full mt-4">
-          {TUTORIAL_UPLOAD.map((feature, index) => (
-            <ImageCard
-              key={index}
-              image={feature.imageUrl}
-              title={feature.title}
-              content={feature.content}
-              className="min-w-44 h-44 md:min-w-72 md:h-72"
-            />
-          ))}
+        <TutorialContent data={TUTORIAL_FEATRUE} />
+      </section>
+      <section>
+        <div className="text-xl mx-[5%] py-4 font-bold text-gray-4 md:text-2xl md:py-8">
+          <Link href="https://msi.mju.ac.kr/servlet/security/MySecurityStart" target="_blank">
+            <span className="text-primary">MYIWEB 성적표</span>
+          </Link>
+          를 통해 <br />
+          나만의 졸업사정결과를 확인해요
         </div>
-      </TitleBox>
+        <TutorialContent data={TUTORIAL_UPLOAD} />
+      </section>
     </ContentContainer>
   );
 }
diff --git a/app/business/services/lecture/taken-lecture.command.ts b/app/business/services/lecture/taken-lecture.command.ts
index 0c2086c4..a07fc6d9 100644
--- a/app/business/services/lecture/taken-lecture.command.ts
+++ b/app/business/services/lecture/taken-lecture.command.ts
@@ -29,7 +29,7 @@ export const registerUserGrade = async (prevState: FormState, formData: FormData
       message: 'fail upload grade',
     };
   }
-  redirect('/my');
+  redirect('/result');
 };
 
 export const parsePDFtoText = async (formData: FormData) => {
diff --git a/app/ui/result/result-category/result-category.skeleton.tsx b/app/ui/result/result-category/result-category.skeleton.tsx
index e5477e4e..87c54505 100644
--- a/app/ui/result/result-category/result-category.skeleton.tsx
+++ b/app/ui/result/result-category/result-category.skeleton.tsx
@@ -4,7 +4,10 @@ import ResultCategoryCardSkeleton from '../result-category-card/result-category-
 async function ResultCategorySkeleton() {
   return (
     <div
-      className={cn('absolute grid grid-cols-2 gap-2 top-[30rem] w-full', 'md:max-w-[700px] md:gap-10 md:top-[33rem]')}
+      className={cn(
+        'absolute grid grid-cols-2 gap-2 top-[28rem] w-full',
+        'md:max-w-[700px] md:gap-10 md:top-[35rem] max-md:max-w-[500px]',
+      )}
     >
       {Array.from({ length: 4 }).map((_, index) => (
         <ResultCategoryCardSkeleton key={index} />
diff --git a/app/ui/result/result-category/result-category.tsx b/app/ui/result/result-category/result-category.tsx
index a032ddd9..3d260e75 100644
--- a/app/ui/result/result-category/result-category.tsx
+++ b/app/ui/result/result-category/result-category.tsx
@@ -1,7 +1,7 @@
 'use client';
 import { cn } from '@/app/utils/shadcn/utils';
 import ResultCategoryCard from '../result-category-card/result-category-card';
-import { CreditResponse, useFetchCredits } from '@/app/store/querys/result';
+import { useFetchCredits } from '@/app/store/querys/result';
 import { RESULT_CATEGORY } from '@/app/utils/key/result-category.key';
 import { ResultCategoryKey } from '../result-category-detail-content/result-category-detail-content.stories';
 
@@ -22,7 +22,10 @@ function ResultCategory() {
 
   return (
     <div
-      className={cn('absolute grid grid-cols-2 gap-2 top-[30rem] w-full', 'md:max-w-[700px] md:gap-10 md:top-[33rem]')}
+      className={cn(
+        'absolute grid grid-cols-2 gap-2 top-[28rem] w-full',
+        'md:max-w-[700px] md:gap-10 md:top-[35rem] max-md:max-w-[500px] ',
+      )}
     >
       {sortedCategories.map(({ category, totalCredit, takenCredit }, index) => (
         <ResultCategoryCard
diff --git a/app/ui/user/user-info-card/user-info-content.tsx b/app/ui/user/user-info-card/user-info-content.tsx
index e8751a5c..05908f9f 100644
--- a/app/ui/user/user-info-card/user-info-content.tsx
+++ b/app/ui/user/user-info-card/user-info-content.tsx
@@ -1,17 +1,28 @@
+'use client';
 import { UserInfoResponse } from '@/app/business/services/user/user.type';
 import { MAJOR_NOTATION } from '@/app/utils/key/result-category.key';
 import React from 'react';
 import PieChart from '../../view/molecule/pie-chart/pie-chart';
 import { getPercentage } from '@/app/utils/chart.util';
+import UserInfoMessage from './user-info-message';
+import { useFetchCredits } from '@/app/store/querys/result';
 
 interface UserInfoContentProps {
   data: UserInfoResponse;
 }
 
 function UserInfoContent({ data }: UserInfoContentProps) {
+  const { data: categories } = useFetchCredits();
   const { studentNumber, studentName, completeDivision: majors, totalCredit, takenCredit, graduated } = data;
 
-  const percentage = getPercentage(takenCredit, totalCredit);
+  const remainCredit = categories.reduce((accumulator, category) => {
+    const { category: categoryName, totalCredit, takenCredit } = category;
+    if (categoryName === 'CHAPEL') return accumulator;
+    const categoryRemainCredit = totalCredit - takenCredit < 0 ? 0 : totalCredit - takenCredit;
+    return accumulator + categoryRemainCredit;
+  }, 0);
+
+  const percentage = getPercentage(totalCredit - remainCredit, totalCredit);
 
   const displaySeveralMajor = (notation: 'major' | 'title'): React.ReactNode => {
     return majors.map((major, index) => {
@@ -23,21 +34,15 @@ function UserInfoContent({ data }: UserInfoContentProps) {
 
   return (
     <>
-      <p className="font-bold text-sm md:text-xl">
-        졸업필요학점보다{' '}
-        <span data-cy="remain-credit" className="text-point-blue">
-          {totalCredit - takenCredit}
-        </span>
-        학점이 부족합니다.
-      </p>
-      <div className="flex border-t-2 my-4 py-4 justify-between items-center">
+      <UserInfoMessage studentName={studentName} remainCredit={remainCredit} />
+      <div className="flex border-t-2 md:my-4 mt-4 py-4 justify-between items-center">
         <div className="flex font-medium text-xs md:text-lg gap-4 md:gap-14 ">
           <ul className="text-gray-6 flex flex-col gap-1">
             <li>이름</li>
             <li>학번</li>
             {displaySeveralMajor('title')}
-            <li>졸업필요학점</li>
-            <li>총 이수 학점</li>
+            <li>졸업최소학점</li>
+            <li>현재이수학점</li>
             <li>졸업가능여부</li>
           </ul>
           <ul className="flex flex-col gap-1">
diff --git a/app/ui/user/user-info-card/user-info-message.tsx b/app/ui/user/user-info-card/user-info-message.tsx
new file mode 100644
index 00000000..8a03d9f2
--- /dev/null
+++ b/app/ui/user/user-info-card/user-info-message.tsx
@@ -0,0 +1,25 @@
+interface UserInfoMessageProps {
+  studentName: string;
+  remainCredit: number;
+}
+
+function UserInfoMessage({ studentName, remainCredit }: UserInfoMessageProps) {
+  return (
+    <p className="font-bold text-sm md:text-xl">
+      <span className="mr-1">{studentName}님,</span>
+      {remainCredit > 0 ? (
+        <>
+          졸업까지
+          <span data-cy="remain-credit" className="text-point-blue ml-1">
+            {remainCredit}
+          </span>
+          학점 남았어요.
+        </>
+      ) : (
+        '졸업을 축하합니다 !'
+      )}
+    </p>
+  );
+}
+
+export default UserInfoMessage;
diff --git a/app/ui/user/user-info-navigator/user-info-navigator.tsx b/app/ui/user/user-info-navigator/user-info-navigator.tsx
index c84aeb12..dea08a18 100644
--- a/app/ui/user/user-info-navigator/user-info-navigator.tsx
+++ b/app/ui/user/user-info-navigator/user-info-navigator.tsx
@@ -11,7 +11,7 @@ function formatUserInfo(userInfo: InitUserInfoResponse | UserInfoResponse | unde
   if (!userInfo) {
     return {
       name: '소중한 GUEST',
-      major: '성적표를 입력하고, 졸업 여부를 확인하세요',
+      major: '성적표 입력 후, 졸업 여부를 확인해요',
       studentNumber: '',
     };
   }
@@ -19,7 +19,7 @@ function formatUserInfo(userInfo: InitUserInfoResponse | UserInfoResponse | unde
   if (isInitUser(userInfo)) {
     return {
       name: '명지인',
-      major: '성적표를 입력하고, 졸업 여부를 확인하세요',
+      major: '성적표 입력 후, 졸업 여부를 확인해요',
       studentNumber: userInfo.studentNumber,
     };
   }
@@ -36,7 +36,7 @@ export default async function UserInfoNavigator() {
 
   return (
     <div className="flex md:flex-col items-center md:p-4 space-x-4 md:space-x-0">
-      <Avatar className="w-20 h-20 md:w-24 md:h-24" alt="Profile picture" src={'/assets/profile-image.png'} />
+      <Avatar className="w-16 h-16 md:w-24 md:h-24" alt="Profile picture" src={'/assets/profile-image.png'} />
       <div className="flex flex-col items-start md:items-center">
         <div className="md:my-5 md:text-lg ">
           <span className="font-semibold">{userInfo.name}</span>
diff --git a/app/ui/view/molecule/image-card/image-card.stories.tsx b/app/ui/view/molecule/image-card/image-card.stories.tsx
deleted file mode 100644
index 82b7cf3c..00000000
--- a/app/ui/view/molecule/image-card/image-card.stories.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import featureIamge from '@/public/assets/tutorial/tutorial-feature1.png';
-import type { Meta, StoryObj } from '@storybook/react';
-import ImageCard, { ImageCardProps } from './image-card';
-
-const meta = {
-  title: 'ui/view/molecule/ImageCard',
-  component: ImageCard,
-  tags: ['autodocs'],
-  parameters: {
-    componentSubtitle: '요소는 이미지, 제목 그리고 설명 제공되는 경우에 사용됩니다.',
-  },
-  argTypes: {
-    image: {
-      description: 'ImageCard의 이미지를 설정할 수 있습니다.',
-    },
-    title: {
-      description: 'ImageCard의 title 내용을 설정할 수 있습니다.',
-    },
-    content: {
-      description: 'ImageCard의 content 내용을 설정할 수 있습니다.',
-    },
-  },
-} as Meta<typeof ImageCard>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    image: featureIamge,
-    title: 'first',
-    content: '강의 커스텀을 통한 졸업 사정 예측',
-  },
-  render: (args: ImageCardProps) => <ImageCard {...args} />,
-};
diff --git a/app/ui/view/molecule/image-card/image-card.tsx b/app/ui/view/molecule/image-card/image-card.tsx
deleted file mode 100644
index 03e5acd7..00000000
--- a/app/ui/view/molecule/image-card/image-card.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { cn } from '@/app/utils/shadcn/utils';
-import Image, { StaticImageData } from 'next/image';
-
-export interface ImageCardProps {
-  image: StaticImageData;
-  title: string;
-  content: React.ReactNode;
-  className?: string;
-}
-
-function ImageCard({ image, title, content, className }: ImageCardProps) {
-  return (
-    <div className={cn('flex flex-col gap-2', 'md:gap-4')}>
-      <Image src={image} alt={title} className={className} />
-      <h5 className={cn('font-lg font-medium', 'md:text-2xl')}>{title}</h5>
-      <p className={cn('text-xs', 'md:text-base')}>{content}</p>
-    </div>
-  );
-}
-
-export default ImageCard;
diff --git a/middleware.ts b/middleware.ts
index 68beb0d2..941185f9 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -27,15 +27,13 @@ async function getAuth(request: NextRequest): Promise<{
 }
 
 const allowedOnlyGuestPath = ['/sign-in', '/sign-up', '/find-password', '/find-id'];
-const allowedGuestPath = ['/tutorial', ...allowedOnlyGuestPath];
+const allowedGuestPath = ['/', '/tutorial', ...allowedOnlyGuestPath];
+const allowInitUserPath = ['/', '/tutorial', '/grade-upload'];
 
 function isAllowedGuestPath(path: string, strict: boolean = false) {
-  if (path === '/') {
-    return true;
-  }
-
   const allowedPath = strict ? allowedOnlyGuestPath : allowedGuestPath;
-  return allowedPath.some((allowedPath) => path.startsWith(allowedPath));
+
+  return allowedPath.some((allowedPath) => path === allowedPath);
 }
 
 export async function middleware(request: NextRequest) {
@@ -45,10 +43,6 @@ export async function middleware(request: NextRequest) {
     return await retryAuth(request);
   }
 
-  if (auth.role === 'init' && !request.nextUrl.pathname.startsWith('/grade-upload')) {
-    return Response.redirect(new URL('/grade-upload', request.url));
-  }
-
   if (auth.role === 'guest' && !isAllowedGuestPath(request.nextUrl.pathname)) {
     return Response.redirect(new URL('/sign-in', request.url));
   }
@@ -56,6 +50,14 @@ export async function middleware(request: NextRequest) {
   if (auth.role !== 'guest' && isAllowedGuestPath(request.nextUrl.pathname, true)) {
     return Response.redirect(new URL('/my', request.url));
   }
+
+  if (auth.role === 'init' && !allowInitUserPath.some((path) => request.nextUrl.pathname === path)) {
+    return Response.redirect(new URL('/grade-upload', request.url));
+  }
+
+  if (auth.role === 'user' && request.nextUrl.pathname === '/') {
+    return Response.redirect(new URL('/my', request.url));
+  }
 }
 
 async function retryAuth(request: NextRequest) {
diff --git a/public/assets/dimond.svg b/public/assets/dimond.svg
new file mode 100644
index 00000000..14371df7
--- /dev/null
+++ b/public/assets/dimond.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 20L4.6797 10.8496C4.34718 10.434 4.18092 10.2262 4.13625 9.9757C4.09159 9.72524 4.17575 9.47276 4.34407 8.96778L5.0883 6.73509C5.52832 5.41505 5.74832 4.75503 6.2721 4.37752C6.79587 4 7.49159 4 8.88304 4H15.117C16.5084 4 17.2041 4 17.7279 4.37752C18.2517 4.75503 18.4717 5.41505 18.9117 6.73509L19.6559 8.96778C19.8243 9.47276 19.9084 9.72524 19.8637 9.9757C19.8191 10.2262 19.6528 10.434 19.3203 10.8496L12 20ZM12 20L15.5 9M12 20L8.5 9M19.5 10L15.5 9M15.5 9L14 5M15.5 9H8.5M10 5L8.5 9M8.5 9L4.5 10" stroke="#33363F" stroke-linecap="round"/>
+</svg>
diff --git a/public/assets/file.svg b/public/assets/file.svg
new file mode 100644
index 00000000..ca1b4456
--- /dev/null
+++ b/public/assets/file.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 12.5L15.5 12.5" stroke="#222222" stroke-linecap="round"/>
+<path d="M8.5 15.5L12.5 15.5" stroke="#222222" stroke-linecap="round"/>
+<path d="M5.5 5.9C5.5 5.05992 5.5 4.63988 5.66349 4.31901C5.8073 4.03677 6.03677 3.8073 6.31901 3.66349C6.63988 3.5 7.05992 3.5 7.9 3.5H12.5059C12.8728 3.5 13.0562 3.5 13.2288 3.54145C13.3819 3.57819 13.5282 3.6388 13.6624 3.72104C13.8138 3.8138 13.9435 3.94352 14.2029 4.20294L17.7971 7.79706C18.0565 8.05648 18.1862 8.1862 18.279 8.33757C18.3612 8.47178 18.4218 8.6181 18.4586 8.77115C18.5 8.94378 18.5 9.12723 18.5 9.49411V18.1C18.5 18.9401 18.5 19.3601 18.3365 19.681C18.1927 19.9632 17.9632 20.1927 17.681 20.3365C17.3601 20.5 16.9401 20.5 16.1 20.5H7.9C7.05992 20.5 6.63988 20.5 6.31901 20.3365C6.03677 20.1927 5.8073 19.9632 5.66349 19.681C5.5 19.3601 5.5 18.9401 5.5 18.1V5.9Z" stroke="#222222"/>
+<path d="M12.5 3.5V7.1C12.5 7.94008 12.5 8.36012 12.6635 8.68099C12.8073 8.96323 13.0368 9.1927 13.319 9.33651C13.6399 9.5 14.0599 9.5 14.9 9.5H18.5" stroke="#222222"/>
+</svg>
diff --git a/public/assets/maru.png b/public/assets/maru.png
new file mode 100644
index 00000000..11403be8
Binary files /dev/null and b/public/assets/maru.png differ
diff --git a/public/assets/tutorial/tutorial-feature1.gif b/public/assets/tutorial/tutorial-feature1.gif
new file mode 100644
index 00000000..dc6a1c68
Binary files /dev/null and b/public/assets/tutorial/tutorial-feature1.gif differ
diff --git a/public/assets/tutorial/tutorial-feature1.png b/public/assets/tutorial/tutorial-feature1.png
deleted file mode 100644
index 80c6e0b9..00000000
Binary files a/public/assets/tutorial/tutorial-feature1.png and /dev/null differ
diff --git a/public/assets/tutorial/tutorial-feature2.gif b/public/assets/tutorial/tutorial-feature2.gif
new file mode 100644
index 00000000..c09bca8a
Binary files /dev/null and b/public/assets/tutorial/tutorial-feature2.gif differ
diff --git a/public/assets/tutorial/tutorial-feature2.png b/public/assets/tutorial/tutorial-feature2.png
deleted file mode 100644
index 65734ec8..00000000
Binary files a/public/assets/tutorial/tutorial-feature2.png and /dev/null differ
diff --git a/public/assets/tutorial/tutorial-feature3.gif b/public/assets/tutorial/tutorial-feature3.gif
new file mode 100644
index 00000000..f64e0cba
Binary files /dev/null and b/public/assets/tutorial/tutorial-feature3.gif differ
diff --git a/public/assets/tutorial/tutorial-feature3.png b/public/assets/tutorial/tutorial-feature3.png
deleted file mode 100644
index a8ebc3db..00000000
Binary files a/public/assets/tutorial/tutorial-feature3.png and /dev/null differ