diff --git a/src/components/common/infoCard/InfoCard.styled.ts b/src/components/common/infoCard/InfoCard.styled.ts
index 7bd8e397..5831e107 100644
--- a/src/components/common/infoCard/InfoCard.styled.ts
+++ b/src/components/common/infoCard/InfoCard.styled.ts
@@ -7,7 +7,7 @@ export const Container = styled.div`
   border: 2px solid #f0f0f0;
   border-radius: ${({ theme }) => theme.borderRadius.large};
   width: 80%;
-  min-width: 530px;
+  min-width: 500px;
   height: 80vh;
   padding-bottom: 1rem;
   position: relative;
diff --git a/src/components/common/layout/ApplicantViewLayout.styled.ts b/src/components/common/layout/ApplicantViewLayout.styled.ts
deleted file mode 100644
index 2b6b9264..00000000
--- a/src/components/common/layout/ApplicantViewLayout.styled.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import styled from 'styled-components';
-import { LayoutContainer } from './Layout.styled';
-
-export const ApplicantLayout = styled(LayoutContainer)`
-  padding: 0;
-`;
diff --git a/src/components/common/layout/ApplicantViewLayout.tsx b/src/components/common/layout/ApplicantViewLayout.tsx
deleted file mode 100644
index c3728f8b..00000000
--- a/src/components/common/layout/ApplicantViewLayout.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { PropsWithChildren } from 'react';
-import * as S from './ApplicantViewLayout.styled';
-import Header from '../header/Header';
-
-function ApplicantViewLayout({ children }: PropsWithChildren) {
-  return (
-    <>
-      <Header />
-      <S.ApplicantLayout>{children}</S.ApplicantLayout>
-    </>
-  );
-}
-
-export default ApplicantViewLayout;
diff --git a/src/components/common/layout/sidebar/LayoutSidebar.styled.ts b/src/components/common/layout/sidebar/LayoutSidebar.styled.ts
deleted file mode 100644
index c3389834..00000000
--- a/src/components/common/layout/sidebar/LayoutSidebar.styled.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div``;
diff --git a/src/components/common/layout/sidebar/LayoutSidebar.tsx b/src/components/common/layout/sidebar/LayoutSidebar.tsx
deleted file mode 100644
index 36c54d60..00000000
--- a/src/components/common/layout/sidebar/LayoutSidebar.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import * as S from './LayoutSidebar.styled';
-interface LayoutSidebarProps {
-  children: React.ReactNode;
-}
-const LayoutSidebar = ({ children }: LayoutSidebarProps) => {
-  /*
-    관리자 페이지와 마이 페이지의 Sidebar Layout 입니다.
-  */
-
-  return (
-    <S.Container>
-      {/* <Sidebar /> */}
-      {children}
-    </S.Container>
-  );
-};
-
-export default LayoutSidebar;
diff --git a/src/components/common/sidebar/Sidebar.styled.ts b/src/components/common/sidebar/Sidebar.styled.ts
index 570aae6c..ab31d072 100644
--- a/src/components/common/sidebar/Sidebar.styled.ts
+++ b/src/components/common/sidebar/Sidebar.styled.ts
@@ -45,8 +45,8 @@ export const MenuItem = styled.div<{ $isActive: boolean }>`
   background-color: ${({ $isActive }) =>
     $isActive ? '#f9f9f9' : 'transparent'};
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
-    font-size: ${({ theme }) => theme.heading['semiSmall'].tabletFontSize};
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: 0.7rem;
   }
 
   &:hover {
@@ -58,9 +58,9 @@ export const MenuItem = styled.div<{ $isActive: boolean }>`
     width: 30px;
     height: 30px;
 
-    @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
-      width: 23px;
-      height: 23px;
+    @media ${({ theme }) => theme.mediaQuery.tablet} {
+      width: 20px;
+      height: 20px;
     }
   }
 `;
diff --git a/src/components/manageProjects/Card.styled.ts b/src/components/manageProjects/Card.styled.ts
index f924e9aa..c3764221 100644
--- a/src/components/manageProjects/Card.styled.ts
+++ b/src/components/manageProjects/Card.styled.ts
@@ -22,6 +22,10 @@ export const CardWrapper = styled.div`
   &:hover {
     background-color: ${({ theme }) => theme.color.grey};
   }
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    width: 19rem;
+    height: 14rem;
+  }
 `;
 
 export const CardTitle = styled.h3`
@@ -33,20 +37,35 @@ export const CardTitle = styled.h3`
   -webkit-box-orient: vertical;
   text-overflow: ellipsis;
   overflow: hidden;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.small.fontSize};
