diff --git a/src/app/(afterlogin)/(common_navbar)/_components/CardItem.tsx b/src/app/(afterlogin)/(common_navbar)/_components/CardItem.tsx
index 5242a89..b71bb5c 100644
--- a/src/app/(afterlogin)/(common_navbar)/_components/CardItem.tsx
+++ b/src/app/(afterlogin)/(common_navbar)/_components/CardItem.tsx
@@ -47,7 +47,7 @@ const CardItem = ({ listInfo }: Props) => {
     if (PresentationListTypeGuard(listInfo)) {
       return listInfo.thumbnailPath ? (
         <Image
-          src={`${CDN_BASE_URL}/${listInfo.thumbnailPath}`}
+          src={`${CDN_BASE_URL}${listInfo.thumbnailPath}`}
           alt={`${listInfo.id} 썸네일`}
           width={440}
           height={250}
@@ -67,7 +67,7 @@ const CardItem = ({ listInfo }: Props) => {
       ) {
         return (
           <Image
-            src={`${CDN_BASE_URL}/${listInfo.thumbnailPath}`}
+            src={`${CDN_BASE_URL}${listInfo.thumbnailPath}`}
             alt={`${listInfo.id} 썸네일`}
             width={440}
             height={250}
diff --git a/src/app/(afterlogin)/(common_navbar)/home/_components/HistoryBanner.tsx b/src/app/(afterlogin)/(common_navbar)/home/_components/HistoryBanner.tsx
index 4dee878..416bb25 100644
--- a/src/app/(afterlogin)/(common_navbar)/home/_components/HistoryBanner.tsx
+++ b/src/app/(afterlogin)/(common_navbar)/home/_components/HistoryBanner.tsx
@@ -19,7 +19,7 @@ const HistoryBanner = ({ presentation }: Props) => {
         <div className={styles.history__contents}>
           <div className={styles.presentation__thumbnail}>
             <Image
-              src={`${CDN_BASE_URL}/${presentation.thumbnailPath}`}
+              src={`${CDN_BASE_URL}${presentation.thumbnailPath}`}
               width={165}
               height={90}
               alt="최근 발표 이미지"
diff --git a/src/app/(afterlogin)/(common_navbar)/upload/[id]/_component/ControlButtons.tsx b/src/app/(afterlogin)/(common_navbar)/upload/[id]/_component/ControlButtons.tsx
index 7dc4d78..45b2d0b 100644
--- a/src/app/(afterlogin)/(common_navbar)/upload/[id]/_component/ControlButtons.tsx
+++ b/src/app/(afterlogin)/(common_navbar)/upload/[id]/_component/ControlButtons.tsx
@@ -169,7 +169,7 @@ const ControlButtons = ({
                           })}
                         >
                           <Image
-                            src={`${CDN_BASE_URL}/${item.imageFilePath}`}
+                            src={`${CDN_BASE_URL}${item.imageFilePath}`}
                             fill
                             alt="ppt이미지"
                             style={{ borderRadius: '8px' }}
diff --git a/src/app/(afterlogin)/(common_navbar)/upload/[id]/_component/UploadPpt.tsx b/src/app/(afterlogin)/(common_navbar)/upload/[id]/_component/UploadPpt.tsx
index 34a5fb3..e7b1772 100644
--- a/src/app/(afterlogin)/(common_navbar)/upload/[id]/_component/UploadPpt.tsx
+++ b/src/app/(afterlogin)/(common_navbar)/upload/[id]/_component/UploadPpt.tsx
@@ -128,7 +128,7 @@ const UploadPpt = ({
           <div className={styles.pptImageSection}>
             <div className={styles.hoverSection}>
               <Image
-                src={`${CDN_BASE_URL}/${pptInfo.imageFilePath}`}
+                src={`${CDN_BASE_URL}${pptInfo.imageFilePath}`}
                 alt={`${currentPageIndex + 1}페이지 ppt 이미지`}
                 fill
                 style={{ borderRadius: '16px' }}
diff --git a/src/app/(afterlogin)/_components/LogoutIcon.module.scss b/src/app/(afterlogin)/_components/LogoutIcon.module.scss
new file mode 100644
index 0000000..a8d8aa5
--- /dev/null
+++ b/src/app/(afterlogin)/_components/LogoutIcon.module.scss
@@ -0,0 +1,48 @@
+@import '@/styles/globals';
+@import '@/styles/mixins';
+
+.container {
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  // TODO: 일반 HTML요소는 100%로 사용이 가능하지만
+  // FlyoutMenu를 사용하면 불가능해짐
+  height: 68px;
+}
+
+.menu {
+  @include pure-button;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  span {
+    color: $red-7;
+    font-size: $font-2;
+    font-weight: bolder;
+    letter-spacing: 2px;
+  }
+}
+
+.logoutList {
+  position: absolute;
+  top: 30px;
+  right: 0;
+  left: auto;
+  z-index: 2;
+  width: 120px;
+  padding: 0;
+  background: $white;
+  border: 1px solid $gray-1;
+  border-radius: 8px;
+  box-shadow: 2px 2px 3px $gray-2;
+}
+
+// .logoutList {
+//   right: 0 !important;
+//   left: auto !important;
+// }
diff --git a/src/app/(afterlogin)/_components/LogoutIcon.tsx b/src/app/(afterlogin)/_components/LogoutIcon.tsx
new file mode 100644
index 0000000..f544bb9
--- /dev/null
+++ b/src/app/(afterlogin)/_components/LogoutIcon.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import FlyoutMenu from '@/app/_components/_modules/FlyoutMenu';
+import useToggle from '@/app/_hooks/useToggle';
+import styles from './LogoutIcon.module.scss';
+import { useRouter } from 'next/navigation';
+
+const LogoutIcon = () => {
+  const flyout = useToggle();
+  const router = useRouter();
+
+  const logout = async () => {
+    // await fetch(`${ROUTE_HANDLER_BASE_URL}/api/get/logout`, {
+    //   method: 'GET',
+    // });
+    router.push(`/logout`);
+    router.refresh();
+  };
+
+  return (
+    <div className={styles.container}>
+      <FlyoutMenu context={flyout}>
+        <FlyoutMenu.ToggleButton>
+          <i>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="30"
+              height="30"
+              viewBox="0 0 30 30"
+              fill="none"
+            >
+              <path
+                d="M15 15C19.1438 15 22.5 11.6438 22.5 7.5C22.5 3.35625 19.1438 0 15 0C10.8562 0 7.5 3.35625 7.5 7.5C7.5 11.6438 10.8562 15 15 15ZM15 18.75C9.99375 18.75 0 21.2625 0 26.25V30H30V26.25C30 21.2625 20.0063 18.75 15 18.75Z"
+                fill="#BFBFBF"
+              />
+            </svg>
+          </i>
+        </FlyoutMenu.ToggleButton>
+        <FlyoutMenu.MenuList className={styles.logoutList}>
+          <FlyoutMenu.MenuItem>
+            <button className={styles.menu} onClick={logout}>
+              <span>로그아웃</span>
+            </button>
+          </FlyoutMenu.MenuItem>
+        </FlyoutMenu.MenuList>
+      </FlyoutMenu>
+    </div>
+  );
+};
+
+export default LogoutIcon;
diff --git a/src/app/(afterlogin)/_components/Navbar.tsx b/src/app/(afterlogin)/_components/Navbar.tsx
index 7e5d47e..467bb08 100644
--- a/src/app/(afterlogin)/_components/Navbar.tsx
+++ b/src/app/(afterlogin)/_components/Navbar.tsx
@@ -1,10 +1,11 @@
 import NavMenu from './NavMenu';
 import styles from './Navbar.module.scss';
 import LogoIcon from '@/app/_svgs/LogoIcon';
-import UserIcon from '../_svgs/UserIcon';
 
 import { serverUserApi } from '@/services/server/user';
 import { fetch_ServerAuth } from '@/services/server/fetchServer';
+import LogoutIcon from './LogoutIcon';
+import UserIcon from '../_svgs/UserIcon';
 
 const Navbar = async () => {
   // const res = await fetch_ServerAuth(`${process.env.NEXT_PUBLIC_BASE_URL_DEV}/api/accounts/me`, {
@@ -25,7 +26,8 @@ const Navbar = async () => {
         </div>
 
         <div className={styles.right}>
-          <UserIcon />
+          <LogoutIcon />
+          {/* <UserIcon /> */}
         </div>
       </div>
     </nav>
diff --git a/src/app/(afterlogin)/practice/[id]/page.module.scss b/src/app/(afterlogin)/practice/[id]/page.module.scss
index 39bcce2..55b6c00 100644
--- a/src/app/(afterlogin)/practice/[id]/page.module.scss
+++ b/src/app/(afterlogin)/practice/[id]/page.module.scss
@@ -120,6 +120,7 @@
     padding: 20px;
     border: 1px solid $gray-1;
     border-radius: 15px;
+    background-color: white;
   }
 }
 
diff --git a/src/app/(afterlogin)/practice/[id]/page.tsx b/src/app/(afterlogin)/practice/[id]/page.tsx
index 565d4f9..59cb230 100644
--- a/src/app/(afterlogin)/practice/[id]/page.tsx
+++ b/src/app/(afterlogin)/practice/[id]/page.tsx
@@ -208,124 +208,129 @@ export default function Page({ params }: { params: { id: string } }) {
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <PracticeNav
-        title={title}
-        isRecording={recorder.isRecording}
-        isLastSlide={isLastSlide}
-        practiceTime={timeLimit}
-        goToNext={onClickNextPage}
-        handleRecording={handleRecordingPause}
-        onCloseClick={onCloseClick}
-      />
-      <div className={styles.container}>
-        <div className={styles.contents}>
-          <section className={styles.presentation__box}>
-            <article className={styles.presentation}>
-              <Image
-                src={`${CDN_BASE_URL}/${data?.slides[slideSeq].imageFilePath}`}
-                alt={`slide-${slideSeq}`}
-                width={900}
-                height={510}
-                style={{ objectFit: 'contain', borderRadius: '16px' }}
-              />
-            </article>
-            <section className={styles.helper__box}>
-              <article className={styles.helper}>
-                <h4 className={styles.helper__title}>
-                  다음 슬라이드
-                  <span className={cx(['helper__subtitle', 'helper__subtitle--next'])}>
-                    {slidePaging}
-                  </span>
-                </h4>
-                <div className={styles.helper__item}>
-                  {isLastSlide ? (
-                    <div className={styles.lastSlide}>
-                      <LastSlide />
-                    </div>
-                  ) : (
-                    <Image
-                      src={`${CDN_BASE_URL}/${data?.slides[slideSeq + 1].imageFilePath}`}
-                      alt={`slide-${slideSeq + 1}`}
-                      width={375}
-                      height={210}
-                      style={{ objectFit: 'contain', borderRadius: '16px' }}
-                    />
-                  )}
-                </div>
+    // CDN주소(src={`${CDN_BASE_URL}...})에 undefined포함 방지
+    data && (
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <PracticeNav
+          title={title}
+          isRecording={recorder.isRecording}
+          isLastSlide={isLastSlide}
+          practiceTime={timeLimit}
+          goToNext={onClickNextPage}
+          handleRecording={handleRecordingPause}
+          onCloseClick={onCloseClick}
+        />
+        <div className={styles.container}>
+          <div className={styles.contents}>
+            <section className={styles.presentation__box}>
+              <article className={styles.presentation}>
+                <Image
+                  src={`${CDN_BASE_URL}${data?.slides[slideSeq].imageFilePath}`}
+                  alt={`slide-${slideSeq}`}
+                  width={900}
+                  height={510}
+                  style={{ objectFit: 'contain', borderRadius: '16px' }}
+                />
               </article>
-              <article className={styles.helper}>
-                <h4 className={styles.helper__title}>
-                  메모하기
-                  {recorder.isRecording ? (
-                    <span
-                      className={cx(['helper__subtitle', 'helper__subtitle--memo', 'recording'])}
-                    >
-                      발표 연습 중 메모를 입력하면 녹음이 일시정지돼요.
+              <section className={styles.helper__box}>
+                <article className={styles.helper}>
+                  <h4 className={styles.helper__title}>
+                    다음 슬라이드
+                    <span className={cx(['helper__subtitle', 'helper__subtitle--next'])}>
+                      {slidePaging}
                     </span>
-                  ) : (
-                    <span className={cx(['helper__subtitle', 'helper__subtitle--memo', 'pausing'])}>
-                      녹음을 이어서 하시려면 녹음 버튼을 눌러주세요.
+                  </h4>
+                  <div className={styles.helper__item}>
+                    {isLastSlide ? (
+                      <div className={styles.lastSlide}>
+                        <LastSlide />
+                      </div>
+                    ) : (
+                      <Image
+                        src={`${CDN_BASE_URL}${data?.slides[slideSeq + 1].imageFilePath}`}
+                        alt={`slide-${slideSeq + 1}`}
+                        width={375}
+                        height={210}
+                        style={{ objectFit: 'contain', borderRadius: '16px' }}
+                      />
+                    )}
+                  </div>
+                </article>
+                <article className={styles.helper}>
+                  <h4 className={styles.helper__title}>
+                    메모하기
+                    {recorder.isRecording ? (
+                      <span
+                        className={cx(['helper__subtitle', 'helper__subtitle--memo', 'recording'])}
+                      >
+                        발표 연습 중 메모를 입력하면 녹음이 일시정지돼요.
+                      </span>
+                    ) : (
+                      <span
+                        className={cx(['helper__subtitle', 'helper__subtitle--memo', 'pausing'])}
+                      >
+                        녹음을 이어서 하시려면 녹음 버튼을 눌러주세요.
+                      </span>
+                    )}
+                  </h4>
+                  <button
+                    className={styles.helper__recorder}
+                    disabled={recorder.isRecording}
+                    onClick={handleRecordingPause}
+                  >
+                    녹음 재개
+                  </button>
+                  <textarea
+                    {...register('content', {
+                      required: true,
+                      maxLength: 10,
+                      onChange: () => {
+                        recorder.pauseRecording();
+                      },
+                    })}
+                    className={styles.helper__item}
+                    placeholder="ex. 발표문 수정 사항, 목소리 크기 등에 대한 메모를 작성해 주세요."
+                  />
+                  {errors.content && errors.content.type === 'maxLength' ? (
+                    <span className={cx(['memo-validation', 'memo-validation--error'])}>
+                      {content.length} / 500
                     </span>
+                  ) : (
+                    <span className={cx(['memo-validation'])}>{content.length} / 500</span>
                   )}
-                </h4>
-                <button
-                  className={styles.helper__recorder}
-                  disabled={recorder.isRecording}
-                  onClick={handleRecordingPause}
-                >
-                  녹음 재개
-                </button>
-                <textarea
-                  {...register('content', {
-                    required: true,
-                    maxLength: 10,
-                    onChange: () => {
-                      recorder.pauseRecording();
-                    },
-                  })}
-                  className={styles.helper__item}
-                  placeholder="ex. 발표문 수정 사항, 목소리 크기 등에 대한 메모를 작성해 주세요."
-                />
-                {errors.content && errors.content.type === 'maxLength' ? (
-                  <span className={cx(['memo-validation', 'memo-validation--error'])}>
-                    {content.length} / 500
-                  </span>
-                ) : (
-                  <span className={cx(['memo-validation'])}>{content.length} / 500</span>
-                )}
-              </article>
+                </article>
+              </section>
             </section>
-          </section>
-          <article className={styles.script__box}>
-            <p className={styles.script}>{data?.slides[slideSeq].script ?? ''}</p>
-          </article>
+            <article className={styles.script__box}>
+              <p className={styles.script}>{data?.slides[slideSeq].script ?? ''}</p>
+            </article>
+          </div>
         </div>
-      </div>
-      <Alert
-        context={alert}
-        title="마이크 권한을 허용해주세요."
-        message="권한을 허용해야 발표 연습을 하실 수 있어요!"
-        actionText="연습 시작하기"
-        isDisabled={!recorder.isPermitted}
-        onActionClick={handleAlertAction}
-      />
-      <Confirm
-        context={confirm}
-        title="연습을 중단하시겠어요?"
-        message={`연습을 중단하시면\n이번 연습에 대한 피드백을 받을 수 없어요.`}
-        okayText="중단하기"
-        cancelText="계속 연습하기"
-        onOkayClick={goToPresentationsPage}
-      />
-      <div className={styles.bubble}>
-        <SpeechBubble
-          context={bubble}
-          message="녹음 버튼을 누르면 일시정지할 수 있어요."
-          hasCloseBtn
+        <Alert
+          context={alert}
+          title="마이크 권한을 허용해주세요."
+          message="권한을 허용해야 발표 연습을 하실 수 있어요!"
+          actionText="연습 시작하기"
+          isDisabled={!recorder.isPermitted}
+          onActionClick={handleAlertAction}
+        />
+        <Confirm
+          context={confirm}
+          title="연습을 중단하시겠어요?"
+          message={`연습을 중단하시면\n이번 연습에 대한 피드백을 받을 수 없어요.`}
+          okayText="중단하기"
+          cancelText="계속 연습하기"
+          onOkayClick={goToPresentationsPage}
         />
-      </div>
-      <NextSlideConfirm context={modal} handleOkay={handleConfirmOkay} />
-    </form>
+        <div className={styles.bubble}>
+          <SpeechBubble
+            context={bubble}
+            message="녹음 버튼을 누르면 일시정지할 수 있어요."
+            hasCloseBtn
+          />
+        </div>
+        <NextSlideConfirm context={modal} handleOkay={handleConfirmOkay} />
+      </form>
+    )
   );
 }
diff --git a/src/app/(afterlogin)/setting/[id]/_components/SelectCardSection.tsx b/src/app/(afterlogin)/setting/[id]/_components/SelectCardSection.tsx
index c3607d8..70d5ee3 100644
--- a/src/app/(afterlogin)/setting/[id]/_components/SelectCardSection.tsx
+++ b/src/app/(afterlogin)/setting/[id]/_components/SelectCardSection.tsx
@@ -23,7 +23,7 @@ const SelectCardSection = ({
 }: SelectCardSectionProps) => {
   const firstStepCardInfo = [
     {
-      imageSrc: `${CDN_BASE_URL}/data/etc/defaults/show.png`,
+      imageSrc: `${CDN_BASE_URL}/data/etc/defaults/d52a1e6a920ca3a3.jpg`,
       title: '모든 문장 보기',
       content: [
         '발표문 암기를 못 했을 때 추천드려요!',
@@ -31,7 +31,7 @@ const SelectCardSection = ({
       ],
     },
     {
-      imageSrc: `${CDN_BASE_URL}/data/etc/defaults/hide.png`,
+      imageSrc: `${CDN_BASE_URL}/data/etc/defaults/8f266994d911f0af.jpg`,
       title: '외울 문장 가리기',
       content: [
         '대본 암기를 잘 했는지 확인할 때 추천드려요!',
diff --git a/src/app/(afterlogin)/setting/[id]/_components/SelectSentenceSection.tsx b/src/app/(afterlogin)/setting/[id]/_components/SelectSentenceSection.tsx
index 3276e60..564632d 100644
--- a/src/app/(afterlogin)/setting/[id]/_components/SelectSentenceSection.tsx
+++ b/src/app/(afterlogin)/setting/[id]/_components/SelectSentenceSection.tsx
@@ -56,7 +56,7 @@ const SelectSentenceSection = ({
       <div className={styles.pptImageSection}>
         <div className={styles.image}>
           <Image
-            src={`${CDN_BASE_URL}/${totalInfo.slides[currentPage].imageFilePath}`}
+            src={`${CDN_BASE_URL}${totalInfo.slides[currentPage].imageFilePath}`}
             width={500}
             height={281}
             alt={`${currentPage + 1}페이지 이미지`}
diff --git a/src/app/(beforelogin)/page.module.scss b/src/app/(beforelogin)/page.module.scss
index d65a267..7c19cd4 100644
--- a/src/app/(beforelogin)/page.module.scss
+++ b/src/app/(beforelogin)/page.module.scss
@@ -1,84 +1,105 @@
 @import '@/styles/mixins';
 
+// .container {
+//   display: flex;
+//   align-items: center;
+//   height: 100%;
+//   min-width: 1557px;
+//   gap: 99px;
+// }
+
+// .leftSectionWrapper {
+//   display: flex;
+//   justify-content: flex-end;
+//   flex-grow: 1;
+// }
+
+// .rightSectionWrapper {
+//   display: flex;
+//   justify-content: flex-start;
+//   flex-grow: 1;
+// }
+
+// .leftSection {
+//   display: flex;
+//   flex-direction: column;
+//   width: 621px;
+//   height: 383px;
+// }
+
+// .rightSection {
+//   width: 837px;
+//   height: 760px;
+// }
+
+// .smallDescription {
+//   display: flex;
+//   align-items: center;
+//   width: 355px;
+
+//   &::before {
+//     content: '';
+//     flex: 1;
+//     border-bottom: 2px solid $gray-1;
+//   }
+
+//   & > p {
+//     padding: 0 0 0 30px;
+//   }
+// }
+
+// .mainTitle {
+//   display: flex;
+//   font-size: px-to-rem(49px);
+//   font-weight: bolder;
+//   flex-direction: column;
+//   letter-spacing: -1%;
+
+//   p {
+//     margin: 0;
+//   }
+
+//   p:nth-of-type(1) {
+//     color: $black;
+//   }
+
+//   p:nth-of-type(2) {
+//     color: $pink-8;
+//   }
+// }
+
+// .subTitle {
+//   margin-top: 20px;
+//   display: flex;
+//   color: $gray-5;
+//   font-size: px-to-rem($h2);
+//   flex-direction: column;
+//   letter-spacing: -1.5%;
+
+//   p {
+//     margin: 0;
+//   }
+// }
+
+// .startButton {
+//   @include button_size_web;
+//   @include button_theme_default;
+
+//   font-size: px-to-rem($h2);
+//   letter-spacing: -1.5%;
+//   margin-top: 58px;
+// }
+
 .container {
   display: flex;
   align-items: center;
-  height: 100%;
+  justify-content: center;
+  width: 100dvw;
+  height: 100dvh;
   min-width: 1557px;
-  gap: 99px;
-}
-
-.leftSectionWrapper {
-  display: flex;
-  justify-content: flex-end;
-  flex-grow: 1;
-}
-
-.rightSectionWrapper {
-  display: flex;
-  justify-content: flex-start;
-  flex-grow: 1;
-}
-
-.leftSection {
-  display: flex;
-  flex-direction: column;
-  width: 621px;
-  height: 383px;
-}
-
-.rightSection {
-  width: 837px;
-  height: 760px;
-}
-
-.smallDescription {
-  display: flex;
-  align-items: center;
-  width: 355px;
-
-  &::before {
-    content: '';
-    flex: 1;
-    border-bottom: 2px solid $gray-1;
-  }
-
-  & > p {
-    padding: 0 0 0 30px;
-  }
-}
-
-.mainTitle {
-  display: flex;
-  font-size: px-to-rem(49px);
-  font-weight: bolder;
-  flex-direction: column;
-  letter-spacing: -1%;
-
-  p {
-    margin: 0;
-  }
-
-  p:nth-of-type(1) {
-    color: $black;
-  }
-
-  p:nth-of-type(2) {
-    color: $pink-8;
-  }
-}
-
-.subTitle {
-  margin-top: 20px;
-  display: flex;
-  color: $gray-5;
-  font-size: px-to-rem($h2);
-  flex-direction: column;
-  letter-spacing: -1.5%;
-
-  p {
-    margin: 0;
-  }
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
 }
 
 .startButton {
@@ -87,5 +108,5 @@
 
   font-size: px-to-rem($h2);
   letter-spacing: -1.5%;
-  margin-top: 58px;
+  margin-bottom: 17%;
 }
diff --git a/src/app/(beforelogin)/page.tsx b/src/app/(beforelogin)/page.tsx
index 60c7485..159bfe2 100644
--- a/src/app/(beforelogin)/page.tsx
+++ b/src/app/(beforelogin)/page.tsx
@@ -4,36 +4,44 @@ import Image from 'next/image';
 import { CDN_BASE_URL } from '@/config/path';
 
 export default function Page() {
+  const imageUrl = `${CDN_BASE_URL}/data/etc/defaults/5c19cb22e23db6d9.jpg`;
+
   return (
-    <div className={styles.container}>
-      <div className={styles.leftSectionWrapper}>
-        <div className={styles.leftSection}>
-          <div className={styles.smallDescription}>
-            <p>Make perfect presentation</p>
-          </div>
-          <div className={styles.mainTitle}>
-            <p>Ai와 함께하는 발표 연습,</p>
-            <p>프리젠으로 효과적으로 전하세요</p>
-          </div>
-          <div className={styles.subTitle}>
-            <p>성공적인 발표는 완벽한 연습에서 비롯됩니다.</p>
-            <p>효율적으로 발표 연습을 도와드릴게요!</p>
-          </div>
-          <Link className={styles.startButton} href={`/login`}>
-            발표 시작하기
-          </Link>
-        </div>
-      </div>
-      <div className={styles.rightSectionWrapper}>
-        <div className={styles.rightSection}>
-          <Image
-            src={`${CDN_BASE_URL}/data/etc/defaults/minho.gif`}
-            width={837}
-            height={760}
-            alt="gif"
-          />
-        </div>
-      </div>
+    // <div className={styles.container}>
+    //   <div className={styles.leftSectionWrapper}>
+    //     <div className={styles.leftSection}>
+    //       <div className={styles.smallDescription}>
+    //         <p>Make perfect presentation</p>
+    //       </div>
+    //       <div className={styles.mainTitle}>
+    //         <p>Ai와 함께하는 발표 연습,</p>
+    //         <p>프리젠으로 효과적으로 전하세요</p>
+    //       </div>
+    //       <div className={styles.subTitle}>
+    //         <p>성공적인 발표는 완벽한 연습에서 비롯됩니다.</p>
+    //         <p>효율적으로 발표 연습을 도와드릴게요!</p>
+    //       </div>
+    //       <Link className={styles.startButton} href={`/login`}>
+    //         발표 시작하기
+    //       </Link>
+    //     </div>
+    //   </div>
+    //   <div className={styles.rightSectionWrapper}>
+    //     <div className={styles.rightSection}>
+    //       <Image
+    //         src={`${CDN_BASE_URL}/data/etc/defaults/minho.gif`}
+    //         width={837}
+    //         height={760}
+    //         alt="gif"
+    //       />
+    //     </div>
+    //   </div>
+    // </div>
+
+    <div className={styles.container} style={{ backgroundImage: `url(${imageUrl})` }}>
+      <Link className={styles.startButton} href={`/login`}>
+        발표 시작하기
+      </Link>
     </div>
   );
 }
diff --git a/src/app/_components/_modules/FlyoutMenu.tsx b/src/app/_components/_modules/FlyoutMenu.tsx
index 412947a..6bf70b6 100644
--- a/src/app/_components/_modules/FlyoutMenu.tsx
+++ b/src/app/_components/_modules/FlyoutMenu.tsx
@@ -3,6 +3,9 @@ import styles from './FlyoutMenu.module.scss';
 import { ReactNode, useEffect, useRef } from 'react';
 import { ToggleType } from '@/app/_hooks/useToggle';
 import useToggleContext, { ToggleContext } from '@/app/_hooks/useToggleContext';
+import classNames from 'classnames/bind';
+
+const cx = classNames.bind(styles);
 
 interface Props {
   /** 컨텍스트 (부모에서 전달이 필요한 경우를 위해) */
@@ -54,13 +57,14 @@ const ToggleButton = ({ children }: ReactChildrenProps) => {
   );
 };
 
-const MenuList = ({ children }: ReactChildrenProps) => {
+const MenuList = ({ children, className }: ReactChildrenProps & { className?: string }) => {
   const context = useToggleContext();
 
   // ToggleButton은 계속 유지한 체, flyout의 메뉴들만 보여주거나 없애거나
   if (!context.isOpen) return null;
 
-  return <ul className={styles.flyout__list}>{children}</ul>;
+  // 로그아웃의 flyout버튼은 위치가 조금 다르므로, 이에 대한 className을 조건부로 사용
+  return <ul className={cx([className ? `${className}` : 'flyout__list'])}>{children}</ul>;
 };
 
 const MenuItem = ({ children }: ReactChildrenProps) => {
diff --git a/src/app/api/get/logout/route.ts b/src/app/api/get/logout/route.ts
new file mode 100644
index 0000000..0928342
--- /dev/null
+++ b/src/app/api/get/logout/route.ts
@@ -0,0 +1,5 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET(request: NextRequest): Promise<NextResponse> {
+  return new NextResponse();
+}
diff --git a/src/config/path.ts b/src/config/path.ts
index 8f76ad6..1552384 100644
--- a/src/config/path.ts
+++ b/src/config/path.ts
@@ -16,3 +16,8 @@ export const CDN_BASE_URL =
   process.env.NODE_ENV === 'development'
     ? process.env.NEXT_PUBLIC_CDN_BASE_URL_DEV
     : process.env.NEXT_PUBLIC_CDN_BASE_URL_PROD;
+
+export const ROUTE_HANDLER_BASE_URL =
+  process.env.NODE_ENV === 'development'
+    ? process.env.NEXT_PUBLIC_ROUTE_HANDLER
+    : process.env.NEXT_PUBLIC_CLIENT_PROD_URL;
diff --git a/src/middleware.ts b/src/middleware.ts
index 9e04304..bc53ced 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -6,9 +6,20 @@ export const config = {
 
 export async function middleware(request: NextRequest) {
   const currentPath = request.nextUrl.pathname;
+
   const accessToken = request.cookies.get('accessToken')?.value;
   const refreshToken = request.cookies.get('refreshToken')?.value;
 
+  if (currentPath === `/logout`) {
+    const url = request.nextUrl.clone();
+    url.pathname = '/login';
+    const response = NextResponse.redirect(url);
+    response.cookies.delete('refreshToken');
+    response.cookies.delete('accessToken');
+
+    return response;
+  }
+
   if (
     !refreshToken &&
     (currentPath.startsWith('/home') ||