diff --git a/layout/DefaultLayout.jsx b/layout/DefaultLayout.jsx
new file mode 100644
index 00000000..37894a47
--- /dev/null
+++ b/layout/DefaultLayout.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import Navigation from '@/shared/components/Navigation_v2';
+import Footer from '@/shared/components/Footer_v2';
+
+const DefaultLayout = ({ children }) => {
+  return (
+    <>
+      <Navigation />
+      {children}
+      <Footer />
+    </>
+  );
+};
+
+export default DefaultLayout;
diff --git a/pages/404.jsx b/pages/404.jsx
index 69e222ca..6b363fbc 100644
--- a/pages/404.jsx
+++ b/pages/404.jsx
@@ -18,140 +18,146 @@ const BodyWrapper = styled.div`
 const NotExistPage = () => {
   const router = useRouter();
   return (
-    <BodyWrapper>
-      <Navigatin />
-      <Paper
+    <Paper
+      sx={{
+        width: '90%',
+        margin: '20px auto',
+        padding: '20px',
+        minHeight: '60vh',
+      }}
+    >
+      <Typography
+        variant="h2"
+        sx={{
+          color: '#536166',
+          marginTop: '10px',
+          fontWeight: 'bold',
+          fontSize: '30px',
+          letterSpacing: '0.08em',
+          textAlign: 'center',
+          marginRight: '20px',
+        }}
+      >
+        這座島已經搬新家囉
+      </Typography>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <img
+          src="/assets/nobody-land.gif"
+          alt="nobody-land"
+          width="300"
+          height="300"
+        />
+      </Box>
+      <Typography
+        variant="p"
+        sx={{
+          // fontWeight: "bold",
+          fontSize: '20px',
+          // margin: "10px",
+          textAlign: 'center',
+          width: '100%',
+        }}
+      >
+        近期網站改版，可能有部分頁面無法使用，可以參觀其他地方唷～
+      </Typography>
+      <Typography
+        variant="p"
         sx={{
-          width: '90%',
-          margin: '20px auto',
-          padding: '20px',
-          minHeight: '60vh',
+          // fontWeight: "bold",
+          fontSize: '20px',
+          // margin: "10px",
+          textAlign: 'center',
+          width: '100%',
+          marginTop: '10px',
+        }}
+      >
+        要不要試試我們新版的資源搜尋或是參觀其他地方呢？
+      </Typography>
+      <Box
+        sx={{
+          margin: '20px 0',
         }}
       >
         <Typography
-          variant="h2"
+          variant="p"
           sx={{
-            color: '#536166',
-            marginTop: '10px',
             fontWeight: 'bold',
-            fontSize: '30px',
-            letterSpacing: '0.08em',
-            textAlign: 'center',
-            marginRight: '20px',
           }}
         >
-          這座島已經搬新家囉
+          豐富的學習類別
         </Typography>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          <img
-            src="/assets/nobody-land.gif"
-            alt="nobody-land"
-            width="300"
-            height="300"
-          />
+        <Box sx={{ margin: '10px 0' }}>
+          {CATEGORIES.map(({ key, value }) => (
+            <Chip
+              key={key}
+              label={value}
+              value={value}
+              onClick={() => router.push(`/search?cats=${value}`)}
+              sx={{
+                backgroundColor: COLOR_TABLE.green,
+                opacity: '60%',
+                cursor: 'pointer',
+                margin: '5px',
+                whiteSpace: 'nowrap',
+                fontWeight: 500,
+                fontSize: '16px',
+                '&:hover': {
+                  opacity: '100%',
+                  backgroundColor: COLOR_TABLE.green,
+                  transition: 'transform 0.4s',
+                },
+              }}
+            />
+          ))}
         </Box>
+      </Box>
+      <RelatedResources
+        title="👀 瞧瞧最新資源"
+        searchScheme={{
+          filter: { or: [] },
+          page_size: 10,
+        }}
+      />
+      <Box
+        sx={{
+          margin: '40px 0 10px 0',
+        }}
+      >
         <Typography
           variant="p"
           sx={{
-            // fontWeight: "bold",
-            fontSize: '20px',
-            // margin: "10px",
-            textAlign: 'center',
-            width: '100%',
-          }}
-        >
-          近期網站改版，可能有部分頁面無法使用，可以參觀其他地方唷～
-        </Typography>
-        <Typography
-          variant="p"
-          sx={{
-            // fontWeight: "bold",
-            fontSize: '20px',
-            // margin: "10px",
-            textAlign: 'center',
-            width: '100%',
-            marginTop: '10px',
+            fontWeight: 'bold',
           }}
         >
-          要不要試試我們新版的資源搜尋或是參觀其他地方呢？
+          加入島島社群
         </Typography>
         <Box
           sx={{
             margin: '20px 0',
           }}
         >
-          <Typography
-            variant="p"
-            sx={{
-              fontWeight: 'bold',
-            }}
-          >
-            豐富的學習類別
-          </Typography>
-          <Box sx={{ margin: '10px 0' }}>
-            {CATEGORIES.map(({ key, value }) => (
-              <Chip
-                key={key}
-                label={value}
-                value={value}
-                onClick={() => router.push(`/search?cats=${value}`)}
-                sx={{
-                  backgroundColor: COLOR_TABLE.green,
-                  opacity: '60%',
-                  cursor: 'pointer',
-                  margin: '5px',
-                  whiteSpace: 'nowrap',
-                  fontWeight: 500,
-                  fontSize: '16px',
-                  '&:hover': {
-                    opacity: '100%',
-                    backgroundColor: COLOR_TABLE.green,
-                    transition: 'transform 0.4s',
-                  },
-                }}
-              />
-            ))}
-          </Box>
+          <Button variant="outlined" onClick={() => router.push('/join')}>
+            <FacebookRounded sx={{ margin: '5px 0' }} />
+            <Typography variant="p">加入社群</Typography>
+          </Button>
         </Box>
-        <RelatedResources
-          title="👀 瞧瞧最新資源"
-          searchScheme={{
-            filter: { or: [] },
-            page_size: 10,
-          }}
-        />
-        <Box
-          sx={{
-            margin: '40px 0 10px 0',
-          }}
-        >
-          <Typography
-            variant="p"
-            sx={{
-              fontWeight: 'bold',
-            }}
-          >
-            加入島島社群
-          </Typography>
-          <Box
-            sx={{
-              margin: '20px 0',
-            }}
-          >
-            <Button variant="outlined" onClick={() => router.push('/join')}>
-              <FacebookRounded sx={{ margin: '5px 0' }} />
-              <Typography variant="p">加入社群</Typography>
-            </Button>
-          </Box>
-        </Box>
-      </Paper>
+      </Box>
+    </Paper>
+  );
+};
+
+NotExistPage.getLayout = ({ children }) => {
+  return (
+    <BodyWrapper>
+      <Navigatin />
+      {children}
       <Footer />
     </BodyWrapper>
   );
diff --git a/pages/_app.jsx b/pages/_app.jsx
index 6604fc8c..f1a7ed1b 100644
--- a/pages/_app.jsx
+++ b/pages/_app.jsx
@@ -14,6 +14,7 @@ import themeFactory from '@/shared/styles/themeFactory';
 import storeFactory from '@/redux/store';
 import { checkLoginValidity, fetchUserById } from '@/redux/actions/user';
 import { getRedirectionStorage } from '@/utils/storage';
+import DefaultLayout from '@/layout/DefaultLayout';
 import { initGA, logPageView } from '../utils/analytics';
 import Mode from '../shared/components/Mode';
 import 'regenerator-runtime/runtime'; // Speech.js
@@ -116,6 +117,7 @@ const ThemeComponentWrap = ({ pageProps, Component }) => {
   const theme = useMemo(() => themeFactory(mode), [mode]);
   const isEnv = useMemo(() => process.env.NODE_ENV === 'development', []);
   const router = useRouter();
+  const Layout = Component?.getLayout || DefaultLayout;
 
   useEffect(() => {
     dispatch(checkLoginValidity());
@@ -163,7 +165,9 @@ const ThemeComponentWrap = ({ pageProps, Component }) => {
         }}
       />
       {isEnv && <Mode />}
-      <Component {...pageProps} />
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
     </ThemeProvider>
   );
 };
diff --git a/pages/about-us/index.jsx b/pages/about-us/index.jsx
index 12cf4a6c..2943efdb 100644
--- a/pages/about-us/index.jsx
+++ b/pages/about-us/index.jsx
@@ -1,7 +1,5 @@
 import React, { useMemo } from 'react';
 import SEOConfig from '../../shared/components/SEO';
-import Navigation from '../../shared/components/Navigation_v2';
-import Footer from '../../shared/components/Footer_v2';
 import About from '../../components/About';
 
 const AboutPage = () => {
@@ -52,9 +50,7 @@ const AboutPage = () => {
   return (
     <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       <About />
-      <Footer />
     </>
   );
 };
diff --git a/pages/about/index.jsx b/pages/about/index.jsx
index 58287c91..4f6bfca8 100644
--- a/pages/about/index.jsx
+++ b/pages/about/index.jsx
@@ -1,8 +1,6 @@
 import React, { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import SEOConfig from '../../shared/components/SEO';
-import Navigation from '../../shared/components/Navigation_v2';
-import Footer from '../../shared/components/Footer_v2';
 import About from '../../components/About';
 
 const AboutPage = () => {
@@ -54,9 +52,7 @@ const AboutPage = () => {
   return (
     <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       <About />
-      <Footer />
     </>
   );
 };
diff --git a/pages/activities/index.jsx b/pages/activities/index.jsx
index 25dcebbc..9e44698a 100644
--- a/pages/activities/index.jsx
+++ b/pages/activities/index.jsx
@@ -1,8 +1,6 @@
 import React, { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import SEOConfig from '../../shared/components/SEO';
-import Navigation from '../../shared/components/Navigation_v2';
-import Footer from '../../shared/components/Footer_v2';
 import Activities from '../../components/Activities';
 
 const ActivitiesPage = () => {
@@ -24,9 +22,7 @@ const ActivitiesPage = () => {
   return (
     <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       <Activities />
-      <Footer />
     </>
   );
 };
diff --git a/pages/activities/ncku-bike-festival/index.jsx b/pages/activities/ncku-bike-festival/index.jsx
index 1977feb3..6cc95bde 100644
--- a/pages/activities/ncku-bike-festival/index.jsx
+++ b/pages/activities/ncku-bike-festival/index.jsx
@@ -1,8 +1,6 @@
 import React, { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import SEOConfig from '../../../shared/components/SEO';
-import Navigation from '../../../shared/components/Navigation_v2';
-import Footer from '../../../shared/components/Footer_v2';
 import Activities from '../../../components/Activities/Ncku-bike-festival';
 
 const Page = () => {
@@ -24,9 +22,7 @@ const Page = () => {
   return (
     <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       <Activities />
-      <Footer />
     </>
   );
 };
diff --git a/pages/contribute/resource/index.jsx b/pages/contribute/resource/index.jsx
index 29e34ac9..a4d62e0b 100644
--- a/pages/contribute/resource/index.jsx
+++ b/pages/contribute/resource/index.jsx
@@ -1,8 +1,6 @@
 import React, { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import SEOConfig from '../../../shared/components/SEO';
-import Navigation from '../../../shared/components/Navigation_v2';
-import Footer from '../../../shared/components/Footer_v2';
 import ContributeResource from '../../../components/ContributeResource';
 
 const ContributeResourcePage = () => {
@@ -24,9 +22,7 @@ const ContributeResourcePage = () => {
   return (
     <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       <ContributeResource />
-      <Footer />
     </>
   );
 };
diff --git a/pages/group/create/index.jsx b/pages/group/create/index.jsx
index a251aeae..36cd3c4d 100644
--- a/pages/group/create/index.jsx
+++ b/pages/group/create/index.jsx
@@ -4,8 +4,6 @@ import { useRouter } from 'next/router';
 import { useSnackbar } from '@/contexts/Snackbar';
 import useMutation from '@/hooks/useMutation';
 import SEOConfig from '@/shared/components/SEO';
-import Navigation from '@/shared/components/Navigation_v2';
-import Footer from '@/shared/components/Footer_v2';
 
 const GroupForm = dynamic(() => import('@/components/Group/Form'), {
   ssr: false,
@@ -39,9 +37,7 @@ function CreateGroupPage() {
   return (
     <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       <GroupForm mode="create" isLoading={isLoading} onSubmit={mutate} />
-      <Footer />
     </>
   );
 }
diff --git a/pages/group/detail/index.jsx b/pages/group/detail/index.jsx
index 3d306fcb..db41b9a2 100644
--- a/pages/group/detail/index.jsx
+++ b/pages/group/detail/index.jsx
@@ -3,8 +3,6 @@ import { useRouter } from 'next/router';
 import SEOConfig from '@/shared/components/SEO';
 import GroupDetail from '@/components/Group/detail';
 import GroupEmpty from '@/components/Group/detail/Empty';
-import Navigation from '@/shared/components/Navigation_v2';
-import Footer from '@/shared/components/Footer_v2';
 import useFetch from '@/hooks/useFetch';
 
 function GroupPage() {
@@ -31,13 +29,11 @@ function GroupPage() {
   return (
     <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       {(id || isFetching) && !isError ? (
         <GroupDetail id={id} source={source} isLoading={isFetching} />
       ) : (
         <GroupEmpty />
       )}
-      <Footer />
     </>
   );
 }
diff --git a/pages/group/edit/index.jsx b/pages/group/edit/index.jsx
index 722ecf0d..956ce3d1 100644
--- a/pages/group/edit/index.jsx
+++ b/pages/group/edit/index.jsx
@@ -7,8 +7,6 @@ import { useSnackbar } from '@/contexts/Snackbar';
 import useFetch from '@/hooks/useFetch';
 import useMutation from '@/hooks/useMutation';
 import SEOConfig from '@/shared/components/SEO';
-import Navigation from '@/shared/components/Navigation_v2';
-import Footer from '@/shared/components/Footer_v2';
 
 const GroupForm = dynamic(() => import('@/components/Group/Form'), {
   ssr: false,
@@ -57,7 +55,6 @@ function EditGroupPage() {
   return (
     <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       {isFetching && (
         <Box
           sx={{
@@ -78,7 +75,6 @@ function EditGroupPage() {
         isLoading={isLoading}
         onSubmit={mutate}
       />
-      <Footer />
     </>
   );
 }
diff --git a/pages/group/index.jsx b/pages/group/index.jsx
index 5b1f8265..3ac2cfcc 100644
--- a/pages/group/index.jsx
+++ b/pages/group/index.jsx
@@ -2,8 +2,6 @@ import React, { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import SEOConfig from '@/shared/components/SEO';
 import Group from '@/components/Group';
-import Navigation from '@/shared/components/Navigation_v2';
-import Footer from '@/shared/components/Footer_v2';
 
 function GroupPage() {
   const router = useRouter();
@@ -24,9 +22,7 @@ function GroupPage() {
   return (
     <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       <Group />
-      <Footer />
     </>
   );
 }
diff --git a/pages/index.jsx b/pages/index.jsx
index 2e3f97d6..6eddad68 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -58,23 +58,21 @@ const HomePage = () => {
   }, [id, token]);
 
   return (
-    <HomePageWrapper>
+    <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       <Home />
+    </>
+  );
+};
+
+HomePage.getLayout = ({ children }) => {
+  return (
+    <HomePageWrapper>
+      <Navigation />
+      {children}
       <Footer />
     </HomePageWrapper>
   );
 };
 
-// export const getServerSideProps = async () => {
-//   // const { res, req, locale, defaultLocale } = ctx;
-//   return {
-//     props: {
-//       isDev: process.env.NODE_ENV === "development",
-//       fallback: {},
-//     },
-//   };
-// };
-
 export default HomePage;
diff --git a/pages/join/index.jsx b/pages/join/index.jsx
index ac6849ef..0756cb35 100644
--- a/pages/join/index.jsx
+++ b/pages/join/index.jsx
@@ -150,9 +150,8 @@ function JoinPage() {
   );
 
   return (
-    <JoinPageWrapper>
+    <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       <Container>
         <Paper>
           <PaperColumnCenter>
@@ -227,9 +226,18 @@ function JoinPage() {
           </PaperColumnCenter>
         </Paper>
       </Container>
+    </>
+  );
+}
+
+JoinPage.getLayout = ({ children }) => {
+  return (
+    <JoinPageWrapper>
+      <Navigation />
+      {children}
       <Footer />
     </JoinPageWrapper>
   );
-}
+};
 
 export default JoinPage;
diff --git a/pages/locations/index.jsx b/pages/locations/index.jsx
index 02635952..163b7bd0 100644
--- a/pages/locations/index.jsx
+++ b/pages/locations/index.jsx
@@ -1,8 +1,6 @@
 import React, { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import SEOConfig from '../../shared/components/SEO';
-import Navigation from '../../shared/components/Navigation_v2';
-import Footer from '../../shared/components/Footer_v2';
 import Locations from '../../components/Locations';
 
 const LocationsPage = () => {
@@ -24,9 +22,7 @@ const LocationsPage = () => {
   return (
     <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       <Locations />
-      <Footer />
     </>
   );
 };
diff --git a/pages/login/index.jsx b/pages/login/index.jsx
index c17c4398..d0ccd4e7 100644
--- a/pages/login/index.jsx
+++ b/pages/login/index.jsx
@@ -63,10 +63,9 @@ const LoginPage = () => {
   }, []);
 
   return (
-    <HomePageWrapper>
+    <>
       <Script src="https://meet.jit.si/external_api.js" />
       <SEOConfig data={SEOData} />
-      <Navigation />
       <Box sx={{ minHeight: '100vh' }}>
         <ContentWrapper>
           <Typography
@@ -158,6 +157,15 @@ const LoginPage = () => {
           </Box>
         </ContentWrapper>
       </Box>
+    </>
+  );
+};
+
+LoginPage.getLayout = ({ children }) => {
+  return (
+    <HomePageWrapper>
+      <Navigation />
+      {children}
       <Footer />
     </HomePageWrapper>
   );
diff --git a/pages/login/popup/index.jsx b/pages/login/popup/index.jsx
index 46c21836..e420cb92 100644
--- a/pages/login/popup/index.jsx
+++ b/pages/login/popup/index.jsx
@@ -39,7 +39,7 @@ const ExternalLink = styled.a`
   text-decoration: underline;
 `;
 
-const LoginPage = () => {
+const LoginPopupPage = () => {
   const LOGIN_PATH = `${BASE_URL}/auth/google`;
   const router = useRouter();
 
@@ -161,4 +161,6 @@ const LoginPage = () => {
   );
 };
 
-export default LoginPage;
+LoginPopupPage.getLayout = ({ children }) => children;
+
+export default LoginPopupPage;
diff --git a/pages/meet/index.jsx b/pages/meet/index.jsx
index a3da2536..3269053d 100644
--- a/pages/meet/index.jsx
+++ b/pages/meet/index.jsx
@@ -73,10 +73,9 @@ const MeetPage = () => {
   // };
 
   return (
-    <HomePageWrapper>
+    <>
       <Script src="https://meet.jit.si/external_api.js" />
       <SEOConfig data={SEOData} />
-      <Navigation />
       <Box sx={{ minHeight: '100vh' }}>
         <JitsiMeeting
           // roomName={generateRoomName()}
@@ -95,19 +94,18 @@ const MeetPage = () => {
           }}
         />
       </Box>
+    </>
+  );
+};
+
+MeetPage.getLayout = ({ children }) => {
+  return (
+    <HomePageWrapper>
+      <Navigation />
+      {children}
       <Footer />
     </HomePageWrapper>
   );
 };
 
-// export const getServerSideProps = async () => {
-//   // const { res, req, locale, defaultLocale } = ctx;
-//   return {
-//     props: {
-//       isDev: process.env.NODE_ENV === "development",
-//       fallback: {},
-//     },
-//   };
-// };
-
 export default MeetPage;
diff --git a/pages/myisland/index.jsx b/pages/myisland/index.jsx
index 1bfc0ac6..b715bd20 100644
--- a/pages/myisland/index.jsx
+++ b/pages/myisland/index.jsx
@@ -29,23 +29,21 @@ const MyIslandPage = () => {
   );
 
   return (
-    <MyIslandPageWrapper>
+    <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       <MyIsland />
+    </>
+  );
+};
+
+MyIslandPage.getLayout = ({ children }) => {
+  return (
+    <MyIslandPageWrapper>
+      <Navigation />
+      {children}
       <Footer />
     </MyIslandPageWrapper>
   );
 };
 
-// export const getServerSideProps = async () => {
-//   // const { res, req, locale, defaultLocale } = ctx;
-//   return {
-//     props: {
-//       isDev: process.env.NODE_ENV === "development",
-//       fallback: {},
-//     },
-//   };
-// };
-
 export default MyIslandPage;
diff --git a/pages/partner/detail/index.jsx b/pages/partner/detail/index.jsx
index f212934c..94fb0f30 100644
--- a/pages/partner/detail/index.jsx
+++ b/pages/partner/detail/index.jsx
@@ -23,7 +23,7 @@ const HomePageWrapper = styled.div`
 
 const ROLELIST = mapToTable(ROLE);
 