+    margin-bottom: 0.8rem;
+  }
 `;
 
 export const RecruitmentDate = styled.small`
-  font-size: 1rem;
+  font-size: ${({ theme }) => theme.heading.small.fontSize};
   font-weight: 400;
   color: ${({ theme }) => theme.color.deepgrey};
   margin-bottom: 0.25rem;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.small.tabletFontSize};
+    margin-bottom: 0.7rem;
+  }
 `;
 
 export const TotalMember = styled.small`
-  font-size: 1rem;
+  font-size: ${({ theme }) => theme.heading.small.fontSize};
   font-weight: 400;
   color: ${({ theme }) => theme.color.deepgrey};
   margin-bottom: 1.125rem;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.small.tabletFontSize};
+    margin-bottom: 1rem;
+  }
 `;
 
 export const RecruitmentEnd = styled.span`
diff --git a/src/components/manageProjects/CardList.styled.ts b/src/components/manageProjects/CardList.styled.ts
index a504f249..f968346f 100644
--- a/src/components/manageProjects/CardList.styled.ts
+++ b/src/components/manageProjects/CardList.styled.ts
@@ -21,12 +21,22 @@ export const CreateButton = styled.button`
   align-items: center;
 
   img {
-    width: 1.875rem;
-    height: 1.875rem;
+    width: 30px;
+    height: 30px;
     margin-bottom: 0.75rem;
   }
 
   &:hover {
     background-color: ${({ theme }) => theme.color.grey};
   }
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    width: 19rem;
+    height: 14rem;
+    font-size: ${({ theme }) => theme.heading.small.fontSize};
+    img {
+      width: 20px;
+      height: 20px;
+    }
+  }
 `;
diff --git a/src/components/manageProjects/RecruitmentDate.styled.ts b/src/components/manageProjects/RecruitmentDate.styled.ts
index 03c46981..5ecdcb21 100644
--- a/src/components/manageProjects/RecruitmentDate.styled.ts
+++ b/src/components/manageProjects/RecruitmentDate.styled.ts
@@ -5,6 +5,7 @@ export const Container = styled.div`
   justify-content: start;
   align-items: center;
   margin-top: 1rem;
+  margin-bottom: 1rem;
 `;
 
 export const DateTag = styled.span`
@@ -13,16 +14,27 @@ export const DateTag = styled.span`
   align-items: center;
   width: 6.25rem;
   height: 2rem;
-  font-size: ${({ theme }) => theme.heading.small};
+  font-size: ${({ theme }) => theme.heading.small.fontSize};
   color: ${({ theme }) => theme.color.navy};
   padding: 0.5rem 1.25rem;
   border: 1px solid ${({ theme }) => theme.color.navy};
   border-radius: ${({ theme }) => theme.borderRadius.primary};
   margin-right: 1.25rem;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    width: 5rem;
+    height: 1.5rem;
+    padding: 0.25rem 1rem;
+    font-size: ${({ theme }) => theme.heading.small.tabletFontSize};
+  }
 `;
 
 export const Period = styled.small`
-  font-size: ${({ theme }) => theme.heading.small};
+  font-size: ${({ theme }) => theme.heading.small.fontSize};
   font-weight: 500;
   color: ${({ theme }) => theme.color.deepgrey};
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.small.tabletFontSize};
+  }
 `;
diff --git a/src/components/manageProjects/applicantInfo/ApplicantInfo.styled.ts b/src/components/manageProjects/applicantInfo/ApplicantInfo.styled.ts
index 49a6c8e9..0edd696d 100644
--- a/src/components/manageProjects/applicantInfo/ApplicantInfo.styled.ts
+++ b/src/components/manageProjects/applicantInfo/ApplicantInfo.styled.ts
@@ -5,7 +5,7 @@ export const Container = styled.div`
   flex-direction: column;
   width: 100%;
   min-width: 270px;
