diff --git a/src/App.tsx b/src/App.tsx
index 307ca61..f41a414 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -47,6 +47,14 @@ function App() {
                 <Route path="finish" element={<FinishStep />} />
               </Route>
             </Route>
+            <Route element={<Layout />}>
+              <Route path="legal">
+                <Route path="oss" element={<LicensePage />} />
+                <Route path="terms" element={<TermsPage />} />
+                <Route path="privacy" element={<PrivacyPolicyPage />} />
+                <Route path="marketing" element={<MarketingPolicyPage />} />
+              </Route>
+            </Route>
           </Route>
 
           <Route element={<ProtectedRoute />}>
@@ -61,12 +69,6 @@ function App() {
             </Route>
             <Route element={<Layout />}>
               <Route path="profile" element={<Profile />} />
-              <Route path="legal">
-                <Route path="oss" element={<LicensePage />} />
-                <Route path="terms" element={<TermsPage />} />
-                <Route path="privacy" element={<PrivacyPolicyPage />} />
-                <Route path="marketing" element={<MarketingPolicyPage />} />
-              </Route>
               <Route path="clubs">
                 <Route index element={<ClubList />} />
                 <Route path="search" element={<ClubSearch />} />
diff --git a/src/components/layout/Header/components/InfoHeader.tsx b/src/components/layout/Header/components/InfoHeader.tsx
index c33586e..b7b4c8c 100644
--- a/src/components/layout/Header/components/InfoHeader.tsx
+++ b/src/components/layout/Header/components/InfoHeader.tsx
@@ -6,9 +6,9 @@ function InfoHeader() {
 
   return (
     <header className="fixed top-0 right-0 left-0 flex items-center bg-white px-3 py-2">
-      <div className="flex flex-1 flex-col gap-1">
-        <div className="text-sm leading-4 font-semibold text-indigo-700">{myInfo.universityName}</div>
-        <div className="text-[10px] leading-3 text-indigo-300">
+      <div className="flex flex-1 flex-col">
+        <div className="text-h3 text-indigo-700">{myInfo.universityName}</div>
+        <div className="text-cap1 text-indigo-300">
           {myInfo.name} {myInfo.studentNumber}
         </div>
       </div>
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
index 12280b4..9451ba5 100644
--- a/src/components/layout/index.tsx
+++ b/src/components/layout/index.tsx
@@ -1,8 +1,9 @@
 import { Suspense } from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 import BottomNav from './BottomNav';
 import Header from './Header';
+import { HEADER_CONFIGS } from './Header/headerConfig';
 
 interface LayoutProps {
   showBottomNav?: boolean;
@@ -10,6 +11,10 @@ interface LayoutProps {
 }
 
 export default function Layout({ showBottomNav = false, contentClassName }: LayoutProps) {
+  const { pathname } = useLocation();
+  const headerConfig = HEADER_CONFIGS.find((config) => config.match(pathname));
+  const isInfoHeader = headerConfig?.type === 'info';
+
   return (
     <div
       className="fixed inset-0 flex flex-col overflow-hidden"
@@ -19,7 +24,8 @@ export default function Layout({ showBottomNav = false, contentClassName }: Layo
       <Suspense>
         <main
           className={twMerge(
-            'bg-background box-border flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain pt-11',
+            'bg-background box-border flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain',
+            isInfoHeader ? 'pt-15' : 'pt-11',
             showBottomNav && 'pb-19',
             contentClassName
           )}
diff --git a/src/pages/Auth/Login/index.tsx b/src/pages/Auth/Login/index.tsx
index f72bd7e..82fb0f3 100644
--- a/src/pages/Auth/Login/index.tsx
+++ b/src/pages/Auth/Login/index.tsx
@@ -37,7 +37,7 @@ function Login() {
     <div className="flex flex-1 flex-col justify-between p-8 pb-23">
       <div>
         <div className="text-2xl font-extrabold whitespace-pre-wrap">모든 동아리를{'\n'}하나로 연결하다</div>
-        <div className="text-3xl font-black">KONECT</div>
+        <div className="text-4xl font-black">KONECT</div>
       </div>
       <div className="flex flex-col items-center gap-4">
         <span className="text-sm text-gray-500">소셜 계정으로 로그인</span>
diff --git a/src/pages/Auth/SignUp/ConfirmStep.tsx b/src/pages/Auth/SignUp/ConfirmStep.tsx
index 5bb3704..c07139b 100644
--- a/src/pages/Auth/SignUp/ConfirmStep.tsx
+++ b/src/pages/Auth/SignUp/ConfirmStep.tsx
@@ -28,36 +28,36 @@ function ConfirmStep() {
   return (
     <StepLayout
       title="정보를 확인해주세요"
-      description={`다시 한번 정보를 확인해주세요\n제공된 정보가 부정확할 경우 불이익이 발생할 수 있습니다`}
+      description={`다시 한번 정보를 확인해주세요\n정보가 부정확할 경우 불이익이 발생할 수 있습니다`}
       onNext={handleNext}
       nextDisabled={isPending}
     >
       <div className="text-sm font-medium text-red-500">반드시 정확한 값을 입력해주세요</div>
       <div className="flex flex-col gap-1">
-        <label className="text-[15px] leading-6 font-medium text-indigo-300">학교명</label>
+        <label className="text-sub2 text-indigo-300">학교명</label>
         <input
           type="text"
           value={universityName}
           disabled
-          className="bg-indigo-5 rounded-lg p-2 text-[15px] leading-6 font-semibold disabled:text-indigo-200"
+          className="bg-indigo-5 text-sub1 rounded-lg p-2 disabled:text-indigo-200"
         />
       </div>
       <div className="flex flex-col gap-1">
-        <label className="text-[15px] leading-6 font-medium text-indigo-300">학번</label>
+        <label className="text-sub2 text-indigo-300">학번</label>
         <input
           type="text"
           value={studentId}
           disabled
-          className="bg-indigo-5 rounded-lg p-2 text-[15px] leading-6 font-semibold disabled:text-indigo-200"
+          className="bg-indigo-5 text-sub1 rounded-lg p-2 disabled:text-indigo-200"
         />
       </div>
       <div className="flex flex-col gap-1">
-        <label className="text-[15px] leading-6 font-medium text-indigo-300">이름</label>
+        <label className="text-sub2 text-indigo-300">이름</label>
         <input
           type="text"
           value={name}
           disabled
-          className="bg-indigo-5 rounded-lg p-2 text-[15px] leading-6 font-semibold disabled:text-indigo-200"
+          className="bg-indigo-5 text-sub1 rounded-lg p-2 disabled:text-indigo-200"
         />
       </div>
       {error && (
diff --git a/src/pages/Auth/SignUp/FinishStep.tsx b/src/pages/Auth/SignUp/FinishStep.tsx
index d05333c..69bb816 100644
--- a/src/pages/Auth/SignUp/FinishStep.tsx
+++ b/src/pages/Auth/SignUp/FinishStep.tsx
@@ -22,11 +22,11 @@ function FinishStep() {
       <div className="flex flex-col items-center text-center">
         <CheckInCircleIcon className="mt-15" />
 
-        <div className="mt-8 text-2xl font-extrabold">환영합니다!</div>
+        <div className="text-d2 mt-8">환영합니다!</div>
 
         <div>
-          <div className="font-extrabold">{myInfo.name}님</div>
-          <div className="mt-1 text-xs text-indigo-300">
+          <div className="text-h1 my-3">{myInfo.name}님</div>
+          <div className="text-h5 text-indigo-300">
             <div>KONECT 가입이 완료되었습니다.</div>
             <div>동아리 활동을 시작해보세요!</div>
           </div>
diff --git a/src/pages/Auth/SignUp/NameStep.tsx b/src/pages/Auth/SignUp/NameStep.tsx
index 72cadd9..011f669 100644
--- a/src/pages/Auth/SignUp/NameStep.tsx
+++ b/src/pages/Auth/SignUp/NameStep.tsx
@@ -28,7 +28,7 @@ function NameStep() {
           const value = e.target.value.replace(/[^a-zA-Z가-힣ㆍᆞᆢㄱ-ㅎㅏ-ㅣ\s]/g, '');
           setName(value);
         }}
-        className="mt-5 w-full border-b-2 border-indigo-400 py-4 text-[20px] font-bold text-indigo-300"
+        className="text-h3 mt-5 w-full border-b-2 border-indigo-400 py-4 text-indigo-300"
       />
     </StepLayout>
   );
diff --git a/src/pages/Auth/SignUp/StudentIdStep.tsx b/src/pages/Auth/SignUp/StudentIdStep.tsx
index 5bb7002..31661db 100644
--- a/src/pages/Auth/SignUp/StudentIdStep.tsx
+++ b/src/pages/Auth/SignUp/StudentIdStep.tsx
@@ -28,7 +28,7 @@ function StudentIdStep() {
           const value = e.target.value.replace(/[^0-9]/g, '');
           setStudentId(value);
         }}
-        className="mt-5 w-full border-b-2 border-indigo-400 py-4 text-[20px] font-bold text-indigo-300"
+        className="text-h3 mt-5 w-full border-b-2 border-indigo-400 py-4 text-indigo-300"
       />
     </StepLayout>
   );
diff --git a/src/pages/Auth/SignUp/TermStep.tsx b/src/pages/Auth/SignUp/TermStep.tsx
index e024602..edddc73 100644
--- a/src/pages/Auth/SignUp/TermStep.tsx
+++ b/src/pages/Auth/SignUp/TermStep.tsx
@@ -35,7 +35,7 @@ function TermStep() {
   return (
     <div className="flex flex-1 flex-col justify-between px-8 py-5" style={{ marginBottom: 'calc(32px + var(--sab))' }}>
       <div className="flex flex-col gap-2 text-center">
-        <div className="text-[28px] font-extrabold">서비스 이용 동의</div>
+        <div className="text-d2">서비스 이용 동의</div>
         <div className="font-semibold text-indigo-300">원활한 서비스 이용을 위해 동의해주세요</div>
 
         <div className="mt-10 flex w-full flex-col gap-3">
diff --git a/src/pages/Auth/SignUp/UniversityStep.tsx b/src/pages/Auth/SignUp/UniversityStep.tsx
index e38f77e..1ef1b82 100644
--- a/src/pages/Auth/SignUp/UniversityStep.tsx
+++ b/src/pages/Auth/SignUp/UniversityStep.tsx
@@ -9,7 +9,7 @@ import { useGetUniversityList } from './hooks/useUniversity';
 function UniversityCard({ label, onClick }: { label: string; onClick: () => void }) {
   return (
     <Card onClick={onClick} className="border-indigo-75 flex w-full flex-row items-center justify-between">
-      <div>{label}</div>
+      <div className="text-sub2">{label}</div>
       <RightArrowIcon />
     </Card>
   );
@@ -40,7 +40,7 @@ function UniversityStep() {
         value={universityName}
         placeholder="학교를 입력해주세요.."
         onChange={(e) => setUniversityName(e.target.value)}
-        className="mt-5 w-full border-b-2 border-indigo-400 py-4 text-[20px] font-bold text-indigo-300 placeholder:text-indigo-300"
+        className="text-h3 mt-5 w-full border-b-2 border-indigo-400 py-4 text-indigo-300 placeholder:text-indigo-300"
       />
       <div className="mt-7 flex flex-col gap-2">
         {filteredUniversities.map((university) => (
diff --git a/src/pages/Auth/SignUp/components/AgreementArrow.tsx b/src/pages/Auth/SignUp/components/AgreementArrow.tsx
index 594a6fd..5d90086 100644
--- a/src/pages/Auth/SignUp/components/AgreementArrow.tsx
+++ b/src/pages/Auth/SignUp/components/AgreementArrow.tsx
@@ -21,7 +21,7 @@ function AgreementRow({ checked, onChange, label, route, RightIcon, CheckIcon }:
           onChange={(e) => onChange(e.target.checked)}
         />
         <CheckIcon className="text-indigo-100 peer-checked:text-black" />
-        <span className="text-sm font-medium text-indigo-100 peer-checked:text-black">{label}</span>
+        <span className="text-sub2 text-indigo-100 peer-checked:text-black">{label}</span>
       </label>
 
       {RightIcon ? (
@@ -45,7 +45,7 @@ function AgreementAllRow({ checked, onChange, label, BigCheckIcon }: AgreementAl
     <label className="flex cursor-pointer items-center gap-3">
       <input type="checkbox" className="peer sr-only" checked={checked} onChange={(e) => onChange(e.target.checked)} />
       <BigCheckIcon className="text-indigo-100 peer-checked:text-black" />
-      <span className="font-semibold text-indigo-100 peer-checked:text-black">{label}</span>
+      <span className="text-h3 text-indigo-100 peer-checked:text-black">{label}</span>
     </label>
   );
 }
diff --git a/src/pages/Auth/SignUp/components/StepLayout.tsx b/src/pages/Auth/SignUp/components/StepLayout.tsx
index e1702a9..e425ecd 100644
--- a/src/pages/Auth/SignUp/components/StepLayout.tsx
+++ b/src/pages/Auth/SignUp/components/StepLayout.tsx
@@ -14,8 +14,8 @@ function StepLayout({
   return (
     <div className="flex flex-1 flex-col justify-between px-8 py-5" style={{ marginBottom: 'calc(32px + var(--sab))' }}>
       <div className="flex flex-col gap-2">
-        <div className="text-[28px] font-extrabold">{title}</div>
-        <div className="text-body-4-m whitespace-pre-line text-indigo-300">{description}</div>
+        <div className="text-d2">{title}</div>
+        <div className="text-sm leading-5 font-medium whitespace-pre-line text-indigo-300">{description}</div>
         {children}
       </div>
 
diff --git a/src/pages/Chat/ChatRoom.tsx b/src/pages/Chat/ChatRoom.tsx
index aad0d7e..0ff8e1d 100644
--- a/src/pages/Chat/ChatRoom.tsx
+++ b/src/pages/Chat/ChatRoom.tsx
@@ -51,6 +51,8 @@ function ChatRoom() {
         sendMessage({ chatRoomId: Number(chatRoomId), content: message });
         textareaRef.current.value = '';
         textareaRef.current.style.height = 'auto';
+        textareaRef.current.focus();
+        messagesEndRef.current?.scrollIntoView();
       }
     }
   };
diff --git a/src/pages/Club/ClubDetail/components/ClubIntro.tsx b/src/pages/Club/ClubDetail/components/ClubIntro.tsx
index 9a3bbde..93c5a8c 100644
--- a/src/pages/Club/ClubDetail/components/ClubIntro.tsx
+++ b/src/pages/Club/ClubDetail/components/ClubIntro.tsx
@@ -22,8 +22,8 @@ function ClubIntro({ clubDetail }: ClubIntroProps) {
   return (
     <>
       <Card>
-        <div className="text-sm leading-4 font-bold text-indigo-700">동아리 소개</div>
-        <div className="mt-1.5 text-xs leading-3.5 text-indigo-300">{clubDetail.introduce}</div>
+        <div className="text-h3 text-indigo-700">동아리 소개</div>
+        <div className="text-sub2 mt-1.5 text-indigo-300">{clubDetail.introduce}</div>
       </Card>
       <Card>
         <div className="text-sm leading-4 font-bold text-indigo-700">위치 및 회원 수</div>
@@ -54,13 +54,13 @@ function ClubIntro({ clubDetail }: ClubIntroProps) {
         </div>
       </Card>
       <Card>
-        <div className="flex flex-col items-center gap-1 text-indigo-300">
-          <div className="text-xs leading-3.5 font-medium">동아리에 대해 궁금한 점이 있으신가요?</div>
-          <div className="text-[10px] leading-3">편하게 문의해주세요!</div>
+        <div className="text-body3 flex flex-col items-center gap-1 text-indigo-300">
+          <div>동아리에 대해 궁금한 점이 있으신가요?</div>
+          <div>편하게 문의해주세요!</div>
         </div>
         <button
           onClick={handleInquireClick}
-          className="bg-indigo-5 flex items-center justify-center gap-1 rounded-sm py-3 text-sm leading-3.5 font-medium"
+          className="bg-indigo-5 text-body3 flex items-center justify-center gap-1 rounded-sm py-3"
         >
           <PaperPlaneIcon />
           문의하기
diff --git a/src/pages/Club/ClubDetail/components/ClubRecruitment.tsx b/src/pages/Club/ClubDetail/components/ClubRecruitment.tsx
index 67b5c57..70a1be3 100644
--- a/src/pages/Club/ClubDetail/components/ClubRecruitment.tsx
+++ b/src/pages/Club/ClubDetail/components/ClubRecruitment.tsx
@@ -23,7 +23,10 @@ function ClubRecruitment({ clubId }: ClubRecruitProps) {
         <div>
           <div className="text-sm leading-4 font-bold text-indigo-700">신입 회원 모집</div>
           <div className="mt-1.5 text-xs leading-3.5 text-indigo-300">
-            모집 기간 : {clubRecruitment.startDate} ~ {clubRecruitment.endDate}
+            모집 기간 :{' '}
+            {clubRecruitment.startDate && clubRecruitment.endDate
+              ? `${clubRecruitment.startDate} ~ ${clubRecruitment.endDate}`
+              : '상세 모집'}
           </div>
         </div>
         {canApply ? (
diff --git a/src/pages/Club/ClubDetail/index.tsx b/src/pages/Club/ClubDetail/index.tsx
index a968d7e..f18780b 100644
--- a/src/pages/Club/ClubDetail/index.tsx
+++ b/src/pages/Club/ClubDetail/index.tsx
@@ -40,14 +40,14 @@ function ClubDetail() {
       <div className="fixed right-0 left-0 bg-white shadow-[0_1px_2px_0_rgba(0,0,0,0.04)]">
         <div className="flex items-start gap-4 p-4">
           <img
-            className="border-indigo-5 h-16 w-16 rounded-sm border"
+            className="border-indigo-5 h-17.5 w-17.5 rounded-sm border"
             src={clubDetail.imageUrl}
             alt={clubDetail.name}
           />
-          <div>
-            <div className="mb-1 text-xl leading-5.5 font-black">{clubDetail.name}</div>
-            <div className="mb-1 text-[10px] leading-3">{clubDetail.categoryName}</div>
-            <div className="text-sm leading-3.5">{clubDetail.description}</div>
+          <div className="flex min-w-0 flex-col gap-1">
+            <div className="text-xl leading-5.5 font-black">{clubDetail.name}</div>
+            <div className="text-body3">{clubDetail.categoryName}</div>
+            <div className="text-sub2 truncate">{clubDetail.description}</div>
           </div>
         </div>
         <div className="flex items-center gap-3 bg-white px-3">
diff --git a/src/pages/Club/ClubList/components/ClubCard.tsx b/src/pages/Club/ClubList/components/ClubCard.tsx
index 187562d..6cf5021 100644
--- a/src/pages/Club/ClubList/components/ClubCard.tsx
+++ b/src/pages/Club/ClubList/components/ClubCard.tsx
@@ -8,28 +8,28 @@ interface ClubCardProps {
 function ClubCard({ club }: ClubCardProps) {
   return (
     <Link
-      to={`/clubs/${club.id}`}
+      to={`/clubs/${club.id}${club.status === 'ONGOING' ? '?tab=recruitment' : ''}`}
       className="border-indigo-5 flex w-full items-start gap-3 rounded-lg border bg-white p-3"
     >
       <img src={club.imageUrl} className="border-indigo-5 h-13 w-13 rounded-sm border" alt={club.name} />
       <div className="min-w-0 flex-1">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-1">
-            <div className="text-[17px] leading-5 font-bold text-indigo-700">{club.name}</div>
-            <div className="text-[11px] leading-3 text-indigo-300">{club.categoryName}</div>
+            <div className="text-h3 text-indigo-700">{club.name}</div>
+            <div className="text-cap1 text-indigo-300">{club.categoryName}</div>
           </div>
           {club.status === 'ONGOING' && (
-            <div className="flex items-center rounded-sm bg-[#3182f6] px-1 py-0.5 text-center text-[10px] leading-3 font-semibold text-white">
+            <div className="text-cap2 flex items-center rounded-sm bg-[#3182f6] px-1 py-0.5 text-center text-white">
               모집중
             </div>
           )}
         </div>
-        <div className="mt-0.5 truncate text-[13px] leading-4 text-indigo-300">{club.description}</div>
+        <div className="text-sub2 mt-0.5 truncate text-indigo-300">{club.description}</div>
         <div className="mt-1 flex gap-1">
           {club.tags.map((tag) => (
             <div
               key={tag}
-              className="bg-indigo-5 xs:text-[11px] flex items-center rounded-sm px-1.5 py-[3px] text-[9px] text-indigo-300"
+              className="bg-indigo-5 text-body3 flex items-center rounded-sm px-1.5 py-[3px] text-indigo-300"
             >
               #{tag}
             </div>
diff --git a/src/pages/Club/ClubList/components/SearchBar.tsx b/src/pages/Club/ClubList/components/SearchBar.tsx
index 1627567..3aa9a20 100644
--- a/src/pages/Club/ClubList/components/SearchBar.tsx
+++ b/src/pages/Club/ClubList/components/SearchBar.tsx
@@ -7,9 +7,10 @@ interface SearchBarProps {
   value?: string;
   onChange?: (value: string) => void;
   onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
+  autoFocus?: boolean;
 }
 
-function SearchBar({ isButton, value, onChange, onSubmit }: SearchBarProps) {
+function SearchBar({ isButton, value, onChange, onSubmit, autoFocus }: SearchBarProps) {
   const wrapperClass = 'fixed left-0 right-0 bg-white px-3 py-2 shadow-[0_2px_2px_0_rgba(0,0,0,0.04)] z-10';
 
   const content = (
@@ -21,6 +22,7 @@ function SearchBar({ isButton, value, onChange, onSubmit }: SearchBarProps) {
         readOnly={isButton && !onChange}
         value={value}
         onChange={onChange ? (e) => onChange(e.target.value) : undefined}
+        autoFocus={autoFocus}
       />
     </div>
   );
diff --git a/src/pages/Club/ClubList/index.tsx b/src/pages/Club/ClubList/index.tsx
index e421ddc..fad3e7f 100644
--- a/src/pages/Club/ClubList/index.tsx
+++ b/src/pages/Club/ClubList/index.tsx
@@ -16,8 +16,8 @@ function ClubList() {
     <div className="pb-15">
       <SearchBar isButton />
       <div className="bg-background mt-13 flex flex-col gap-2 px-3 pt-2 pb-4">
-        <div className="text-[10px] leading-4 text-indigo-300">
-          총 <span className="font-bold text-black">{totalCount}개</span>의 동아리
+        <div className="text-sub2 text-indigo-300">
+          총 <span className="text-black">{totalCount}개</span>의 동아리
         </div>
 
         <div className="flex flex-col gap-2">
diff --git a/src/pages/Club/ClubSearch/index.tsx b/src/pages/Club/ClubSearch/index.tsx
index d05365f..60c5486 100644
--- a/src/pages/Club/ClubSearch/index.tsx
+++ b/src/pages/Club/ClubSearch/index.tsx
@@ -41,14 +41,14 @@ function ClubSearch() {
 
   return (
     <>
-      <SearchBar value={keyword} onChange={setKeyword} onSubmit={handleSubmit} />
+      <SearchBar value={keyword} onChange={setKeyword} onSubmit={handleSubmit} autoFocus />
 
       <div className="mt-13 flex flex-col gap-2 px-3 pt-2 pb-4">
         {!submittedQuery ? (
           <div className="py-6 text-center text-xs text-indigo-300">검색어를 입력해서 동아리를 검색해보세요.</div>
         ) : (
           <>
-            <div className="text-[10px] leading-4 text-indigo-300">
+            <div className="text-cap2 text-indigo-300">
               총 <span className="font-bold text-black">{totalCount}개</span>의 동아리
             </div>
 
diff --git a/src/pages/Home/components/SimpleClubCard.tsx b/src/pages/Home/components/SimpleClubCard.tsx
index 8d6c4e0..6a2fe46 100644
--- a/src/pages/Home/components/SimpleClubCard.tsx
+++ b/src/pages/Home/components/SimpleClubCard.tsx
@@ -16,21 +16,21 @@ function SimpleClubCard({ club }: SimpleClubCardProps) {
       <div className="min-w-0 flex-1">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-1">
-            <div className="leading-4.5 font-bold text-indigo-700">{club.name}</div>
+            <div className="text-h3 text-indigo-700">{club.name}</div>
             {club.position !== '일반 회원' && (
-              <div className="text-indigo-0 flex items-center rounded-sm bg-[#3182F6] px-1 py-0.5 text-[10px] leading-3">
+              <div className="text-indigo-0 text-cap2-strong flex items-center rounded-sm bg-[#3182F6] px-1 py-0.5">
                 운영진
               </div>
             )}
           </div>
           {!club.isFeePaid && (
-            <div className="flex items-center rounded-full bg-[#FFE5E5E5] px-3 py-1.5 text-[10px] leading-3 font-semibold text-[#FF4E4E]">
+            <div className="text-cap2 flex items-center rounded-full bg-[#FFE5E5E5] px-3 py-1.5 font-semibold text-[#FF4E4E]">
               <WarningIcon />
               납부할 회비가 있어요
             </div>
           )}
         </div>
-        <div className="mt-1 text-[11px] leading-3 text-indigo-300">
+        <div className="text-sub2 mt-1 text-indigo-300">
           {club.position}·{club.categoryName}
         </div>
       </div>
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index c62f80c..e5cf332 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -43,19 +43,19 @@ function Home() {
       <div className="flex flex-col gap-2">
         {joinedClubsData?.joinedClubs.length === 0 ? (
           <Card>
-            <div className="mb-3">
-              <div className="mb-1.5 text-xs leading-3.5">환영합니다!</div>
-              <div className="mb-2 text-sm leading-4 font-semibold">나에게 맞는 동아리를 찾아보세요</div>
-              <div className="text-xs leading-3.5">{totalClubCount}개의 동아리가 기다리고 있어요</div>
+            <div>
+              <div className="text-sub2 mb-1.5">환영합니다!</div>
+              <div className="text-h3">나에게 맞는 동아리를 찾아보세요</div>
+              <div className="text-sub2">{totalClubCount}개의 동아리가 기다리고 있어요</div>
             </div>
 
-            <Link to="/clubs" className="bg-primary w-full rounded-sm py-3 text-center text-xs font-medium text-white">
+            <Link to="/clubs" className="bg-primary text-sub2 w-full rounded-sm py-3 text-center text-white">
               동아리 둘러보기
             </Link>
           </Card>
         ) : (
           <>
-            <div className="text-sm leading-4 font-semibold">내 동아리</div>
+            <div className="text-h3">내 동아리</div>
 
             <div className="flex flex-col gap-2">
               {joinedClubsData.joinedClubs.map((club) => (
@@ -68,8 +68,8 @@ function Home() {
 
       <div>
         <div className="flex justify-between">
-          <div className="text-sm leading-4 font-semibold">다가오는 일정</div>
-          <Link to="/schedules" className="text-xs leading-3 text-[#3182F6]">
+          <div className="text-h3">다가오는 일정</div>
+          <Link to="/schedules" className="text-sub2 text-[#3182F6]">
             전체보기
           </Link>
         </div>
@@ -84,16 +84,16 @@ function Home() {
         ) : (
           scheduleListData?.schedules.slice(0, 3).map((schedule) => (
             <NavigateCard key={schedule.title} to={scheduleDateToPath(schedule.startedAt)} className="mt-2">
-              <div className="flex gap-3">
+              <div className="flex items-center gap-3">
                 <div className="bg-indigo-25 flex h-10 w-10 flex-col items-center justify-center rounded-sm">
-                  <div className="text-primary text-center text-[10px] leading-3 font-bold">
+                  <div className="text-primary text-center text-xs leading-3 font-bold">
                     {schedule.dDay > 0 ? `D-${schedule.dDay}` : 'Today'}
                   </div>
                   <CalendarIcon />
                 </div>
-                <div className="flex flex-1 flex-col justify-center gap-1">
-                  <div className="text-[15px] leading-[17px] font-bold text-indigo-700">{schedule.title}</div>
-                  <div className="text-[13px] leading-4 text-indigo-300">
+                <div className="flex flex-1 flex-col">
+                  <div className="text-h3 text-indigo-700">{schedule.title}</div>
+                  <div className="text-sub2 text-indigo-300">
                     {formatScheduleDate(schedule.startedAt, schedule.endedAt)}
                   </div>
                 </div>
@@ -105,8 +105,8 @@ function Home() {
 
       <div className="flex flex-col gap-2">
         <div className="flex justify-between">
-          <div className="text-sm leading-4 font-semibold">지금 모집중</div>
-          <Link to="/clubs" className="text-xs leading-3 text-[#3182F6]">
+          <div className="text-h3">지금 모집중</div>
+          <Link to="/clubs" className="text-sub2 text-[#3182F6]">
             전체보기
           </Link>
         </div>