-const Detail = () => {
+const PartnerDetailPage = () => {
   const router = useRouter();
   const { id: partnerId } = router.query;
 
@@ -81,8 +81,7 @@ const Detail = () => {
   };
 
   return (
-    <HomePageWrapper>
-      <Navigation />
+    <>
       {!!partner && (
         <ContactModal
           open={open}
@@ -103,10 +102,18 @@ const Detail = () => {
         enableContactBtn={!!loginUserEmail}
         handleContactPartner={() => setOpen(true)}
       />
+    </>
+  );
+};
 
+PartnerDetailPage.getLayout = ({ children }) => {
+  return (
+    <HomePageWrapper>
+      <Navigation />
+      {children}
       <Footer />
     </HomePageWrapper>
   );
 };
 
-export default Detail;
+export default PartnerDetailPage;
diff --git a/pages/partner/index.jsx b/pages/partner/index.jsx
index 0ec14c4d..6a980f70 100644
--- a/pages/partner/index.jsx
+++ b/pages/partner/index.jsx
@@ -47,13 +47,21 @@ function PartnerPage() {
   );
 
   return (
-    <HomePageWrapper>
+    <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       <Partner />
+    </>
+  );
+}
+
+PartnerPage.getLayout = ({ children }) => {
+  return (
+    <HomePageWrapper>
+      <Navigation />
+      {children}
       <Footer />
     </HomePageWrapper>
   );
-}
+};
 
 export default PartnerPage;
diff --git a/pages/profile/index.jsx b/pages/profile/index.jsx
index 4ccdb670..573b2cd2 100644
--- a/pages/profile/index.jsx
+++ b/pages/profile/index.jsx
@@ -107,9 +107,8 @@ const ProfilePage = () => {
   };
 
   return (
-    <HomePageWrapper>
+    <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       <Box
         sx={{
           display: 'flex',
@@ -166,6 +165,15 @@ const ProfilePage = () => {
           ))}
         </Box>
       </Box>
+    </>
+  );
+};
+
+ProfilePage.getLayout = ({ children }) => {
+  return (
+    <HomePageWrapper>
+      <Navigation />
+      {children}
       <Footer />
     </HomePageWrapper>
   );
diff --git a/pages/profile/myprofile/index.jsx b/pages/profile/myprofile/index.jsx
index 8d54854c..ff19e76a 100644
--- a/pages/profile/myprofile/index.jsx
+++ b/pages/profile/myprofile/index.jsx
@@ -10,16 +10,20 @@ const HomePageWrapper = styled.div`
   --section-height-offset: 80px;
 `;
 
-const ProfilePage = () => {
+const MyProfilePage = () => {
   const user = useSelector((state) => state.user);
 
+  return <Profile {...user} enableContactBtn={false} sendEmail={user.email} />;
+};
+
+MyProfilePage.getLayout = ({ children }) => {
   return (
     <HomePageWrapper>
       <Navigation />
-      <Profile {...user} enableContactBtn={false} sendEmail={user.email} />
+      {children}
       <Footer />
     </HomePageWrapper>
   );
 };
 
-export default ProfilePage;
+export default MyProfilePage;
diff --git a/pages/resource/[title]/index.jsx b/pages/resource/[title]/index.jsx
index 5937b2a9..7b25abc6 100644
--- a/pages/resource/[title]/index.jsx
+++ b/pages/resource/[title]/index.jsx
@@ -3,8 +3,6 @@ import React, { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import appendQuery from 'append-query';
 import SEOConfig from '../../../shared/components/SEO';
-import Navigation from '../../../shared/components/Navigation_v2';
-import Footer from '../../../shared/components/Footer_v2';
 import Resource from '../../../components/Resource';
 
 const ResourcePage = ({ data = {} }) => {
@@ -106,7 +104,6 @@ const ResourcePage = ({ data = {} }) => {
   return (
     <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       <Resource
         data={data}
         title={title}
@@ -117,7 +114,6 @@ const ResourcePage = ({ data = {} }) => {
         link={link}
         videoLink={videoLink}
       />
-      <Footer />
     </>
   );
 };
diff --git a/pages/search/index.jsx b/pages/search/index.jsx
index 1f4bfb03..57bb6cac 100644
--- a/pages/search/index.jsx
+++ b/pages/search/index.jsx
@@ -3,8 +3,6 @@ import styled from '@emotion/styled';
 import { useRouter } from 'next/router';
 import SEOConfig from '../../shared/components/SEO';
 import Search from '../../components/Search';
-import Navigation from '../../shared/components/Navigation_v2';
-import Footer from '../../shared/components/Footer_v2';
 import { SEARCH_TAGS } from '../../constants/category';
 
 const SearchPageWrapper = styled.div`
@@ -103,12 +101,10 @@ const SearchPage = () => {
   );
   return (
     <>
-      <Navigation />
       <SEOConfig data={SEOData} />
       <SearchPageWrapper>
         <Search title={title} />
       </SearchPageWrapper>
-      <Footer />
     </>
   );
 };
diff --git a/pages/signin/index.jsx b/pages/signin/index.jsx
index 6a92101b..802b1473 100644
--- a/pages/signin/index.jsx
+++ b/pages/signin/index.jsx
@@ -60,7 +60,7 @@ export const StyledQuestionInput = styled.div`
   margin-top: 20px;
 `;
 
-function EditPage() {
+function SignInPage() {
   const router = useRouter();
   const dispatch = useDispatch();
 
@@ -146,9 +146,8 @@ function EditPage() {
   );
 
   return (
-    <HomePageWrapper>
+    <>
       <SEOConfig data={SEOData} />
-      <Navigation />
       <Box>
         <LocalizationProvider dateAdapter={AdapterDayjs}>
           <Box sx={{ minHeight: '100vh' }}>
@@ -335,9 +334,18 @@ function EditPage() {
           </Box>
         </LocalizationProvider>
       </Box>
+    </>
+  );
+}
+
+SignInPage.getLayout = ({ children }) => {
+  return (
+    <HomePageWrapper>
+      <Navigation />
+      {children}
       <Footer />
     </HomePageWrapper>
   );
-}
+};
 
-export default EditPage;
+export default SignInPage;
diff --git a/pages/signin/interest/index.jsx b/pages/signin/interest/index.jsx
index 092e93aa..1c2dc6c6 100644
--- a/pages/signin/interest/index.jsx
+++ b/pages/signin/interest/index.jsx
@@ -2,25 +2,16 @@ import React, { useMemo, useState, useEffect } from 'react';
 import styled from '@emotion/styled';
 import { useRouter } from 'next/router';
 import { useSelector, useDispatch } from 'react-redux';
-import { fetchUserById, updateUser } from '@/redux/actions/user';
+import { updateUser } from '@/redux/actions/user';
 
 import { Box, Typography, Button, Skeleton } from '@mui/material';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
-import toast from 'react-hot-toast';
-import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
-import dayjs from 'dayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import SEOConfig from '@/shared/components/SEO';
 import Navigation from '@/shared/components/Navigation_v2';
 import Footer from '@/shared/components/Footer_v2';
-import {
-  GENDER,
-  ROLE,
-  EDUCATION_STEP,
-  WANT_TO_DO_WITH_PARTNER,
-  CATEGORIES,
-} from '@/constants/member';
+import { CATEGORIES } from '@/constants/member';
 import TipModal from '@/components/Signin/Interest/TipModal';
 
 const HomePageWrapper = styled.div`
@@ -48,7 +39,7 @@ const ContentWrapper = styled.div`
   }
 `;
 
-function EditPage() {
+function SignInInterestPage() {
   const router = useRouter();
   const { id } = router.query;
   const dispatch = useDispatch();
@@ -93,7 +84,7 @@ function EditPage() {
   );
 
   return (
-    <HomePageWrapper>
+    <>
       <TipModal
         open={open}
         onClose={() => {
@@ -108,7 +99,6 @@ function EditPage() {
         }}
       />
       <SEOConfig data={SEOData} />
-      <Navigation />
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <Box sx={{ minHeight: '100vh' }}>
           <ContentWrapper>
@@ -279,9 +269,18 @@ function EditPage() {
           </ContentWrapper>
         </Box>
       </LocalizationProvider>
+    </>
+  );
+}
+
+SignInInterestPage.getLayout = ({ children }) => {
+  return (
+    <HomePageWrapper>
+      <Navigation />
+      {children}
       <Footer />
     </HomePageWrapper>
   );
-}
+};
 
-export default EditPage;
+export default SignInInterestPage;
diff --git a/pages/terms/ipr.jsx b/pages/terms/ipr.jsx
index 7ce210f9..e9143f5a 100644
--- a/pages/terms/ipr.jsx
+++ b/pages/terms/ipr.jsx
@@ -1,11 +1,9 @@
 import React, { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import SEOConfig from '../../shared/components/SEO';
-import Navigation from '../../shared/components/Navigation_v2';
-import Terms from '../../components/Terms/Ipr';
-import Footer from '../../shared/components/Footer_v2';
+import TermsIPR from '../../components/Terms/Ipr';
 
-const IPRPage = () => {
+const TermsIPRPage = () => {
   const router = useRouter();
   const SEOData = useMemo(
     () => ({
@@ -24,11 +22,9 @@ const IPRPage = () => {
   return (
     <>
       <SEOConfig data={SEOData} />
-      <Navigation />
-      <Terms />
-      <Footer />
+      <TermsIPR />
     </>
   );
 };
 
-export default IPRPage;
+export default TermsIPRPage;
diff --git a/pages/terms/privacypolicy.jsx b/pages/terms/privacypolicy.jsx
index 693807c2..3db00692 100644
--- a/pages/terms/privacypolicy.jsx
+++ b/pages/terms/privacypolicy.jsx
@@ -1,11 +1,9 @@
 import React, { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import SEOConfig from '../../shared/components/SEO';
-import Navigation from '../../shared/components/Navigation_v2';
-import Footer from '../../shared/components/Footer_v2';
-import Terms from '../../components/Terms/Privacypolicy';
+import TermsPrivacyPolicy from '../../components/Terms/Privacypolicy';
 
-const AboutPage = () => {
+const TermsPrivacyPolicyPage = () => {
   const router = useRouter();
   const SEOData = useMemo(
     () => ({
@@ -24,11 +22,9 @@ const AboutPage = () => {
   return (
     <>
       <SEOConfig data={SEOData} />
-      <Navigation />
-      <Terms />
-      <Footer />
+      <TermsPrivacyPolicy />
     </>
   );
 };
 
-export default AboutPage;
+export default TermsPrivacyPolicyPage;
diff --git a/pages/terms/service.jsx b/pages/terms/service.jsx
index 50482987..3891f6d0 100644
--- a/pages/terms/service.jsx
+++ b/pages/terms/service.jsx
@@ -1,11 +1,9 @@
 import React, { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import SEOConfig from '../../shared/components/SEO';
-import Navigation from '../../shared/components/Navigation_v2';
-import Footer from '../../shared/components/Footer_v2';
-import Terms from '../../components/Terms/Service';
+import TermsService from '../../components/Terms/Service';
 
-const AboutPage = () => {
+const TermsServicePage = () => {
   const router = useRouter();
   const SEOData = useMemo(
     () => ({
@@ -24,11 +22,9 @@ const AboutPage = () => {
   return (
     <>
       <SEOConfig data={SEOData} />
-      <Navigation />
-      <Terms />
-      <Footer />
+      <TermsService />
     </>
   );
 };
 
-export default AboutPage;
+export default TermsServicePage;