-  height: 550px;
+  height: 100%;
   padding: 1.5rem;
   padding-bottom: 0;
   border: 1px solid ${({ theme }) => theme.color.border};
@@ -22,20 +22,28 @@ export const Container = styled.div`
 `;
 
 export const Title = styled.h2`
-  font-size: 1.8rem;
+  font-size: ${({ theme }) => theme.heading.large.fontSize};
   font-weight: 600;
   color: ${({ theme }) => theme.color.primary};
   margin-bottom: 1.25rem;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.medium.tabletFontSize};
+  }
 `;
 
 export const Label = styled.p`
-  font-size: 1.2rem;
+  font-size: ${({ theme }) => theme.heading.medium.fontSize};
   font-weight: 700;
   color: ${({ theme }) => theme.color.deepGrey};
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.semiSmall.tabletFontSize};
+  }
 `;
 
 export const Text = styled.p`
-  font-size: 1rem;
+  font-size: ${({ theme }) => theme.heading.small.fontSize};
   font-weight: 400;
   color: ${({ theme }) => theme.color.primary};
   margin-bottom: 1rem;
@@ -43,4 +51,8 @@ export const Text = styled.p`
   .period {
     color: ${({ theme }) => theme.color.deepGrey};
   }
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.small.tabletFontSize};
+  }
 `;
diff --git a/src/components/manageProjects/applicantInfo/LabelWithContent.styled.ts b/src/components/manageProjects/applicantInfo/LabelWithContent.styled.ts
index ba5b8f35..6d9c0b6a 100644
--- a/src/components/manageProjects/applicantInfo/LabelWithContent.styled.ts
+++ b/src/components/manageProjects/applicantInfo/LabelWithContent.styled.ts
@@ -1,13 +1,17 @@
 import styled from 'styled-components';
 
 export const Label = styled.p`
-  font-size: 1.2rem;
+  font-size: ${({ theme }) => theme.heading.medium.fontSize};
   font-weight: 700;
   color: ${({ theme }) => theme.color.deepGrey};
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.semiSmall.tabletFontSize};
+  }
 `;
 
 export const Content = styled.span`
-  font-size: 1rem;
+  font-size: ${({ theme }) => theme.heading.small.fontSize};
   font-weight: 500;
   color: ${({ theme }) => theme.color.primary};
   margin-bottom: 1rem;
@@ -15,4 +19,7 @@ export const Content = styled.span`
   .period {
     color: ${({ theme }) => theme.color.deepGrey};
   }
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.small.tabletFontSize};
+  }
 `;
diff --git a/src/components/manageProjects/applicantList/ApplicantItem.styled.ts b/src/components/manageProjects/applicantList/ApplicantItem.styled.ts
index a06261a2..258f71db 100644
--- a/src/components/manageProjects/applicantList/ApplicantItem.styled.ts
+++ b/src/components/manageProjects/applicantList/ApplicantItem.styled.ts
@@ -18,7 +18,7 @@ export const getBorderColor = ($passStatus: string, theme: DefaultTheme) => {
 
 export const Button = styled.button<ButtonProps>`
   text-align: center;
-  font-size: ${({ theme }) => theme.heading.small};
+  font-size: ${({ theme }) => theme.heading.small.fontSize};
   font-weight: 500;
   flex-shrink: 0;
   width: 10rem;
@@ -36,4 +36,11 @@ export const Button = styled.button<ButtonProps>`
     color: ${({ theme }) => theme.buttonScheme.primary.color};
     border: none;
   }
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    width: 6.5rem;
+    height: 1.9rem;
+    border-radius: ${({ theme }) => theme.borderRadius.small};
+    font-size: 0.6rem;
+  }
 `;
diff --git a/src/components/manageProjects/applicantList/ApplicantList.styled.ts b/src/components/manageProjects/applicantList/ApplicantList.styled.ts
index 9780deba..4d8d1b97 100644
--- a/src/components/manageProjects/applicantList/ApplicantList.styled.ts
+++ b/src/components/manageProjects/applicantList/ApplicantList.styled.ts
@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
+  width: 195px;
+  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: start;
@@ -12,8 +14,12 @@ export const Container = styled.div`
   }
   gap: 1rem;
   padding: 1rem;
