diff --git a/frontend/src/pages/MainPage/MainPage.styles.ts b/frontend/src/pages/MainPage/MainPage.styles.ts
index dfd25d32d..22511c99f 100644
--- a/frontend/src/pages/MainPage/MainPage.styles.ts
+++ b/frontend/src/pages/MainPage/MainPage.styles.ts
@@ -1,15 +1,16 @@
 import styled from 'styled-components';
+import {media} from '@/styles/mediaQuery';
 
 export const PageContainer = styled.div`
   padding: 0 40px;
   max-width: 1180px;
   margin: 0 auto;
 
-  @media (max-width: 500px) {
+  ${media.mobile} {
     padding: 0 20px;
   }
 
-  @media (max-width: 375px) {
+  ${media.mini_mobile} {
     padding: 0 10px;
   }
 `;
@@ -18,37 +19,71 @@ export const ContentWrapper = styled.div`
   width: 100%;
 `;
 
+export const SectionTabs = styled.nav`
+  display: flex;
+  gap: 18px;
+  margin: 60px 8px 24px;
+
+  ${media.mobile} {
+  gap: 16px;
+  margin: 32px 4px 16px;
+  }
+`;
+
+export const Tab = styled.button<{$active?: boolean}>`
+  display: flex;
+  position: relative;
+  font-size: 24px;
+  font-weight: bold;
+  color: ${({$active}) => $active ? '#787878' : '#DCDCDC'};
+  border: none;
+  background: none;
+  cursor: pointer;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: -4px;
+    width: 100%;
+    height: 1.5px;
+    background: #787878;
+    border-radius: 1.5px;
+    transform: ${({$active}) => $active ? 'scaleX(1)' : 'scaleX(0)'};
+    transform-origin: center;
+    transition: transform 0.2s ease;
+  }
+
+  ${media.mobile} {
+    font-size: 14px
+  }
+`;
+
 export const CardList = styled.div`
   display: grid;
   width: 100%;
   max-width: 100%;
   gap: 35px;
-  margin-top: 50px;
   transition:
     gap 0.5s ease,
     grid-template-columns 0.5s ease;
 
   grid-template-columns: repeat(3, 1fr);
 
-  @media (max-width: 1280px) {
+  ${media.laptop} {
     grid-template-columns: repeat(2, 1fr);
   }
 
   @media (max-width: 750px) {
     grid-template-columns: repeat(1, 1fr);
   }
-  @media (max-width: 500px) {
+
+  ${media.mobile} {
     gap: 16px;
     margin-top: 16px;
   }
 `;
 
-export const FilterWrapper = styled.div`
-  display: flex;
-  justify-content: right;
-  margin: 20px 0;
-`;
-
 export const EmptyResult = styled.div`
   padding: 80px 20px;
   text-align: center;
@@ -57,7 +92,7 @@ export const EmptyResult = styled.div`
   line-height: 1.6;
   white-space: pre-line;
 
-  @media (max-width: 500px) {
+  ${media.mobile} {
     font-size: 0.95rem;
   }
 `;
diff --git a/frontend/src/pages/MainPage/MainPage.tsx b/frontend/src/pages/MainPage/MainPage.tsx
index e1d1a9758..e3bcf8cc4 100644
--- a/frontend/src/pages/MainPage/MainPage.tsx
+++ b/frontend/src/pages/MainPage/MainPage.tsx
@@ -5,7 +5,6 @@ import useTrackPageView from '@/hooks/useTrackPageView';
 import { useGetCardList } from '@/hooks/queries/club/useGetCardList';
 import CategoryButtonList from '@/pages/MainPage/components/CategoryButtonList/CategoryButtonList';
 import ClubCard from '@/pages/MainPage/components/ClubCard/ClubCard';
-import StatusRadioButton from '@/pages/MainPage/components/StatusRadioButton/StatusRadioButton';
 import Footer from '@/components/common/Footer/Footer';
 import Header from '@/components/common/Header/Header';
 import Banner from '@/pages/MainPage/components/Banner/Banner';
@@ -18,15 +17,18 @@ import * as Styled from './MainPage.styles';
 const MainPage = () => {
   useTrackPageView('MainPage');
 
-  const [isFilterActive, setIsFilterActive] = useState(false);
   const { selectedCategory } = useSelectedCategory();
 
   const { keyword } = useSearchKeyword();
   const { isSearching } = useSearchIsSearching();
-  const recruitmentStatus = isFilterActive ? 'OPEN' : 'all';
+  const recruitmentStatus = 'all';
   const division = 'all';
   const searchCategory = isSearching ? 'all' : selectedCategory;
-
+  const tabs = ['중앙동아리'] as const;
+  const [active, setActive] = useState<typeof tabs[number]>('중앙동아리');
+  // TODO: 추후 확정되면 DivisionKey(중동/가동/과동) 같은 타입을
+  // types/club.ts에 정의해서 tabs 관리하도록 리팩터링하기
+  
   const {
     data: clubs,
     error,
@@ -53,9 +55,14 @@ const MainPage = () => {
       />
       <Styled.PageContainer>
         <CategoryButtonList />
-        <Styled.FilterWrapper>
-          <StatusRadioButton onChange={setIsFilterActive} />
-        </Styled.FilterWrapper>
+        <Styled.SectionTabs>
+          {tabs
+            .map((tab) =>(
+            <Styled.Tab key={tab} $active={active===tab} onClick={() => setActive(tab)}>
+              {tab}
+            </Styled.Tab>
+          ))}
+        </Styled.SectionTabs>
         <Styled.ContentWrapper>
           {isLoading ? (
             <Spinner />
diff --git a/frontend/src/styles/mediaQuery.ts b/frontend/src/styles/mediaQuery.ts
index 3804bb096..bc5a7f0dc 100644
--- a/frontend/src/styles/mediaQuery.ts
+++ b/frontend/src/styles/mediaQuery.ts
@@ -1,9 +1,14 @@
 export const BREAKPOINT = {
-  mobile: 500,
-  tablet: 900,
+  mini_mobile: 375, // ≤ 375
+  mobile: 500, // ≤ 500
+  tablet: 700, // ≤ 700
+  laptop: 1280, // ≤ 1280
 };
 
 export const media = {
+  mini_mobile: `@media (max-width: ${BREAKPOINT.mini_mobile}px)`,
   mobile: `@media (max-width: ${BREAKPOINT.mobile}px)`,
   tablet: `@media (max-width: ${BREAKPOINT.tablet}px)`,
-};
+  laptop: `@media (max-width: ${BREAKPOINT.laptop}px)`,
+  // 1281px 이상은 기본 스타일 (desktop)
+};
\ No newline at end of file