diff --git a/app/index.tsx b/app/index.tsx
index e355023..a499f31 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,7 +1,8 @@
 import { HamburgerIcon, SearchIcon, ThingoLogoSmall } from '@/components/icons';
 import { Text } from '@/components/ui/text';
+import { Link } from 'expo-router';
 import * as React from 'react';
-import { Dimensions, Keyboard, ScrollView, View } from 'react-native';
+import { Dimensions, Keyboard, ScrollView, TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Page1 } from './_components/Page1';
 import AllScreen from './_components/all-screen';
@@ -11,9 +12,8 @@ import { Page4 } from './_components/Page4';
 import NoticeScreen from './_components/notice-screen';
 import { Page6 } from './_components/Page6';
 import { Page7 } from './_components/Page7';
-import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
-import clsx from 'clsx';
+import { TabBar } from '@/components/ui/tab-bar';
 
 const { width } = Dimensions.get('window');
 const TABS = ['ALL', '학식', '게시판', '명지도', '공지사항', '학사일정', '명대신문', '명대뉴스'];
@@ -23,7 +23,6 @@ export default function Screen() {
   const insets = useSafeAreaInsets();
   const scrollRef = React.useRef<ScrollView>(null);
   const [currentTab, setCurrentTab] = React.useState(TABS[INITIAL_PAGE]);
-  const [searchQuery, setSearchQuery] = React.useState('');
 
   React.useEffect(() => {
     scrollRef.current?.scrollTo({ x: width * INITIAL_PAGE, animated: false });
@@ -47,15 +46,12 @@ export default function Screen() {
         <View className="h-15 w-screen flex-row items-center px-3 pb-1 pt-2">
           <ThingoLogoSmall />
           <View className="flex-1 p-1.5">
-            <View className="flex-1 flex-row items-center rounded-full bg-grey-02 px-3 py-1.5">
-              <SearchIcon className="text-grey-30" />
-              <Input
-                value={searchQuery}
-                onChangeText={setSearchQuery}
-                placeholder="검색어를 입력하세요"
-                className="flex-1 border-0 bg-transparent p-0 text-body06 text-grey-80 shadow-none"
-              />
-            </View>
+            <Link href="/search" asChild>
+              <TouchableOpacity className="flex-1 flex-row items-center gap-2 rounded-full bg-grey-02 px-3 py-1.5">
+                <SearchIcon className="text-grey-30" />
+                <Text className="text-body06 text-grey-40">검색어를 입력하세요</Text>
+              </TouchableOpacity>
+            </Link>
           </View>
           <Button className="h-fit p-1" variant="ghost">
             <HamburgerIcon />
@@ -64,28 +60,7 @@ export default function Screen() {
       </View>
 
       {/* 탭 네비게이션 */}
-      <View className="border-b border-grey-20">
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={{ paddingHorizontal: 16 }}>
-          {TABS.map((label, index) => (
-            <Button
-              key={label}
-              variant="ghost"
-              className={clsx(
-                'rounded-none px-5 pb-2 pt-2.5',
-                currentTab === label && 'border-b-2 border-mju-primary'
-              )}
-              onPress={() => handleTabPress(index)}>
-              <Text
-                className={`${currentTab === label ? 'text-body04 text-mju-primary' : 'text-body06 text-grey-40'}`}>
-                {label}
-              </Text>
-            </Button>
-          ))}
-        </ScrollView>
-      </View>
+      <TabBar tabs={TABS} currentTab={currentTab} onTabPress={handleTabPress} />
 
       {/* 스와이프 페이지 */}
       <ScrollView
diff --git a/app/search/index.tsx b/app/search/index.tsx
new file mode 100644
index 0000000..2efe427
--- /dev/null
+++ b/app/search/index.tsx
@@ -0,0 +1,434 @@
+import {
+  ArrowRightIcon,
+  ChatBubbleIcon,
+  CloseIcon,
+  HeartIcon,
+  LinkIcon,
+  SearchIcon,
+  XIcon,
+} from '@/components/icons';
+import ArrowLeft from '@/components/icons/arrow-left';
+import { TabBar } from '@/components/ui/tab-bar';
+import { Text } from '@/components/ui/text';
+import { Link, router } from 'expo-router';
+import * as React from 'react';
+import { Image, FlatList, ScrollView, TextInput, TouchableOpacity, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+const TABS = ['ALL', '게시판', '공지사항', '학사일정', '명대신문', '명대뉴스'];
+
+export default function SearchScreen() {
+  const insets = useSafeAreaInsets();
+  const [currentTab, setCurrentTab] = React.useState(TABS[0]);
+  const [query, setQuery] = React.useState('');
+  const [recentSearches, setRecentSearches] = React.useState(RECENT_SEARCHES);
+
+  function onClearRecentSearchHistoryPress(): void {
+    setRecentSearches([]);
+  }
+
+  function onRecentSearchPress(keyword: string): void {
+    setQuery(keyword);
+  }
+
+  function onDeleteRecentSearchPress(keyword: string): void {
+    setRecentSearches((prev) => prev.filter((k) => k !== keyword));
+  }
+
+  function onSuggestedSearchPress(keyword: string): void {
+    setQuery(keyword);
+  }
+
+  function onPopularSearchPress(keyword: string): void {
+    setQuery(keyword);
+  }
+
+  function onNoticeMorePress(): void {}
+
+  function onCommunityMorePress(): void {}
+
+  function onNewspaperMorePress(): void {}
+
+  return (
+    <ScrollView contentContainerStyle={{ paddingTop: insets.top, paddingBottom: insets.bottom }}>
+      <View className="min-h-screen w-screen">
+        <View className="flex-row items-center gap-3 pb-2 pe-5 ps-3 pt-3.5">
+          <TouchableOpacity onPress={() => router.back()}>
+            <ArrowLeft className="text-black" />
+          </TouchableOpacity>
+
+          {/* 검색바 */}
+          <View className="h-[36px] flex-1 flex-row items-center gap-2 rounded-full bg-grey-02 px-3">
+            <SearchIcon className="text-grey-30" />
+            <TextInput
+              placeholder="검색어를 입력해 주세요"
+              placeholderTextColor="#cdd0d4"
+              multiline={false}
+              value={query}
+              onChangeText={setQuery}
+              style={{ padding: 0, lineHeight: undefined }}
+              className="flex-1 text-body06 text-black outline-none"
+            />
+            {!!query && (
+              <TouchableOpacity onPress={() => setQuery('')}>
+                <CloseIcon />
+              </TouchableOpacity>
+            )}
+          </View>
+        </View>
+
+        {/* 검색어 없는 경우 */}
+        {!query && (
+          <View>
+            {/* 최근 검색어 */}
+            <View className="mt-8 gap-2.5">
+              <View className="flex-row items-end justify-between px-4">
+                <Text className="text-body02 text-black">최근 검색어</Text>
+                <TouchableOpacity onPress={() => onClearRecentSearchHistoryPress()}>
+                  <Text className="text-caption02 text-grey-60">전체 삭제</Text>
+                </TouchableOpacity>
+              </View>
+              <ScrollView
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                contentContainerStyle={{ paddingHorizontal: 16, gap: 8 }}>
+                {recentSearches.map((keyword) => (
+                  <View key={keyword} className="flex-row rounded-full border border-grey-10">
+                    <TouchableOpacity onPress={() => onRecentSearchPress(keyword)}>
+                      <Text className="my-1.5 me-[3px] ms-3 text-body05 text-grey-40">
+                        {keyword}
+                      </Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity onPress={() => onDeleteRecentSearchPress(keyword)}>
+                      <XIcon size={12} className="my-[10.5px] me-[11px] ms-[3px] text-grey-20" />
+                    </TouchableOpacity>
+                  </View>
+                ))}
+              </ScrollView>
+            </View>
+
+            {/* 추천 검색어 */}
+            <View className="mt-8 gap-2.5">
+              <Text className="ms-4 text-body02 text-black">추천 검색어</Text>
+              <ScrollView
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                contentContainerStyle={{ paddingHorizontal: 16, gap: 8 }}>
+                {SUGGESTED_SEARCHES.map((keyword) => (
+                  <TouchableOpacity key={keyword} onPress={() => onSuggestedSearchPress(keyword)}>
+                    <View className="rounded-full bg-blue-05 px-3 py-1.5">
+                      <Text className="text-body05 text-blue-35">{keyword}</Text>
+                    </View>
+                  </TouchableOpacity>
+                ))}
+              </ScrollView>
+            </View>
+
+            {/* 인기 검색어 */}
+            <View className="mt-8 gap-3">
+              <Text className="ms-4 text-body02 text-black">인기 검색어</Text>
+              <FlatList
+                data={POPULAR_SEARCHES}
+                numColumns={2}
+                scrollEnabled={false}
+                keyExtractor={(_, index) => String(index)}
+                contentContainerStyle={{ paddingHorizontal: 16, gap: 10 }}
+                columnWrapperStyle={{ gap: 4 }}
+                renderItem={({ item, index }) => (
+                  <TouchableOpacity className="flex-1" onPress={() => onPopularSearchPress(item)}>
+                    <View className="flex-row">
+                      <Text className="text-body04 text-blue-35">{index + 1}</Text>
+                      <Text className="ms-1.5 text-body05 text-grey-40">{item}</Text>
+                    </View>
+                  </TouchableOpacity>
+                )}
+              />
+            </View>
+          </View>
+        )}
+
+        {/* 검색어 있는 경우 */}
+        {!!query && (
+          <View>
+            <TabBar
+              tabs={TABS}
+              currentTab={currentTab}
+              onTabPress={(i) => setCurrentTab(TABS[i])}
+            />
+
+            {/* ai 요약 검색 결과 */}
+            <View className="gap-3.5 px-4 py-5">
+              <Text className="text-body02 text-black">
+                <Text className="text-mju-primary">AI</Text> 요약 검색 결과
+              </Text>
+              <Text className="text-body05 text-grey-80">{AI_SUMMARY}</Text>
+              <View>
+                {AI_SOURCES.map((source) => (
+                  <View
+                    key={source.id}
+                    className="flex-row items-center gap-1 border-b border-grey-02 py-1">
+                    <Text className="flex-1 text-body05 text-grey-30">{source.title}</Text>
+                    <Link href={source.url as `https://${string}`} asChild>
+                      <TouchableOpacity>
+                        <LinkIcon />
+                      </TouchableOpacity>
+                    </Link>
+                  </View>
+                ))}
+              </View>
+            </View>
+            <View className="h-2 w-full bg-grey-02" />
+
+            {/* 공지사항 검색 결과*/}
+            <View className="py-5">
+              <View className="flex-row items-center justify-between px-4">
+                <Text className="text-body02 text-black">공지사항</Text>
+                <TouchableOpacity onPress={() => onNoticeMorePress()}>
+                  <ArrowRightIcon size={20} className="text-grey-60" />
+                </TouchableOpacity>
+              </View>
+              {NOTICE_RESULTS.map((item) => (
+                <Link key={item.id} href={item.url as `https://${string}`} asChild>
+                  <TouchableOpacity>
+                    <View className="gap-[3px] border-b border-grey-02 px-4 py-2.5">
+                      <Text className="text-caption01 text-blue-15">{item.category}</Text>
+                      <Text className="text-body05 text-black" numberOfLines={2}>
+                        {item.title}
+                      </Text>
+                      <Text className="text-caption04 text-grey-30">{item.date}</Text>
+                    </View>
+                  </TouchableOpacity>
+                </Link>
+              ))}
+            </View>
+
+            {/* 커뮤니티 검색 결과*/}
+            <View className="py-5">
+              <View className="flex-row items-center justify-between px-4">
+                <Text className="text-body02 text-black">커뮤니티</Text>
+                <TouchableOpacity onPress={() => onCommunityMorePress()}>
+                  <ArrowRightIcon size={20} className="text-grey-60" />
+                </TouchableOpacity>
+              </View>
+              {COMMUNITY_RESULTS.map((item) => (
+                <Link key={item.id} href={`/posts/${item.id}`} asChild>
+                  <TouchableOpacity>
+                    <View className="border-b border-grey-02 px-4 py-2">
+                      <Text className="text-body04 text-grey-80">{item.title}</Text>
+                      <Text className="mt-1 text-body05 text-black" numberOfLines={2}>
+                        {item.preview}
+                      </Text>
+                      <View className="mt-2 flex-row items-center justify-between">
+                        <View className="flex-row items-center">
+                          <HeartIcon className="text-blue-10" />
+                          <Text className="ms-1 text-caption02 text-grey-40">{item.likes}</Text>
+                          <ChatBubbleIcon className="ms-2 text-blue-10" />
+                          <Text className="ms-1 text-caption02 text-grey-40">{item.comments}</Text>
+                        </View>
+                        <Text className="text-caption02 text-grey-40">{item.date}</Text>
+                      </View>
+                    </View>
+                  </TouchableOpacity>
+                </Link>
+              ))}
+            </View>
+
+            {/* 명대신문 검색 결과*/}
+            <View className="py-5">
+              <View className="flex-row items-center justify-between px-4">
+                <Text className="text-body02 text-black">명대신문</Text>
+                <TouchableOpacity onPress={() => onNewspaperMorePress()}>
+                  <ArrowRightIcon size={20} className="text-grey-60" />
+                </TouchableOpacity>
+              </View>
+              {/*  */}
+              <View className="mt-2">
+                {NEWSPAPER_RESULTS.map((item) => (
+                  <Link key={item.id} href={item.url as `https://${string}`} asChild>
+                    <TouchableOpacity>
+                      <View className="flex-row items-center gap-4 px-4 py-3">
+                        <Image
+                          source={require('@/assets/news-default-thumbnail.jpg')}
+                          className="w-25 aspect-square rounded-sm border border-grey-10"
+                        />
+                        <View className="flex-1">
+                          <Text className="text-body02 text-black" numberOfLines={1}>
+                            {item.title}
+                          </Text>
+                          <Text className="mt-0.5 text-body05 text-black" numberOfLines={2}>
+                            {item.preview}
+                          </Text>
+                          <Text className="mt-0.5 text-caption01 text-grey-30" numberOfLines={1}>
+                            {item.author}
+                          </Text>
+                          <Text className="text-caption04 text-grey-30" numberOfLines={1}>
+                            {item.date}
+                          </Text>
+                        </View>
+                      </View>
+                    </TouchableOpacity>
+                  </Link>
+                ))}
+              </View>
+            </View>
+          </View>
+        )}
+      </View>
+    </ScrollView>
+  );
+}
+
+const RECENT_SEARCHES = [
+  '수강신청',
+  '장학금 신청',
+  '도서관 열람실',
+  '학식 메뉴',
+  '졸업 요건',
+  '소프트웨어 라이선스',
+];
+
+const SUGGESTED_SEARCHES = [
+  '수강신청 일정',
+  '장학금 종류',
+  '학식 오늘',
+  '도서관 좌석',
+  '졸업논문 제출',
+  '학생증 발급',
+  '버스 시간표',
+  '교내 동아리',
+];
+
+const POPULAR_SEARCHES = [
+  '수강신청',
+  '장학금',
+  '도서관 좌석',
+  '학식 메뉴',
+  '졸업 요건',
+  '학생증 발급',
+];
+
+const AI_SUMMARY =
+  '명지대학교 2025학년도 1학기 수강신청은 2월 17일(월)부터 21일(금)까지 진행됩니다. 재학생은 학년별로 신청 기간이 나뉘며, 포털 시스템(mjportal.mju.ac.kr)에서 신청할 수 있습니다. 수강 정원 초과 시 대기 신청이 가능하며, 개강 후 2주 이내에 수강 변경 기간이 별도로 운영됩니다. 장학금·학점 등 조건에 따라 신청 가능 학점 수가 달라지므로 학생처 공지사항을 반드시 확인하세요.';
+
+const AI_SOURCES: { id: number; title: string; url: string }[] = [
+  {
+    id: 1,
+    title: '[학사공지] 2025학년도 1학기 수강신청 일정 안내',
+    url: 'https://www.mju.ac.kr/mjukr/255/subview.do',
+  },
+  {
+    id: 2,
+    title: '[학사공지] 수강신청 유의사항 및 정원 초과 대기 방법',
+    url: 'https://www.mju.ac.kr/mjukr/255/subview.do',
+  },
+  {
+    id: 3,
+    title: '[장학처] 성적 기준 장학금 신청 가능 학점 안내',
+    url: 'https://www.mju.ac.kr/mjukr/259/subview.do',
+  },
+  {
+    id: 4,
+    title: '[학사공지] 개강 후 수강 변경 기간 운영 안내',
+    url: 'https://www.mju.ac.kr/mjukr/255/subview.do',
+  },
+];
+
+const NOTICE_RESULTS: { id: number; category: string; title: string; date: string; url: string }[] =
+  [
+    {
+      id: 1,
+      category: '학사공지',
+      title:
+        '2025학년도 1학기 수강신청 일정 및 유의사항 안내 — 신청 기간·정원 초과 대기 방법·수강 변경 기간 포함',
+      date: '2025.01.15',
+      url: 'https://www.mju.ac.kr/mjukr/255/subview.do',
+    },
+    {
+      id: 2,
+      category: '장학공지',
+      title:
+        '2025학년도 1학기 국가장학금(한국장학재단) 신청 안내 — 소득분위 산정 기준 및 제출 서류 목록 포함 (1차 신청)',
+      date: '2025.01.10',
+      url: 'https://www.mju.ac.kr/mjukr/259/subview.do',
+    },
+    {
+      id: 3,
+      category: '학사공지',
+      title: '개강 후 수강 변경(정정) 기간 운영 안내 — 변경 가능 과목 범위 및 포털 신청 방법 안내',
+      date: '2025.01.08',
+      url: 'https://www.mju.ac.kr/mjukr/255/subview.do',
+    },
+  ];
+
+const COMMUNITY_RESULTS: {
+  id: number;
+  title: string;
+  preview: string;
+  likes: number;
+  comments: number;
+  date: string;
+}[] = [
+  {
+    id: 1,
+    title: '수강신청 꿀팁 공유합니다',
+    preview:
+      '저는 매번 수강신청 때 이 방법으로 성공했어요. 특히 인기 강의는 미리 즐겨찾기 해두는 게 핵심입니다.',
+    likes: 42,
+    comments: 18,
+    date: '2025.01.14',
+  },
+  {
+    id: 2,
+    title: '1학기 장학금 신청 같이 하실 분?',
+    preview:
+      '국가장학금 서류 준비하다가 헷갈리는 부분 있어서 같이 스터디 하실 분 구합니다. 카톡 오픈채팅으로 연락주세요.',
+    likes: 27,
+    comments: 9,
+    date: '2025.01.12',
+  },
+  {
+    id: 3,
+    title: '도서관 열람실 자리 잡는 타이밍',
+    preview: '오전 8시 이전에 가면 거의 항상 자리 있더라고요. 시험기간에는 7시 30분도 빠듯합니다.',
+    likes: 61,
+    comments: 33,
+    date: '2025.01.09',
+  },
+];
+
+const NEWSPAPER_RESULTS: {
+  id: number;
+  title: string;
+  preview: string;
+  author: string;
+  date: string;
+  url: string;
+}[] = [
+  {
+    id: 1,
+    title: '2025년 명지대, 글로벌 캠퍼스 확장 추진',
+    preview:
+      '명지대학교가 올해 해외 자매결연 대학을 기존 120개에서 150개로 확대하는 글로벌 캠퍼스 프로젝트를 본격 추진한다고 밝혔다.',
+    author: '김명지 기자',
+    date: '2025.01.13',
+    url: 'https://www.mju.ac.kr/mjukr/267/subview.do',
+  },
+  {
+    id: 2,
+    title: '학생 복지관 리모델링, 3월 완공 예정',
+    preview:
+      '노후화된 학생 복지관이 전면 리모델링을 거쳐 오는 3월 초 새롭게 문을 열 예정이다. 카페테리아와 휴게 공간이 대폭 확충된다.',
+    author: '이한솔 기자',
+    date: '2025.01.07',
+    url: 'https://www.mju.ac.kr/mjukr/267/subview.do',
+  },
+  {
+    id: 3,
+    title: '명지대 창업동아리, 스타트업 경진대회 대상 수상',
+    preview:
+      '명지대학교 창업동아리 \"테크브릿지\"가 지난달 열린 전국 대학생 스타트업 경진대회에서 대상을 수상하며 주목받고 있다.',
+    author: '박수현 기자',
+    date: '2025.01.03',
+    url: 'https://www.mju.ac.kr/mjukr/267/subview.do',
+  },
+];
diff --git a/components/icons/close.tsx b/components/icons/close.tsx
index 4d1a000..3125e90 100644
--- a/components/icons/close.tsx
+++ b/components/icons/close.tsx
@@ -13,9 +13,11 @@ interface CloseIconProps {
 export default function CloseIcon({ size = 24, className = 'text-[#CDD0D4]' }: CloseIconProps) {
   return (
     <StyledSvg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
-      <Circle cx={12} cy={12} r={12} fill="currentColor" />
+      <Circle cx={12} cy={12} r={8} fill="currentColor" />
       <Path
-        d="M15.9599 6.38322C16.37 5.97317 17.0352 5.97219 17.4453 6.38225C17.8552 6.79231 17.8543 7.45759 17.4443 7.8676L13.3984 11.9135L17.4453 15.9604C17.8548 16.3704 17.855 17.0348 17.4453 17.4447C17.0352 17.8548 16.37 17.8548 15.9599 17.4447L11.913 13.3979L7.86714 17.4447C7.45709 17.8545 6.79274 17.8546 6.38276 17.4447C5.97279 17.0348 5.97295 16.3704 6.38276 15.9604L10.4287 11.9135L6.38276 7.8676C5.9729 7.45753 5.97277 6.79224 6.38276 6.38225C6.79282 5.97228 7.45809 5.9732 7.86811 6.38322L11.914 10.4291L15.9599 6.38322Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.6044 8.21967C14.8972 7.92678 15.372 7.92678 15.6649 8.21967C15.9577 8.51257 15.9578 8.98735 15.6649 9.28022L13.0028 11.9423L15.6649 14.6044C15.9578 14.8973 15.9578 15.3721 15.6649 15.665C15.372 15.9576 14.8972 15.9578 14.6044 15.665L11.9422 13.0029L9.28014 15.665C8.98725 15.9577 8.51244 15.9578 8.21959 15.665C7.92675 15.3721 7.92685 14.8973 8.21959 14.6044L10.8817 11.9423L8.21959 9.28022C7.92691 8.9874 7.92701 8.51254 8.21959 8.21967C8.51244 7.92682 8.98724 7.9269 9.28014 8.21967L11.9422 10.8818L14.6044 8.21967Z"
         fill="white"
       />
     </StyledSvg>
diff --git a/components/icons/index.ts b/components/icons/index.ts
index ec0ea32..15b817b 100644
--- a/components/icons/index.ts
+++ b/components/icons/index.ts
@@ -12,3 +12,5 @@ export { default as SearchIcon } from './search';
 export { default as DiningIcon } from './dining';
 export { default as ThingoLogoLarge } from './thingo-logo-large';
 export { default as ThingoLogoSmall } from './thingo-logo-small';
+export { default as XIcon } from './x';
+export { default as LinkIcon } from './link';
diff --git a/components/icons/link.tsx b/components/icons/link.tsx
new file mode 100644
index 0000000..8cafd12
--- /dev/null
+++ b/components/icons/link.tsx
@@ -0,0 +1,26 @@
+import { cssInterop } from 'nativewind';
+import Svg, { Circle, Path } from 'react-native-svg';
+
+const StyledSvg = cssInterop(Svg, {
+  className: { target: 'style', nativeStyleToProp: { color: true } },
+});
+
+interface LinkIconProps {
+  size?: number;
+  className?: string;
+}
+
+export default function LinkIcon({ size = 24, className = 'text-[#1778FF]' }: LinkIconProps) {
+  return (
+    <StyledSvg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
+      <Circle cx="12" cy="12" r="10" fill="#E8F1FF" />
+      <Path
+        d="M12.3825 15.4427L11.6175 16.2078C10.5612 17.2641 8.84855 17.2641 7.79223 16.2078C6.73592 15.1515 6.73592 13.4388 7.79223 12.3825L8.55728 11.6175M15.4427 12.3825L16.2078 11.6175C17.2641 10.5612 17.2641 8.84854 16.2078 7.79223C15.1515 6.73592 13.4388 6.73592 12.3825 7.79223L11.6175 8.55728M10.1066 13.8934L13.8934 10.1066"
+        stroke="currentColor"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </StyledSvg>
+  );
+}
diff --git a/components/icons/x.tsx b/components/icons/x.tsx
new file mode 100644
index 0000000..00e2a8d
--- /dev/null
+++ b/components/icons/x.tsx
@@ -0,0 +1,24 @@
+import { cssInterop } from 'nativewind';
+import Svg, { Path } from 'react-native-svg';
+
+const StyledSvg = cssInterop(Svg, {
+  className: { target: 'style', nativeStyleToProp: { color: true } },
+});
+
+interface XIconProps {
+  size?: number;
+  className?: string;
+}
+
+export default function XIcon({ size = 24, className = 'text-black' }: XIconProps) {
+  return (
+    <StyledSvg width={size} height={size} viewBox="0 0 12 12" fill="none" className={className}>
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.87043 2.05662C9.16316 1.76384 9.63725 1.76387 9.93 2.05662C10.2228 2.3496 10.2227 2.82416 9.93 3.11717L7.05207 5.99705L9.92316 8.8701C10.2159 9.1631 10.2159 9.63765 9.92316 9.93065C9.63038 10.2236 9.15636 10.2236 8.86359 9.93065L5.9925 7.0576L3.12238 9.93065C2.8296 10.2237 2.35462 10.2237 2.06183 9.93065C1.76936 9.6377 1.76935 9.16305 2.06183 8.8701L4.93195 5.99705L2.055 3.11815C1.76229 2.82514 1.76224 2.3496 2.055 2.05662C2.34776 1.76365 2.82275 1.7637 3.11555 2.05662L5.9925 4.93553L8.87043 2.05662Z"
+        fill="currentColor"
+      />
+    </StyledSvg>
+  );
+}
diff --git a/components/ui/tab-bar.tsx b/components/ui/tab-bar.tsx
new file mode 100644
index 0000000..4132a32
--- /dev/null
+++ b/components/ui/tab-bar.tsx
@@ -0,0 +1,37 @@
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import clsx from 'clsx';
+import { ScrollView, View } from 'react-native';
+
+type Props = {
+  tabs: string[];
+  currentTab: string;
+  onTabPress: (index: number) => void;
+};
+
+export function TabBar({ tabs, currentTab, onTabPress }: Props) {
+  return (
+    <View className="border-b border-grey-20">
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ paddingHorizontal: 16 }}>
+        {tabs.map((label, index) => (
+          <Button
+            key={label}
+            variant="ghost"
+            className={clsx(
+              'rounded-none px-5 pb-2 pt-2.5',
+              currentTab === label && 'border-b-2 border-mju-primary'
+            )}
+            onPress={() => onTabPress(index)}>
+            <Text
+              className={`${currentTab === label ? 'text-body04 text-mju-primary' : 'text-body06 text-grey-40'}`}>
+              {label}
+            </Text>
+          </Button>
+        ))}
+      </ScrollView>
+    </View>
+  );
+}