-  width: 195px;
-  height: 550px;
+
   border: 1px solid ${({ theme }) => theme.color.border};
   border-radius: ${({ theme }) => theme.borderRadius.primary};
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 0.7rem;
+    width: 130px;
+  }
 `;
diff --git a/src/components/manageProjects/applicantList/PassNonPassButton.styled.ts b/src/components/manageProjects/applicantList/PassNonPassButton.styled.ts
index 2f425010..70d0753f 100644
--- a/src/components/manageProjects/applicantList/PassNonPassButton.styled.ts
+++ b/src/components/manageProjects/applicantList/PassNonPassButton.styled.ts
@@ -3,6 +3,7 @@ import { PassNonPassButtonProps } from './PassNonPassButton';
 
 export const PassNonPassButton = styled.button<PassNonPassButtonProps>`
   padding: 0.5rem 0.6rem;
+  font-size: 0.8rem;
   border-radius: ${({ theme }) => theme.borderRadius.primary};
   color: ${({ theme }) => theme.color.white};
   background-color: ${({ theme, isPass }) =>
@@ -18,4 +19,8 @@ export const PassNonPassButton = styled.button<PassNonPassButtonProps>`
     background-color: ${({ theme }) => theme.color.grey};
   }
 
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: 0.6rem;
+    padding: 0.3rem 0.4rem;
+  }
 `;
diff --git a/src/components/manageProjects/passNonPassList/PassNonPassItem.styled.ts b/src/components/manageProjects/passNonPassList/PassNonPassItem.styled.ts
index 66fbfacc..fc0a486d 100644
--- a/src/components/manageProjects/passNonPassList/PassNonPassItem.styled.ts
+++ b/src/components/manageProjects/passNonPassList/PassNonPassItem.styled.ts
@@ -12,9 +12,17 @@ export const ItemWrapper = styled.li`
     background-color: ${({ theme }) => theme.color.navy};
     color: ${({ theme }) => theme.color.white};
   }
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 0.8rem;
+  }
 `;
 
 export const NickName = styled.p`
   font-size: ${({ theme }) => theme.heading.small.fontSize};
   font-weight: 400;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.small.tabletFontSize};
+  }
 `;
diff --git a/src/components/manageProjects/passNonPassList/PassNonPassList.styled.ts b/src/components/manageProjects/passNonPassList/PassNonPassList.styled.ts
index 5493e4d2..3ed91486 100644
--- a/src/components/manageProjects/passNonPassList/PassNonPassList.styled.ts
+++ b/src/components/manageProjects/passNonPassList/PassNonPassList.styled.ts
@@ -2,8 +2,8 @@ import styled from 'styled-components';
 
 export const Wrapper = styled.ul`
   width: 100%;
-  height: 27rem;
-  min-width: 22rem;
+  height: 100%;
+  min-width: 16rem;
   border-radius: ${({ theme }) => theme.borderRadius.primary};
   border: 1px solid ${({ theme }) => theme.color.border};
   padding: 1.6rem 2rem;
@@ -17,4 +17,9 @@ export const Wrapper = styled.ul`
   &::-webkit-scrollbar {
     display: none;
   }
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    min-width: 9rem;
+    padding: 1rem;
+  }
 `;
diff --git a/src/components/manageProjects/passNonPassList/SendResultButton.styled.ts b/src/components/manageProjects/passNonPassList/SendResultButton.styled.ts
index 59ce6cf6..f36e72fe 100644
--- a/src/components/manageProjects/passNonPassList/SendResultButton.styled.ts
+++ b/src/components/manageProjects/passNonPassList/SendResultButton.styled.ts
@@ -8,7 +8,7 @@ export const Wrapper = styled.div`
   align-items: center;
   position: absolute;
   top: 7rem;
-  right: 2.5rem;
+  right: 2rem;
 `;
 
 export const SendEmailButton = styled(Button)`
@@ -21,4 +21,15 @@ export const SendEmailButton = styled(Button)`
   &:hover {
     opacity: 0.8;
   }
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    width: 7rem;
+    font-size: ${({ theme }) => theme.heading.small.tabletFontSize};
+    padding: ${({ theme }) => theme.buttonSize.small.padding};
+
+    svg {
+      width: 15px;
+      height: 15px;
+    }
+  }
 `;
