diff --git a/app/components/common/BottomSheet.tsx b/app/components/common/BottomSheet.tsx
new file mode 100644
index 0000000..76b00a8
--- /dev/null
+++ b/app/components/common/BottomSheet.tsx
@@ -0,0 +1,55 @@
+import type { ReactNode } from "react";
+import { cn } from "../../lib/utils";
+
+type BottomSheetProps = {
+  open: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  height?: number | string;
+  className?: string;
+  contentClassName?: string;
+  overlayClassName?: string;
+};
+
+export default function BottomSheet({
+  open,
+  onClose,
+  children,
+  height,
+  className,
+  contentClassName,
+  overlayClassName,
+}: BottomSheetProps) {
+  if (!open) return null;
+
+  const heightStyle =
+    height === undefined
+      ? undefined
+      : typeof height === "number"
+        ? { height: `${height}px` }
+        : { height };
+
+  return (
+    <div className="fixed inset-0 z-50">
+      <button
+        type="button"
+        aria-label="close"
+        className={cn("absolute inset-0 bg-[#17171833]", overlayClassName)}
+        onClick={onClose}
+      />
+
+      <div
+        className={cn(
+          "fixed left-1/2 bottom-0 w-full max-w-[480px] -translate-x-1/2",
+          "rounded-t-[12px] bg-white flex flex-col animate-slide-up",
+          className,
+        )}
+        style={heightStyle}
+      >
+        <div className={cn("flex-1 flex flex-col", contentClassName)}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/common/FilterButton.tsx b/app/components/common/FilterButton.tsx
index 3bb5f34..8e8911e 100644
--- a/app/components/common/FilterButton.tsx
+++ b/app/components/common/FilterButton.tsx
@@ -1,39 +1,43 @@
 interface FilterButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    label: string;
-    isActive?: boolean;
+  label: string;
+  isActive?: boolean;
 }
 
 // 글자수 초과시 ""..." 처리
 const truncateLabel = (text: string, maxLength = 10) => {
-    return text.length > maxLength ? text.slice(0, maxLength) + "..." : text;
+  return text.length > maxLength ? text.slice(0, maxLength) + "..." : text;
 };
 
-export default function FilterButton({ label, isActive, className = "", ...props }: FilterButtonProps) {
-    return (
-        <button
-            className={`flex items-center gap-1 px-2.5 py-1 h-7 rounded-[60px] border transition-colors cursor-pointer ${isActive
-                ? "border-core-1 bg-core-1/10 text-core-1"
-                : "border-[#E6E6F3] bg-white text-text-gray2"
-                } ${className}`}
-            {...props}
-        >
-            {truncateLabel(label)}
-            <svg
-                width="10"
-                height="6"
-                viewBox="0 0 10 6"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                className="text-current"
-            >
-                <path
-                    d="M1 1L5 5L9 1"
-                    stroke="currentColor"
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                />
-            </svg>
-        </button>
-    );
+export default function FilterButton({
+  label,
+  isActive,
+  className = "",
+  ...props
+}: FilterButtonProps) {
+  return (
+    <button
+      className={`flex items-center w-fit h-7 pl-3 pr-1.5 rounded-full border transition-colors cursor-pointer text-[14px] font-Pretendard ${
+        isActive
+          ? "border-core-3 text-core-1 bg-core-2 font-medium"
+          : "border-core-2 text-text-gray2 bg-white text-title3"
+      } ${className}`}
+      {...props}
+    >
+      {truncateLabel(label)}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="none"
+        className="w-6 h-6 text-current"
+      >
+        <path
+          d="M6 8L10 12L14 8"
+          stroke="currentColor"
+          strokeWidth="1.0"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </button>
+  );
 }
diff --git a/app/routes/chat/components/ChatSortFilterSheet.tsx b/app/routes/chat/components/ChatSortFilterSheet.tsx
index 8a8daee..327a80b 100644
--- a/app/routes/chat/components/ChatSortFilterSheet.tsx
+++ b/app/routes/chat/components/ChatSortFilterSheet.tsx
@@ -1,3 +1,5 @@
+import BottomSheet from "../../../components/common/BottomSheet";
+import { cn } from "../../../lib/utils";
 import { SORT_LABEL, type SortOption } from "./ChatSortFilterConstant";
 
 // 정렬, 필터 옵션 (최신순/협업 중)
@@ -44,64 +46,51 @@ export function SortFilterSheet<T extends string = SortOption>({
   const sheetOptions = (options ?? DEFAULT_OPTIONS) as SortOptionItem<T>[];
 
   return (
-    <div className="fixed inset-0 z-50">
-      {/* 딤(배경) */}
-      <button
-        type="button"
-        aria-label="close"
-        className="absolute inset-0 bg-[#17171833]"
-        onClick={onClose}
-      />
-
-      {/* 시트 */}
-      <div
-        className={[
-          "fixed left-1/2 -translate-x-1/2 bottom-[0px] w-full max-w-[480px] h-[500px] bg-white rounded-t-[12px] pt-[20px] px-4 flex flex-col",
-          containerClassName ?? "",
-        ]
-          .join(" ")
-          .trim()}
-      >
-        <div className="w-full max-w-[480px] h-[70px] fixed left-1/2 -translate-x-1/2">
-          <div
-            className={["px-4 text-medium text-text-black mb-3", titleClassName ?? ""]
-              .join(" ")
-              .trim()}
-          >
-            {title}
-          </div>
-
-          <div className="bg-[#F3F4F8] px-4 py-3">
-            <div className="flex gap-6">
-              {sheetOptions.map((option) => (
-                <SortOptionButton
-                  key={option.value}
-                  label={option.label}
-                  active={value === option.value}
-                  onClick={() => onChange(option.value)}
-                  className={optionClassName}
-                />
-              ))}
-            </div>
-          </div>
+    <BottomSheet
+      open={open}
+      onClose={onClose}
+      height={500}
+      className={containerClassName}
+    >
+      <div className="px-4 pt-5">
+        <div
+          className={cn(
+            "text-title3 font-semibold text-text-black",
+            titleClassName,
+          )}
+        >
+          {title}
         </div>
-        <div className="flex-1" />
+      </div>
 
-        <div className="flex justify-center py-6">
-          <button
-            onClick={onApply}
-            className={[
-              "px-6 w-full h-11 rounded-[12px] bg-[#6666E5] text-white text-SemiBold",
-              applyButtonClassName ?? "",
-            ]
-              .join(" ")
-              .trim()}
-          >
-            {applyLabel}
-          </button>
+      <div className="mt-3 bg-[#F3F4F8] px-4 py-3">
+        <div className="flex gap-6">
+          {sheetOptions.map((option) => (
+            <SortOptionButton
+              key={option.value}
+              label={option.label}
+              active={value === option.value}
+              onClick={() => onChange(option.value)}
+              className={optionClassName}
+            />
+          ))}
         </div>
       </div>
-    </div>
+
+      <div className="flex-1" />
+
+      <div className="px-4 pb-6">
+        <button
+          onClick={onApply}
+          className={cn(
+            "w-full h-11 rounded-[12px] bg-[#6666E5] text-white text-[13px] font-semibold",
+            applyButtonClassName,
+          )}
+        >
+          {applyLabel}
+        </button>
+      </div>
+    </BottomSheet>
   );
 }
 
@@ -120,7 +109,7 @@ function SortOptionButton({
     <button
       onClick={onClick}
       className={[
-        "text-medium",
+        "text-title3",
         active ? "text-text-black" : "text-text-gray3",
         className ?? "",
       ]
diff --git a/app/routes/chat/page.tsx b/app/routes/chat/page.tsx
index 99e08cf..b3a1949 100644
--- a/app/routes/chat/page.tsx
+++ b/app/routes/chat/page.tsx
@@ -87,9 +87,6 @@ export default function ChatPage() {
         onChange={setPendingSort}
         onClose={() => setIsSortOpen(false)}
         onApply={applySort}
-        titleClassName="text-[14px] font-semibold"
-        optionClassName="text-[12px]"
-        applyButtonClassName="text-[13px] font-semibold"
       />
     </div>
   );
diff --git a/app/routes/matching/brand/brand-content.tsx b/app/routes/matching/brand/brand-content.tsx
index 569b7da..2753a44 100644
--- a/app/routes/matching/brand/brand-content.tsx
+++ b/app/routes/matching/brand/brand-content.tsx
@@ -5,7 +5,7 @@ import FilterButton from "../../../components/common/FilterButton";
 import BrandCard from "./components/BrandCard";
 import { type BrandCategory } from "../../../data/brand";
 import BrandFilterBar from "./components/BrandFilterBar";
-import FilterBottomSheet from "../../../components/common/FilterBottomSheet";
+import BottomSheet from "../../../components/common/BottomSheet";
 import MatchingFilter from "../components/MatchingFilter";
 import { useHideBottomTab } from "../../../hooks/useHideBottomTab";
 import EmptyMatchState from "../../../components/common/EmptyMatchState";
@@ -22,6 +22,7 @@ export default function BrandContent() {
     const [isFilterOpen, setIsFilterOpen] = useState(false);
     const [filterOpenTab, setFilterOpenTab] = useState<"sort" | "filter">("sort");
     const [sortOption, setSortOption] = useState("매칭률 순");
+    const [sortApplied, setSortApplied] = useState(false);
     const [selectedTags, setSelectedTags] = useState<string[]>([]);
 
     // 검색 상태
@@ -114,6 +115,7 @@ export default function BrandContent() {
     const handleFilterApply = (sort: string, tags: string[]) => {
         setSortOption(sort);
         setSelectedTags(tags);
+        setSortApplied(true);
     };
 
 
@@ -172,7 +174,7 @@ export default function BrandContent() {
                     <div className="flex gap-2">
                         <FilterButton
                             label={sortOption}
-                            isActive={true}
+                            isActive={sortApplied}
                             onClick={() => { setFilterOpenTab("sort"); setIsFilterOpen(true); }}
                         />
                         <FilterButton
@@ -202,7 +204,11 @@ export default function BrandContent() {
             </div>
 
             {/* 필터 바텀시트 */}
-            <FilterBottomSheet isOpen={isFilterOpen} onClose={() => setIsFilterOpen(false)}>
+            <BottomSheet
+                open={isFilterOpen}
+                onClose={() => setIsFilterOpen(false)}
+                height={500}
+            >
                 <MatchingFilter
                     filterType={category}
                     selectedSort={sortOption}
@@ -211,7 +217,7 @@ export default function BrandContent() {
                     onClose={() => setIsFilterOpen(false)}
                     initialTab={filterOpenTab}
                 />
-            </FilterBottomSheet>
+            </BottomSheet>
         </div>
     );
 }
diff --git a/app/routes/matching/campaign/campaign-content.tsx b/app/routes/matching/campaign/campaign-content.tsx
index 83c4d38..7542c28 100644
--- a/app/routes/matching/campaign/campaign-content.tsx
+++ b/app/routes/matching/campaign/campaign-content.tsx
@@ -6,7 +6,7 @@ import FilterButton from "../../../components/common/FilterButton";
 import CampaignCard from "./components/CampaignCard";
 import { type CampaignCategory } from "../../../data/campaign";
 import CampaignFilterBar from "./components/CampaignFilterBar";
-import FilterBottomSheet from "../../../components/common/FilterBottomSheet";
+import BottomSheet from "../../../components/common/BottomSheet";
 import MatchingFilter from "../components/MatchingFilter";
 import { useHideBottomTab } from "../../../hooks/useHideBottomTab";
 import EmptyMatchState from "../../../components/common/EmptyMatchState";
@@ -23,6 +23,7 @@ export default function CampaignContent() {
     // 필터 상태
     const [isFilterOpen, setIsFilterOpen] = useState(false);
     const [sortOption, setSortOption] = useState("매칭률 순");
+    const [sortApplied, setSortApplied] = useState(false);
     const [selectedTags, setSelectedTags] = useState<string[]>([]);
 
     // 검색 상태
@@ -129,6 +130,7 @@ export default function CampaignContent() {
     const handleFilterApply = (sort: string, tags: string[]) => {
         setSortOption(sort);
         setSelectedTags(tags);
+        setSortApplied(true);
     };
 
 
@@ -180,7 +182,7 @@ export default function CampaignContent() {
                     <div className="flex gap-2">
                         <FilterButton
                             label={sortOption}
-                            isActive={true}
+                            isActive={sortApplied}
                             onClick={() => setIsFilterOpen(true)}
                         />
                         <FilterButton
@@ -218,7 +220,11 @@ export default function CampaignContent() {
             </div>
 
             {/* 필터 바텀시트 */}
-            <FilterBottomSheet isOpen={isFilterOpen} onClose={() => setIsFilterOpen(false)}>
+            <BottomSheet
+                open={isFilterOpen}
+                onClose={() => setIsFilterOpen(false)}
+                height={500}
+            >
                 <MatchingFilter
                     filterType="CONTENT"
                     selectedSort={sortOption}
@@ -226,7 +232,7 @@ export default function CampaignContent() {
                     onApply={handleFilterApply}
                     onClose={() => setIsFilterOpen(false)}
                 />
-            </FilterBottomSheet>
+            </BottomSheet>
         </div>
     );
 }
diff --git a/app/routes/matching/components/MatchingFilter.tsx b/app/routes/matching/components/MatchingFilter.tsx
index 4cbf91b..4777116 100644
--- a/app/routes/matching/components/MatchingFilter.tsx
+++ b/app/routes/matching/components/MatchingFilter.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { cn } from "../../../lib/utils";
 import FilterChip from "../../../components/common/FilterChip";
+import SelectChip from "../test/components/SelectChip";
 import {
     SORT_OPTIONS,
     CAMPAIGN_SORT_OPTIONS,
@@ -74,34 +75,42 @@ export default function MatchingFilter({
     };
 
     return (
-        <div className="flex flex-col h-full pt-[20px] px-4">
+        <div className="flex flex-col h-full">
             {/* 메인 탭 */}
-            <div className="flex mb-3 pt-2 pl-2">
-                <button
-                    type="button"
-                    className="text-medium cursor-pointer transition-colors text-text-black"
-                    onClick={() => setMainTab("정렬 필터")}
-                >
-                    <span className={mainTab === "정렬 필터" ? "pb-3 border-b-2 border-core-1" : ""}>
-                        정렬 필터
-                    </span>
-                </button>
-                <button
-                    type="button"
-                    className="ml-6 text-medium cursor-pointer transition-colors text-text-black"
-                    onClick={() => setMainTab(filterTabName)}
-                >
-                    <span className={mainTab === filterTabName ? "pb-3 border-b-2 border-core-1" : ""}>
-                        {filterTabName}
-                    </span>
-                </button>
+            <div className="px-4 pt-5">
+                <div className="flex gap-6">
+                    <button
+                        type="button"
+                        className={cn(
+                            "text-title3 font-semibold cursor-pointer transition-colors",
+                            mainTab === "정렬 필터" ? "text-text-black" : "text-text-gray3",
+                        )}
+                        onClick={() => setMainTab("정렬 필터")}
+                    >
+                        <span className={mainTab === "정렬 필터" ? "pb-3 border-b-2 border-core-1" : ""}>
+                            정렬 필터
+                        </span>
+                    </button>
+                    <button
+                        type="button"
+                        className={cn(
+                            "text-title3 font-semibold cursor-pointer transition-colors",
+                            mainTab === filterTabName ? "text-text-black" : "text-text-gray3",
+                        )}
+                        onClick={() => setMainTab(filterTabName)}
+                    >
+                        <span className={mainTab === filterTabName ? "pb-3 border-b-2 border-core-1" : ""}>
+                            {filterTabName}
+                        </span>
+                    </button>
+                </div>
             </div>
 
             {/* 컨텐츠 영역 */}
             <div className="flex-1 text-[14px]">
                 {mainTab === "정렬 필터" ? (
                     /* 정렬 필터 */
-                    <div className="flex gap-6 bg-[#F3F4F8] -mx-4 px-4 pl-6 py-3">
+                    <div className="mt-3 flex gap-6 bg-[#F3F4F8] px-4 py-3">
                         {sortOptions.map((option) => (
                             <button
                                 key={option}
@@ -120,9 +129,9 @@ export default function MatchingFilter({
                     </div>
                 ) : (
                     /* 카테고리 필터 */
-                    <div className="flex flex-col gap-4">
+                    <div className="mt-3 flex flex-col gap-4">
                         {/* 서브 탭 */}
-                        <div className="flex gap-6 overflow-x-auto bg-[#F3F4F8] -mx-4 px-4 pl-6 py-3">
+                        <div className="flex gap-6 overflow-x-auto bg-[#F3F4F8] px-4 py-3">
                             {subTabs.map((tab) => (
                                 <button
                                     key={tab}
@@ -141,7 +150,7 @@ export default function MatchingFilter({
                         </div>
 
                         {/* 태그 칩들 */}
-                        <div className="flex flex-wrap gap-2 items-center">
+                        <div className="flex flex-wrap gap-2 items-center px-4">
                             <button
                                 type="button"
                                 className="flex items-center justify-center cursor-pointer"
@@ -151,23 +160,36 @@ export default function MatchingFilter({
                                     <path d="M8.4 16.308L12 12.708L15.6 16.308L16.308 15.6L12.708 12L16.308 8.4L15.6 7.692L12 11.292L8.4 7.692L7.692 8.4L11.292 12L7.692 15.6L8.4 16.308ZM12.003 21C10.759 21 9.589 20.764 8.493 20.292C7.39767 19.8193 6.44467 19.178 5.634 18.368C4.82333 17.558 4.18167 16.606 3.709 15.512C3.23633 14.418 3 13.2483 3 12.003C3 10.7577 3.23633 9.58767 3.709 8.493C4.181 7.39767 4.82133 6.44467 5.63 5.634C6.43867 4.82333 7.391 4.18167 8.487 3.709C9.583 3.23633 10.753 3 11.997 3C13.241 3 14.411 3.23633 15.507 3.709C16.6023 4.181 17.5553 4.82167 18.366 5.631C19.1767 6.44033 19.8183 7.39267 20.291 8.488C20.7637 9.58333 21 10.753 21 11.997C21 13.241 20.764 14.411 20.292 15.507C19.82 16.603 19.1787 17.556 18.368 18.366C17.5573 19.176 16.6053 19.8177 15.512 20.291C14.4187 20.7643 13.249 21.0007 12.003 21Z" fill="#B7B7F3" />
                                 </svg>
                             </button>
-                            {(filterData[subTab as keyof typeof filterData] as readonly string[]).map((tag) => (
-                                <FilterChip
-                                    key={tag}
-                                    label={tag}
-                                    selected={currentTags.includes(tag)}
-                                    onClick={() => toggleTag(tag)}
-                                />
-                            ))}
+                            {(filterData[subTab as keyof typeof filterData] as readonly string[]).map((tag) => {
+                                const selected = currentTags.includes(tag);
+                                if (filterType === "BEAUTY") {
+                                    return (
+                                        <SelectChip
+                                            key={tag}
+                                            label={tag}
+                                            isSelected={selected}
+                                            onToggle={() => toggleTag(tag)}
+                                        />
+                                    );
+                                }
+                                return (
+                                    <FilterChip
+                                        key={tag}
+                                        label={tag}
+                                        selected={selected}
+                                        onClick={() => toggleTag(tag)}
+                                    />
+                                );
+                            })}
                         </div>
                     </div>
                 )}
             </div>
 
             {/* 적용하기 버튼 */}
-            <div className="flex justify-center py-6">
+            <div className="px-4 pb-6">
                 <button
-                    className="w-full h-11 rounded-[12px] bg-[#6666E5] text-white text-title7"
+                    className="w-full h-11 rounded-[12px] bg-[#6666E5] text-white text-[13px] font-semibold"
                     onClick={handleApply}
                 >
                     적용하기
diff --git a/app/routes/mypage/likes/likes-content.tsx b/app/routes/mypage/likes/likes-content.tsx
index b3a5f08..f1e3dd0 100644
--- a/app/routes/mypage/likes/likes-content.tsx
+++ b/app/routes/mypage/likes/likes-content.tsx
@@ -6,6 +6,7 @@ import { useHideBottomTab } from "../../../hooks/useHideBottomTab";
 import LoadingSpinner from "../../../components/common/LoadingSpinner";
 import { axiosInstance } from "../../../api/axios";
 import SortFilterSheet from "../../chat/components/ChatSortFilterSheet";
+import FilterButton from "../../../components/common/FilterButton";
 
 type BrandLike = {
   id: number;
@@ -358,31 +359,11 @@ export default function MyPageLikes() {
               <div className="text-[16px] leading-[20px] font-semibold text-black">
                 {activeTab === "brand" ? "브랜드 리스트" : "캠페인 리스트"}
               </div>
-              <button
-                type="button"
+              <FilterButton
+                label={getSortButtonLabel()}
+                isActive={isFiltered}
                 onClick={openSortSheet}
-                className={`flex items-center w-fit h-7 pl-3 pr-1.5 rounded-full border text-[14px] font-Pretendard ${
-                  isFiltered
-                    ? "border-core-3 text-core-1 bg-core-2"
-                    : "border-core-2 text-text-gray2 bg-white text-title3"
-                }`}
-              >
-                {getSortButtonLabel()}
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 20 20"
-                  fill="none"
-                  className={`w-6 h-6 ${isFiltered ? "text-core-1" : "text-text-gray2"}`}
-                >
-                  <path
-                    d="M6 8L10 12L14 8"
-                    stroke="currentColor"
-                    strokeWidth="1.0"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-              </button>
+              />
             </div>
 
             {loading ? (
@@ -530,9 +511,6 @@ export default function MyPageLikes() {
           }
           title="정렬 필터"
           applyLabel="적용하기"
-          titleClassName="text-[14px] font-semibold"
-          optionClassName="text-[12px]"
-          applyButtonClassName="text-[13px] font-semibold"
         />
       </div>
     </div>