diff --git a/components/Columns/Card.tsx b/components/Columns/Card.tsx
index 3b90624f..857eb502 100644
--- a/components/Columns/Card.tsx
+++ b/components/Columns/Card.tsx
@@ -3,7 +3,7 @@ import useCardId from '@/hooks/ModalCard/useCardId';
 import useCardOpen from '@/hooks/ModalCard/useCardOpen';
 import useDashBoardId from '@/hooks/ModalCard/useDashBoardId';
 import calendar from '@/public/assets/icons/calendar.svg';
-import DefaultImg from '@/public/assets/images/jaws.png';
+import DefaultImg from '@/public/assets/images/jaws.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile, onPc, onTablet } from '@/styles/mediaQuery';
 import { COLORS } from '@/styles/palettes';
diff --git a/components/Columns/Column.tsx b/components/Columns/Column.tsx
index c59311d8..b83582ea 100644
--- a/components/Columns/Column.tsx
+++ b/components/Columns/Column.tsx
@@ -2,8 +2,8 @@ import CountChip from '@/components/Chip/CountChip';
 import Card from '@/components/Columns/Card';
 import Modal from '@/components/Modal/Modal';
 import AddButton from '@/components/common/Button/AddButton';
-import useColumns from '@/hooks/Dashboard/useColumn';
 import useRefresh from '@/hooks/Common/useRefresh';
+import useColumns from '@/hooks/Dashboard/useColumn';
 import BlueEllipse from '@/public/assets/icons/BlueEllipse.svg';
 import setting from '@/public/assets/icons/setting.svg';
 import { fontStyle } from '@/styles/fontStyle';