diff --git a/src/pages/manage/myProjectList/MyProjectList.styled.ts b/src/pages/manage/myProjectList/MyProjectList.styled.ts
index e45b760a..e372c4e0 100644
--- a/src/pages/manage/myProjectList/MyProjectList.styled.ts
+++ b/src/pages/manage/myProjectList/MyProjectList.styled.ts
@@ -1,11 +1,16 @@
 import styled from 'styled-components';
 
 export const ManageProjectsContainer = styled.div`
+  display: block;
   padding-top: 4.375em;
-  width: 100%;
-
-  .titleWrap {
-    margin-left: 2rem;
-    margin-bottom: 2rem;
+  max-width: 1048px;
+  margin: 0 auto;
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    max-width: 692px;
   }
 `;
+
+export const TitleWrapper = styled.header`
+  margin-left: 2rem;
+  margin-bottom: 2rem;
+`;
diff --git a/src/pages/manage/myProjectList/MyProjectList.tsx b/src/pages/manage/myProjectList/MyProjectList.tsx
index 06c99628..a7eb51fd 100644
--- a/src/pages/manage/myProjectList/MyProjectList.tsx
+++ b/src/pages/manage/myProjectList/MyProjectList.tsx
@@ -8,9 +8,9 @@ const MyProjectList = () => {
 
   return (
     <S.ManageProjectsContainer>
-      <header className='titleWrap'>
+      <S.TitleWrapper>
         <Title size='large'>모집 프로젝트 리스트</Title>
-      </header>
+      </S.TitleWrapper>
 
       <CardList projects={managedProjects ?? []} />
     </S.ManageProjectsContainer>
diff --git a/src/pages/manage/myProjectParticipantsPass/MyProjectVolunteersPass.styled.ts b/src/pages/manage/myProjectParticipantsPass/MyProjectVolunteersPass.styled.ts
index f2d324db..712e8ed2 100644
--- a/src/pages/manage/myProjectParticipantsPass/MyProjectVolunteersPass.styled.ts
+++ b/src/pages/manage/myProjectParticipantsPass/MyProjectVolunteersPass.styled.ts
@@ -4,21 +4,33 @@ export const Container = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-top: 24px;
 `;
 
 export const Title = styled.h1`
-  font-size: 1.25rem;
+  font-size: ${({ theme }) => theme.heading.medium.fontSize};
   font-weight: 700;
   color: ${({ theme }) => theme.color.deepGrey};
   margin-left: 1rem;
   margin-bottom: 1rem;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.semiSmall.tabletFontSize};
+  }
 `;
 
 export const ResultContainer = styled.div`
   display: flex;
   width: 100%;
+  height: 40rem;
+  overflow-y: hidden;
+  padding-bottom: 3rem;
   justify-content: space-between;
   margin-top: 3.5rem;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    min-width: 468px;
+  }
 `;
 
 export const ListWrapper = styled.div`
diff --git a/src/pages/manage/myProjectVolunteer/MyProjectVolunteer.styled.ts b/src/pages/manage/myProjectVolunteer/MyProjectVolunteer.styled.ts
index c0ada979..24c116a3 100644
--- a/src/pages/manage/myProjectVolunteer/MyProjectVolunteer.styled.ts
+++ b/src/pages/manage/myProjectVolunteer/MyProjectVolunteer.styled.ts
@@ -2,12 +2,16 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   display: flex;
+  margin-top: 24px;
 `;
 
 export const ContentWrapper = styled.div`
   display: flex;
   width: 100%;
   margin-top: 1rem;
+  height: 40rem;
+  padding-bottom: 3rem;
+  overflow-y: hidden;
 `;
 
 export const ApplicantListWrapper = styled.div`
