diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 6245bde..2f3bd40 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -3,7 +3,7 @@
 import React from "react";
 import Logo from "/images/blue.png";
 import { Link, useLocation } from "react-router-dom";
-import { Bell, User2 } from "lucide-react";
+import { User2, MessageCircle } from "lucide-react";
 
 const Header: React.FC = () => {
   const location = useLocation();
@@ -79,7 +79,12 @@ const Header: React.FC = () => {
             >
               로그아웃
             </button>
-            <Bell className="cursor-pointer" />
+            <Link
+              to="/matching"
+              className="t-body1 text-[var(--on-surface-grey1)] no-underline hover:text-[#007bff]"
+            >
+              <MessageCircle />
+            </Link>
             <Link
               to="/mypage"
               className="t-body1 text-[var(--on-surface-grey1)] no-underline hover:text-[#007bff]"
diff --git a/src/pages/Matching/MatchingListPage.tsx b/src/pages/Matching/MatchingListPage.tsx
index f627321..554ff86 100644
--- a/src/pages/Matching/MatchingListPage.tsx
+++ b/src/pages/Matching/MatchingListPage.tsx
@@ -1,15 +1,16 @@
 // src/pages/Matching/MatchingListPage.tsx
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, ReactNode } from "react";
 import {
   useParams,
   useNavigate,
   useSearchParams,
 } from "react-router-dom";
 import axios from "axios";
+import { getEnglishTeamName } from "../../hooks/TeamNameChanger";
 
 // ────────────────────────────────────────────────────────────
-// 1) Swagger 스펙에 맞춘 API 응답 DTO 타입 예시 (필요에 따라 수정하세요)
+// API DTOs
 interface MatchingPostDto {
   matchingPostIdx: number;
   authorNickname: string;
@@ -17,185 +18,216 @@ interface MatchingPostDto {
   context: string;
   haveTicket: boolean;
   isMatched: boolean;
-  createdAt: string; // 예: "2025-05-31T08:43:30.096Z"
+  createdAt: string;
 }
-
-// 2) 페이지네이션 메타+배열 형태로 내려오는 스펙 예시
-//    실제 API 스펙에 맞춰 수정하세요.
 interface MatchingListResponse {
   posts: MatchingPostDto[];
   totalPages: number;
   totalElements: number;
 }
+// Calendar API types
+interface ApiGame {
+  gameIdx: number;
+  homeTeamName: string;
+  awayTeamName: string;
+  stadiumName: string;
+  startTime: string; // e.g. "13:00"
+}
+interface CalendarGamesDay {
+  day: number;
+  games: ApiGame[];
+}
+interface CalendarGamesResponse {
+  days: CalendarGamesDay[];
+}
 // ────────────────────────────────────────────────────────────
 
 export default function MatchingListPage() {
-  // 1) URL 파라미터로 넘어오는 date, team, gameIdx
   const { date, team, gameIdx } = useParams<{
     date: string;
     team: string;
     gameIdx: string;
   }>();
   const navigate = useNavigate();
-
-  // 2) 쿼리스트링에서 page 값을 읽어옴 (백엔드 API가 0-indexed page를 기대한다고 가정)
   const [searchParams] = useSearchParams();
   const pageParam = searchParams.get("page") || "0";
-  // 화면에 보여줄 때는 1-based page 번호로 사용
   const [currentPage, setCurrentPage] = useState<number>(
     Number(pageParam) + 1
   );
 
-  // 3) API에서 받아온 매칭 글 목록 데이터
   const [listData, setListData] = useState<MatchingPostDto[]>([]);
-  // 4) API 호출 중인 상태
+  const [totalPages, setTotalPages] = useState<number>(1);
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  // 5) 에러 메시지
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
-  // 6) 페이지네이션 메타에서 내려오는 전체 페이지 수
-  const [totalPages, setTotalPages] = useState<number>(1);
 
-  // ────────────────────────────────────────────────────────────
-  // useEffect: gameIdx 또는 currentPage가 바뀔 때마다 API 호출
+  // 검색어 하이라이트
+  const [searchTerm, setSearchTerm] = useState<string>("");
+
+  // ─── Selected Game 정보 ────────────────────────────────────
+  const [selectedGame, setSelectedGame] = useState<ApiGame | null>(null);
   useEffect(() => {
-    const fetchMatchingPosts = async () => {
-      if (!gameIdx) {
-        setErrorMsg("유효한 게임 ID가 없습니다.");
-        setListData([]);
-        setTotalPages(1);
-        return;
-      }
+    if (!date || !gameIdx) {
+      setSelectedGame(null);
+      return;
+    }
+    const [yyyy, mm, dd] = date.split("-");
+    axios
+      .get<CalendarGamesResponse>("/home/calendar-games", {
+        params: { month: `${yyyy}-${mm}`, day: Number(dd) },
+      })
+      .then((resp) => {
+        const today = resp.data.days.find((d) => d.day === Number(dd));
+        const game = today?.games.find(
+          (g) => String(g.gameIdx) === String(gameIdx)
+        );
+        setSelectedGame(game ?? null);
+      })
+      .catch(() => {
+        setSelectedGame(null);
+      });
+  }, [date, gameIdx]);
 
-      setIsLoading(true);
-      setErrorMsg(null);
+  // 로고 + 시간 계산
+  const homeLogoUrl = selectedGame
+    ? `/images/${getEnglishTeamName(selectedGame.homeTeamName)}_emb.png`
+    : "";
+  const awayLogoUrl = selectedGame
+    ? `/images/${getEnglishTeamName(selectedGame.awayTeamName)}_emb.png`
+    : "";
+  const startTime = selectedGame?.startTime ?? "";
 
-      try {
-        // GET /matching-post/by-game/{gameIdx}?page={currentPage - 1}
-        // (백엔드는 0-indexed 페이지를 기대한다고 가정)
-        const response = await axios.get<MatchingListResponse | MatchingPostDto[]>(
-          `/matching-post/by-game/${gameIdx}`,
-          {
-            params: {
-              page: currentPage - 1,
-            },
-          }
-        );
+  // ─── Matching Posts 조회 ────────────────────────────────────
+  useEffect(() => {
+    if (!gameIdx) return;
+    setIsLoading(true);
+    setErrorMsg(null);
 
-        const data = response.data;
-        // ───────────────────────────────────────────────────────
-        // (1) 만약 response.data가 배열(MatchingPostDto[])로 내려온다면
+    axios
+      .get<MatchingListResponse | MatchingPostDto[]>(
+        `/matching-post/by-game/${gameIdx}`,
+        { params: { page: currentPage - 1 } }
+      )
+      .then((res) => {
+        const data = res.data;
         if (Array.isArray(data)) {
-          setListData(data as MatchingPostDto[]);
+          setListData(data);
           setTotalPages(1);
-        }
-        // (2) response.data.posts 형태(메타+배열)로 내려온다면
-        else if ((data as MatchingListResponse).posts !== undefined) {
-          const typed = data as MatchingListResponse;
-          setListData(typed.posts);
-          setTotalPages(typed.totalPages);
-        }
-        // (3) 그 외의 예외: 빈 배열로 초기화
-        else {
+        } else if ("posts" in data) {
+          setListData(data.posts);
+          setTotalPages(data.totalPages);
+        } else {
           setListData([]);
           setTotalPages(1);
         }
-        // ───────────────────────────────────────────────────────
-      } catch (err) {
-        console.error("게임별 매칭 글 조회 실패:", err);
+      })
+      .catch(() => {
         setErrorMsg("게시글을 불러오는 중 오류가 발생했습니다.");
         setListData([]);
         setTotalPages(1);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchMatchingPosts();
+      })
+      .finally(() => setIsLoading(false));
   }, [gameIdx, currentPage]);
 
-  // ────────────────────────────────────────────────────────────
-  // “매칭 제안하기” 버튼 클릭 시
-  const handleWriteClick = () => {
-    navigate("/matching/write");
-  };
-
-  // 개별 게시글 클릭 시 상세 페이지로 이동
-  const handleRowClick = (postIdx: number) => {
-    navigate(`/matching/articles/${postIdx}`);
-  };
-
-  // 페이지 번호 클릭 시 호출
   const goToPage = (page: number) => {
     setCurrentPage(page);
-    // URL 쿼리스트링에 ?page={page - 1} 반영
     navigate({
       pathname: `/matching/list/${date}/${team}/${gameIdx}`,
       search: `?page=${page - 1}`,
     });
   };
-
-  // 페이지 번호 배열 생성 (1부터 totalPages까지)
+  const handleWriteClick = () => navigate("/matching/write");
+  const handleRowClick = (idx: number) =>
+    navigate(`/matching/articles/${idx}`);
   const pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1);
 
-  // ────────────────────────────────────────────────────────────
+  // 하이라이트 함수
+  function highlightText(text: string, highlight: string): ReactNode {
+    if (!highlight) return text;
+    const regex = new RegExp(`(${highlight})`, "gi");
+    return text.split(regex).map((part, i) =>
+      regex.test(part) ? (
+        <span key={i} className="bg-yellow-200">
+          {part}
+        </span>
+      ) : (
+        part
+      )
+    );
+  }
+
   return (
     <div className="mx-auto max-w-[1080px] px-4 py-8">
-      {/* 상단 필터 및 매칭 제안하기 버튼 */}
-      <div className="mb-4 flex items-center justify-between">
-        <div className="flex gap-2">
-          {/* 응원하는 팀 필터 (디자인만, 기능 제거) */}
-          <select
-            className="rounded border px-4 py-2"
-            defaultValue=""
-            disabled
-          >
-            <option value="">응원하는 팀</option>
-            <option value="LG 트윈스">LG 트윈스</option>
-            <option value="두산 베어스">두산 베어스</option>
-            <option value="롯데 자이언츠">롯데 자이언츠</option>
-            <option value="SSG 랜더스">SSG 랜더스</option>
-            <option value="키움 히어로즈">키움 히어로즈</option>
-            <option value="삼성 라이온즈">삼성 라이온즈</option>
-            <option value="한화 이글스">한화 이글스</option>
-            <option value="NC 다이노스">NC 다이노스</option>
-            <option value="KIA 타이거즈">KIA 타이거즈</option>
-            <option value="KT 위즈">KT 위즈</option>
-          </select>
-
-          {/* 티켓 보유 여부 필터 (디자인만) */}
-          <select
-            className="rounded border px-4 py-2"
-            defaultValue=""
-            disabled
-          >
-            <option value="">티켓 보유 여부</option>
-            <option value="O">O</option>
-            <option value="X">X</option>
-          </select>
-
-          {/* 검색어 입력 (디자인만) */}
-          <div className="relative">
-            <input
-              type="text"
-              className="w-[200px] rounded border px-4 py-2 pr-10"
-              placeholder="검색어 입력"
-              defaultValue=""
-              disabled
+      {/* ─── 상단: 경기 로고 + VS + 시간 ───────────────────────── */}
+      {selectedGame && (
+        <div className="mb-8 flex flex-col items-center">
+          <div className="flex items-center space-x-8">
+            <img
+              src={homeLogoUrl}
+              alt={selectedGame.homeTeamName}
+              className="h-12 w-12 rounded-full border"
+              onError={(e) =>
+                (e.currentTarget.src = "/images/default_team_emb.png")
+              }
+            />
+            <span className="text-2xl font-bold text-gray-700">VS</span>
+            <img
+              src={awayLogoUrl}
+              alt={selectedGame.awayTeamName}
+              className="h-12 w-12 rounded-full border"
+              onError={(e) =>
+                (e.currentTarget.src = "/images/default_team_emb.png")
+              }
             />
-            <svg
-              className="absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 text-gray-400"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={2}
-              viewBox="0 0 24 24"
-            >
-              <circle cx="11" cy="11" r="8" />
-              <line x1="21" y1="21" x2="16.65" y2="16.65" />
-            </svg>
           </div>
+          <span className="mt-2 text-sm text-gray-500">{startTime}</span>
+        </div>
+      )}
+
+      {/* ─── 필터 / 검색 / 제안 버튼 ─────────────────────────────── */}
+      <div className="mb-6 flex items-center justify-between gap-4">
+        <select
+          className="rounded border px-4 py-2"
+          value={team ?? ""}
+          onChange={(e) =>
+            navigate(`/matching/list/${date}/${e.target.value}/${gameIdx}`)
+          }
+        >
+          <option value="" disabled>
+            응원 팀 선택
+          </option>
+          {/* 두 팀만 */}
+          {selectedGame && (
+            <>
+              <option value={selectedGame.homeTeamName}>
+                {selectedGame.homeTeamName}
+              </option>
+              <option value={selectedGame.awayTeamName}>
+                {selectedGame.awayTeamName}
+              </option>
+            </>
+          )}
+        </select>
+
+        <div className="relative flex-1">
+          <input
+            type="text"
+            className="w-full rounded border px-4 py-2 pr-10"
+            placeholder="검색어 입력"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+          <svg
+            className="absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 text-gray-400"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            viewBox="0 0 24 24"
+          >
+            <circle cx="11" cy="11" r="8" />
+            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+          </svg>
         </div>
 
-        {/* 매칭 제안하기 버튼 */}
         <button
           className="rounded-md border px-4 py-2 hover:bg-gray-50"
           onClick={handleWriteClick}
@@ -204,24 +236,17 @@ export default function MatchingListPage() {
         </button>
       </div>
 
-      {/* 로딩 중 표시 */}
+      {/* ─── 목록 / 테이블 / 페이지네이션 ───────────────────────── */}
       {isLoading && (
         <p className="text-center py-8 text-gray-500">로딩 중...</p>
       )}
-
-      {/* 에러 메시지 표시 */}
-      {errorMsg && (
-        <p className="text-center py-8 text-red-500">{errorMsg}</p>
-      )}
-
-      {/* 데이터가 비어 있을 때 */}
+      {errorMsg && <p className="text-center py-8 text-red-500">{errorMsg}</p>}
       {!isLoading && !errorMsg && listData.length === 0 && (
         <p className="text-center py-8 text-gray-500">
           해당 게임에 대한 매칭 글이 없습니다.
         </p>
       )}
 
-      {/* 데이터가 있을 때 테이블 렌더링 */}
       {!isLoading && !errorMsg && listData.length > 0 && (
         <div className="mt-6 overflow-hidden rounded-lg bg-white shadow">
           <table className="min-w-full divide-y divide-gray-200">
@@ -234,7 +259,7 @@ export default function MatchingListPage() {
                   작성자
                 </th>
                 <th className="w-[400px] px-6 py-3 text-left text-sm font-medium text-gray-500">
-                  매칭글 제목
+                  제목
                 </th>
                 <th className="w-[80px] px-6 py-3 text-center text-sm font-medium text-gray-500">
                   티켓
@@ -255,7 +280,7 @@ export default function MatchingListPage() {
                     {item.authorNickname}
                   </td>
                   <td className="px-6 py-4 whitespace-nowrap text-gray-700">
-                    {item.title}
+                    {highlightText(item.title, searchTerm)}
                   </td>
                   <td className="px-6 py-4 text-center whitespace-nowrap text-gray-700">
                     {item.haveTicket ? "O" : "X"}
@@ -267,14 +292,14 @@ export default function MatchingListPage() {
         </div>
       )}
 
-      {/* 페이지네이션 UI */}
       {!isLoading && !errorMsg && totalPages > 1 && (
         <div className="mt-4 flex justify-center">
           <ul className="flex items-center gap-4 text-gray-600">
-            {/* 이전 버튼 */}
             <li>
               <button
-                onClick={() => goToPage(currentPage > 1 ? currentPage - 1 : 1)}
+                onClick={() =>
+                  goToPage(currentPage > 1 ? currentPage - 1 : 1)
+                }
                 disabled={currentPage === 1}
                 className={`px-4 py-2 text-lg ${
                   currentPage === 1
@@ -285,7 +310,6 @@ export default function MatchingListPage() {
                 &lt;
               </button>
             </li>
-            {/* 페이지 번호 버튼들 */}
             {pageNumbers.map((page) => (
               <li key={page}>
                 <button
@@ -300,10 +324,13 @@ export default function MatchingListPage() {
                 </button>
               </li>
             ))}
-            {/* 다음 버튼 */}
             <li>
               <button
-                onClick={() => goToPage(currentPage < totalPages ? currentPage + 1 : totalPages)}
+                onClick={() =>
+                  goToPage(
+                    currentPage < totalPages ? currentPage + 1 : totalPages
+                  )
+                }
                 disabled={currentPage === totalPages}
                 className={`px-4 py-2 text-lg ${
                   currentPage === totalPages
diff --git a/src/pages/Matching/MatchingWritePage.tsx b/src/pages/Matching/MatchingWritePage.tsx
index 37b7391..e56acb7 100644
--- a/src/pages/Matching/MatchingWritePage.tsx
+++ b/src/pages/Matching/MatchingWritePage.tsx
@@ -3,22 +3,20 @@
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
-import { ArrowLeft } from "lucide-react";
+import BackHeader from "../Profile/components/BackHeader"; // 뒤로가기 재사용 컴포넌트
 
 // ────────────────────────────────────────────────────────────
-// (옵션) API로 전송할 데이터 타입 정의 (타입스크립트용)
+// 요청/응답 타입 정의
 interface CreateMatchingPostRequest {
   title: string;
   context: string;
   haveTicket: boolean;
   gameIdx: number;
 }
-// (옵션) API 응답 타입 정의
 interface CreateMatchingPostResponse {
   postIdx: number;
   message: string;
 }
-// 달력 API에서 내려주는 형태 (필드 중 우리는 day와 games 배열만 사용)
 interface CalendarGamesDay {
   day: number;
   games: {
@@ -110,15 +108,13 @@ function TicketSelector({
           X
         </button>
       </div>
-      {hasTicket && (
-        <button
-          type="button"
-          className="rounded border border-gray-300 px-4 py-1 text-sm"
-          onClick={onVerify}
-        >
-          티켓 인증하기
-        </button>
-      )}
+      <button
+        type="button"
+        onClick={onVerify}
+        className="text-xs text-blue-600 hover:underline"
+      >
+        티켓 인증하기
+      </button>
     </div>
   );
 }
@@ -174,102 +170,64 @@ function GameSelector({
 export default function MatchingWritePage() {
   const navigate = useNavigate();
 
-  // ────────────────────────────────────────────────────────────
-  // 폼 상태
   const [title, setTitle] = useState<string>("");
   const [content, setContent] = useState<string>("");
   const [hasTicket, setHasTicket] = useState<boolean | null>(null);
-  const [date, setDate] = useState<string>(""); // "YYYY-MM-DD"
-  const [game, setGame] = useState<string>(""); // 선택된 gameIdx(문자열)
-
-  // 실제 백엔드에서 받아온 gameIdx 목록
+  const [date, setDate] = useState<string>("");
+  const [game, setGame] = useState<string>("");
   const [gameOptions, setGameOptions] = useState<{ id: string; label: string }[]>([]);
 
-  // ────────────────────────────────────────────────────────────
-  // 1) “날짜(date)”가 선택될 때마다 백엔드에서 해당 날짜의 모든 경기 목록을 가져오기
+  // 날짜 선택 시 경기 목록 불러오기
   useEffect(() => {
     if (!date) {
-      setGameOptions([]); // 날짜가 비어 있으면 옵션 초기화
+      setGameOptions([]);
       return;
     }
-
     const [yyyy, mm, dd] = date.split("-");
     const monthParam = `${yyyy}-${mm}`;
     const dayParam = parseInt(dd, 10);
 
-    const fetchGames = async () => {
+    (async () => {
       try {
-        // cheeringTeamIdx 파라미터 없이 호출 → 해당 날짜에 열리는 모든 경기 반환
         const resp = await axios.get<CalendarGamesResponse>("/home/calendar-games", {
-          params: {
-            month: monthParam,
-            day: dayParam
-          },
+          params: { month: monthParam, day: dayParam },
         });
-        const todayObj = resp.data.days.find((d) => d.day === dayParam);
-        if (todayObj) {
-          const opts = todayObj.games.map((g) => ({
-            id: String(g.gameIdx),
-            label: `${g.homeTeamName} vs ${g.awayTeamName} (${g.startTime})`,
-          }));
-          setGameOptions(opts);
-        } else {
-          setGameOptions([]);
-        }
-      } catch (e) {
-        console.error("달력 API 호출 실패:", e);
+        const today = resp.data.days.find((d) => d.day === dayParam);
+        setGameOptions(
+          today
+            ? today.games.map((g) => ({
+                id: String(g.gameIdx),
+                label: `${g.homeTeamName} vs ${g.awayTeamName} (${g.startTime})`,
+              }))
+            : []
+        );
+      } catch {
         setGameOptions([]);
       }
-    };
-
-    fetchGames();
+    })();
   }, [date]);
 
-  // ────────────────────────────────────────────────────────────
-  // 티켓 인증 (더미)
   const handleVerifyTicket = () => {
     alert("티켓 인증 요청(구현 필요)");
   };
 
-  // ────────────────────────────────────────────────────────────
-  // 매칭 글 등록 제출 처리
   const handleSubmit = async () => {
-    // 1) 유효성 검사
-    if (!title.trim()) {
-      alert("제목을 입력해 주세요.");
-      return;
-    }
-    if (!content.trim()) {
-      alert("내용을 입력해 주세요.");
-      return;
-    }
-    if (hasTicket === null) {
-      alert("티켓 보유 여부를 선택해 주세요.");
-      return;
-    }
-    if (!date) {
-      alert("경기 날짜를 선택해 주세요.");
-      return;
-    }
-    if (!game) {
-      alert("경기를 선택해 주세요.");
-      return;
-    }
+    if (!title.trim()) return alert("제목을 입력해 주세요.");
+    if (!content.trim()) return alert("내용을 입력해 주세요.");
+    if (hasTicket === null) return alert("티켓 보유 여부를 선택해 주세요.");
+    if (!date) return alert("경기 날짜를 선택해 주세요.");
+    if (!game) return alert("경기를 선택해 주세요.");
 
-    // 2) 요청 바디 생성 (스펙에 맞춰 정확히 보내기)
     const body: CreateMatchingPostRequest = {
       title: title.trim(),
       context: content.trim(),
       haveTicket: hasTicket,
-      gameIdx: parseInt(game, 10), // 반드시 숫자 타입(정수)로
+      gameIdx: parseInt(game, 10),
     };
 
     try {
-      // (예시) 로컬 스토리지에 저장된 JWT 토큰 꺼내기
       const token = localStorage.getItem("jwtToken") || "";
-
-      // 3) POST /matching-post API 호출 (Authorization 헤더 포함)
-      const response = await axios.post<CreateMatchingPostResponse>(
+      const res = await axios.post<CreateMatchingPostResponse>(
         "/matching-post",
         body,
         {
@@ -279,41 +237,30 @@ export default function MatchingWritePage() {
           },
         }
       );
-
-      // 4) 성공 시 반환된 postIdx로 상세 페이지로 이동
-      const { postIdx } = response.data;
       alert("매칭 글이 성공적으로 등록되었습니다.");
-      navigate(`/matching/articles/${postIdx}`);
-    } catch (error) {
-      console.error("매칭 글 등록 실패:", error);
-      alert("매칭 글 등록 중 오류가 발생했습니다. 서버 로그를 확인해 주세요.");
+      navigate(`/matching/articles/${res.data.postIdx}`);
+    } catch (err) {
+      console.error(err);
+      alert("매칭 글 등록 중 오류가 발생했습니다.");
     }
   };
 
   return (
-    <div className="mx-auto max-w-md">
-      {/* 헤더 */}
-      <header className="flex items-center border-b py-4 px-4">
-        <button
-          onClick={() => navigate(-1)}
-          className="flex items-center text-gray-600 hover:text-gray-800"
-        >
-          <ArrowLeft size={16} className="mr-2" />
-          <span className="font-semibold text-lg">매칭 글 작성하기</span>
-        </button>
-      </header>
+    <div className="relative w-full min-h-screen bg-gray-50">
+      {/* 뒤로가기 버튼 (뷰포트 기준 좌상단 고정) */}
+      <div className="absolute top-4 left-4 z-10">
+        <BackHeader title="매칭 글 작성하기" />
+      </div>
 
-      {/* 폼 */}
-      <div className="space-y-6 py-6 px-4">
+      {/* 중앙 폼 컨테이너: space-y-6으로 섹션 간격 균일하게 */}
+      <div className="mx-auto max-w-md pt-16 px-4 space-y-6">
         <WriteTitleInput value={title} onChange={setTitle} />
         <WriteContentInput value={content} onChange={setContent} />
-
         <TicketSelector
           hasTicket={hasTicket}
           setHasTicket={setHasTicket}
           onVerify={handleVerifyTicket}
         />
-
         <GameDatePicker date={date} setDate={setDate} />
         <GameSelector game={game} setGame={setGame} options={gameOptions} />
 
diff --git a/src/pages/Profile/Profile.tsx b/src/pages/Profile/Profile.tsx
index aac5417..523b001 100644
--- a/src/pages/Profile/Profile.tsx
+++ b/src/pages/Profile/Profile.tsx
@@ -1,10 +1,11 @@
 // src/pages/Profile/Profile.tsx
+
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   getTeamLogoByIdx,
   getTeamNameByIdx,
-} from "../../hooks/TeamNameChanger"; // 실제 경로에 맞게 수정해주세요
+} from "../../hooks/TeamNameChanger";
 
 interface ProfileData {
   userIdx: number;
@@ -25,15 +26,13 @@ interface MyMatchingPostDto {
   context: string;
   haveTicket: boolean;
   createdAt: string;
-  isMatched: boolean;      // 매칭 완료 여부
+  isMatched: boolean;
 }
 
 export default function Profile() {
   const navigate = useNavigate();
 
-  // 프로필 정보 상태
   const [profile, setProfile] = useState<ProfileData | null>(null);
-  // 내가 쓴 매칭 글 상태
   const [myPosts, setMyPosts] = useState<MyMatchingPostDto[]>([]);
   const [isLoadingPosts, setIsLoadingPosts] = useState<boolean>(false);
   const [postsError, setPostsError] = useState<string | null>(null);
@@ -44,8 +43,8 @@ export default function Profile() {
         const token = localStorage.getItem("jwtToken");
         if (!token) throw new Error("토큰이 없습니다.");
 
-        // 1) 프로필 정보 조회
-        const profileRes = await fetch(
+        // 프로필 조회
+        const pr = await fetch(
           `${import.meta.env.VITE_API_URL}/mypage/myTemp`,
           {
             method: "GET",
@@ -56,16 +55,14 @@ export default function Profile() {
             },
           }
         );
-        if (!profileRes.ok)
-          throw new Error(`프로필 조회 실패: ${profileRes.status}`);
-        const profileData: ProfileData = await profileRes.json();
+        if (!pr.ok) throw new Error(`프로필 조회 실패: ${pr.status}`);
+        const profileData: ProfileData = await pr.json();
         setProfile(profileData);
 
-        // 2) 내가 쓴 매칭 글 목록 조회 (/mypage/myPost)
+        // 내 매칭 글 조회
         setIsLoadingPosts(true);
         setPostsError(null);
-
-        const postsRes = await fetch(
+        const ps = await fetch(
           `${import.meta.env.VITE_API_URL}/mypage/myPost`,
           {
             method: "GET",
@@ -76,12 +73,11 @@ export default function Profile() {
             },
           }
         );
-        if (!postsRes.ok)
-          throw new Error(`내 글 조회 실패: ${postsRes.status}`);
-        const postsData: MyMatchingPostDto[] = await postsRes.json();
+        if (!ps.ok) throw new Error(`내 글 조회 실패: ${ps.status}`);
+        const postsData: MyMatchingPostDto[] = await ps.json();
         setMyPosts(postsData);
       } catch (err: any) {
-        console.error("프로필 또는 매칭 글 불러오기 실패:", err);
+        console.error(err);
         setPostsError("내가 쓴 매칭 글을 불러오는 중 오류가 발생했습니다.");
       } finally {
         setIsLoadingPosts(false);
@@ -89,7 +85,6 @@ export default function Profile() {
     })();
   }, []);
 
-  // 팀명/로고 파생 값
   const cheeringTeamName =
     profile?.cheeringTeamId != null
       ? getTeamNameByIdx(profile.cheeringTeamId)
@@ -99,34 +94,24 @@ export default function Profile() {
       ? getTeamLogoByIdx(profile.cheeringTeamId)
       : "/images/default_team_emb.png";
 
-  /**
-   * 매칭 완료 토글 함수
-   * @param postId {number} - 토글할 matchingPostIdx
-   */
   const handleToggleMatched = async (postId: number) => {
     try {
       const token = localStorage.getItem("jwtToken");
       if (!token) throw new Error("토큰이 없습니다.");
 
-      // PATCH 요청: is_matched 상태 토글
       const res = await fetch(
         `${import.meta.env.VITE_API_URL}/mypage/${postId}/toggle-matched`,
         {
           method: "PATCH",
           credentials: "include",
           headers: {
-            "Content-Type": "application/json",
+            Accept: "application/json",
             Authorization: `Bearer ${token}`,
           },
         }
       );
-      if (!res.ok) {
-        throw new Error(`매칭 토글 실패: ${res.status}`);
-      }
-      const updated = await res.json(); 
-      // 예시 응답: { matchingPostIdx: 3, matched: true }
-
-      // 로컬 상태에서도 해당 게시글의 isMatched 값을 반전시켜서 업데이트
+      if (!res.ok) throw new Error(`매칭 토글 실패: ${res.status}`);
+      const updated = await res.json();
       setMyPosts((prev) =>
         prev.map((p) =>
           p.matchingPostIdx === updated.matchingPostIdx
@@ -135,196 +120,180 @@ export default function Profile() {
         )
       );
     } catch (error: any) {
-      console.error("매칭 토글 중 오류 발생:", error);
+      console.error(error);
       alert(`오류: ${error.message}`);
     }
   };
 
+  // userTemp 그대로 %로 사용 (36.5℃ → 36.5%)
+  const fillPercent =
+    profile?.userTemp != null ? Math.min(profile.userTemp, 100) : 0;
+
   return (
-    <>
-      <div className="w-full max-w-5xl mx-auto px-8">
-        {/* 헤더 배너 */}
-        <section className="relative mb-8 h-48 w-full bg-blue-900 rounded-lg">
-          <div className="absolute inset-0 bg-blue-900 bg-opacity-75 rounded-lg" />
-          <div className="relative flex h-full items-start px-8 pt-6">
-            {/* 프로필 + 소개 */}
-            <div className="flex items-start space-x-6">
-              <img
-                src={
-                  profile?.profileImageUrl && profile.profileImageUrl.length > 0
-                    ? profile.profileImageUrl
-                    : "/images/user_avatar.png"
-                }
-                alt="프로필"
-                className="h-24 w-24 rounded-full border-4 border-white object-cover"
-                onError={(e) => {
-                  e.currentTarget.src = "/images/user_avatar.png";
-                }}
-              />
-              <div className="text-white">
-                <div className="flex items-center space-x-2">
-                  <h1 className="text-2xl font-bold">
-                    {profile?.nickname || "로딩 중..."}
-                  </h1>
-                  <span className="rounded-full bg-white px-2 py-0.5 text-xs font-medium text-blue-900">
-                    {cheeringTeamName}
-                  </span>
-                </div>
-                <p className="mt-1 text-sm">
-                  {profile?.bio || "자기소개가 없습니다."}
-                </p>
-                {/* 수정 / 설정 버튼 */}
-                <div className="mt-3 flex items-center space-x-3">
-                  <button
-                    onClick={() => navigate("/mypage/edit")}
-                    className="bg-opacity-20 hover:bg-opacity-30 rounded-full bg-blue p-2 transition"
-                  >
-                    <img
-                      src="/images/modify_btn.png"
-                      alt="Edit"
-                      className="h-5 w-5"
-                    />
-                  </button>
-                  <button
-                    onClick={() => navigate("/mypage/info")}
-                    className="bg-opacity-20 hover:bg-opacity-30 rounded-full bg-blue p-2 transition"
-                  >
-                    <img
-                      src="/images/setting_btn.png"
-                      alt="Settings"
-                      className="h-5 w-5"
-                    />
-                  </button>
-                </div>
+    <div className="w-full max-w-5xl mx-auto px-8">
+      {/* 헤더 배너 */}
+      <section className="relative mb-8 h-48 w-full bg-blue-900 rounded-lg">
+        <div className="absolute inset-0 bg-blue-900 bg-opacity-75 rounded-lg" />
+        <div className="relative flex h-full items-start px-8 pt-6">
+          <div className="flex items-start space-x-6">
+            <img
+              src={
+                profile?.profileImageUrl && profile.profileImageUrl.length > 0
+                  ? profile.profileImageUrl
+                  : "/images/user_avatar.png"
+              }
+              alt="프로필"
+              className="h-24 w-24 rounded-full border-4 border-white object-cover"
+              onError={(e) => {
+                e.currentTarget.src = "/images/user_avatar.png";
+              }}
+            />
+            <div className="text-white">
+              <div className="flex items-center space-x-2">
+                <h1 className="text-2xl font-bold">
+                  {profile?.nickname || "로딩 중..."}
+                </h1>
+                <span className="rounded-full bg-white px-2 py-0.5 text-xs font-medium text-blue-900">
+                  {cheeringTeamName}
+                </span>
+              </div>
+              <p className="mt-1 text-sm">
+                {profile?.bio || "자기소개가 없습니다."}
+              </p>
+              <div className="mt-3 flex items-center space-x-3">
+                <button
+                  onClick={() => navigate("/mypage/edit")}
+                  className="bg-opacity-20 hover:bg-opacity-30 rounded-full bg-blue p-2 transition"
+                >
+                  <img
+                    src="/images/modify_btn.png"
+                    alt="Edit"
+                    className="h-5 w-5"
+                  />
+                </button>
+                <button
+                  onClick={() => navigate("/mypage/info")}
+                  className="bg-opacity-20 hover:bg-opacity-30 rounded-full bg-blue p-2 transition"
+                >
+                  <img
+                    src="/images/setting_btn.png"
+                    alt="Settings"
+                    className="h-5 w-5"
+                  />
+                </button>
               </div>
             </div>
-            {/* 팀 엠블럼 */}
-            <div className="ml-auto flex h-full items-center pb-4">
-              <img
-                src={cheeringTeamLogo}
-                alt="팀 엠블럼"
-                className="h-24 w-24 object-contain"
-                onError={(e) => {
-                  e.currentTarget.src = "/images/default_team_emb.png";
-                }}
-              />
-            </div>
-          </div>
-        </section>
-
-        {/* 직관 온도 */}
-        <section className="mb-8 rounded-xl bg-white p-6 shadow-sm">
-          <div className="mb-4 flex items-center justify-between">
-            <span className="text-lg font-medium text-gray-800">
-              직관 온도
-            </span>
-            <span className="text-lg font-semibold text-red-500">
-              {profile?.userTemp != null
-                ? `${profile.userTemp.toFixed(1)}℃`
-                : "–"}
-            </span>
           </div>
-          <div className="relative h-3 overflow-hidden rounded-full bg-gray-200">
-            <div
-              className="absolute top-0 left-0 h-full bg-red-500"
-              style={{
-                width:
-                  profile?.userTemp != null
-                    ? `${(profile.userTemp / 50) * 100}%`
-                    : "0%",
+          <div className="ml-auto flex h-full items-center pb-4">
+            <img
+              src={cheeringTeamLogo}
+              alt="팀 엠블럼"
+              className="h-24 w-24 object-contain"
+              onError={(e) => {
+                e.currentTarget.src = "/images/default_team_emb.png";
               }}
             />
           </div>
-        </section>
+        </div>
+      </section>
+
+      {/* 직관 온도 */}
+      <section className="mb-8 rounded-xl bg-white p-6 shadow-sm">
+        <div className="mb-4 flex items-center justify-between">
+          <span className="text-lg font-medium text-gray-800">
+            직관 온도
+          </span>
+          <span className="text-lg font-semibold text-red-500">
+            {profile?.userTemp != null
+              ? `${profile.userTemp.toFixed(1)}℃`
+              : "–"}
+          </span>
+        </div>
+        <div className="relative h-3 overflow-hidden rounded-full bg-gray-200">
+          <div
+            className="absolute top-0 left-0 h-full bg-red-500 transition-all duration-300"
+            style={{ width: `${fillPercent}%` }}
+          />
+        </div>
+      </section>
 
-        {/* 작성한 매칭 글 (버튼 추가) */}
-        <section className="rounded-xl bg-white p-6 shadow-sm">
-          <h2 className="mb-4 text-lg font-medium text-gray-800">
-            작성한 매칭 글
-          </h2>
-          {isLoadingPosts && (
-            <p className="text-center text-gray-500">불러오는 중...</p>
-          )}
-          {postsError && (
-            <p className="text-center text-red-500">{postsError}</p>
-          )}
-          {!isLoadingPosts && !postsError && myPosts.length === 0 && (
-            <p className="text-center text-gray-500">
-              작성한 매칭 글이 없습니다.
-            </p>
-          )}
-          {!isLoadingPosts && !postsError && myPosts.length > 0 && (
-            <div className="space-y-4">
-              {myPosts.map((post) => (
+      {/* 작성한 매칭 글 */}
+      <section className="rounded-xl bg-white p-6 shadow-sm">
+        <h2 className="mb-4 text-lg font-medium text-gray-800">
+          작성한 매칭 글
+        </h2>
+        {isLoadingPosts && (
+          <p className="text-center text-gray-500">불러오는 중...</p>
+        )}
+        {postsError && <p className="text-center text-red-500">{postsError}</p>}
+        {!isLoadingPosts && !postsError && myPosts.length === 0 && (
+          <p className="text-center text-gray-500">
+            작성한 매칭 글이 없습니다.
+          </p>
+        )}
+        {!isLoadingPosts && !postsError && myPosts.length > 0 && (
+          <div className="space-y-4">
+            {myPosts.map((post) => (
+              <div
+                key={post.matchingPostIdx}
+                className="flex flex-col space-y-3 rounded-xl bg-white p-6 shadow-sm hover:bg-gray-50"
+              >
                 <div
-                  key={post.matchingPostIdx}
-                  className="flex flex-col space-y-3 rounded-xl bg-white p-6 shadow-sm hover:bg-gray-50 cursor-pointer"
+                  className="flex items-start justify-between cursor-pointer"
+                  onClick={() =>
+                    navigate(`/matching/articles/${post.matchingPostIdx}`)
+                  }
                 >
-                  <div
-                    className="flex items-start justify-between"
-                    onClick={() =>
-                      navigate(`/matching/articles/${post.matchingPostIdx}`)
-                    }
-                  >
-                    <div>
-                      <div className="mb-2 flex items-center space-x-2">
-                        <div className="h-8 w-8 rounded-full bg-gray-200" />
-                        <span className="text-sm text-gray-600">
-                          {profile?.nickname || ""} ·{" "}
-                          {new Date(post.createdAt).toLocaleDateString(
-                            "ko-KR"
-                          )}
-                        </span>
-                      </div>
-                      <h3 className="mb-1 text-base font-semibold">
-                        {post.title}
-                      </h3>
-                      <p className="text-sm text-gray-500">
-                        {post.context.length > 30
-                          ? post.context.slice(0, 30) + "…"
-                          : post.context}
-                      </p>
-                    </div>
-                    <div className="space-y-2 text-right">
-                      <div className="flex flex-col items-end space-y-1">
-                        <span className="rounded-full bg-blue-100 px-2 py-1 text-xs text-blue-600">
-                          {cheeringTeamName}
-                        </span>
-                        <span className="rounded-full bg-blue-100 px-2 py-1 text-xs text-blue-600">
-                          {post.haveTicket ? "티켓 있음" : "티켓 없음"}
-                        </span>
-                      </div>
-                      <span className="text-sm text-gray-400">
+                  <div>
+                    <div className="mb-2 flex items-center space-x-2">
+                      <div className="h-8 w-8 rounded-full bg-gray-200" />
+                      <span className="text-sm text-gray-600">
+                        {profile?.nickname} ·{" "}
                         {new Date(post.createdAt).toLocaleDateString("ko-KR")}
                       </span>
                     </div>
+                    <h3 className="mb-1 text-base font-semibold">
+                      {post.title}
+                    </h3>
+                    <p className="text-sm text-gray-500">
+                      {post.context.length > 30
+                        ? post.context.slice(0, 30) + "…"
+                        : post.context}
+                    </p>
+                  </div>
+                  <div className="space-y-2 text-right">
+                    <div className="flex flex-col items-end space-y-1">
+                      <span className="rounded-full bg-blue-100 px-2 py-1 text-xs text-blue-600">
+                        {cheeringTeamName}
+                      </span>
+                      <span className="rounded-full bg-blue-100 px-2 py-1 text-xs text-blue-600">
+                        {post.haveTicket ? "티켓 있음" : "티켓 없음"}
+                      </span>
+                    </div>
+                    <span className="text-sm text-gray-400">
+                      {new Date(post.createdAt).toLocaleDateString("ko-KR")}
+                    </span>
                   </div>
-
-                  {/**
-                   * ▷ 매칭 완료 토글 버튼
-                   *    - post.isMatched === false → “매칭 완료”
-                   *    - post.isMatched === true  → “다시 매칭하기”
-                   */}
-                  <button
-                    type="button"
-                    onClick={() => handleToggleMatched(post.matchingPostIdx)}
-                    className={`
-                      mt-2 w-full rounded-md px-4 py-2 text-white
-                      ${
-                        post.isMatched
-                          ? "bg-gray-500 hover:bg-gray-600"
-                          : "bg-blue-600 hover:bg-blue-700"
-                      }
-                    `}
-                  >
-                    {post.isMatched ? "다시 매칭하기" : "매칭 완료"}
-                  </button>
                 </div>
-              ))}
-            </div>
-          )}
-        </section>
-      </div>
-    </>
+                <button
+                  type="button"
+                  onClick={() => handleToggleMatched(post.matchingPostIdx)}
+                  className={`
+                    mt-2 w-full rounded-md px-4 py-2 text-white
+                    ${
+                      post.isMatched
+                        ? "bg-gray-500 hover:bg-gray-600"
+                        : "bg-blue-600 hover:bg-blue-700"
+                    }
+                  `}
+                >
+                  {post.isMatched ? "다시 매칭하기" : "매칭 완료"}
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
   );
 }