@@ -39,7 +39,7 @@ function Column({ title, columnId, dashboardId, applyColumnDelete }: ColumnProps
 
   useEffect(() => {
     loadColumCardList(true);
-  }, [columnId, refresh]);
+  }, [columnId, refresh, loadColumCardList]);
 
   return (
     <>
diff --git a/components/DashboardNavbar/DashboardNavbar.tsx b/components/DashboardNavbar/DashboardNavbar.tsx
index 2ecdd590..f328146a 100644
--- a/components/DashboardNavbar/DashboardNavbar.tsx
+++ b/components/DashboardNavbar/DashboardNavbar.tsx
@@ -30,17 +30,6 @@ function DashboardNavbar({ members, totalMembers, isMyDashboard, dashboard }: Da
 
   return (
     <StyledContainer $isMyDashboard={isMyDashboard}>
-      {isModalOpen && (
-        <Modal
-          title="초대하기"
-          getValue={setModalValue}
-          onCancelClick={() => setIsModalOpen(false)}
-          onOkClick={() => {
-            inviteFetch();
-          }}
-        />
-      )}
-
       <StyledTitleContainer>
         <h3>{dashboardTitle}</h3>
         {!isMyDashboard && dashboard && dashboard.createdByMe && (
@@ -69,6 +58,16 @@ function DashboardNavbar({ members, totalMembers, isMyDashboard, dashboard }: Da
         <DarkModeToggleButton />
         <Profile />
       </StyledWrapper>
+      {isModalOpen && (
+        <Modal
+          title="초대하기"
+          getValue={setModalValue}
+          onCancelClick={() => setIsModalOpen(false)}
+          onOkClick={() => {
+            inviteFetch();
+          }}
+        />
+      )}
     </StyledContainer>
   );
 }
@@ -99,7 +98,7 @@ const StyledTitleContainer = styled.div`
   }
 `;
 
-const StyledContainer = styled.div<{ $isMyDashboard: boolean }>`
+const StyledContainer = styled.nav<{ $isMyDashboard: boolean }>`
   position: fixed;
   top: 0;
   width: 100%;
@@ -127,7 +126,7 @@ const StyledContainer = styled.div<{ $isMyDashboard: boolean }>`
   }
 `;
 
-const StyledWrapper = styled.div`
+const StyledWrapper = styled.main`
   position: relative;
   display: flex;
   align-items: center;
diff --git a/components/DashboardNavbar/Members.tsx b/components/DashboardNavbar/Members.tsx
index 871e1443..6027dbc3 100644
--- a/components/DashboardNavbar/Members.tsx
+++ b/components/DashboardNavbar/Members.tsx
@@ -2,7 +2,7 @@ import Image from 'next/image';
 import styled from 'styled-components';
 
 import useMembers from '@/hooks/DashboardNavbar/useMembers';
-import DefaultProfile from '@/public/assets/images/jaws.png';
+import DefaultProfile from '@/public/assets/images/jaws.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile, onPc, onTablet } from '@/styles/mediaQuery';
 import { GetMembersInDashboardItem } from '@/types/api';
diff --git a/components/DashboardNavbar/Profile.tsx b/components/DashboardNavbar/Profile.tsx
index 2b23b139..d87dbdf2 100644
--- a/components/DashboardNavbar/Profile.tsx
+++ b/components/DashboardNavbar/Profile.tsx
@@ -1,9 +1,9 @@
 import Image from 'next/image';
 import styled from 'styled-components';
 
-import useProfile from '@/hooks/DashboardNavbar/useProfile';
 import DashboardDropdown from '@/components/DashboardNavbar/DashboardDropdown';
-import DefaultImg from '@/public/assets/images/jaws.png';
+import useProfile from '@/hooks/DashboardNavbar/useProfile';
+import DefaultImg from '@/public/assets/images/jaws.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile, onPc, onTablet } from '@/styles/mediaQuery';
 
diff --git a/components/Landing/Card.tsx b/components/Landing/Card.tsx
index 0aa7f9cc..0a1d7c73 100644
--- a/components/Landing/Card.tsx
+++ b/components/Landing/Card.tsx
@@ -1,6 +1,6 @@
-import cardImg1 from '@/public/assets/images/landing4.png';
-import cardImg2 from '@/public/assets/images/landing5.png';
-import cardImg3 from '@/public/assets/images/landing6.png';
+import cardImg1 from '@/public/assets/images/landing4.avif';
+import cardImg2 from '@/public/assets/images/landing5.avif';
+import cardImg3 from '@/public/assets/images/landing6.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onPc, onTablet } from '@/styles/mediaQuery';
 import { COLORS } from '@/styles/palettes';
diff --git a/components/Landing/Hero.tsx b/components/Landing/Hero.tsx
index c2c1c458..8bade579 100644
--- a/components/Landing/Hero.tsx
+++ b/components/Landing/Hero.tsx
@@ -1,5 +1,5 @@
 import LoginButton from '@/components/common/Button/LoginButton';
-import HeroImg from '@/public/assets/images/landing1.png';
+import HeroImg from '@/public/assets/images/landing1.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onPc, onTablet } from '@/styles/mediaQuery';
 import { COLORS } from '@/styles/palettes';
diff --git a/components/Landing/Nav.tsx b/components/Landing/Nav.tsx
index a34e09cb..dcf9213a 100644
--- a/components/Landing/Nav.tsx
+++ b/components/Landing/Nav.tsx
@@ -1,8 +1,8 @@
 import useTheme from '@/hooks/Common/useTheme';
 import moonIcon from '@/public/assets/icons/moon.svg';
 import sunIcon from '@/public/assets/icons/sun.svg';
-import logoText from '@/public/assets/images/title.png';
-import logoImage from '@/public/assets/images/transJaws.png';
+import logoText from '@/public/assets/images/title.avif';
+import logoImage from '@/public/assets/images/transJaws.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile, onPc, onTablet } from '@/styles/mediaQuery';
 
diff --git a/components/Landing/Point.tsx b/components/Landing/Point.tsx
index 6818b11a..7fb360e0 100644
--- a/components/Landing/Point.tsx
+++ b/components/Landing/Point.tsx
@@ -1,5 +1,5 @@
-import pointImg1 from '@/public/assets/images/landing2.png';
-import pointImg2 from '@/public/assets/images/landing3.png';
+import pointImg1 from '@/public/assets/images/landing2.avif';
+import pointImg2 from '@/public/assets/images/landing3.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile, onPc, onTablet } from '@/styles/mediaQuery';
 
diff --git a/components/ModalCard/Comment.tsx b/components/ModalCard/Comment.tsx
index b045feaa..60dfcf0c 100644
--- a/components/ModalCard/Comment.tsx
+++ b/components/ModalCard/Comment.tsx
@@ -2,7 +2,7 @@ import BasicInput from '@/components/Input/ModalInputContainer/BasicInput';
 import useUser from '@/hooks/global/useUser';
 import useComment from '@/hooks/useComment';
 
-import DefaultImg from '@/public/assets/images/jaws.png';
+import DefaultImg from '@/public/assets/images/jaws.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile, onTablet } from '@/styles/mediaQuery';
 import { COLORS } from '@/styles/palettes';
diff --git a/components/ModalCard/Manager.tsx b/components/ModalCard/Manager.tsx
index f66a45aa..08177f40 100644
--- a/components/ModalCard/Manager.tsx
+++ b/components/ModalCard/Manager.tsx
@@ -1,5 +1,5 @@
 import useCardId from '@/hooks/ModalCard/useCardId';
-import DefaultImg from '@/public/assets/images/jaws.png';
+import DefaultImg from '@/public/assets/images/jaws.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile } from '@/styles/mediaQuery';
 import { GetCardDetailsItem } from '@/types/api';
diff --git a/components/ModalDropDown/DropDownMenu.tsx b/components/ModalDropDown/DropDownMenu.tsx
index 40e2ec98..ac8e203e 100644
--- a/components/ModalDropDown/DropDownMenu.tsx
+++ b/components/ModalDropDown/DropDownMenu.tsx
@@ -1,7 +1,7 @@
 import StatusChip from '@/components/Chip/StatusChip';
 import useDropDownMenu from '@/hooks/DropDown/useDropDownMenu';
 import Check from '@/public/assets/icons/GrayCheck.svg';
-import DefaultImg from '@/public/assets/images/jaws.png';
+import DefaultImg from '@/public/assets/images/jaws.avif';
 
 import Image from 'next/image';
 import { Dispatch, SetStateAction } from 'react';
diff --git a/components/MyDashboard/MyDashBoardButtonBox.tsx b/components/MyDashboard/MyDashBoardButtonBox.tsx
index a3d8d061..52bb48c0 100644
--- a/components/MyDashboard/MyDashBoardButtonBox.tsx
+++ b/components/MyDashboard/MyDashBoardButtonBox.tsx
@@ -18,7 +18,7 @@ function MyDashBoardButtonBox({ resetToFirst }: MyDashBoardButtonBoxProps) {
 
   if (!pageNum || !totalPages) return null;
   return (
-    <div>
+    <article>
       <ButtonBoxWrapper>
         <DashBoardAddButton onClick={() => setIsOpen(true)} />
         {allItems.map((item) => (
@@ -49,7 +49,7 @@ function MyDashBoardButtonBox({ resetToFirst }: MyDashBoardButtonBoxProps) {
           }}
         />
       )}
-    </div>
+    </article>
   );
 }
 
diff --git a/components/Sidebar/Dashboard.tsx b/components/Sidebar/Dashboard.tsx
index 486ae4b7..30e5f180 100644
--- a/components/Sidebar/Dashboard.tsx
+++ b/components/Sidebar/Dashboard.tsx
@@ -75,7 +75,7 @@ const StyledDashboardGroupContainer = styled.div`
   }
 `;
 
-const StyledTitleWrapper = styled.div`
+const StyledTitleWrapper = styled.p`
   color: ${COLORS.GRAY_78};
   margin-left: 16px;
   overflow-x: hidden;
diff --git a/components/Sidebar/Sidebar.tsx b/components/Sidebar/Sidebar.tsx
index 62dbc313..e0d6ae3c 100644
--- a/components/Sidebar/Sidebar.tsx
+++ b/components/Sidebar/Sidebar.tsx
@@ -3,8 +3,8 @@ import Modal from '@/components/Modal/Modal';
 import Dashboard from '@/components/Sidebar/Dashboard';
 import { INIT_CREATE_DASHBOARD } from '@/constants/InitialModalValues';
 import AddBox from '@/public/assets/icons/invite.svg';
-import LogoTitle from '@/public/assets/images/title.png';
-import Logo from '@/public/assets/images/transJaws.png';
+import LogoTitle from '@/public/assets/images/title.avif';
+import Logo from '@/public/assets/images/transJaws.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile, onPc, onTablet } from '@/styles/mediaQuery';
 import { COLORS } from '@/styles/palettes';
@@ -76,7 +76,7 @@ function Sidebar({ boardId, refreshToggle, refresh }: SidebarProps) {
 
 export default Sidebar;
 
-const StyledContainer = styled.div`
+const StyledContainer = styled.aside`
   position: fixed;
   z-index: 10;
   display: flex;
diff --git a/components/Table/InviteDashBoard.tsx b/components/Table/InviteDashBoard.tsx
index 3d8465d2..abfedd4b 100644
--- a/components/Table/InviteDashBoard.tsx
+++ b/components/Table/InviteDashBoard.tsx
@@ -2,7 +2,7 @@ import TwinButton from '@/components/common/Button/TwinButton';
 import useDeviceType from '@/hooks/Common/useDeviceType';
 import useInviteDashBoard from '@/hooks/Dashboard/useInviteDashBoard';
 import search from '@/public/assets/icons/Search.svg';
-import NoContent from '@/public/assets/images/NoContent.png';
+import NoContent from '@/public/assets/images/NoContent.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile, onTablet } from '@/styles/mediaQuery';
 import { COLORS } from '@/styles/palettes';
@@ -30,10 +30,10 @@ function InviteDashBoard({ refreshToFirst }: InviteDashBoardProps) {
   } = useInviteDashBoard({ refreshToFirst });
 
   return (
-    <StyledDiv $data={dataSource}>
+    <StyledArticle $data={dataSource}>
       <StyledP>초대받은 대시보드</StyledP>
       {dataSource.length !== 0 ? (
-        <div>
+        <section>
           <form>
             <StyledInputDiv>
               <label htmlFor="search">
@@ -100,18 +100,16 @@ function InviteDashBoard({ refreshToFirst }: InviteDashBoardProps) {
                         <StyleListWrapper>
                           <StyledListInWrapper>{item.dashboard.title}</StyledListInWrapper>
                           <StyledListInWrapper>{item.inviter.nickname}</StyledListInWrapper>
-                          <StyledListInWrapper>
-                            <TwinButton
-                              text1="수락"
-                              text2="거절"
-                              isViolet={true}
-                              size="small"
-                              className="temp2"
-                              leftViolet={true}
-                              onLeftClick={() => handleAccept({ acceptid: item.id, accept: true })}
-                              onRightClick={() => handleAccept({ acceptid: item.id, accept: false })}
-                            />
-                          </StyledListInWrapper>
+                          <TwinButton
+                            text1="수락"
+                            text2="거절"
+                            isViolet={true}
+                            size="small"
+                            className="temp2"
+                            leftViolet={true}
+                            onLeftClick={() => handleAccept({ acceptid: item.id, accept: true })}
+                            onRightClick={() => handleAccept({ acceptid: item.id, accept: false })}
+                          />
                         </StyleListWrapper>
                       )}
                       <StyledHr />
@@ -123,22 +121,22 @@ function InviteDashBoard({ refreshToFirst }: InviteDashBoardProps) {
               )}
             </InfiniteScroll>
           </Div>
-        </div>
+        </section>
       ) : (
         <>
           <NoContentContainer>
-            <NoContentImage src={NoContent} alt="없는컨텐츠" />
+            <NoContentImage priority width={100} height={100} src={NoContent} alt="없는컨텐츠" />
             <NoContentDiv>아직 초대받은 대시보드가 없어요</NoContentDiv>
           </NoContentContainer>
         </>
       )}
-    </StyledDiv>
+    </StyledArticle>
   );
 }
 
 export default InviteDashBoard;
 
-const Div = styled.div`
+const Div = styled.section`
   height: 430px;
   overflow-x: hidden;
 
@@ -157,7 +155,7 @@ const Div = styled.div`
   }
 `;
 
-const StyledDiv = styled.div<{ $data: any }>`
+const StyledArticle = styled.article<{ $data: any }>`
   width: 1023px;
   height: 630px;
   border-radius: 8px;
@@ -272,7 +270,7 @@ const StyledWrapper = styled.div`
     width: 23%;
   }
 `;
-const StyledInWrapper = styled.div`
+const StyledInWrapper = styled.p`
   width: 100%;
   color: ${COLORS.GRAY_9F};
   ${fontStyle(16, 400)};
@@ -294,7 +292,7 @@ const StyleListWrapper = styled.div`
     width: 70%;
   }
 `;
-const StyledListInWrapper = styled.div`
+const StyledListInWrapper = styled.p`
   float: left;
   width: 100%;
   color: var(--content-main);
diff --git a/components/Table/InviteDetailsTable.tsx b/components/Table/InviteDetailsTable.tsx
index 736bad48..326a921a 100644
--- a/components/Table/InviteDetailsTable.tsx
+++ b/components/Table/InviteDetailsTable.tsx
@@ -8,7 +8,7 @@ import Button from '@/components/common/Button/Button';
 import PaginationButton from '@/components/common/Button/PaginationButton';
 import usePagination from '@/hooks/Common/usePagination';
 import useInviteDetailsTable from '@/hooks/Edit/useInviteDetailsTable';
-import NoItem from '@/public/assets/images/noItem.png';
+import NoItem from '@/public/assets/images/NoContent.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile, onTablet } from '@/styles/mediaQuery';
 import { COLORS } from '@/styles/palettes';
diff --git a/components/Table/MembersTable.tsx b/components/Table/MembersTable.tsx
index 30ee9bba..8aa74596 100644
--- a/components/Table/MembersTable.tsx
+++ b/components/Table/MembersTable.tsx
@@ -5,7 +5,7 @@ import { useDeleteMemberInDashboard } from '@/apis/queries/members';
 import Button from '@/components/common/Button/Button';
 import PaginationButton from '@/components/common/Button/PaginationButton';
 import usePagination from '@/hooks/Common/usePagination';
-import DefaultImage from '@/public/assets/images/jaws.png';
+import DefaultImage from '@/public/assets/images/jaws.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile, onTablet } from '@/styles/mediaQuery';
 import { COLORS } from '@/styles/palettes';
diff --git a/constants/Metadata.ts b/constants/Metadata.ts
index a9bda949..528cc6ec 100644
--- a/constants/Metadata.ts
+++ b/constants/Metadata.ts
@@ -1,9 +1,11 @@
-import mainLogo from '@/public/assets/images/jaws.png';
+import mainLogo from '@/public/assets/images/jaws.avif';
 
 export const METADATA = {
-  title: 'Jawstify',
-  description: '일정관리 조습니다🦈',
-  url: 'https://taskify4.vercel.app/',
-  image: mainLogo.src,
-  locale: 'ko_KR',
+  TITLE: 'Jawstify',
+  DESCRIPTION: '일정관리 조습니다🦈',
+  URL: 'https://taskify4.vercel.app/',
+  IMAGE: mainLogo.src,
+  LOCALE: 'ko_KR',
+  TYPE: 'website',
+  DOMAIN: 'taskify4.vercel.app',
 };
diff --git a/pages/404/index.tsx b/pages/404/index.tsx
index 768e3335..eaea48a7 100644
--- a/pages/404/index.tsx
+++ b/pages/404/index.tsx
@@ -1,34 +1,28 @@
 import Button from '@/components/common/Button/Button';
-import DefaultImg from '@/public/assets/images/jaws.png';
+import DefaultImg from '@/public/assets/images/jaws.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { COLORS } from '@/styles/palettes';
 
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import { Helmet } from 'react-helmet';
 import { styled } from 'styled-components';
 
 function NotFound() {
   const router = useRouter();
   const back = router.back;
   return (
-    <>
-      <Helmet>
-        <title>404 - Jawstify</title>
-      </Helmet>
-      <StyledContainer>
-        <Styled404Text>404</Styled404Text>
-        <Styled404Image width={200} height={200} src={DefaultImg} alt="crying emoji" />
-        <StyledText>조습니다... 잘못 들어오셨습니다 🦈</StyledText>
-        <Button text="뒤로가기" size="large" onClick={back}></Button>
-      </StyledContainer>
-    </>
+    <StyledContainer>
+      <Styled404Text>404</Styled404Text>
+      <Styled404Image width={200} height={200} src={DefaultImg} alt="crying emoji" />
+      <StyledText>조습니다... 잘못 들어오셨습니다 🦈</StyledText>
+      <Button text="뒤로가기" size="large" onClick={back}></Button>
+    </StyledContainer>
   );
 }
 
 export default NotFound;
 
-const StyledContainer = styled.div`
+const StyledContainer = styled.main`
   height: 100vh;
   display: flex;
   flex-direction: column;
@@ -37,16 +31,16 @@ const StyledContainer = styled.div`
   background: ${COLORS.VIOLET_55};
 `;
 
+const Styled404Text = styled.h1`
+  ${fontStyle(250, 800)}
+`;
+
 const Styled404Image = styled(Image)`
   position: absolute;
   margin-bottom: 120px;
 `;
 
-const Styled404Text = styled.h1`
-  ${fontStyle(250, 800)}
-`;
-
-const StyledText = styled.h1`
+const StyledText = styled.h2`
   ${fontStyle(40, 600)}
   margin-bottom: 30px;
 `;
diff --git a/pages/[dashboardid]/edit.tsx b/pages/[dashboardid]/edit.tsx
index 0ad90f7a..b26bdeda 100644
--- a/pages/[dashboardid]/edit.tsx
+++ b/pages/[dashboardid]/edit.tsx
@@ -1,6 +1,5 @@
 import { GetServerSideProps } from 'next';
 import { useRouter } from 'next/router';
-import { Helmet } from 'react-helmet';
 import styled from 'styled-components';
 
 import { useDeleteDashboard } from '@/apis/queries/dashboard';
@@ -50,33 +49,23 @@ function BoardEdit({ dashboardId }: BoardEditProps) {
   };
 
   return (
-    <>
-      <Helmet>
-        <title>대시보드 수정 - Jawstify</title>
-      </Helmet>
-      <StyledContainer>
-        <DashboardNavbar
-          members={members}
-          totalMembers={totalMembers}
-          dashboard={dashboardData}
-          isMyDashboard={false}
-        />
-        <Sidebar />
-        <StyledWrapper>
-          <StyledInWrapper>
-            <StyledRouterButton onClick={backHome}>돌아가기</StyledRouterButton>
-            <StyledMainWrapper>
-              <DashboardEdit dashboardData={dashboardData} />
-              <StyledMainInWrapper>
-                <MembersTable dashboardId={Number(dashboardId)} />
-              </StyledMainInWrapper>
-              <InviteDetailsTable dashboardId={Number(dashboardId)} />
-              <DeleteButton onClick={deleteDashboard} />
-            </StyledMainWrapper>
-          </StyledInWrapper>
-        </StyledWrapper>
-      </StyledContainer>
-    </>
+    <StyledContainer>
+      <DashboardNavbar members={members} totalMembers={totalMembers} dashboard={dashboardData} isMyDashboard={false} />
+      <Sidebar />
+      <StyledWrapper>
+        <StyledInWrapper>
+          <StyledRouterButton onClick={backHome}>돌아가기</StyledRouterButton>
+          <StyledMainWrapper>
+            <DashboardEdit dashboardData={dashboardData} />
+            <StyledMainInWrapper>
+              <MembersTable dashboardId={Number(dashboardId)} />
+            </StyledMainInWrapper>
+            <InviteDetailsTable dashboardId={Number(dashboardId)} />
+            <DeleteButton onClick={deleteDashboard} />
+          </StyledMainWrapper>
+        </StyledInWrapper>
+      </StyledWrapper>
+    </StyledContainer>
   );
 }
 
diff --git a/pages/_app.tsx b/pages/_app.tsx
index f914d402..015a376a 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,10 +1,12 @@
 /* eslint-disable @next/next/inline-script-id */
+import { METADATA } from '@/constants/Metadata';
 import * as gtag from '@/lib/gtag';
 import GlobalStyles from '@/styles/GlobalStyles';
 import { HydrationBoundary, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import type { AppProps } from 'next/app';
+import Head from 'next/head';
 import Script from 'next/script';
 import { useState } from 'react';
 import { Toaster } from 'react-hot-toast';
@@ -24,6 +26,20 @@ export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
       {/* <!-- Google tag (gtag.js) --> */}
+      <Head>
+        <title>Jawstify</title>
+        <link rel="icon" href={METADATA.IMAGE} sizes="any" />
+        <meta property="og:title" content={METADATA.TITLE} />
+        <meta property="og:url" content={METADATA.URL} />
+        <meta property="og:image" content={METADATA.IMAGE} />
+        <meta property="og:description" content={METADATA.DESCRIPTION} />
+        <meta name="twitter:card" content="summary" />
+        <meta property="twitter:domain" content={METADATA.DOMAIN} />
+        <meta property="twitter:url" content={METADATA.URL} />
+        <meta name="twitter:title" content={METADATA.TITLE} />
+        <meta name="twitter:description" content={METADATA.DESCRIPTION} />
+        <meta name="twitter:image" content={METADATA.IMAGE} />
+      </Head>
       <Script async src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`} />
       <Script
         strategy="afterInteractive"
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 90edfa7b..e02a6290 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,6 +1,3 @@
-import { METADATA } from '@/constants/Metadata';
-
-import { Metadata } from 'next';
 import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document';
 import { ServerStyleSheet } from 'styled-components';
 
@@ -21,6 +18,7 @@ class MyDocument extends Document {
         });
 
       const initialProps = await Document.getInitialProps(ctx);
