diff --git a/apps/web/src/apis/clubDetail/entity.ts b/apps/web/src/apis/clubDetail/entity.ts
index 2d24ddb..fc61399 100644
--- a/apps/web/src/apis/clubDetail/entity.ts
+++ b/apps/web/src/apis/clubDetail/entity.ts
@@ -1,5 +1,11 @@
+import type { ClubCategory } from '@/apis/common/club';
+
 import type { UniversitySummary } from '../universityClub/entity';
-export type ClubCategory = 'ACADEMIC' | 'SPORTS' | 'HOBBY' | 'RELIGION' | 'PERFORMANCE' | 'JUNIOR';
+
+export interface ClubDetailUniversitySummary extends UniversitySummary {
+  clubCount: number;
+}
+
 export interface ClubDetailResponse {
   id: number;
   name: string;
@@ -10,5 +16,5 @@ export interface ClubDetailResponse {
   description: string;
   introduce: string;
   location: string;
-  university: UniversitySummary;
+  university: ClubDetailUniversitySummary;
 }
diff --git a/apps/web/src/apis/common/club.ts b/apps/web/src/apis/common/club.ts
new file mode 100644
index 0000000..d9256d8
--- /dev/null
+++ b/apps/web/src/apis/common/club.ts
@@ -0,0 +1,16 @@
+export const CLUB_CATEGORY = {
+  ACADEMIC: 'ACADEMIC',
+  SPORTS: 'SPORTS',
+  HOBBY: 'HOBBY',
+  RELIGION: 'RELIGION',
+  PERFORMANCE: 'PERFORMANCE',
+  JUNIOR: 'JUNIOR',
+} as const;
+
+export type ClubCategory = (typeof CLUB_CATEGORY)[keyof typeof CLUB_CATEGORY];
+
+export const CLUB_CATEGORY_VALUES = Object.values(CLUB_CATEGORY);
+
+export function isClubCategory(value: string | null | undefined): value is ClubCategory {
+  return typeof value === 'string' && CLUB_CATEGORY_VALUES.includes(value as ClubCategory);
+}
diff --git a/apps/web/src/apis/recentClub/entity.ts b/apps/web/src/apis/recentClub/entity.ts
new file mode 100644
index 0000000..047400a
--- /dev/null
+++ b/apps/web/src/apis/recentClub/entity.ts
@@ -0,0 +1,19 @@
+import type { ClubCategory } from '@/apis/common/club';
+
+export interface RecentClubRequestParams {
+  clubIds: number[];
+}
+
+export interface RecentClub {
+  id: number;
+  name: string;
+  imageUrl: string;
+  category: ClubCategory;
+  categoryName: string;
+  topic: string;
+  description: string;
+}
+
+export interface RecentClubResponse {
+  clubs: RecentClub[];
+}
diff --git a/apps/web/src/apis/recentClub/index.ts b/apps/web/src/apis/recentClub/index.ts
new file mode 100644
index 0000000..3b3878c
--- /dev/null
+++ b/apps/web/src/apis/recentClub/index.ts
@@ -0,0 +1,9 @@
+import { apiClient } from '../client';
+import type { RecentClubRequestParams, RecentClubResponse } from './entity';
+
+export const getRecentClubs = async (clubIds: number[]) => {
+  const response = await apiClient.get<RecentClubResponse, RecentClubRequestParams>('konect/clubs/recent', {
+    params: { clubIds },
+  });
+  return response;
+};
diff --git a/apps/web/src/apis/recentClub/queries.ts b/apps/web/src/apis/recentClub/queries.ts
new file mode 100644
index 0000000..38881f1
--- /dev/null
+++ b/apps/web/src/apis/recentClub/queries.ts
@@ -0,0 +1,16 @@
+import { queryOptions } from '@tanstack/react-query';
+
+import { getRecentClubs } from '.';
+
+export const recentClubQueryKeys = {
+  all: ['recentClub'] as const,
+  list: (clubIds: number[]) => [...recentClubQueryKeys.all, clubIds] as const,
+};
+
+export const recentClubQueries = {
+  list: (clubIds: number[]) =>
+    queryOptions({
+      queryKey: recentClubQueryKeys.list(clubIds),
+      queryFn: () => getRecentClubs(clubIds),
+    }),
+};
diff --git a/apps/web/src/apis/universityClub/entity.ts b/apps/web/src/apis/universityClub/entity.ts
index 2019cb8..b625af1 100644
--- a/apps/web/src/apis/universityClub/entity.ts
+++ b/apps/web/src/apis/universityClub/entity.ts
@@ -1,7 +1,6 @@
+import type { ClubCategory } from '@/apis/common/club';
 import type { Region } from '@/apis/home/entity';
 
-export type ClubCategory = 'ACADEMIC' | 'SPORTS' | 'HOBBY' | 'RELIGION' | 'PERFORMANCE' | 'JUNIOR';
-
 export interface UniversityClubListRequestParams {
   page?: number;
   limit?: number;
@@ -16,7 +15,6 @@ export interface UniversitySummary {
   region: Region;
   regionName: string;
   imageUrl: string;
-  clubCount?: number;
 }
 
 export interface ClubCategorySummary {
@@ -31,8 +29,8 @@ export interface UniversityClub {
   imageUrl: string;
   category: ClubCategory;
   categoryName: string;
+  topic: string;
   description: string;
-  memberCount: number;
 }
 
 export interface UniversityClubListResponse {
diff --git a/apps/web/src/components/Breadcrumb/index.tsx b/apps/web/src/components/Breadcrumb/index.tsx
new file mode 100644
index 0000000..7187ea4
--- /dev/null
+++ b/apps/web/src/components/Breadcrumb/index.tsx
@@ -0,0 +1,49 @@
+import { Fragment } from 'react';
+import { cn } from '@konect/utils/cn';
+import { Link } from 'react-router-dom';
+
+interface BreadcrumbItem {
+  label: string;
+  to?: string;
+}
+
+interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+}
+
+function Breadcrumb({ items }: BreadcrumbProps) {
+  return (
+    <nav
+      className="text-text-400 flex items-center gap-3 text-sm leading-8 font-semibold sm:gap-3.5 sm:text-2xl sm:leading-10"
+      aria-label="breadcrumb"
+    >
+      {items.map((item, index) => {
+        const isLast = index === items.length - 1;
+
+        return (
+          <Fragment key={`${item.label}-${index}`}>
+            {item.to && !isLast ? (
+              <Link className="hover:text-primary-600 transition-colors" to={item.to}>
+                {item.label}
+              </Link>
+            ) : (
+              <span
+                className={cn(isLast && 'text-text-600 min-w-0 truncate font-semibold')}
+                aria-current={isLast ? 'page' : undefined}
+              >
+                {item.label}
+              </span>
+            )}
+            {!isLast && (
+              <span className="text-text-300 text-lg sm:text-[20px]" aria-hidden="true">
+                ›
+              </span>
+            )}
+          </Fragment>
+        );
+      })}
+    </nav>
+  );
+}
+
+export default Breadcrumb;
diff --git a/apps/web/src/components/RecentClubCard/index.tsx b/apps/web/src/components/RecentClubCard/index.tsx
new file mode 100644
index 0000000..327b8a2
--- /dev/null
+++ b/apps/web/src/components/RecentClubCard/index.tsx
@@ -0,0 +1,30 @@
+import { cn } from '@konect/utils/cn';
+import { Link } from 'react-router-dom';
+
+import type { RecentClub } from '@/apis/recentClub/entity';
+import { CATEGORY_TEXT_COLORS } from '@/constants/club';
+
+interface RecentClubCardProps {
+  club: RecentClub;
+}
+
+function RecentClubCard({ club }: RecentClubCardProps) {
+  return (
+    <Link
+      className="border-text-100 hover:border-primary-500 focus-visible:outline-primary-500 flex w-full items-center gap-7 overflow-hidden rounded-[20px] border bg-white px-5.5 py-5 transition-colors hover:shadow-[0_0_30px_0_rgba(105,191,223,0.30)] focus-visible:outline-2 focus-visible:outline-offset-2"
+      to={`/clubs/${club.id}`}
+    >
+      <img className="size-12.5 shrink-0 rounded-full object-cover" src={club.imageUrl} alt="" />
+      <span className="min-w-0">
+        <span className="block truncate leading-10 font-semibold text-black">{club.name}</span>
+        <span className="flex min-w-0 items-center gap-2 text-[13px] leading-10">
+          <span className={cn('shrink-0 font-semibold', CATEGORY_TEXT_COLORS[club.category])}>{club.categoryName}</span>
+          <span className="bg-text-200 size-1 rounded-full" aria-hidden="true" />
+          <span className="text-text-600 min-w-0 truncate font-medium">{club.topic || club.description}</span>
+        </span>
+      </span>
+    </Link>
+  );
+}
+
+export default RecentClubCard;
diff --git a/apps/web/src/components/RecentClubList/index.tsx b/apps/web/src/components/RecentClubList/index.tsx
new file mode 100644
index 0000000..f780a1a
--- /dev/null
+++ b/apps/web/src/components/RecentClubList/index.tsx
@@ -0,0 +1,57 @@
+import { cn } from '@konect/utils/cn';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { recentClubQueries } from '@/apis/recentClub/queries';
+import RecentClubCard from '@/components/RecentClubCard';
+import { useRecentClubIds } from '@/utils/recentClubStorage';
+
+interface RecentClubListProps {
+  className: string;
+  emptyClassName?: string;
+}
+
+function RecentClubList({ className, emptyClassName }: RecentClubListProps) {
+  const recentClubIds = useRecentClubIds();
+
+  if (recentClubIds.length === 0) {
+    return <RecentClubListMessage className={emptyClassName} message="최근에 본 동아리가 없어요." />;
+  }
+
+  return <RecentClubListContent className={className} emptyClassName={emptyClassName} recentClubIds={recentClubIds} />;
+}
+
+function RecentClubListContent({
+  className,
+  emptyClassName,
+  recentClubIds,
+}: RecentClubListProps & { recentClubIds: number[] }) {
+  const { data } = useSuspenseQuery(recentClubQueries.list(recentClubIds));
+  const recentClubs = data.clubs;
+
+  if (recentClubs.length === 0) {
+    return <RecentClubListMessage className={emptyClassName} message="최근에 본 동아리가 없어요." />;
+  }
+
+  return (
+    <div className={className}>
+      {recentClubs.map((club) => (
+        <RecentClubCard key={club.id} club={club} />
+      ))}
+    </div>
+  );
+}
+
+function RecentClubListMessage({ className, message }: { className?: string; message: string }) {
+  return (
+    <p
+      className={cn(
+        'border-primary-200 text-text-400 bg-web-background rounded-[20px] border px-6 py-8 text-center text-[16px] leading-7',
+        className
+      )}
+    >
+      {message}
+    </p>
+  );
+}
+
+export default RecentClubList;
diff --git a/apps/web/src/constants/club.ts b/apps/web/src/constants/club.ts
index 9929fc6..122cd14 100644
--- a/apps/web/src/constants/club.ts
+++ b/apps/web/src/constants/club.ts
@@ -1,10 +1,10 @@
-import type { ClubCategory } from '@/apis/universityClub/entity';
+import { CLUB_CATEGORY, type ClubCategory } from '@/apis/common/club';
 
 export const CATEGORY_TEXT_COLORS: Record<ClubCategory, string> = {
-  ACADEMIC: 'text-primary-500',
-  SPORTS: 'text-info-600',
-  HOBBY: 'text-danger-600',
-  RELIGION: 'text-warning-700',
-  PERFORMANCE: 'text-[#cd3bf6]',
-  JUNIOR: 'text-success-700',
+  [CLUB_CATEGORY.ACADEMIC]: 'text-primary-500',
+  [CLUB_CATEGORY.SPORTS]: 'text-info-600',
+  [CLUB_CATEGORY.HOBBY]: 'text-danger-600',
+  [CLUB_CATEGORY.RELIGION]: 'text-warning-700',
+  [CLUB_CATEGORY.PERFORMANCE]: 'text-[#cd3bf6]',
+  [CLUB_CATEGORY.JUNIOR]: 'text-success-700',
 };
diff --git a/apps/web/src/pages/ClubDetail/index.tsx b/apps/web/src/pages/ClubDetail/index.tsx
index bc63722..bbea8b8 100644
--- a/apps/web/src/pages/ClubDetail/index.tsx
+++ b/apps/web/src/pages/ClubDetail/index.tsx
@@ -1,12 +1,16 @@
+import { useEffect } from 'react';
 import { cn } from '@konect/utils/cn';
 import { useSuspenseQuery } from '@tanstack/react-query';
-import { Link, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 import { clubDetailQueries } from '@/apis/clubDetail/queries';
 import AddMov from '@/assets/add-mov.svg';
 import AddPhoto from '@/assets/add-photo.svg';
 import NoneImage from '@/assets/None-image.png';
+import Breadcrumb from '@/components/Breadcrumb';
+import RecentClubList from '@/components/RecentClubList';
 import { CATEGORY_TEXT_COLORS } from '@/constants/club';
+import { saveRecentClubId } from '@/utils/recentClubStorage';
 
 function Introduce({ introduce }: { introduce: string }) {
   return (
@@ -48,16 +52,20 @@ export default function ClubDetail() {
   const { clubId } = useParams();
   const { data: clubDetail } = useSuspenseQuery(clubDetailQueries.detail(Number(clubId)));
 
+  useEffect(() => {
+    saveRecentClubId(clubDetail.id);
+  }, [clubDetail.id]);
+
   return (
     <main className="bg-web-background min-h-screen text-black">
       <div className="mx-auto flex w-full max-w-369.5 flex-col px-5 pt-12 pb-20 sm:px-8 lg:pt-25.5 xl:px-0">
-        <nav className="text-text-400 flex items-center gap-3 text-sm leading-8 font-semibold sm:gap-3.5 sm:text-[24px] sm:leading-10">
-          <Link to="/">홈</Link>
-          <span className="text-text-300 text-lg sm:text-[20px]">›</span>
-          <Link to={`/universities/${clubDetail.university.id}/clubs`}>대학교 동아리</Link>
-          <span className="text-text-300 text-lg sm:text-[20px]">›</span>
-          <span className="text-text-600 text-2xl font-semibold">{clubDetail.name}</span>
-        </nav>
+        <Breadcrumb
+          items={[
+            { label: '홈', to: '/' },
+            { label: '대학교 동아리', to: `/universities/${clubDetail.university.id}/clubs` },
+            { label: clubDetail.name },
+          ]}
+        />
         <div className="mt-10 grid gap-8 lg:mt-15 lg:grid-cols-[407px_minmax(0,1050px)] lg:gap-5">
           <aside className="flex flex-col gap-6 lg:gap-10">
             <section className="border-text-100 flex h-55 items-center justify-center rounded-4xl border bg-white px-8 py-8 text-center sm:h-66 sm:rounded-[40px] sm:px-21 sm:py-10">
@@ -73,6 +81,7 @@ export default function ClubDetail() {
             </section>
             <section className="border-text-100 rounded-4xl border bg-white px-5 py-7 sm:rounded-[40px] sm:px-10 sm:py-11">
               <h2 className="text-text-600 text-[24px] leading-10 font-medium">최근에 본 동아리</h2>
+              <RecentClubList className="mt-10 flex flex-col gap-5" />
             </section>
           </aside>
           <div className="flex flex-col gap-10">
diff --git a/apps/web/src/pages/Home/index.tsx b/apps/web/src/pages/Home/index.tsx
index e353954..fc98c8f 100644
--- a/apps/web/src/pages/Home/index.tsx
+++ b/apps/web/src/pages/Home/index.tsx
@@ -5,10 +5,9 @@ import { Link } from 'react-router-dom';
 
 import type { Region, HomeRequestParams, University } from '@/apis/home/entity';
 import { homeQueries } from '@/apis/home/queries';
-import clubBadgeBlue from '@/assets/club-badge-blue.png';
-import clubBadgeRed from '@/assets/club-badge-red.png';
 import heroCatBook from '@/assets/hero-cat-book.png';
 import SearchIcon from '@/assets/svg/search-icon.svg';
+import RecentClubList from '@/components/RecentClubList';
 
 const REGION_OPTIONS: { label: string; value?: Region }[] = [
   { label: '전체' },
@@ -21,45 +20,6 @@ const REGION_OPTIONS: { label: string; value?: Region }[] = [
   { label: '제주도', value: 'JEJU' },
 ];
 
-type RecentClub = {
-  id: number;
-  name: string;
-  category: string;
-  keyword: string;
-  logo: string;
-};
-
-const recentClubs: RecentClub[] = [
-  {
-    id: 1,
-    name: '경영전략연구회',
-    category: '학술',
-    keyword: '경영',
-    logo: clubBadgeBlue,
-  },
-  {
-    id: 2,
-    name: '경영전략연구회',
-    category: '학술',
-    keyword: '경영',
-    logo: clubBadgeRed,
-  },
-  {
-    id: 3,
-    name: '경영전략연구회',
-    category: '학술',
-    keyword: '경영',
-    logo: clubBadgeBlue,
-  },
-  {
-    id: 4,
-    name: '경영전략연구회',
-    category: '학술',
-    keyword: '경영',
-    logo: clubBadgeBlue,
-  },
-];
-
 function Home() {
   const [selectedRegion, setSelectedRegion] = useState<Region>();
   const [searchKeyword, setSearchKeyword] = useState('');
@@ -134,11 +94,10 @@ function Home() {
         >
           <section className="min-h-0 overflow-hidden" aria-hidden={isSearching}>
             <SectionTitle title="최근에 본 동아리" description="관심있게 봤던 동아리를 다시 확인해보세요." />
-            <div className="mt-4 grid grid-cols-1 gap-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-              {recentClubs.map((club) => (
-                <RecentClubCard key={club.id} club={club} />
-              ))}
-            </div>
+            <RecentClubList
+              className="mt-4 grid grid-cols-1 gap-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
+              emptyClassName="mt-4"
+            />
           </section>
         </div>
 
@@ -193,25 +152,6 @@ function SectionTitle({ title, description }: { title: string; description: stri
   );
 }
 
-function RecentClubCard({ club }: { club: RecentClub }) {
-  return (
-    <button
-      className="border-text-100 hover:border-primary-500 focus-visible:outline-primary-500 flex h-35 w-62.25 items-center gap-7 rounded-[20px] border bg-white px-5.5 py-8 transition-colors hover:shadow-[0_0_30px_0_rgba(105,191,223,0.30)] focus-visible:outline-2 focus-visible:outline-offset-2"
-      type="button"
-    >
-      <img className="size-12.5 shrink-0 rounded-full object-cover" src={club.logo} alt="" />
-      <span className="min-w-0">
-        <span className="block truncate leading-10 font-semibold text-black">{club.name}</span>
-        <span className="flex items-center gap-2 text-[13px] leading-10">
-          <span className="text-primary-600 font-semibold">{club.category}</span>
-          <span className="bg-text-200 size-1 rounded-full" aria-hidden="true" />
-          <span className="text-text-600 font-medium">{club.keyword}</span>
-        </span>
-      </span>
-    </button>
-  );
-}
-
 // function UniversityCardSkeletonList() {
 //   return Array.from({ length: 8 }, (_, index) => (
 //     <div
diff --git a/apps/web/src/pages/UniversityClubList/index.tsx b/apps/web/src/pages/UniversityClubList/index.tsx
index 5d2ce55..f188822 100644
--- a/apps/web/src/pages/UniversityClubList/index.tsx
+++ b/apps/web/src/pages/UniversityClubList/index.tsx
@@ -4,9 +4,12 @@ import { useDebouncedCallback } from '@konect/utils/use-debounced-callback';
 import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
 import { Link, Navigate, useParams, useSearchParams } from 'react-router-dom';
 
-import type { ClubCategory, UniversityClub, UniversityClubListRequestParams } from '@/apis/universityClub/entity';
+import { isClubCategory, type ClubCategory } from '@/apis/common/club';
+import type { UniversityClub, UniversityClubListRequestParams } from '@/apis/universityClub/entity';
 import { universityClubQueries } from '@/apis/universityClub/queries';
 import SearchIcon from '@/assets/svg/search-icon.svg';
+import Breadcrumb from '@/components/Breadcrumb';
+import RecentClubList from '@/components/RecentClubList';
 import { CATEGORY_TEXT_COLORS } from '@/constants/club';
 
 const PAGE_LIMIT = 12;
@@ -52,7 +55,16 @@ function UniversityClubListContent({ universityId }: { universityId: number }) {
   const universityLabel = university.campusName ? `${university.name} ${university.campusName}` : university.name;
   const categoryTotalCount = categories.reduce((sum, category) => sum + category.count, 0);
   const allClubCount = categoryTotalCount || totalCount;
-  const recentClubs = clubs.slice(0, 4);
+
+  const handleSearchKeywordChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    setSearchKeyword(value);
+    updateSearchQuery(value);
+  };
+
+  const handleCategoryChange = (category?: ClubCategory) => {
+    updateListSearchParams(setSearchParams, { category });
+  };
 
   useEffect(() => {
     setSearchKeyword(query);
@@ -77,38 +89,16 @@ function UniversityClubListContent({ universityId }: { universityId: number }) {
     return () => observer.disconnect();
   }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
 
-  const handleSearchKeywordChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const value = event.target.value;
-    setSearchKeyword(value);
-    updateSearchQuery(value);
-  };
-
-  const handleCategoryChange = (category?: ClubCategory) => {
-    updateListSearchParams(setSearchParams, { category });
-  };
-
   return (
-    <main className="bg-web-background min-h-screen text-black">
-      <div className="mx-auto flex w-full max-w-369.5 flex-col px-5 pt-12 pb-20 sm:px-8 lg:pt-25.5 xl:px-0">
-        <nav className="text-text-400 flex items-center gap-3 text-sm leading-8 font-semibold sm:gap-3.5 sm:text-[24px] sm:leading-10">
-          <Link className="hover:text-primary-600 transition-colors" to="/">
-            홈
-          </Link>
-          <span className="text-text-300 text-lg sm:text-[20px]" aria-hidden="true">
-            ›
-          </span>
-          <span>{university.regionName}</span>
-          <span className="text-text-300 text-lg sm:text-[20px]" aria-hidden="true">
-            ›
-          </span>
-          <span className="text-text-600 min-w-0 truncate">{university.name}</span>
-        </nav>
-
-        <div className="mt-10 grid gap-8 lg:mt-15 lg:grid-cols-[407px_minmax(0,1050px)] lg:gap-5">
+    <main className="min-h-screen text-black">
+      <div className="mx-auto mt-12 flex w-full max-w-278 flex-col px-5 pb-20 md:px-0 lg:mt-25">
+        <Breadcrumb items={[{ label: '홈', to: '/' }, { label: university.regionName }, { label: university.name }]} />
+
+        <div className="mt-10 grid gap-8 md:grid-cols-[296px_minmax(0,1050px)] lg:mt-15 lg:gap-5">
           <aside className="flex flex-col gap-6 lg:gap-10">
-            <section className="border-text-100 flex h-55 items-center justify-center rounded-4xl border bg-white px-8 py-8 text-center sm:h-66 sm:rounded-[40px] sm:px-21 sm:py-10">
+            <section className="border-text-100 flex items-center justify-center rounded-4xl border bg-white py-8 text-center sm:rounded-[40px] sm:py-10">
               <div className="flex min-w-0 flex-col items-center gap-3">
-                <img className="h-22 w-17.5 object-contain" src={university.imageUrl} alt="" />
+                <img className="h-16 w-12.5 object-contain" src={university.imageUrl} alt="" />
                 <div className="flex max-w-full flex-col items-center leading-10">
                   <h1 className="max-w-full truncate text-[24px] font-semibold text-black">{universityLabel}</h1>
                   <p className="text-text-400 text-[20px]">{allClubCount}개 동아리</p>
@@ -116,23 +106,15 @@ function UniversityClubListContent({ universityId }: { universityId: number }) {
               </div>
             </section>
 
-            <section className="border-text-100 rounded-4xl border bg-white px-5 py-7 sm:rounded-[40px] sm:px-10 sm:py-11">
+            <section className="border-text-100 rounded-4xl border bg-white px-3 py-7 sm:rounded-[40px] sm:px-6 sm:py-11">
               <h2 className="text-text-600 text-[24px] leading-10 font-medium">최근에 본 동아리</h2>
-              <div className="mt-10 flex flex-col gap-5">
-                {recentClubs.length > 0 ? (
-                  recentClubs.map((club) => <RecentClubCard key={club.id} club={club} />)
-                ) : (
-                  <p className="border-primary-200 text-text-400 bg-web-background rounded-[20px] border px-6 py-8 text-center text-[16px] leading-7">
-                    표시할 동아리가 없어요.
-                  </p>
-                )}
-              </div>
+              <RecentClubList className="mt-10 flex flex-col gap-5" />
             </section>
           </aside>
 
           <section className="flex min-w-0 flex-col items-center gap-10">
             <div className="flex w-full flex-col gap-5">
-              <label className="border-text-100 focus-within:border-primary-500 flex h-18 items-center rounded-[30px] border bg-white px-6 transition-[border-color,box-shadow] focus-within:shadow-[0_0_30px_0_rgba(105,191,223,0.18)] sm:h-21 sm:px-8">
+              <label className="border-text-100 focus-within:border-primary-500 flex items-center rounded-[30px] border bg-white px-5 transition-[border-color,box-shadow] focus-within:shadow-[0_0_30px_0_rgba(105,191,223,0.18)] sm:px-8 sm:py-3.5">
                 <span className="sr-only">동아리명 검색</span>
                 <input
                   className="placeholder:text-text-300 text-text-700 min-w-0 flex-1 bg-transparent text-base leading-10 font-medium outline-none sm:text-[24px]"
@@ -140,10 +122,10 @@ function UniversityClubListContent({ universityId }: { universityId: number }) {
                   onChange={handleSearchKeywordChange}
                   placeholder="동아리명을 검색해 보세요"
                 />
-                <SearchIcon className="h-8 shrink-0 sm:h-10" />
+                <SearchIcon className="h-8 sm:h-10" />
               </label>
 
-              <div className="border-text-100 flex h-19.5 items-center overflow-hidden rounded-[30px] border px-4 py-1.5 sm:px-8">
+              <div className="border-text-100 flex items-center overflow-hidden rounded-[30px] border px-4 py-[9.5px] sm:px-8">
                 <div className="flex min-w-0 gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
                   <CategoryFilterButton
                     label="전체"
@@ -170,7 +152,7 @@ function UniversityClubListContent({ universityId }: { universityId: number }) {
               </p>
 
               {clubs.length > 0 ? (
-                <div className="grid w-full grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3">
+                <div className="grid w-full grid-cols-1 gap-5 sm:grid-cols-2 md:grid-cols-3">
                   {clubs.map((club) => (
                     <ClubCard key={club.id} club={club} />
                   ))}
@@ -196,78 +178,23 @@ function UniversityClubListContent({ universityId }: { universityId: number }) {
   );
 }
 
-function RecentClubCard({ club }: { club: UniversityClub }) {
-  return (
-    <Link
-      className="border-primary-200 bg-web-background hover:border-primary-500 focus-visible:outline-primary-500 flex h-30.5 max-h-30.5 min-h-30.5 w-full shrink-0 items-center gap-7 overflow-hidden rounded-[20px] border px-7.5 py-6.5 text-left transition-colors focus-visible:outline-2 focus-visible:outline-offset-2"
-      type="button"
-      to={`/clubs/${club.id}`}
-    >
-      <ClubImage className="size-17.5" imageUrl={club.imageUrl} name={club.name} />
-      <ClubMeta
-        club={club}
-        titleClassName="w-57 text-[20px]"
-        categoryClassName="text-[16px]"
-        descriptionClassName="text-[16px]"
-      />
-    </Link>
-  );
-}
-
 function ClubCard({ club }: { club: UniversityClub }) {
   return (
     <Link
-      className="border-text-100 hover:border-primary-500 focus-visible:outline-primary-500 flex h-35 items-center gap-5 overflow-hidden rounded-[20px] border bg-white px-5.5 py-8 text-left transition-colors hover:shadow-[0_0_30px_0_rgba(105,191,223,0.18)] focus-visible:outline-2 focus-visible:outline-offset-2"
+      className="border-text-100 hover:border-primary-500 focus-visible:outline-primary-500 flex items-center gap-5 overflow-hidden rounded-[20px] border bg-white px-5.5 py-5 text-left transition-colors hover:shadow-[0_0_30px_0_rgba(105,191,223,0.18)] focus-visible:outline-2 focus-visible:outline-offset-2"
       type="button"
       to={`/clubs/${club.id}`}
     >
-      <ClubImage className="size-12.5" imageUrl={club.imageUrl} name={club.name} />
-      <ClubMeta
-        club={club}
-        titleClassName="w-57 text-[20px]"
-        categoryClassName="text-[14px]"
-        descriptionClassName="text-[14px]"
-      />
-    </Link>
-  );
-}
-
-function ClubImage({ className, imageUrl, name }: { className: string; imageUrl?: string; name: string }) {
-  if (imageUrl) {
-    return <img className={cn('shrink-0 object-contain', className)} src={imageUrl} alt="" />;
-  }
-
-  return (
-    <span className={cn('bg-primary-100 border-primary-200 block shrink-0 rounded-full border', className)}>
-      <span className="sr-only">{name}</span>
-    </span>
-  );
-}
-
-function ClubMeta({
-  club,
-  titleClassName,
-  categoryClassName,
-  descriptionClassName,
-}: {
-  club: UniversityClub;
-  titleClassName: string;
-  categoryClassName: string;
-  descriptionClassName: string;
-}) {
-  return (
-    <span className="min-w-0">
-      <span className={cn('block truncate leading-10 font-semibold text-black', titleClassName)}>{club.name}</span>
-      <span className="flex min-w-0 items-center gap-2 leading-10">
-        <span className={cn('shrink-0 font-semibold', CATEGORY_TEXT_COLORS[club.category], categoryClassName)}>
-          {club.categoryName}
-        </span>
-        <span className="bg-text-200 size-1.5 shrink-0 rounded-full" aria-hidden="true" />
-        <span className={cn('text-text-600 min-w-0 truncate font-medium', descriptionClassName)}>
-          {club.description || `${club.memberCount}명`}
+      <img className="size-12.5 shrink-0 object-contain" src={club.imageUrl} alt="" />
+      <span className="min-w-0">
+        <span className={cn('block truncate text-[18px] leading-10 font-semibold text-black')}>{club.name}</span>
+        <span className="flex min-w-0 items-center gap-2 leading-10">
+          <span className={cn('shrink-0 font-semibold', CATEGORY_TEXT_COLORS[club.category])}>{club.categoryName}</span>
+          <span className="bg-text-200 size-1.5 shrink-0 rounded-full" aria-hidden="true" />
+          <span className={cn('text-text-600 min-w-0 truncate font-medium')}>{club.topic}</span>
         </span>
       </span>
-    </span>
+    </Link>
   );
 }
 
@@ -285,7 +212,7 @@ function CategoryFilterButton({
   return (
     <button
       className={cn(
-        'focus-visible:outline-primary-500 flex h-14 shrink-0 items-center justify-center rounded-[26px] px-5 py-1.5 text-[20px] leading-10 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2',
+        'focus-visible:outline-primary-500 flex shrink-0 items-center justify-center rounded-[26px] px-5 leading-10 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2',
         isSelected
           ? 'border-primary-500 text-primary-500 border bg-white font-medium'
           : 'text-text-300 hover:text-text-600'
@@ -309,14 +236,7 @@ function ClubListMessage({ message }: { message: string }) {
 }
 
 function getCategoryParam(value: string | null): ClubCategory | undefined {
-  if (
-    value === 'ACADEMIC' ||
-    value === 'SPORTS' ||
-    value === 'HOBBY' ||
-    value === 'RELIGION' ||
-    value === 'PERFORMANCE' ||
-    value === 'JUNIOR'
-  ) {
+  if (isClubCategory(value)) {
     return value;
   }
 
diff --git a/apps/web/src/utils/recentClubStorage.ts b/apps/web/src/utils/recentClubStorage.ts
new file mode 100644
index 0000000..632da53
--- /dev/null
+++ b/apps/web/src/utils/recentClubStorage.ts
@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'react';
+
+const RECENT_CLUB_IDS_STORAGE_KEY = 'konect:recent-club-ids';
+const RECENT_CLUB_IDS_CHANGE_EVENT = 'konect:recent-club-ids-change';
+const RECENT_CLUB_IDS_LIMIT = 4;
+
+export function getRecentClubIds() {
+  if (!canUseLocalStorage()) return [];
+
+  try {
+    const rawValue = window.localStorage.getItem(RECENT_CLUB_IDS_STORAGE_KEY);
+    if (!rawValue) return [];
+
+    const parsedValue: unknown = JSON.parse(rawValue);
+    if (!Array.isArray(parsedValue)) return [];
+
+    return normalizeClubIds(parsedValue);
+  } catch {
+    return [];
+  }
+}
+
+export function saveRecentClubId(clubId: number) {
+  if (!Number.isInteger(clubId) || clubId <= 0) return getRecentClubIds();
+
+  const nextClubIds = [clubId, ...getRecentClubIds().filter((id) => id !== clubId)].slice(0, RECENT_CLUB_IDS_LIMIT);
+
+  if (canUseLocalStorage()) {
+    try {
+      window.localStorage.setItem(RECENT_CLUB_IDS_STORAGE_KEY, JSON.stringify(nextClubIds));
+      window.dispatchEvent(new Event(RECENT_CLUB_IDS_CHANGE_EVENT));
+    } catch {
+      return getRecentClubIds();
+    }
+  }
+
+  return nextClubIds;
+}
+
+export function useRecentClubIds() {
+  const [clubIds, setClubIds] = useState(getRecentClubIds);
+
+  useEffect(() => {
+    const handleRecentClubIdsChange = () => setClubIds(getRecentClubIds());
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.key === RECENT_CLUB_IDS_STORAGE_KEY) {
+        handleRecentClubIdsChange();
+      }
+    };
+
+    window.addEventListener(RECENT_CLUB_IDS_CHANGE_EVENT, handleRecentClubIdsChange);
+    window.addEventListener('storage', handleStorageChange);
+
+    return () => {
+      window.removeEventListener(RECENT_CLUB_IDS_CHANGE_EVENT, handleRecentClubIdsChange);
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, []);
+
+  return clubIds;
+}
+
+function normalizeClubIds(value: unknown[]) {
+  const clubIds: number[] = [];
+
+  value.forEach((item) => {
+    const clubId = Number(item);
+
+    if (Number.isInteger(clubId) && clubId > 0 && !clubIds.includes(clubId)) {
+      clubIds.push(clubId);
+    }
+  });
+
+  return clubIds.slice(0, RECENT_CLUB_IDS_LIMIT);
+}
+
+function canUseLocalStorage() {
+  return typeof window !== 'undefined' && 'localStorage' in window;
+}