@@ -25,10 +29,14 @@ export const TitleWithButtonWrapper = styled.div`
 `;
 
 export const Title = styled.h1`
-  font-size: 1.25rem;
+  font-size: ${({ theme }) => theme.heading.semiSmall.fontSize};
   font-weight: 700;
   color: ${({ theme }) => theme.color.deepGrey};
   margin-bottom: 1rem;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.semiSmall.tabletFontSize};
+  }
 `;
 
 export const ButtonWrapper = styled.div`
diff --git a/src/pages/manage/myProjectVolunteer/MyProjectVolunteer.tsx b/src/pages/manage/myProjectVolunteer/MyProjectVolunteer.tsx
index efd38978..0038b32c 100644
--- a/src/pages/manage/myProjectVolunteer/MyProjectVolunteer.tsx
+++ b/src/pages/manage/myProjectVolunteer/MyProjectVolunteer.tsx
@@ -73,7 +73,7 @@ const MyProjectVolunteer = () => {
                       }
                       disabled={projectData?.isDone}
                     >
-                      합격 리스트에 추가
+                      합격 리스트 추가
                     </PassNonPassButton>
                     <PassNonPassButton
                       isPass={false}
@@ -85,7 +85,7 @@ const MyProjectVolunteer = () => {
                       }
                       disabled={projectData?.isDone}
                     >
-                      불합격 리스트에 추가
+                      불합격 리스트 추가
                     </PassNonPassButton>
                   </S.ButtonWrapper>
                 </S.TitleWithButtonWrapper>
diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx
index 087fb90b..74d76c1a 100644
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@@ -57,9 +57,6 @@ const UserJoinProject = lazy(
 const ModifyProject = lazy(
   () => import('../pages/modifyProject/ModifyProject')
 );
-const ApplicantViewLayout = lazy(
-  () => import('../components/common/layout/ApplicantViewLayout')
-);
 
 const AppRoutes = () => {
   const { isLoggedIn } = useAuthStore();
@@ -198,9 +195,9 @@ const AppRoutes = () => {
       element: (
         <ProtectRoute redirectUrl={ROUTES.login}>
           <Suspense fallback={<LoadingSpinner />}>
-            <ApplicantViewLayout>
+            <Layout>
               <MyProjectVolunteer />
-            </ApplicantViewLayout>
+            </Layout>
           </Suspense>
         </ProtectRoute>
       ),
@@ -210,9 +207,9 @@ const AppRoutes = () => {
       element: (
         <ProtectRoute redirectUrl={ROUTES.login}>
           <Suspense fallback={<LoadingSpinner />}>
-            <ApplicantViewLayout>
+            <Layout>
               <MyProjectVolunteersPass />
-            </ApplicantViewLayout>
+            </Layout>
           </Suspense>
         </ProtectRoute>
       ),
diff --git a/src/style/theme.ts b/src/style/theme.ts
index b0f6935d..26b49043 100644
--- a/src/style/theme.ts
+++ b/src/style/theme.ts
@@ -16,15 +16,15 @@ export type HeadingSize =
   | 'medium'
   | 'semiSmall'
   | 'small'
-  | 'verySmall';
+  | 'xSmall';
 
-export type ButtonSize = 'primary' | 'large';
+export type ButtonSize = 'primary' | 'large' | 'small';
 
 export type ButtonSchema = 'primary';
 
 export type LayoutWidth = 'desktop' | 'tablet' | 'mobile';
 
-export type BorderRadiusSize = 'primary' | 'large';
+export type BorderRadiusSize = 'primary' | 'large' | 'small';
 
 export type MediaQuery = 'mobile' | 'tablet' | 'desktop';
 
@@ -80,9 +80,13 @@ export const defaultTheme: Theme = {
     medium: { fontSize: '1.25rem', tabletFontSize: '1.1rem' },
     semiSmall: { fontSize: '1.1rem', tabletFontSize: '0.9rem' },
     small: { fontSize: '1rem', tabletFontSize: '0.8rem' },
-    verySmall: { fontSize: '0.5rem', tabletFontSize: '0.4rem' },
+    xSmall: { fontSize: '0.5rem', tabletFontSize: '0.4rem' },
   },
   buttonSize: {
+    small: {
+      fontSize: '0.8rem',
+      padding: '0.35rem 1rem',
+    },
     primary: {
       fontSize: '1rem',
       padding: '0.5rem 1.375rem',
@@ -93,6 +97,7 @@ export const defaultTheme: Theme = {
     },
   },
   borderRadius: {
+    small: '10px',
     primary: '15px',
     large: '30px',
   },