diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5e2e23096..4f6b76937 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -19,6 +19,8 @@ import PhotoEditTab from '@/pages/AdminPage/tabs/PhotoEditTab/PhotoEditTab';
 import ApplicationFormPage from './pages/ApplicationFormPage/ApplicationFormPage';
 import ApplicantsTab from './pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab';
 import ApplicantDetailPage from './pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/ApplicantDetailPage';
+import ClubUnionPage from './pages/ClubUnionPage/ClubUnionPage';
+
 
 const queryClient = new QueryClient();
 
@@ -72,8 +74,6 @@ const App = () => {
                             path='account-edit'
                             element={<AccountEditTab />}
                           />
-                          {/*🔒 메인 브랜치에서는 접근 차단 (배포용 차단 목적)*/}
-                          {/*develop-fe 브랜치에서는 접근 가능하도록 풀고 개발 예정*/}
                           <Route
                             path='application-edit'
                             element={<ApplicationEditTab />}
@@ -92,12 +92,11 @@ const App = () => {
                   </AdminClubProvider>
                 }
               />
-              {/*🔒 사용자용 지원서 작성 페이지도 메인에서는 비활성화 처리 */}
-              {/*🛠 develop-fe에서는 다시 노출 예정*/}
               <Route
                 path='/application/:clubId'
                 element={<ApplicationFormPage />}
               />
+              <Route path='/club-union' element={<ClubUnionPage />} />
               <Route path='*' element={<Navigate to='/' replace />} />
             </Routes>
           </BrowserRouter>
diff --git a/frontend/src/components/common/Header/Header.tsx b/frontend/src/components/common/Header/Header.tsx
index 6a571ca54..9f9532221 100644
--- a/frontend/src/components/common/Header/Header.tsx
+++ b/frontend/src/components/common/Header/Header.tsx
@@ -1,139 +1,156 @@
+import { memo } from 'react';
 import { useLocation } from 'react-router-dom';
 import * as Styled from './Header.styles';
+
 import SearchBox from '@/pages/MainPage/components/SearchBox/SearchBox';
-import useHeaderService from '@/services/header/useHeaderService';
-import useMobileMenu from '@/services/header/useMobileMenu';
 import useIsMobile from '@/hooks/useIsMobile';
+import useMobileMenu from '@/services/header/useMobileMenu';
+import useHeaderService from '@/services/header/useHeaderService';
+
 import DesktopMainIcon from '@/assets/images/moadong_name_logo.svg';
 import MobileMainIcon from '@/assets/images/logos/moadong_mobile_logo.svg';
-import MenuBar from '@/assets/images/icons/menu_button_icon.svg';
+import MenuBarIcon from '@/assets/images/icons/menu_button_icon.svg';
 import DeleteIcon from '@/assets/images/introduce/delete.png';
 
-interface MobileHeaderProps {
-  handleHomeClick: (device: 'mobile' | 'desktop') => void;
-  handleMenuClick: () => void;
+interface NavLinkData {
+  label: string;
+  handler: () => void;
 }
 
 interface DesktopHeaderProps {
   isAdminPage: boolean;
-  handleHomeClick: (device: 'mobile' | 'desktop') => void;
-  handleIntroduceClick: () => void;
+  navLinks: NavLinkData[];
+  onHomeClick: () => void;
 }
 
-interface MobileMenuProp {
+interface MobileHeaderProps {
+  onHomeClick: () => void;
+  onMenuClick: () => void;
+}
+
+interface MobileMenuDrawerProps {
   isOpen: boolean;
   onClose: () => void;
-  handleHomeClick: (device: 'mobile' | 'desktop') => void;
-  handleIntroduceClick: () => void;
+  navLinks: NavLinkData[];
+  onHomeClick: () => void;
 }
 
-const MobileMenuDrawer = ({
-  isOpen,
-  onClose,
-  handleHomeClick,
-  handleIntroduceClick,
-}: MobileMenuProp) => {
-  return (
+const DesktopHeader = memo(
+  ({ isAdminPage, navLinks, onHomeClick }: DesktopHeaderProps) => (
+    <Styled.HeaderStyles>
+      <Styled.HeaderContainer>
+        <Styled.TextCoverStyles>
+          <Styled.LogoButtonStyles
+            onClick={onHomeClick}
+            aria-label='홈으로 이동'
+          >
+            <img src={DesktopMainIcon} alt='모아동 로고' />
+          </Styled.LogoButtonStyles>
+          {!isAdminPage &&
+            navLinks.map((link) => (
+              <Styled.IntroduceButtonStyles
+                key={link.label}
+                onClick={link.handler}
+              >
+                {link.label}
+              </Styled.IntroduceButtonStyles>
+            ))}
+        </Styled.TextCoverStyles>
+        {!isAdminPage && <SearchBox />}
+      </Styled.HeaderContainer>
+    </Styled.HeaderStyles>
+  ),
+);
+
+const MobileMenuDrawer = memo(
+  ({ isOpen, onClose, navLinks, onHomeClick }: MobileMenuDrawerProps) => (
     <Styled.DrawerContainer isOpen={isOpen}>
-      <Styled.DrawerWrapper>
-        <Styled.DrawerHeader>
-          <Styled.DrawerMainIcon
-            src={DesktopMainIcon}
-            alt='홈 버튼'
-            onClick={() => handleHomeClick('mobile')}
-          />
-          <Styled.DrawerDeleteIcon
-            src={DeleteIcon}
-            alt='삭제 버튼'
-            onClick={onClose}
-          />
-        </Styled.DrawerHeader>
-        <Styled.MenubarIntroduceBox onClick={handleIntroduceClick}>
-          모아동 소개
+      <Styled.DrawerHeader>
+        <Styled.DrawerMainIcon
+          src={DesktopMainIcon}
+          alt='모아동 로고'
+          onClick={onHomeClick}
+        />
+        <Styled.DrawerDeleteIcon
+          src={DeleteIcon}
+          alt='메뉴 닫기'
+          onClick={onClose}
+        />
+      </Styled.DrawerHeader>
+      {navLinks.map((link) => (
+        <Styled.MenubarIntroduceBox
+          key={link.label}
+          onClick={() => {
+            link.handler();
+            onClose();
+          }}
+        >
+          {link.label}
         </Styled.MenubarIntroduceBox>
-      </Styled.DrawerWrapper>
+      ))}
     </Styled.DrawerContainer>
-  );
-};
+  ),
+);
 
-const MobileHeader = ({
-  handleHomeClick,
-  handleMenuClick,
-}: MobileHeaderProps) => (
+const MobileHeader = memo(({ onHomeClick, onMenuClick }: MobileHeaderProps) => (
   <Styled.MobileHeaderContainer>
     <Styled.MobileHeaderWrapper>
-      <Styled.MobileMainIcon>
-        <img
-          src={MobileMainIcon}
-          alt='홈 버튼'
-          onClick={() => handleHomeClick('mobile')}
-        />
+      <Styled.MobileMainIcon onClick={onHomeClick} aria-label='홈으로 이동'>
+        <img src={MobileMainIcon} alt='모아동 로고' />
       </Styled.MobileMainIcon>
       <SearchBox />
-      <Styled.MobileMenu aria-label='메뉴 버튼'>
-        <img src={MenuBar} alt='메뉴 버튼' onClick={handleMenuClick} />
+      <Styled.MobileMenu onClick={onMenuClick} aria-label='메뉴 열기'>
+        <img src={MenuBarIcon} alt='' />
       </Styled.MobileMenu>
     </Styled.MobileHeaderWrapper>
   </Styled.MobileHeaderContainer>
-);
-
-const DesktopHeader = ({
-  isAdminPage,
-  handleHomeClick,
-  handleIntroduceClick,
-}: DesktopHeaderProps) => (
-  <Styled.HeaderStyles>
-    <Styled.HeaderContainer>
-      <Styled.TextCoverStyles>
-        <Styled.LogoButtonStyles>
-          <img
-            src={DesktopMainIcon}
-            alt='홈 버튼'
-            onClick={() => handleHomeClick('desktop')}
-          />
-        </Styled.LogoButtonStyles>
-        {!isAdminPage && (
-          <Styled.IntroduceButtonStyles onClick={handleIntroduceClick}>
-            모아동 소개
-          </Styled.IntroduceButtonStyles>
-        )}
-      </Styled.TextCoverStyles>
-      {!isAdminPage && <SearchBox />}
-    </Styled.HeaderContainer>
-  </Styled.HeaderStyles>
-);
+));
 
 const Header = () => {
   const isMobile = useIsMobile();
   const location = useLocation();
   const isAdminPage = location.pathname.startsWith('/admin');
 
-  const { handleHomeClick, handleIntroduceClick, handleMenuClick } =
-    useHeaderService();
+  const {
+    handleHomeClick,
+    handleIntroduceClick,
+    handleClubUnionClick,
+    handleMenuClick,
+  } = useHeaderService();
 
   const { isMenuOpen, openMenu, closeMenu } = useMobileMenu({
     handleMenuClick,
   });
 
-  return isMobile ? (
+  const navLinks: NavLinkData[] = [
+    { label: '모아동 소개', handler: handleIntroduceClick },
+    { label: '총동아리연합회 소개', handler: handleClubUnionClick },
+  ];
+
+  return (
     <>
-      <MobileHeader
-        handleHomeClick={handleHomeClick}
-        handleMenuClick={openMenu}
-      />
+      {isMobile ? (
+        <MobileHeader
+          onHomeClick={() => handleHomeClick('mobile')}
+          onMenuClick={openMenu}
+        />
+      ) : (
+        <DesktopHeader
+          isAdminPage={isAdminPage}
+          navLinks={navLinks}
+          onHomeClick={() => handleHomeClick('desktop')}
+        />
+      )}
       <MobileMenuDrawer
         isOpen={isMenuOpen}
         onClose={closeMenu}
-        handleHomeClick={handleHomeClick}
-        handleIntroduceClick={handleIntroduceClick}
+        navLinks={navLinks}
+        onHomeClick={() => {
+          handleHomeClick('mobile');
+          closeMenu();
+        }}
       />
     </>
-  ) : (
-    <DesktopHeader
-      isAdminPage={isAdminPage}
-      handleHomeClick={handleHomeClick}
-      handleIntroduceClick={handleIntroduceClick}
-    />
   );
 };
 
diff --git a/frontend/src/constants/CLUB_UNION_INFO.ts b/frontend/src/constants/CLUB_UNION_INFO.ts
new file mode 100644
index 000000000..f3e004ef9
--- /dev/null
+++ b/frontend/src/constants/CLUB_UNION_INFO.ts
@@ -0,0 +1,122 @@
+import PresidentAvatar from '@/assets/images/icons/category_button/category_all_button_icon.svg';
+import ReligionAvatar from '@/assets/images/icons/category_button/category_religion_button_icon.svg';
+import HobbyAvatar from '@/assets/images/icons/category_button/category_hobby_button_icon.svg';
+import StudyAvatar from '@/assets/images/icons/category_button/category_study_button_icon.svg';
+import VolunteerAvatar from '@/assets/images/icons/category_button/category_volunteer_button_icon.svg';
+import PerformanceAvatar from '@/assets/images/icons/category_button/category_performance_button_icon.svg';
+import SportAvatar from '@/assets/images/icons/category_button/category_sport_button_icon.svg';
+
+export interface ClubUnionMember {
+  id: number;
+  name: string;
+  role: string;
+  description: string;
+  imageSrc: string;
+}
+
+const MEMBER_AVATARS = {
+  PRESIDENT: PresidentAvatar,
+  VICE_PRESIDENT: PresidentAvatar,
+  SECRETARY: PresidentAvatar,
+  PROMOTION: PresidentAvatar,
+  RELIGION: ReligionAvatar,
+  HOBBY: HobbyAvatar,
+  STUDY: StudyAvatar,
+  VOLUNTEER: VolunteerAvatar,
+  PERFORMANCE: PerformanceAvatar,
+  SPORT: SportAvatar,
+};
+
+// 개발자 가이드: description 필드는 UI가 깨지지 않도록 글자 수를 제한합니다.
+// (권장) 모바일: 50자 이내, 데스크톱: 100자 이내
+export const CLUB_UNION_MEMBERS: ClubUnionMember[] = [
+  {
+    id: 1,
+    name: '이정은',
+    role: '회장',
+    description: '부경대학교의 중앙동아리, 온 총동아리연합회가 책임지겠습니다.',
+    imageSrc: MEMBER_AVATARS.PRESIDENT,
+  },
+  {
+    id: 2,
+    name: '김태연',
+    role: '부회장',
+    description:
+      '여러분의 동아리 생활이 풍요로워질 수 있도록 힘을 보태겠습니다.',
+    imageSrc: MEMBER_AVATARS.VICE_PRESIDENT,
+  },
+  {
+    id: 3,
+    name: '최지현',
+    role: '사무국장',
+    description: '동아리를 위해 노력하는 온 총동연에게 많은 관심 부탁드립니다.',
+    imageSrc: MEMBER_AVATARS.SECRETARY,
+  },
+  {
+    id: 4,
+    name: '이주은',
+    role: '홍보국장',
+    description: '총동연의 가치를 알리고 소통을 이끄는 홍보국장입니다!',
+    imageSrc: MEMBER_AVATARS.PROMOTION,
+  },
+  {
+    id: 5,
+    name: '김도하',
+    role: '종교분과장',
+    description: '믿고 따르는 든든한 총동연을 위해 노력하겠습니다.',
+    imageSrc: MEMBER_AVATARS.RELIGION,
+  },
+  {
+    id: 6,
+    name: '이정원',
+    role: '취미교양분과장',
+    description: '2025년 동아리들의 활동이 잘 이루어지도록 열심히 하겠습니다.',
+    imageSrc: MEMBER_AVATARS.HOBBY,
+  },
+  {
+    id: 7,
+    name: '성기일',
+    role: '학술분과장',
+    description: '공부도 동아리도 포기 못 하는 학술분과장입니다!',
+    imageSrc: MEMBER_AVATARS.STUDY,
+  },
+  {
+    id: 8,
+    name: '김현진',
+    role: '봉사분과장',
+    description: '대학 생활의 꽃, 봉사동아리 많은 관심 부탁드립니다!',
+    imageSrc: MEMBER_AVATARS.VOLUNTEER,
+  },
+  {
+    id: 9,
+    name: '박지윤',
+    role: '공연1분과장',
+    description:
+      '더 나은 동아리 생활을 만들기 위해 책임감을 가지고 임하겠습니다!',
+    imageSrc: MEMBER_AVATARS.PERFORMANCE,
+  },
+  {
+    id: 10,
+    name: '고보민',
+    role: '공연2분과장',
+    description:
+      '공연2분과의 원활한 운영과 멋진 무대를 위해 최선을 다하겠습니다!',
+    imageSrc: MEMBER_AVATARS.PERFORMANCE,
+  },
+  {
+    id: 11,
+    name: '이금정',
+    role: '운동1분과장',
+    description:
+      '열정 가득한 운동1분과! 부경대 학우 여러분의 활기찬 동아리 활동을 위해 최선을 다하겠습니다!',
+    imageSrc: MEMBER_AVATARS.SPORT,
+  },
+  {
+    id: 12,
+    name: '이상민',
+    role: '운동2분과장',
+    description:
+      '재미와 건강 두 마리 토끼를 잡을 수 있는 운동2분과에서 여러분을 만났으면 좋겠습니다!',
+    imageSrc: MEMBER_AVATARS.SPORT,
+  },
+];
diff --git a/frontend/src/constants/eventName.ts b/frontend/src/constants/eventName.ts
index fc9440017..76cb84657 100644
--- a/frontend/src/constants/eventName.ts
+++ b/frontend/src/constants/eventName.ts
@@ -15,4 +15,5 @@ export const EVENT_NAME = {
   MOBILE_MENU_BUTTON_CLICKED: 'Mobile Menu Button Clicked' as const,
   MOBILE_MENU_DELETE_BUTTON_CLICKED:
     'Mobile Menubar delete Button Clicked' as const,
+  CLUB_UNION_BUTTON_CLICKED: 'Club Union Button Clicked' as const,
 } as const;
diff --git a/frontend/src/pages/ClubUnionPage/ClubUnionPage.styles.ts b/frontend/src/pages/ClubUnionPage/ClubUnionPage.styles.ts
new file mode 100644
index 000000000..93bd8d237
--- /dev/null
+++ b/frontend/src/pages/ClubUnionPage/ClubUnionPage.styles.ts
@@ -0,0 +1,139 @@
+import styled from 'styled-components';
+import { media } from '@/styles/mediaQuery';
+
+export const Title = styled.h1`
+  font-size: 2.5rem;
+  font-weight: 800;
+  margin-top: 100px;
+  margin-bottom: 40px;
+  text-align: center;
+  color: #222;
+
+  ${media.mobile} {
+    font-size: 2rem;
+    margin-top: 80px;
+    margin-bottom: 30px;
+  }
+`;
+
+export const IntroductionText = styled.p`
+  font-size: 1.1rem;
+  line-height: 1.7;
+  text-align: center;
+  color: #555;
+  max-width: 600px;
+  margin: 0 auto 60px;
+
+  ${media.mobile} {
+    font-size: 1rem;
+    margin-bottom: 40px;
+  }
+`;
+
+export const ProfileGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 40px 30px;
+
+  ${media.tablet} {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 30px 20px;
+  }
+
+  ${media.mobile} {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px 15px;
+  }
+`;
+
+export const InfoOverlay = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.65);
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 15px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  border-radius: 50%;
+  box-sizing: border-box;
+`;
+
+export const ProfileImage = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition:
+    transform 0.3s ease,
+    filter 0.3s ease;
+`;
+
+export const NameBadge = styled.div`
+  position: absolute;
+  bottom: 10%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(255, 255, 255, 0.8);
+  color: #333;
+  padding: 5px 15px;
+  border-radius: 15px;
+  font-weight: 600;
+  font-size: 1rem;
+  transition: opacity 0.3s ease;
+  white-space: nowrap;
+`;
+
+export const ProfileCardContainer = styled.div`
+  position: relative;
+  aspect-ratio: 1 / 1;
+  border-radius: 50%;
+  overflow: hidden;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+  &:hover {
+    ${ProfileImage} {
+      transform: scale(1.1);
+      filter: brightness(0.5);
+    }
+    ${InfoOverlay} {
+      opacity: 1;
+    }
+    ${NameBadge} {
+      opacity: 0;
+    }
+  }
+`;
+
+// 오버레이 내부 텍스트 스타일
+export const Role = styled.p`
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #ff5414;
+  margin: 0 0 8px;
+`;
+
+export const Name = styled.p`
+  font-size: 1.3rem;
+  font-weight: 800;
+  margin: 0 0 12px;
+`;
+
+export const Description = styled.p`
+  font-size: 0.9rem;
+  line-height: 1.5;
+  margin: 0;
+`;
+
+export const Contact = styled.p`
+  font-size: 0.9rem;
+  margin-top: 12px;
+  opacity: 0.8;
+`;
diff --git a/frontend/src/pages/ClubUnionPage/ClubUnionPage.tsx b/frontend/src/pages/ClubUnionPage/ClubUnionPage.tsx
new file mode 100644
index 000000000..b7dba7ef6
--- /dev/null
+++ b/frontend/src/pages/ClubUnionPage/ClubUnionPage.tsx
@@ -0,0 +1,43 @@
+import Header from '@/components/common/Header/Header';
+import * as Styled from './ClubUnionPage.styles';
+import { CLUB_UNION_MEMBERS } from '@/constants/CLUB_UNION_INFO';
+import { PageContainer } from '@/styles/PageContainer.styles';
+import Footer from '@/components/common/Footer/Footer';
+
+const ClubUnionPage = () => {
+  return (
+    <>
+      <Header />
+      <PageContainer>
+        <Styled.Title>총동아리연합회 소개</Styled.Title>
+        <Styled.IntroductionText>
+          안녕하세요! 부경대학교 제16대 총동아리연합회 '온'입니다.
+          <br />온 동아리를 위하여, 온 힘을 다해.
+        </Styled.IntroductionText>
+        <Styled.ProfileGrid>
+          {CLUB_UNION_MEMBERS.map((member) => (
+            <Styled.ProfileCardContainer key={member.id}>
+              <Styled.ProfileImage
+                src={member.imageSrc}
+                alt={`${member.name} 프로필`}
+              />
+
+              {/* 평소에 보이는 이름 배지 */}
+              <Styled.NameBadge>{member.name}</Styled.NameBadge>
+
+              {/* 호버 시 나타나는 정보 */}
+              <Styled.InfoOverlay>
+                <Styled.Role>{member.role}</Styled.Role>
+                <Styled.Name>{member.name}</Styled.Name>
+                <Styled.Description>{member.description}</Styled.Description>
+              </Styled.InfoOverlay>
+            </Styled.ProfileCardContainer>
+          ))}
+        </Styled.ProfileGrid>
+      </PageContainer>
+      <Footer />
+    </>
+  );
+};
+
+export default ClubUnionPage;
diff --git a/frontend/src/services/header/useHeaderService.ts b/frontend/src/services/header/useHeaderService.ts
index 3792b7241..83b247b94 100644
--- a/frontend/src/services/header/useHeaderService.ts
+++ b/frontend/src/services/header/useHeaderService.ts
@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useSearch } from '@/context/SearchContext';
 import useMixpanelTrack from '@/hooks/useMixpanelTrack';
@@ -13,25 +14,34 @@ const useHeaderService = () => {
   const navigate = useNavigate();
   const trackEvent = useMixpanelTrack();
 
-  const navigateToHome = (device: keyof typeof trackEventNames) => {
-    navigate('/');
-    setKeyword('');
-    setInputValue('');
-    trackEvent(trackEventNames[device]);
-  };
+  const navigateToHome = useCallback(
+    (device: keyof typeof trackEventNames) => {
+      navigate('/');
+      setKeyword('');
+      setInputValue('');
+      trackEvent(trackEventNames[device]);
+    },
+    [navigate, setKeyword, setInputValue, trackEvent],
+  );
 
-  const goIntroducePage = () => {
+  const handleIntroduceClick = useCallback(() => {
     navigate('/introduce');
     trackEvent(EVENT_NAME.INTRODUCE_BUTTON_CLICKED);
-  };
+  }, [navigate, trackEvent]);
 
-  const handleMenuClick = () => {
+  const handleClubUnionClick = useCallback(() => {
+    navigate('/club-union');
+    trackEvent(EVENT_NAME.CLUB_UNION_BUTTON_CLICKED);
+  }, [navigate, trackEvent]);
+
+  const handleMenuClick = useCallback(() => {
     trackEvent(EVENT_NAME.MOBILE_MENU_BUTTON_CLICKED);
-  };
+  }, [trackEvent]);
 
   return {
     handleHomeClick: navigateToHome,
-    handleIntroduceClick: goIntroducePage,
+    handleIntroduceClick,
+    handleClubUnionClick,
     handleMenuClick,
   };
 };