+
       return {
         ...initialProps,
         styles: (
@@ -35,33 +33,10 @@ class MyDocument extends Document {
     }
   }
 
-  metadata: Metadata = {
-    metadataBase: new URL('https://taskify3.vercel.app/'),
-    title: METADATA.title,
-    description: METADATA.description,
-    openGraph: {
-      title: METADATA.title,
-      description: METADATA.description,
-      url: METADATA.url,
-      siteName: METADATA.title,
-      images: [
-        {
-          url: METADATA.image,
-          width: 388,
-          height: 388,
-        },
-      ],
-      locale: METADATA.locale,
-      type: 'website',
-    },
-  };
-
   render() {
     return (
       <Html lang="ko">
-        <Head>
-          <link rel="icon" href={METADATA.image} sizes="any" />
-        </Head>
+        <Head></Head>
         <body>
           <script dangerouslySetInnerHTML={{ __html: themeInitializerScript }} />
           <Main />
diff --git a/pages/dashboard/[dashboardid].tsx b/pages/dashboard/[dashboardid].tsx
index 09fb8f91..8d3f4d0c 100644
--- a/pages/dashboard/[dashboardid].tsx
+++ b/pages/dashboard/[dashboardid].tsx
@@ -2,15 +2,14 @@ import Columns from '@/components/Columns/Columns';
 import DashboardNavbar from '@/components/DashboardNavbar/DashboardNavbar';
 import Modal from '@/components/Modal/Modal';
 import Sidebar from '@/components/Sidebar/Sidebar';
-import useCardOpen from '@/hooks/ModalCard/useCardOpen';
+import useRedirectByLogin from '@/hooks/Auth/useRedirectByLogin';
 import useDashboard from '@/hooks/Dashboard/useDashboard';
 import useRedirectByDashboardId from '@/hooks/Dashboard/useRedirectByDashboardId';
-import useRedirectByLogin from '@/hooks/Auth/useRedirectByLogin';
+import useCardOpen from '@/hooks/ModalCard/useCardOpen';
 import { onPc, onTablet } from '@/styles/mediaQuery';
 
 import { GetServerSideProps } from 'next';
 import { useState } from 'react';
-import { Helmet } from 'react-helmet';
 import styled from 'styled-components';
 
 interface DashBoardIDProps {
@@ -41,9 +40,6 @@ function DashBoardID({ dashboardId }: DashBoardIDProps) {
 
   return (
     <>
-      <Helmet>
-        <title>{`${dashboardData.title} - Jawstify`}</title>
-      </Helmet>
       <StyledContainer>
         <Sidebar boardId={Number(dashboardId)} refresh={refresh} />
         <DashboardNavbar
diff --git a/pages/index.tsx b/pages/index.tsx
index dda13c5c..ba1b2a8b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -5,15 +5,10 @@ import Nav from '@/components/Landing/Nav';
 import PointSection from '@/components/Landing/Point';
 import useRedirectByLogin from '@/hooks/Auth/useRedirectByLogin';
 
-import { Helmet } from 'react-helmet';
-
 function Landing() {
   useRedirectByLogin();
   return (
     <>
-      <Helmet>
-        <title>일정 관리는 Jawstify - Jawstify</title>
-      </Helmet>
       <Nav />
       <HeroSection />
       <PointSection />
diff --git a/pages/login/index.tsx b/pages/login/index.tsx
index d5baa165..979f3c87 100644
--- a/pages/login/index.tsx
+++ b/pages/login/index.tsx
@@ -5,15 +5,14 @@ import LoginButton from '@/components/common/Button/LoginButton';
 import * as C from '@/constants/SignValidate';
 import useAuth, { LoginFormValue } from '@/hooks/Auth/useAuth';
 import useRedirectByLogin from '@/hooks/Auth/useRedirectByLogin';
-import mainLogoText from '@/public/assets/images/title.png';
-import mainLogo from '@/public/assets/images/transJaws.png';
+import mainLogoText from '@/public/assets/images/title.avif';
+import mainLogo from '@/public/assets/images/transJaws.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile } from '@/styles/mediaQuery';
 import { COLORS } from '@/styles/palettes';
 
 import Image from 'next/image';
 import Link from 'next/link';
-import { Helmet } from 'react-helmet';
 import { useForm } from 'react-hook-form';
 import styled from 'styled-components';
 
@@ -33,62 +32,57 @@ function Login() {
   ]);
 
   return (
-    <>
-      <Helmet>
-        <title>로그인 - Jawstify</title>
-      </Helmet>
-      <StyledContainer>
-        <StyledLogoContainer href={'/'}>
-          <StyledLogoImg src={mainLogo} height={190} width={190} alt="메인 로고" />
-          <StyledLogoText src={mainLogoText} height={55} width={240} alt="메인 로고 텍스트" />
-          <StyledDescription>오늘도 만나서 조습니다!</StyledDescription>
-        </StyledLogoContainer>
-
-        <StyledForm onSubmit={handleSubmit(onLoginSubmit)}>
-          <FormInput
-            label="이메일"
-            register={register('email', {
-              required: C.NO_VALUE_ERROR,
-              pattern: { value: C.EMAIL_VALIDATE_PATTERN, message: C.EMAIL_ERROR.FORMAT_ERROR },
-              onChange: handleChange,
-            })}
-            errorMessage={errors?.email?.message}
-          />
-          <FormInput
-            label="비밀번호"
-            register={register('password', {
-              required: C.NO_VALUE_ERROR,
-              onChange: handleChange,
-            })}
-            errorMessage={errors?.password?.message}
-          />
-          <LoginButton
-            active={isBtnActive}
-            usingType="login"
-            text="로그인"
-            type="submit"
-            margin="7px 0 -15px "
-          ></LoginButton>
-        </StyledForm>
-        <GoogleLoginButton />
-
-        <StyledBottomTextContainer>
-          <StyledBottomText>
-            회원이 아니신가요? <StyledLink href="/signup">회원가입 하기</StyledLink>
-          </StyledBottomText>
-        </StyledBottomTextContainer>
-        {isModalOpen && (
-          <Modal
-            isSingleButton
-            title=""
-            description={alertMessage.serverMessage}
-            onOkClick={() => {
-              setIsModalOpen(false);
-            }}
-          />
-        )}
-      </StyledContainer>
-    </>
+    <StyledContainer>
+      <StyledLogoContainer href={'/'}>
+        <StyledLogoImg src={mainLogo} height={190} width={190} alt="메인 로고" />
+        <StyledLogoText src={mainLogoText} height={55} width={240} alt="메인 로고 텍스트" />
+        <StyledDescription>오늘도 만나서 조습니다!</StyledDescription>
+      </StyledLogoContainer>
+
+      <StyledForm onSubmit={handleSubmit(onLoginSubmit)}>
+        <FormInput
+          label="이메일"
+          register={register('email', {
+            required: C.NO_VALUE_ERROR,
+            pattern: { value: C.EMAIL_VALIDATE_PATTERN, message: C.EMAIL_ERROR.FORMAT_ERROR },
+            onChange: handleChange,
+          })}
+          errorMessage={errors?.email?.message}
+        />
+        <FormInput
+          label="비밀번호"
+          register={register('password', {
+            required: C.NO_VALUE_ERROR,
+            onChange: handleChange,
+          })}
+          errorMessage={errors?.password?.message}
+        />
+        <LoginButton
+          active={isBtnActive}
+          usingType="login"
+          text="로그인"
+          type="submit"
+          margin="7px 0 -15px "
+        ></LoginButton>
+      </StyledForm>
+      <GoogleLoginButton />
+
+      <StyledBottomTextContainer>
+        <StyledBottomText>
+          회원이 아니신가요? <StyledLink href="/signup">회원가입 하기</StyledLink>
+        </StyledBottomText>
+      </StyledBottomTextContainer>
+      {isModalOpen && (
+        <Modal
+          isSingleButton
+          title=""
+          description={alertMessage.serverMessage}
+          onOkClick={() => {
+            setIsModalOpen(false);
+          }}
+        />
+      )}
+    </StyledContainer>
   );
 }
 
diff --git a/pages/mydashboard/index.tsx b/pages/mydashboard/index.tsx
index e6d935bd..d590bd72 100644
--- a/pages/mydashboard/index.tsx
+++ b/pages/mydashboard/index.tsx
@@ -2,11 +2,10 @@ import DashboardNavbar from '@/components/DashboardNavbar/DashboardNavbar';
 import MyDashBoardButtonBox from '@/components/MyDashboard/MyDashBoardButtonBox';
 import Sidebar from '@/components/Sidebar/Sidebar';
 import InviteDashBoard from '@/components/Table/InviteDashBoard';
-import useMyDashboard from '@/hooks/Dashboard/useMyDashboard';
 import useRedirectByLogin from '@/hooks/Auth/useRedirectByLogin';
+import useMyDashboard from '@/hooks/Dashboard/useMyDashboard';
 import { onMobile, onTablet } from '@/styles/mediaQuery';
 
-import { Helmet } from 'react-helmet';
 import styled from 'styled-components';
 
 function MyDashBoard() {
@@ -16,30 +15,19 @@ function MyDashBoard() {
 
   return (
     <>
-      <Helmet>
-        <title>내 대시보드 - Jawstify</title>
-      </Helmet>
-      <StyledContainer>
-        <DashboardNavbar isMyDashboard={true} />
-        <Sidebar />
-        <StyledWrapper>
-          <MyDashBoardButtonBox resetToFirst={resetToFirst} />
-          <InviteDashBoard refreshToFirst={refreshToFirst} />
-        </StyledWrapper>
-      </StyledContainer>
+      <DashboardNavbar isMyDashboard={true} />
+      <Sidebar />
+      <StyledWrapper>
+        <MyDashBoardButtonBox resetToFirst={resetToFirst} />
+        <InviteDashBoard refreshToFirst={refreshToFirst} />
+      </StyledWrapper>
     </>
   );
 }
 
 export default MyDashBoard;
 
-const StyledContainer = styled.div`
-  background: var(--content-back);
-  width: 100%;
-  height: 100vh;
-`;
-
-const StyledWrapper = styled.div`
+const StyledWrapper = styled.main`
   position: absolute;
   top: 70px;
   left: 300px;
diff --git a/pages/mypage/index.tsx b/pages/mypage/index.tsx
index 8d480893..61ec39f4 100644
--- a/pages/mypage/index.tsx
+++ b/pages/mypage/index.tsx
@@ -2,15 +2,14 @@ import DashboardNavbar from '@/components/DashboardNavbar/DashboardNavbar';
 import PasswordManagerBox from '@/components/MyPage/PasswordManagerBox';
 import ProfileBox from '@/components/MyPage/ProfileBox';
 import Sidebar from '@/components/Sidebar/Sidebar';
-import useUserData from '@/hooks/global/useUserData';
 import useRedirectByLogin from '@/hooks/Auth/useRedirectByLogin';
+import useUserData from '@/hooks/global/useUserData';
 import BackImg from '@/public/assets/icons/LeftArrow.svg';
 import { fontStyle } from '@/styles/fontStyle';
 import { onMobile, onTablet } from '@/styles/mediaQuery';
 
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
-import { Helmet } from 'react-helmet';
 import { styled } from 'styled-components';
 
 function MyPage() {
@@ -30,28 +29,23 @@ function MyPage() {
   }, [user]);
 
   return (
-    <>
-      <Helmet>
-        <title>계정 관리 - Jawstify</title>
-      </Helmet>
-      <StyledContainer>
-        <DashboardNavbar isMyDashboard={false} />
-        <Sidebar refresh={refresh} />
-        <StyledWrapper>
-          <StyledInWrapper>
-            <StyledBackWrapper onClick={backHome}>돌아가기</StyledBackWrapper>
-            <ProfileBox
-              email={user.email}
-              nickname={nickname}
-              profileImg={previewImage}
-              setNickName={setNickName}
-              setPreviewImage={setPreviewImage}
-            />
-            <PasswordManagerBox />
-          </StyledInWrapper>
-        </StyledWrapper>
-      </StyledContainer>
-    </>
+    <StyledContainer>
+      <DashboardNavbar isMyDashboard={false} />
+      <Sidebar refresh={refresh} />
+      <StyledWrapper>
+        <StyledInWrapper>
+          <StyledBackWrapper onClick={backHome}>돌아가기</StyledBackWrapper>
+          <ProfileBox
+            email={user.email}
+            nickname={nickname}
+            profileImg={previewImage}
+            setNickName={setNickName}
+            setPreviewImage={setPreviewImage}
+          />
+          <PasswordManagerBox />
+        </StyledInWrapper>
+      </StyledWrapper>
+    </StyledContainer>
   );
 }
 
diff --git a/pages/signup/index.tsx b/pages/signup/index.tsx
index f4861765..fe275415 100644
--- a/pages/signup/index.tsx
+++ b/pages/signup/index.tsx
@@ -6,14 +6,13 @@ import * as C from '@/constants/SignValidate';
 import useAuth, { SignUpFormValue } from '@/hooks/Auth/useAuth';
 import useRedirectByLogin from '@/hooks/Auth/useRedirectByLogin';
 import * as L from '@/pages/login';
-import mainLogoText from '@/public/assets/images/title.png';
-import mainLogo from '@/public/assets/images/transJaws.png';
+import mainLogoText from '@/public/assets/images/title.avif';
+import mainLogo from '@/public/assets/images/transJaws.avif';
 import { fontStyle } from '@/styles/fontStyle';
 import { COLORS } from '@/styles/palettes';
 
 import { useRouter } from 'next/router';
 import { useRef } from 'react';
-import { Helmet } from 'react-helmet';
 import { useForm } from 'react-hook-form';
 import styled from 'styled-components';
 
@@ -43,86 +42,81 @@ function SignUp() {
   passwordRef.current = getValues('password');
 
   return (
-    <>
-      <Helmet>
-        <title>회원가입 - Jawstify</title>
-      </Helmet>
-      <StyledContainer>
-        <L.StyledLogoContainer href={'/'}>
-          <L.StyledLogoImg src={mainLogo} height={190} width={190} alt="메인 로고" />
-          <L.StyledLogoText src={mainLogoText} height={55} width={240} alt="메인 로고 텍스트" />
-          <L.StyledDescription>첫 방문 조습니다!</L.StyledDescription>
-        </L.StyledLogoContainer>
-
-        <StyledForm2 onSubmit={handleSubmit(onSignUpSubmit)}>
-          <StyledFormInputContainer>
-            <FormInput
-              label="이메일"
-              register={register('email', {
-                required: C.NO_VALUE_ERROR,
-                pattern: { value: C.EMAIL_VALIDATE_PATTERN, message: C.EMAIL_ERROR.FORMAT_ERROR },
-                onChange: handleChange,
-              })}
-              errorMessage={errors?.email?.message || alertMessage?.serverMessage}
-            />
-            <FormInput
-              label="닉네임"
-              register={register('nickname', { required: C.NO_VALUE_ERROR, onChange: handleChange })}
-              errorMessage={errors?.nickname?.message}
-            />
-          </StyledFormInputContainer>
+    <StyledContainer>
+      <L.StyledLogoContainer href={'/'}>
+        <L.StyledLogoImg src={mainLogo} height={190} width={190} alt="메인 로고" />
+        <L.StyledLogoText src={mainLogoText} height={55} width={240} alt="메인 로고 텍스트" />
+        <L.StyledDescription>첫 방문 조습니다!</L.StyledDescription>
+      </L.StyledLogoContainer>
+
+      <StyledForm2 onSubmit={handleSubmit(onSignUpSubmit)}>
+        <StyledFormInputContainer>
           <FormInput
-            label="비밀번호"
-            register={register('password', {
+            label="이메일"
+            register={register('email', {
               required: C.NO_VALUE_ERROR,
-              pattern: { value: C.PWD_VALIDATE_PATTERN, message: C.PWD_ERROR.FORMAT_ERROR },
-              minLength: { value: 8, message: C.PWD_ERROR.MIN_LENGTH_ERROR },
+              pattern: { value: C.EMAIL_VALIDATE_PATTERN, message: C.EMAIL_ERROR.FORMAT_ERROR },
               onChange: handleChange,
             })}
-            errorMessage={errors?.password?.message}
+            errorMessage={errors?.email?.message || alertMessage?.serverMessage}
           />
           <FormInput
-            label="비밀번호 확인"
-            register={register('pwdcheck', {
-              required: C.NO_VALUE_ERROR,
-              validate: { pwdNotSame: (value) => value === passwordRef.current || C.PWD_CHECK_ERROR.PWD_NOT_SAME },
-              onChange: handleChange,
-            })}
-            errorMessage={errors?.pwdcheck?.message}
+            label="닉네임"
+            register={register('nickname', { required: C.NO_VALUE_ERROR, onChange: handleChange })}
+            errorMessage={errors?.nickname?.message}
           />
-          <StyledCheckBoxContainer>
-            <StyledCheckBox
-              type="checkbox"
-              checked={isAgreeChecked}
-              onChange={() => {
-                setIsAgreeChecked((prev) => !prev);
-              }}
-            />
-            <StyledText>이용약관 조습니다.</StyledText>
-          </StyledCheckBoxContainer>
-          {!isAgreeChecked && <StyledAgreeNotCheckedText>{alertMessage.noCheck}</StyledAgreeNotCheckedText>}
-          <LoginButton active={isBtnActive} usingType="login" text="회원가입" type="submit" margin="-3px 0 0" />
-        </StyledForm2>
-        <GoogleLoginButton />
-
-        <StyledBottomTextContainer>
-          <StyledText>
-            이미 가입하셨나요? <L.StyledLink href="/login">로그인하러 가기</L.StyledLink>
-          </StyledText>
-        </StyledBottomTextContainer>
-        {isModalOpen && (
-          <Modal
-            isSingleButton
-            title=""
-            description={alertMessage.serverMessage}
-            onOkClick={() => {
-              setIsModalOpen(false);
-              if (alertMessage.serverMessage === C.SIGNUP_SUCCESS_MSG) router.push('/login');
+        </StyledFormInputContainer>
+        <FormInput
+          label="비밀번호"
+          register={register('password', {
+            required: C.NO_VALUE_ERROR,
+            pattern: { value: C.PWD_VALIDATE_PATTERN, message: C.PWD_ERROR.FORMAT_ERROR },
+            minLength: { value: 8, message: C.PWD_ERROR.MIN_LENGTH_ERROR },
+            onChange: handleChange,
+          })}
+          errorMessage={errors?.password?.message}
+        />
+        <FormInput
+          label="비밀번호 확인"
+          register={register('pwdcheck', {
+            required: C.NO_VALUE_ERROR,
+            validate: { pwdNotSame: (value) => value === passwordRef.current || C.PWD_CHECK_ERROR.PWD_NOT_SAME },
+            onChange: handleChange,
+          })}
+          errorMessage={errors?.pwdcheck?.message}
+        />
+        <StyledCheckBoxContainer>
+          <StyledCheckBox
+            type="checkbox"
+            checked={isAgreeChecked}
+            onChange={() => {
+              setIsAgreeChecked((prev) => !prev);
             }}
           />
-        )}
-      </StyledContainer>
-    </>
+          <StyledText>이용약관 조습니다.</StyledText>
+        </StyledCheckBoxContainer>
+        {!isAgreeChecked && <StyledAgreeNotCheckedText>{alertMessage.noCheck}</StyledAgreeNotCheckedText>}
+        <LoginButton active={isBtnActive} usingType="login" text="회원가입" type="submit" margin="-3px 0 0" />
+      </StyledForm2>
+      <GoogleLoginButton />
+
+      <StyledBottomTextContainer>
+        <StyledText>
+          이미 가입하셨나요? <L.StyledLink href="/login">로그인하러 가기</L.StyledLink>
+        </StyledText>
+      </StyledBottomTextContainer>
+      {isModalOpen && (
+        <Modal
+          isSingleButton
+          title=""
+          description={alertMessage.serverMessage}
+          onOkClick={() => {
+            setIsModalOpen(false);
+            if (alertMessage.serverMessage === C.SIGNUP_SUCCESS_MSG) router.push('/login');
+          }}
+        />
+      )}
+    </StyledContainer>
   );
 }
 
diff --git a/public/assets/fonts/Montserrat/Montserrat-Bold.ttf b/public/assets/fonts/Montserrat-Bold.ttf
similarity index 100%
rename from public/assets/fonts/Montserrat/Montserrat-Bold.ttf
rename to public/assets/fonts/Montserrat-Bold.ttf
diff --git a/public/assets/fonts/Pretendard-Regular.woff b/public/assets/fonts/Pretendard-Regular.woff
new file mode 100644
index 00000000..7ce7b788
Binary files /dev/null and b/public/assets/fonts/Pretendard-Regular.woff differ
diff --git a/public/assets/images/NoContent.avif b/public/assets/images/NoContent.avif
new file mode 100644
index 00000000..fa153af1
Binary files /dev/null and b/public/assets/images/NoContent.avif differ
diff --git a/public/assets/images/NoContent.png b/public/assets/images/NoContent.png
deleted file mode 100644
index cf1d74e1..00000000
Binary files a/public/assets/images/NoContent.png and /dev/null differ
diff --git a/public/assets/images/cardImage.avif b/public/assets/images/cardImage.avif
new file mode 100644
index 00000000..f85a26ba
Binary files /dev/null and b/public/assets/images/cardImage.avif differ
diff --git a/public/assets/images/cardImage.png b/public/assets/images/cardImage.png
deleted file mode 100644
index ac37f177..00000000
Binary files a/public/assets/images/cardImage.png and /dev/null differ
diff --git a/public/assets/images/jaws.avif b/public/assets/images/jaws.avif
new file mode 100644
index 00000000..3ad60b3b
Binary files /dev/null and b/public/assets/images/jaws.avif differ
diff --git a/public/assets/images/jaws.png b/public/assets/images/jaws.png
deleted file mode 100644
index da726d5d..00000000
Binary files a/public/assets/images/jaws.png and /dev/null differ
diff --git a/public/assets/images/landing1.avif b/public/assets/images/landing1.avif
new file mode 100644
index 00000000..c483da73
Binary files /dev/null and b/public/assets/images/landing1.avif differ
diff --git a/public/assets/images/landing1.png b/public/assets/images/landing1.png
deleted file mode 100644
index 1d926d41..00000000
Binary files a/public/assets/images/landing1.png and /dev/null differ
diff --git a/public/assets/images/landing2.avif b/public/assets/images/landing2.avif
new file mode 100644
index 00000000..680ee0f0
Binary files /dev/null and b/public/assets/images/landing2.avif differ
diff --git a/public/assets/images/landing2.png b/public/assets/images/landing2.png
deleted file mode 100644
index ca311fa6..00000000
Binary files a/public/assets/images/landing2.png and /dev/null differ
diff --git a/public/assets/images/landing3.avif b/public/assets/images/landing3.avif
new file mode 100644
index 00000000..f84cf44f
Binary files /dev/null and b/public/assets/images/landing3.avif differ
diff --git a/public/assets/images/landing3.png b/public/assets/images/landing3.png
deleted file mode 100644
index f2016143..00000000
Binary files a/public/assets/images/landing3.png and /dev/null differ
diff --git a/public/assets/images/landing4.avif b/public/assets/images/landing4.avif
new file mode 100644
index 00000000..7bf5128e
Binary files /dev/null and b/public/assets/images/landing4.avif differ
diff --git a/public/assets/images/landing4.png b/public/assets/images/landing4.png
deleted file mode 100644
index d9860a14..00000000
Binary files a/public/assets/images/landing4.png and /dev/null differ
diff --git a/public/assets/images/landing5.avif b/public/assets/images/landing5.avif
new file mode 100644
index 00000000..34c63042
Binary files /dev/null and b/public/assets/images/landing5.avif differ
diff --git a/public/assets/images/landing5.png b/public/assets/images/landing5.png
deleted file mode 100644
index 9a7c48db..00000000
Binary files a/public/assets/images/landing5.png and /dev/null differ
diff --git a/public/assets/images/landing6.avif b/public/assets/images/landing6.avif
new file mode 100644
index 00000000..b22c4ba5
Binary files /dev/null and b/public/assets/images/landing6.avif differ
diff --git a/public/assets/images/landing6.png b/public/assets/images/landing6.png
deleted file mode 100644
index c2ddb49e..00000000
Binary files a/public/assets/images/landing6.png and /dev/null differ
diff --git a/public/assets/images/noItem.png b/public/assets/images/noItem.png
deleted file mode 100644
index 16bc4667..00000000
Binary files a/public/assets/images/noItem.png and /dev/null differ
diff --git a/public/assets/images/title.avif b/public/assets/images/title.avif
new file mode 100644
index 00000000..e773890c
Binary files /dev/null and b/public/assets/images/title.avif differ
diff --git a/public/assets/images/title.png b/public/assets/images/title.png
deleted file mode 100644
index 6f24649f..00000000
Binary files a/public/assets/images/title.png and /dev/null differ
diff --git a/public/assets/images/transJaws.avif b/public/assets/images/transJaws.avif
new file mode 100644
index 00000000..25c46375
Binary files /dev/null and b/public/assets/images/transJaws.avif differ
diff --git a/public/assets/images/transJaws.png b/public/assets/images/transJaws.png
deleted file mode 100644
index 356e65fa..00000000
Binary files a/public/assets/images/transJaws.png and /dev/null differ
diff --git a/styles/reset.ts b/styles/reset.ts
index c8d0f28e..9aa4cc93 100644
--- a/styles/reset.ts
+++ b/styles/reset.ts
@@ -5,7 +5,7 @@ import { css } from 'styled-components';
 export const reset = css`
   @font-face {
     font-family: 'Pretendard';
-    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
+    src: url('@/fonts/Pretendard-Regular.woff') format('woff');
     font-style: normal;
   }