diff --git a/src/App.tsx b/src/App.tsx
index 649c08f..63696fe 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -26,6 +26,11 @@ const TransactionPage = lazy(
 );
 const MyPage = lazy(() => import("./pages/myPage"));
 const ProfilePage = lazy(() => import("./pages/myPage/profile"));
+const PaymentPage = lazy(() => import("./pages/myPage/payment"));
+const NotificationsPage = lazy(() => import("./pages/myPage/notifications"));
+const SupportPage = lazy(() => import("./pages/myPage/support"));
+const SecurityPage = lazy(() => import("./pages/myPage/security"));
+const FavoritesPage = lazy(() => import("./pages/myPage/favorites"));
 const ChatPage = lazy(() => import("./pages/chatPage"));
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -50,6 +55,11 @@ function AnimatedRoutes() {
           <Route path="chart" element={<MyPageChart />} />
           <Route path="news" element={<MyPageNews />} />
           <Route path="profile" element={<ProfilePage />} />
+          <Route path="payment" element={<PaymentPage />} />
+          <Route path="notifications" element={<NotificationsPage />} />
+          <Route path="support" element={<SupportPage />} />
+          <Route path="security" element={<SecurityPage />} />
+          <Route path="favorites" element={<FavoritesPage />} />
           <Route path="aramSettings" element={<AramSettingsPage />} />
         </Route>
         <Route path="/transaction" element={<TransactionPage />} />
diff --git a/src/components/home/TrendingKeywords.tsx b/src/components/home/TrendingKeywords.tsx
index aaa03e5..44023cf 100644
--- a/src/components/home/TrendingKeywords.tsx
+++ b/src/components/home/TrendingKeywords.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect } from "react";
+import { useState, useMemo, useEffect, useCallback, memo } from "react";
 import { useNavigate } from "react-router-dom";
 import { Filter } from "lucide-react";
 import { ResponsiveTreeMap } from "@nivo/treemap";
@@ -23,18 +23,38 @@ type SortBy =
   | "volume_desc"
   | "volume_asc";
 
-// API 호출 함수
+// API 호출 함수 (캐싱 추가)
+const companyCache = new Map<
+  SortBy,
+  { data: CompanyInfo[]; timestamp: number }
+>();
+const CACHE_DURATION = 5 * 60 * 1000; // 5분
+
 const getCompanies = async (
   sortBy: SortBy = "market_cap_desc"
 ): Promise<CompanyInfo[]> => {
+  // 캐시 확인
+  const cached = companyCache.get(sortBy);
+  if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
+    return cached.data;
+  }
+
   try {
-    const response = await fetch(`/api/info/companies?sort_by=${sortBy}`);
+    const response = await fetch(`/api/info/companies?sort_by=${sortBy}`, {
+      headers: {
+        "Cache-Control": "max-age=300", // 5분 브라우저 캐시
+      },
+    });
 
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
     }
 
     const data = await response.json();
+
+    // 캐시에 저장
+    companyCache.set(sortBy, { data, timestamp: Date.now() });
+
     return data;
   } catch (error) {
     console.error("Error fetching companies:", error);
@@ -54,8 +74,8 @@ const getSentimentColor = (sentiment: string) => {
   }
 };
 
-// 커스텀 툴팁 컴포넌트
-const CustomTooltip = ({ node }: any) => {
+// 커스텀 툴팁 컴포넌트 (메모이제이션)
+const CustomTooltip = memo(({ node }: any) => {
   return (
     <div className="bg-white/95 backdrop-blur-sm p-4 rounded-xl shadow-2xl border border-gray-200/50 min-w-[280px] animate-fadeIn z-50 relative">
       {/* 헤더 */}
@@ -107,9 +127,9 @@ const CustomTooltip = ({ node }: any) => {
       </div>
     </div>
   );
-};
+});
 
-export default function TrendingKeywords() {
+const TrendingKeywords = memo(function TrendingKeywords() {
   const navigate = useNavigate();
   const [filter, setFilter] = useState<SortBy>("market_cap_desc");
   const [companies, setCompanies] = useState<CompanyInfo[]>([]);
@@ -124,48 +144,67 @@ export default function TrendingKeywords() {
     volume_asc: [],
   });
   const [loading, setLoading] = useState(true);
+  const [filterLoading, setFilterLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    const fetchAllCompanies = async () => {
+    const fetchInitialData = async () => {
       try {
         setLoading(true);
         setError(null);
 
-        // 3가지 필터링 상태에 대한 데이터를 병렬로 로딩
-        const [marketCapData, changePercentData, volumeData] =
-          await Promise.all([
-            getCompanies("market_cap_desc"),
-            getCompanies("change_percent_desc"),
-            getCompanies("volume_desc"),
-          ]);
+        // 1단계: 시가총액 높은순 데이터를 먼저 로딩하여 즉시 표시
+        const marketCapData = await getCompanies("market_cap_desc");
 
-        setAllCompanies({
+        setAllCompanies((prev) => ({
+          ...prev,
           market_cap_desc: marketCapData,
           market_cap_asc: marketCapData,
-          change_percent_desc: changePercentData,
-          change_percent_asc: changePercentData,
-          volume_desc: volumeData,
-          volume_asc: volumeData,
-        });
-
-        // 초기 필터에 맞는 데이터 설정
+        }));
         setCompanies(marketCapData);
+        setLoading(false);
+
+        // 2단계: 백그라운드에서 나머지 데이터 로딩
+        const loadRemainingData = async () => {
+          try {
+            const [changePercentData, volumeData] = await Promise.all([
+              getCompanies("change_percent_desc"),
+              getCompanies("volume_desc"),
+            ]);
+
+            setAllCompanies((prev) => ({
+              ...prev,
+              change_percent_desc: changePercentData,
+              change_percent_asc: changePercentData,
+              volume_desc: volumeData,
+              volume_asc: volumeData,
+            }));
+          } catch (err) {
+            console.error("Error fetching remaining data:", err);
+            // 백그라운드 로딩 실패는 사용자에게 알리지 않음
+          }
+        };
+
+        // 백그라운드에서 나머지 데이터 로딩 시작
+        loadRemainingData();
       } catch (err) {
         setError("데이터를 불러오는 중 오류가 발생했습니다.");
-        console.error("Error fetching companies:", err);
-      } finally {
+        console.error("Error fetching initial data:", err);
         setLoading(false);
       }
     };
 
-    fetchAllCompanies();
+    fetchInitialData();
   }, []);
 
   // 필터 변경 시 해당 데이터로 업데이트
   useEffect(() => {
     if (allCompanies[filter] && allCompanies[filter].length > 0) {
       setCompanies(allCompanies[filter]);
+      setFilterLoading(false);
+    } else if (allCompanies[filter] && allCompanies[filter].length === 0) {
+      // 데이터가 아직 로딩 중인 경우
+      setFilterLoading(true);
     }
   }, [filter, allCompanies]);
 
@@ -199,11 +238,14 @@ export default function TrendingKeywords() {
     };
   }, [companies, filter]);
 
-  const handleNodeClick = (node: any) => {
-    if (node.data.stockCode) {
-      navigate(`/stock/${node.data.stockCode}`);
-    }
-  };
+  const handleNodeClick = useCallback(
+    (node: any) => {
+      if (node.data.stockCode) {
+        navigate(`/stock/${node.data.stockCode}`);
+      }
+    },
+    [navigate]
+  );
 
   return (
     <div className="rounded-3xl border border-white/70 bg-white/70 backdrop-blur-md shadow-sm">
@@ -253,7 +295,7 @@ export default function TrendingKeywords() {
 
         {/* TreeMap */}
         <div className="h-64 [&_g]:cursor-pointer relative">
-          {loading ? (
+          {loading || filterLoading ? (
             <div className="h-full p-4">
               {/* 스켈레톤 헤더 */}
               <div className="flex items-center justify-between mb-4">
@@ -277,7 +319,7 @@ export default function TrendingKeywords() {
               value="loc"
               valueFormat=".0f"
               margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
-              labelSkipSize={8}
+              labelSkipSize={12}
               labelTextColor={{ from: "color", modifiers: [["darker", 1.2]] }}
               parentLabelPosition="left"
               parentLabelTextColor={{
@@ -295,8 +337,8 @@ export default function TrendingKeywords() {
               label={(node) => {
                 // 주식명이 너무 길면 줄여서 표시
                 const name = node.data.name;
-                if (name.length > 8) {
-                  return name.substring(0, 7) + "...";
+                if (name.length > 6) {
+                  return name.substring(0, 5) + "...";
                 }
                 return name;
               }}
@@ -333,4 +375,6 @@ export default function TrendingKeywords() {
       </div>
     </div>
   );
-}
+});
+
+export default TrendingKeywords;
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 619f93f..ddbc433 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -184,6 +184,15 @@ const Header = () => {
 
   // 현재 경로가 navItem의 경로와 일치하는지 확인하는 함수
   const isActiveRoute = (path: string) => {
+    // 하위 경로까지 활성화 처리할 기본 섹션들
+    const sectionsWithSubroutes = ["/mypage", "/news", "/stock"];
+
+    if (sectionsWithSubroutes.includes(path)) {
+      return (
+        location.pathname === path || location.pathname.startsWith(path + "/")
+      );
+    }
+
     return location.pathname === path;
   };
 
diff --git a/src/components/layout/myPageLayout/index.tsx b/src/components/layout/myPageLayout/index.tsx
index 7bc8388..3b52e6d 100644
--- a/src/components/layout/myPageLayout/index.tsx
+++ b/src/components/layout/myPageLayout/index.tsx
@@ -1,11 +1,210 @@
-import { Outlet } from "react-router-dom";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
+import { useState } from "react";
+import { motion } from "framer-motion";
+import {
+  User,
+  CreditCard,
+  Heart,
+  Bell,
+  Shield,
+  HelpCircle,
+  LogOut,
+} from "lucide-react";
+import Toast from "@/components/common/Toast";
 
 export default function MyPageLayout() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const isSubPage = location.pathname !== "/mypage";
+
+  const [user] = useState({
+    name: "홍길동",
+    email: "hong@example.com",
+    avatar:
+      "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face",
+    membership: "프리미엄",
+    joinDate: "2024년 1월",
+  });
+  const [toast, setToast] = useState<{
+    message: string;
+    type: "success" | "error";
+  } | null>(null);
+
+  const menuItems = [
+    {
+      icon: <User className="w-5 h-5" />,
+      title: "개인정보 관리",
+      subtitle: "프로필 정보 수정 및 조회",
+      href: "/mypage/profile",
+    },
+    {
+      icon: <CreditCard className="w-5 h-5" />,
+      title: "결제 수단 관리",
+      subtitle: "카드 정보 변경 및 결제 내역",
+      href: "/mypage/payment",
+    },
+    {
+      icon: <Heart className="w-5 h-5" />,
+      title: "즐겨찾기 리스트",
+      subtitle: "관심 종목 관리",
+      href: "/mypage/favorites",
+    },
+    {
+      icon: <Bell className="w-5 h-5" />,
+      title: "알림 설정",
+      subtitle: "푸시 알림 및 이메일 설정",
+      href: "/mypage/notifications",
+    },
+    {
+      icon: <Shield className="w-5 h-5" />,
+      title: "보안 설정",
+      subtitle: "비밀번호 변경 및 2단계 인증",
+      href: "/mypage/security",
+    },
+    {
+      icon: <HelpCircle className="w-5 h-5" />,
+      title: "고객 지원",
+      subtitle: "FAQ 및 문의하기",
+      href: "/mypage/support",
+    },
+  ];
+
+  const handleLogout = async () => {
+    const { logout } = await import("@/api/auth/logoutApi");
+    try {
+      await logout();
+      setToast({ message: "로그아웃 되었습니다.", type: "success" });
+    } catch (_) {
+      setToast({ message: "로그아웃 중 오류가 발생했습니다.", type: "error" });
+    } finally {
+      localStorage.removeItem("access_token");
+      setTimeout(() => {
+        window.location.href = "/";
+      }, 800);
+    }
+  };
+
   return (
     <div className="min-h-screen bg-gray-50">
-      <main className="w-full">
-        <Outlet />
-      </main>
+      {toast && (
+        <Toast
+          message={toast.message}
+          type={toast.type}
+          onClose={() => setToast(null)}
+          duration={1500}
+        />
+      )}
+
+      {isSubPage ? (
+        // 하위 페이지일 때 - 모바일에서는 뒤로가기만, 데스크톱에서는 사이드바
+        <div className="flex h-screen">
+          {/* 데스크톱 사이드바 - 모바일에서는 숨김 */}
+          <div className="hidden lg:flex w-80 bg-white/80 backdrop-blur-xl border-r border-gray-200/50 flex-col">
+            {/* 프로필 섹션 */}
+            <div className="p-6 border-b border-gray-200/50">
+              <div className="flex items-center space-x-4">
+                <div className="relative">
+                  <img
+                    src={user.avatar}
+                    alt={user.name}
+                    className="w-12 h-12 rounded-full object-cover border-2 border-gray-200"
+                  />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <h2 className="text-lg font-semibold text-gray-900 truncate">
+                    {user.name}
+                  </h2>
+                  <p className="text-sm text-gray-600 truncate">{user.email}</p>
+                  <span className="inline-block px-2 py-1 bg-[#0A5C2B] text-white text-xs font-medium rounded-full mt-1">
+                    {user.membership}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* 메뉴 아이템들 */}
+            <div className="flex-1 overflow-y-auto p-4 space-y-2">
+              {menuItems.map((item, index) => (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ duration: 0.3, delay: index * 0.05 }}
+                >
+                  <button
+                    onClick={() => navigate(item.href)}
+                    className={`w-full flex items-center space-x-3 p-3 rounded-2xl transition-all duration-200 ${
+                      location.pathname === item.href
+                        ? "bg-[#0A5C2B] text-white"
+                        : "text-gray-700 hover:bg-gray-100"
+                    }`}
+                  >
+                    <div
+                      className={`p-2 rounded-xl ${
+                        location.pathname === item.href
+                          ? "bg-white/20"
+                          : "bg-gray-100"
+                      }`}
+                    >
+                      <div
+                        className={
+                          location.pathname === item.href
+                            ? "text-white"
+                            : "text-[#0A5C2B]"
+                        }
+                      >
+                        {item.icon}
+                      </div>
+                    </div>
+                    <div className="flex-1 text-left min-w-0">
+                      <h3 className="font-medium text-sm truncate">
+                        {item.title}
+                      </h3>
+                      <p
+                        className={`text-xs truncate ${
+                          location.pathname === item.href
+                            ? "text-white/80"
+                            : "text-gray-500"
+                        }`}
+                      >
+                        {item.subtitle}
+                      </p>
+                    </div>
+                  </button>
+                </motion.div>
+              ))}
+            </div>
+
+            {/* 로그아웃 버튼 */}
+            <div className="p-4 border-t border-gray-200/50">
+              <button
+                onClick={handleLogout}
+                className="w-full flex items-center space-x-3 p-3 rounded-2xl text-gray-700 hover:bg-red-50 hover:text-red-600 transition-all duration-200"
+              >
+                <div className="p-2 rounded-xl bg-gray-100">
+                  <LogOut className="w-5 h-5" />
+                </div>
+                <div className="flex-1 text-left">
+                  <h3 className="font-medium text-sm">로그아웃</h3>
+                  <p className="text-xs text-gray-500">
+                    계정에서 로그아웃합니다
+                  </p>
+                </div>
+              </button>
+            </div>
+          </div>
+
+          {/* 메인 콘텐츠 영역 */}
+          <div className="flex-1 overflow-y-auto">
+            <Outlet />
+          </div>
+        </div>
+      ) : (
+        // 기본 레이아웃 (메인 마이페이지일 때)
+        <div className="w-full">
+          <Outlet />
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/news/Watchlist.tsx b/src/components/news/Watchlist.tsx
index 1d044ad..ce45a5b 100644
--- a/src/components/news/Watchlist.tsx
+++ b/src/components/news/Watchlist.tsx
@@ -1,6 +1,7 @@
 import { Star, Search, ChevronLeft, ChevronRight } from "lucide-react";
 import { useState, useEffect } from "react";
 import { getMyFeed } from "../../api/news/feed";
+import { getStockList } from "../../api/stock/list";
 
 interface Company {
   name: string;
@@ -22,30 +23,76 @@ export default function Watchlist({
   const itemsPerPage = 5;
 
   useEffect(() => {
-    // /news/my-feed에서 뉴스 받아와서 관련 기업 추출
-    getMyFeed({ limit: 100 }).then((newsList) => {
-      // 모든 뉴스의 related_companies를 flat하게 모으고 중복 제거
-      const allCompanies = newsList
-        .flatMap((news) => news.related_companies || [])
-        .filter(Boolean);
-      const uniqueCompanies = Array.from(new Set(allCompanies));
-      // 이름/코드 분리 (예시: "삼성전자(005930)" 형식이면 분리, 아니면 이름만)
-      const companyObjs: Company[] = uniqueCompanies.map((item) => {
-        const match = item.match(/(.+)[(]([0-9A-Za-z]+)[)]/);
-        if (match) {
-          return { name: match[1], code: match[2] };
-        } else {
-          return { name: item, code: item };
+    const loadCompanies = async () => {
+      try {
+        // 먼저 my-feed에서 관련 기업 추출 시도
+        const newsList = await getMyFeed({ limit: 100 });
+        console.log("뉴스 데이터:", newsList);
+        console.log("첫 번째 뉴스 상세:", newsList[0]);
+
+        // 모든 뉴스의 related_companies를 flat하게 모으고 중복 제거
+        const allCompanies = newsList
+          .flatMap((news) => news.related_companies || [])
+          .filter(Boolean);
+
+        console.log("추출된 기업들:", allCompanies);
+
+        // related_companies가 비어있으면 대안으로 인기 종목 사용
+        if (allCompanies.length === 0) {
+          console.log("관련 기업이 없어서 인기 종목을 로딩합니다.");
+          const stockResponse = await getStockList("market_cap_desc");
+          const companyObjs: Company[] = stockResponse.data
+            .slice(0, 20)
+            .map((stock) => ({
+              name: stock.name,
+              code: stock.code,
+            }));
+          console.log("인기 종목으로 대체:", companyObjs);
+          setCompanies(companyObjs);
+          return;
+        }
+
+        const uniqueCompanies = Array.from(new Set(allCompanies));
+        console.log("중복 제거 후:", uniqueCompanies);
+
+        // 이름/코드 분리 (예시: "삼성전자(005930)" 형식이면 분리, 아니면 이름만)
+        const companyObjs: Company[] = uniqueCompanies.map((item) => {
+          const match = item.match(/(.+)[(]([0-9A-Za-z]+)[)]/);
+          if (match) {
+            return { name: match[1], code: match[2] };
+          } else {
+            return { name: item, code: item };
+          }
+        });
+
+        console.log("최종 기업 객체들:", companyObjs);
+        setCompanies(companyObjs);
+      } catch (error) {
+        console.error("관심기업 데이터 로딩 실패:", error);
+        // 에러 시에도 인기 종목으로 대체
+        try {
+          const stockResponse = await getStockList("market_cap_desc");
+          const companyObjs: Company[] = stockResponse.data
+            .slice(0, 20)
+            .map((stock) => ({
+              name: stock.name,
+              code: stock.code,
+            }));
+          setCompanies(companyObjs);
+        } catch (fallbackError) {
+          console.error("대체 데이터 로딩도 실패:", fallbackError);
+          setCompanies([]);
         }
-      });
-      setCompanies(companyObjs);
-    });
+      }
+    };
+
+    loadCompanies();
   }, []);
 
   const filteredCompanies = companies.filter(
     (company) =>
       company.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      company.code.includes(searchQuery),
+      company.code.includes(searchQuery)
   );
 
   const totalPages = Math.ceil(filteredCompanies.length / itemsPerPage);
@@ -85,7 +132,7 @@ export default function Watchlist({
                   key={index}
                   onClick={() =>
                     onCompanySelect(
-                      company === selectedCompany ? null : company,
+                      company === selectedCompany ? null : company
                     )
                   }
                   className={`p-4 rounded-lg border transition-colors duration-200 cursor-pointer ${
diff --git a/src/pages/myPage/favorites.tsx b/src/pages/myPage/favorites.tsx
index 73dc768..290fbf4 100644
--- a/src/pages/myPage/favorites.tsx
+++ b/src/pages/myPage/favorites.tsx
@@ -1,228 +1,208 @@
 import { useState } from "react";
 import { motion } from "framer-motion";
-import { ArrowLeft, Heart, Trash2, Search } from "lucide-react";
+import {
+  ArrowLeft,
+  Heart,
+  TrendingUp,
+  TrendingDown,
+  Star,
+  Search,
+  MoreVertical,
+} from "lucide-react";
 import { useNavigate } from "react-router-dom";
 
 export default function FavoritesPage() {
   const navigate = useNavigate();
-  const [activeTab, setActiveTab] = useState<"stocks" | "news">("stocks");
   const [searchTerm, setSearchTerm] = useState("");
 
-  const favoriteStocks = [
+  const [favoriteStocks] = useState([
     {
       id: 1,
       symbol: "005930",
       name: "삼성전자",
-      price: "75,800",
-      change: "+2.3%",
-      changeType: "up",
-      sector: "전자",
+      price: 71500,
+      change: 1500,
+      changePercent: 2.14,
+      volume: "12.5M",
+      marketCap: "427조",
+      isFavorite: true,
     },
     {
       id: 2,
       symbol: "000660",
       name: "SK하이닉스",
-      price: "142,000",
-      change: "-1.2%",
-      changeType: "down",
-      sector: "반도체",
+      price: 128000,
+      change: -2000,
+      changePercent: -1.54,
+      volume: "3.2M",
+      marketCap: "93조",
+      isFavorite: true,
     },
     {
       id: 3,
       symbol: "035420",
       name: "NAVER",
-      price: "198,500",
-      change: "+0.8%",
-      changeType: "up",
-      sector: "IT",
-    },
-  ];
-
-  const favoriteNews = [
-    {
-      id: 1,
-      title: "삼성전자, 2분기 실적 예상치 상회",
-      press: "한국경제",
-      published_at: "2024-01-15",
-      impact: "positive",
-    },
-    {
-      id: 2,
-      title: "SK하이닉스 메모리 가격 상승세",
-      press: "매일경제",
-      published_at: "2024-01-14",
-      impact: "positive",
+      price: 198500,
+      change: 3500,
+      changePercent: 1.79,
+      volume: "1.8M",
+      marketCap: "32조",
+      isFavorite: true,
     },
     {
-      id: 3,
-      title: "NAVER AI 기술 개발 현황",
-      press: "조선일보",
-      published_at: "2024-01-13",
-      impact: "neutral",
+      id: 4,
+      symbol: "051910",
+      name: "LG화학",
+      price: 425000,
+      change: -5000,
+      changePercent: -1.16,
+      volume: "0.8M",
+      marketCap: "30조",
+      isFavorite: true,
     },
-  ];
+  ]);
 
-  const getImpactColor = (impact: string) => {
-    switch (impact) {
-      case "positive":
-        return "text-green-600 bg-green-50 border-green-200";
-      case "negative":
-        return "text-red-600 bg-red-50 border-red-200";
-      case "neutral":
-        return "text-gray-600 bg-gray-50 border-gray-200";
-      default:
-        return "text-gray-600 bg-gray-50 border-gray-200";
-    }
+  const handleRemoveFavorite = (id: number) => {
+    console.log("즐겨찾기 제거:", id);
   };
 
-  const getImpactText = (impact: string) => {
-    switch (impact) {
-      case "positive":
-        return "긍정";
-      case "negative":
-        return "부정";
-      case "neutral":
-        return "중립";
-      default:
-        return "중립";
-    }
-  };
+  const filteredStocks = favoriteStocks.filter(
+    (stock) =>
+      stock.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      stock.symbol.includes(searchTerm)
+  );
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      {/* 헤더 */}
-      <div className="bg-white border-b border-gray-200">
-        <div className="px-4 py-4 flex items-center justify-between">
+    <div className="min-h-screen bg-gray-50/50">
+      {/* 헤더 - 모바일에서만 표시 */}
+      <div className="lg:hidden bg-white/80 backdrop-blur-xl border-b border-gray-200/50 sticky top-0 z-10">
+        <div className="max-w-md mx-auto px-6 py-4 flex items-center justify-between">
           <button
-            onClick={() => navigate(-1)}
-            className="p-2 rounded-full hover:bg-gray-100 transition-colors"
+            onClick={() => navigate("/mypage")}
+            className="p-2 rounded-full hover:bg-gray-100/80 transition-colors"
           >
-            <ArrowLeft className="w-5 h-5 text-gray-600" />
+            <ArrowLeft className="w-5 h-5 text-gray-700" />
           </button>
           <h1 className="text-lg font-semibold text-gray-900">즐겨찾기</h1>
           <div className="w-9"></div>
         </div>
       </div>
 
-      {/* 검색바 */}
-      <div className="px-4 py-4 bg-white border-b border-gray-100">
-        <div className="relative">
-          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
-          <input
-            type="text"
-            placeholder="즐겨찾기 검색..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0A5C2B]/20 focus:border-[#0A5C2B]"
-          />
-        </div>
-      </div>
+      <div className="max-w-md mx-auto px-6 py-8 space-y-6">
+        {/* 검색 및 필터 */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="space-y-4"
+        >
+          <div className="relative">
+            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
+            <input
+              type="text"
+              placeholder="종목명 검색..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full pl-12 pr-4 py-3 bg-white/70 backdrop-blur-xl border border-white/20 rounded-2xl focus:outline-none focus:ring-2 focus:ring-[#0A5C2B]/20 focus:border-[#0A5C2B] transition-all"
+            />
+          </div>
+        </motion.div>
 
-      {/* 탭 */}
-      <div className="bg-white border-b border-gray-100">
-        <div className="flex px-4">
-          <button
-            onClick={() => setActiveTab("stocks")}
-            className={`flex-1 py-3 text-sm font-medium border-b-2 transition-colors ${
-              activeTab === "stocks"
-                ? "border-[#0A5C2B] text-[#0A5C2B]"
-                : "border-transparent text-gray-500"
-            }`}
-          >
-            관심 종목 ({favoriteStocks.length})
-          </button>
-          <button
-            onClick={() => setActiveTab("news")}
-            className={`flex-1 py-3 text-sm font-medium border-b-2 transition-colors ${
-              activeTab === "news"
-                ? "border-[#0A5C2B] text-[#0A5C2B]"
-                : "border-transparent text-gray-500"
-            }`}
-          >
-            관심 뉴스 ({favoriteNews.length})
-          </button>
-        </div>
-      </div>
+        {/* 즐겨찾기 주식 */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.1 }}
+          className="space-y-4"
+        >
+          <div className="flex items-center justify-between">
+            <h2 className="text-lg font-semibold text-gray-900">
+              즐겨찾기 주식
+            </h2>
+            <span className="text-sm text-gray-500">
+              {filteredStocks.length}개
+            </span>
+          </div>
 
-      <div className="px-4 py-4">
-        {activeTab === "stocks" ? (
-          <div className="space-y-3">
-            {favoriteStocks.map((stock, index) => (
-              <motion.div
-                key={stock.id}
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.3, delay: index * 0.1 }}
-                className="bg-white rounded-2xl p-4 shadow-sm border border-gray-100"
-              >
-                <div className="flex items-center justify-between">
-                  <div className="flex-1">
-                    <div className="flex items-center space-x-2 mb-1">
-                      <h3 className="font-semibold text-gray-900">
-                        {stock.name}
-                      </h3>
-                      <span className="text-xs text-gray-500">
-                        {stock.symbol}
-                      </span>
-                      <Heart className="w-4 h-4 text-red-500 fill-current" />
-                    </div>
-                    <p className="text-sm text-gray-600">{stock.sector}</p>
+          {filteredStocks.map((stock, index) => (
+            <motion.div
+              key={stock.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.3, delay: index * 0.1 }}
+              className="bg-white/70 backdrop-blur-xl rounded-3xl p-6 shadow-lg border border-white/20"
+            >
+              <div className="flex items-center justify-between">
+                <div className="flex-1">
+                  <div className="flex items-center space-x-2 mb-2">
+                    <h3 className="font-semibold text-gray-900">
+                      {stock.name}
+                    </h3>
+                    <span className="text-sm text-gray-500">
+                      {stock.symbol}
+                    </span>
                   </div>
-                  <div className="text-right">
-                    <p className="font-semibold text-gray-900">{stock.price}</p>
-                    <p
-                      className={`text-sm font-medium ${
-                        stock.changeType === "up"
-                          ? "text-red-600"
-                          : "text-blue-600"
+                  <div className="flex items-center space-x-4 text-sm">
+                    <span className="text-lg font-bold text-gray-900">
+                      ₩{stock.price.toLocaleString()}
+                    </span>
+                    <div
+                      className={`flex items-center space-x-1 ${
+                        stock.change >= 0 ? "text-red-500" : "text-blue-500"
                       }`}
                     >
-                      {stock.change}
-                    </p>
-                  </div>
-                  <button className="ml-3 p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-full transition-colors">
-                    <Trash2 className="w-4 h-4" />
-                  </button>
-                </div>
-              </motion.div>
-            ))}
-          </div>
-        ) : (
-          <div className="space-y-3">
-            {favoriteNews.map((news, index) => (
-              <motion.div
-                key={news.id}
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.3, delay: index * 0.1 }}
-                className="bg-white rounded-2xl p-4 shadow-sm border border-gray-100"
-              >
-                <div className="flex items-start justify-between">
-                  <div className="flex-1">
-                    <div className="flex items-center space-x-2 mb-2">
-                      <span
-                        className={`px-2 py-1 rounded-full text-xs font-medium border ${getImpactColor(news.impact)}`}
-                      >
-                        {getImpactText(news.impact)}
+                      {stock.change >= 0 ? (
+                        <TrendingUp className="w-4 h-4" />
+                      ) : (
+                        <TrendingDown className="w-4 h-4" />
+                      )}
+                      <span>
+                        {stock.change >= 0 ? "+" : ""}
+                        {stock.change.toLocaleString()}(
+                        {stock.changePercent >= 0 ? "+" : ""}
+                        {stock.changePercent}%)
                       </span>
-                      <Heart className="w-4 h-4 text-red-500 fill-current" />
-                    </div>
-                    <h3 className="font-medium text-gray-900 mb-2 line-clamp-2">
-                      {news.title}
-                    </h3>
-                    <div className="flex items-center space-x-2 text-xs text-gray-500">
-                      <span>{news.press}</span>
-                      <span>•</span>
-                      <span>{news.published_at}</span>
                     </div>
                   </div>
-                  <button className="ml-3 p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-full transition-colors">
-                    <Trash2 className="w-4 h-4" />
+                  <div className="flex items-center space-x-4 text-xs text-gray-500 mt-2">
+                    <span>거래량: {stock.volume}</span>
+                    <span>시총: {stock.marketCap}</span>
+                  </div>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <button
+                    onClick={() => handleRemoveFavorite(stock.id)}
+                    className="p-2 text-red-400 hover:text-red-500 hover:bg-red-50 rounded-full transition-colors"
+                  >
+                    <Heart className="w-5 h-5 fill-current" />
+                  </button>
+                  <button className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-50 rounded-full transition-colors">
+                    <MoreVertical className="w-5 h-5" />
                   </button>
                 </div>
-              </motion.div>
-            ))}
-          </div>
+              </div>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* 빈 상태 */}
+        {filteredStocks.length === 0 && (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.3 }}
+            className="text-center py-12"
+          >
+            <div className="p-4 bg-gray-100 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
+              <Star className="w-8 h-8 text-gray-400" />
+            </div>
+            <h3 className="text-lg font-semibold text-gray-900 mb-2">
+              즐겨찾기 주식이 없습니다
+            </h3>
+            <p className="text-gray-600">
+              관심 있는 주식을 즐겨찾기에 추가해보세요
+            </p>
+          </motion.div>
         )}
       </div>
     </div>
diff --git a/src/pages/myPage/index.tsx b/src/pages/myPage/index.tsx
index 6f5bf18..79dbdd7 100644
--- a/src/pages/myPage/index.tsx
+++ b/src/pages/myPage/index.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { motion } from "framer-motion";
+import { useNavigate } from "react-router-dom";
 import {
   User,
   CreditCard,
@@ -14,6 +15,7 @@ import {
 import Toast from "@/components/common/Toast";
 
 export default function MyPage() {
+  const navigate = useNavigate();
   const [user] = useState({
     name: "홍길동",
     email: "hong@example.com",
@@ -32,37 +34,37 @@ export default function MyPage() {
       icon: <User className="w-6 h-6" />,
       title: "개인정보 관리",
       subtitle: "프로필 정보 수정 및 조회",
-      href: "/myPage/profile",
+      href: "/mypage/profile",
     },
     {
       icon: <CreditCard className="w-6 h-6" />,
       title: "결제 수단 관리",
       subtitle: "카드 정보 변경 및 결제 내역",
-      href: "/myPage/payment",
+      href: "/mypage/payment",
     },
     {
       icon: <Heart className="w-6 h-6" />,
       title: "즐겨찾기 리스트",
-      subtitle: "관심 종목 및 뉴스 관리",
-      href: "/myPage/favorites",
+      subtitle: "관심 종목 관리",
+      href: "/mypage/favorites",
     },
     {
       icon: <Bell className="w-6 h-6" />,
       title: "알림 설정",
       subtitle: "푸시 알림 및 이메일 설정",
-      href: "/myPage/notifications",
+      href: "/mypage/notifications",
     },
     {
       icon: <Shield className="w-6 h-6" />,
       title: "보안 설정",
       subtitle: "비밀번호 변경 및 2단계 인증",
-      href: "/myPage/security",
+      href: "/mypage/security",
     },
     {
       icon: <HelpCircle className="w-6 h-6" />,
       title: "고객 지원",
       subtitle: "FAQ 및 문의하기",
-      href: "/myPage/support",
+      href: "/mypage/support",
     },
   ];
 
@@ -91,6 +93,7 @@ export default function MyPage() {
           duration={1500}
         />
       )}
+
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8 lg:py-10 space-y-6 sm:space-y-8 lg:space-y-10">
         {/* 프로필 카드 */}
         <motion.div
@@ -145,7 +148,7 @@ export default function MyPage() {
               }}
             >
               <button
-                onClick={() => (window.location.href = item.href)}
+                onClick={() => navigate(item.href)}
                 className="group w-full bg-white rounded-2xl p-4 sm:p-6 shadow-md border border-gray-200 hover:bg-gray-50 hover:shadow-lg hover:scale-[1.02] transition-all duration-300 ease-out active:scale-[0.98]"
               >
                 <div className="flex items-start space-x-3 sm:space-x-4 lg:space-x-5">
diff --git a/src/pages/myPage/notifications.tsx b/src/pages/myPage/notifications.tsx
new file mode 100644
index 0000000..87b776b
--- /dev/null
+++ b/src/pages/myPage/notifications.tsx
@@ -0,0 +1,249 @@
+import { useState } from "react";
+import { motion } from "framer-motion";
+import {
+  ArrowLeft,
+  Bell,
+  Settings,
+  Check,
+  X,
+  AlertCircle,
+  Info,
+  TrendingUp,
+} from "lucide-react";
+import { useNavigate } from "react-router-dom";
+
+export default function NotificationsPage() {
+  const navigate = useNavigate();
+  const [notifications, setNotifications] = useState([
+    {
+      id: 1,
+      type: "alert",
+      title: "주가 급등 알림",
+      message: "삼성전자 주가가 5% 상승했습니다.",
+      time: "2분 전",
+      isRead: false,
+    },
+    {
+      id: 2,
+      type: "info",
+      title: "뉴스 알림",
+      message: "새로운 시장 분석 리포트가 업데이트되었습니다.",
+      time: "1시간 전",
+      isRead: false,
+    },
+    {
+      id: 3,
+      type: "trending",
+      title: "인기 키워드",
+      message: "AI 관련 주식이 오늘 인기 키워드 1위에 올랐습니다.",
+      time: "3시간 전",
+      isRead: true,
+    },
+    {
+      id: 4,
+      type: "alert",
+      title: "포트폴리오 알림",
+      message: "보유 주식 중 하나가 목표가에 도달했습니다.",
+      time: "1일 전",
+      isRead: true,
+    },
+  ]);
+
+  const [settings, setSettings] = useState({
+    pushNotifications: true,
+    emailNotifications: false,
+    priceAlerts: true,
+    newsAlerts: true,
+    trendingAlerts: false,
+  });
+
+  const handleMarkAsRead = (id: number) => {
+    setNotifications((prev) =>
+      prev.map((notif) =>
+        notif.id === id ? { ...notif, isRead: true } : notif
+      )
+    );
+  };
+
+  const handleDeleteNotification = (id: number) => {
+    setNotifications((prev) => prev.filter((notif) => notif.id !== id));
+  };
+
+  const handleMarkAllAsRead = () => {
+    setNotifications((prev) =>
+      prev.map((notif) => ({ ...notif, isRead: true }))
+    );
+  };
+
+  const handleSettingChange = (key: string) => {
+    setSettings((prev) => ({
+      ...prev,
+      [key]: !prev[key as keyof typeof prev],
+    }));
+  };
+
+  const getIcon = (type: string) => {
+    switch (type) {
+      case "alert":
+        return <AlertCircle className="w-5 h-5 text-red-500" />;
+      case "info":
+        return <Info className="w-5 h-5 text-blue-500" />;
+      case "trending":
+        return <TrendingUp className="w-5 h-5 text-[#0A5C2B]" />;
+      default:
+        return <Bell className="w-5 h-5 text-gray-500" />;
+    }
+  };
+
+  const unreadCount = notifications.filter((n) => !n.isRead).length;
+
+  return (
+    <div className="min-h-screen bg-gray-50/50">
+      {/* 헤더 - 모바일에서만 표시 */}
+      <div className="lg:hidden bg-white/80 backdrop-blur-xl border-b border-gray-200/50 sticky top-0 z-10">
+        <div className="max-w-md mx-auto px-6 py-4 flex items-center justify-between">
+          <button
+            onClick={() => navigate("/mypage")}
+            className="p-2 rounded-full hover:bg-gray-100/80 transition-colors"
+          >
+            <ArrowLeft className="w-5 h-5 text-gray-700" />
+          </button>
+          <h1 className="text-lg font-semibold text-gray-900">알림</h1>
+          <button className="p-2 rounded-full hover:bg-gray-100/80 transition-colors">
+            <Settings className="w-5 h-5 text-gray-700" />
+          </button>
+        </div>
+      </div>
+
+      <div className="max-w-md mx-auto px-6 py-8 space-y-6">
+        {/* 알림 요약 */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="bg-white/70 backdrop-blur-xl rounded-3xl p-6 shadow-lg border border-white/20"
+        >
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-3">
+              <div className="p-3 bg-gradient-to-br from-green-100 to-emerald-100 rounded-2xl">
+                <Bell className="w-6 h-6 text-[#0A5C2B]" />
+              </div>
+              <div>
+                <h2 className="text-lg font-semibold text-gray-900">
+                  알림 요약
+                </h2>
+                <p className="text-sm text-gray-600">
+                  {unreadCount}개의 읽지 않은 알림
+                </p>
+              </div>
+            </div>
+            {unreadCount > 0 && (
+              <button
+                onClick={handleMarkAllAsRead}
+                className="px-4 py-2 bg-[#0A5C2B] text-white text-sm font-medium rounded-full hover:bg-[#0A5C2B]/90 transition-colors"
+              >
+                모두 읽음
+              </button>
+            )}
+          </div>
+        </motion.div>
+
+        {/* 알림 목록 */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.1 }}
+          className="space-y-4"
+        >
+          {notifications.map((notification, index) => (
+            <motion.div
+              key={notification.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.3, delay: index * 0.1 }}
+              className={`bg-white/70 backdrop-blur-xl rounded-3xl p-6 shadow-lg border border-white/20 ${
+                !notification.isRead ? "ring-2 ring-[#0A5C2B]/20" : ""
+              }`}
+            >
+              <div className="flex items-start space-x-4">
+                <div className="flex-shrink-0 mt-1">
+                  {getIcon(notification.type)}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-gray-900 mb-1">
+                        {notification.title}
+                      </h3>
+                      <p className="text-gray-600 text-sm mb-2">
+                        {notification.message}
+                      </p>
+                      <p className="text-xs text-gray-500">
+                        {notification.time}
+                      </p>
+                    </div>
+                    <div className="flex items-center space-x-2 ml-4">
+                      {!notification.isRead && (
+                        <button
+                          onClick={() => handleMarkAsRead(notification.id)}
+                          className="p-2 text-gray-400 hover:text-[#0A5C2B] hover:bg-[#0A5C2B]/10 rounded-full transition-colors"
+                        >
+                          <Check className="w-4 h-4" />
+                        </button>
+                      )}
+                      <button
+                        onClick={() =>
+                          handleDeleteNotification(notification.id)
+                        }
+                        className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-full transition-colors"
+                      >
+                        <X className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* 알림 설정 */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+          className="bg-white/70 backdrop-blur-xl rounded-3xl p-6 shadow-lg border border-white/20"
+        >
+          <h2 className="text-lg font-semibold text-gray-900 mb-6">
+            알림 설정
+          </h2>
+          <div className="space-y-4">
+            {Object.entries(settings).map(([key, value]) => (
+              <div key={key} className="flex items-center justify-between">
+                <span className="text-gray-700 font-medium">
+                  {key === "pushNotifications" && "푸시 알림"}
+                  {key === "emailNotifications" && "이메일 알림"}
+                  {key === "priceAlerts" && "주가 알림"}
+                  {key === "newsAlerts" && "뉴스 알림"}
+                  {key === "trendingAlerts" && "트렌드 알림"}
+                </span>
+                <button
+                  onClick={() => handleSettingChange(key)}
+                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                    value ? "bg-[#0A5C2B]" : "bg-gray-200"
+                  }`}
+                >
+                  <span
+                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                      value ? "translate-x-6" : "translate-x-1"
+                    }`}
+                  />
+                </button>
+              </div>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/myPage/payment.tsx b/src/pages/myPage/payment.tsx
index d68a6d6..8810457 100644
--- a/src/pages/myPage/payment.tsx
+++ b/src/pages/myPage/payment.tsx
@@ -72,22 +72,22 @@ export default function PaymentPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      {/* 헤더 */}
-      <div className="bg-white border-b border-gray-200">
-        <div className="px-4 py-4 flex items-center justify-between">
+    <div className="min-h-screen bg-gray-50/50">
+      {/* 헤더 - 모바일에서만 표시 */}
+      <div className="lg:hidden bg-white/80 backdrop-blur-xl border-b border-gray-200/50 sticky top-0 z-10">
+        <div className="max-w-md mx-auto px-6 py-4 flex items-center justify-between">
           <button
-            onClick={() => navigate(-1)}
-            className="p-2 rounded-full hover:bg-gray-100 transition-colors"
+            onClick={() => navigate("/mypage")}
+            className="p-2 rounded-full hover:bg-gray-100/80 transition-colors"
           >
-            <ArrowLeft className="w-5 h-5 text-gray-600" />
+            <ArrowLeft className="w-5 h-5 text-gray-700" />
           </button>
           <h1 className="text-lg font-semibold text-gray-900">결제 수단</h1>
           <div className="w-9"></div>
         </div>
       </div>
 
-      <div className="px-4 py-6 space-y-6">
+      <div className="max-w-md mx-auto px-6 py-8 space-y-6">
         {/* 결제 수단 섹션 */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -98,7 +98,7 @@ export default function PaymentPage() {
             <h2 className="text-lg font-semibold text-gray-900">결제 수단</h2>
             <button
               onClick={handleAddPaymentMethod}
-              className="flex items-center space-x-1 text-[#0A5C2B] hover:text-[#0A5C2B]/80 transition-colors"
+              className="flex items-center space-x-1 text-[#0A5C2B] hover:text-[#0A5C2B]/80 transition-colors px-3 py-1.5 rounded-full hover:bg-[#0A5C2B]/10"
             >
               <Plus className="w-4 h-4" />
               <span className="text-sm font-medium">추가</span>
@@ -112,12 +112,12 @@ export default function PaymentPage() {
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.3, delay: index * 0.1 }}
-                className="bg-white rounded-2xl p-4 shadow-sm border border-gray-100"
+                className="bg-white/70 backdrop-blur-xl rounded-3xl p-6 shadow-lg border border-white/20"
               >
                 <div className="flex items-center justify-between">
                   <div className="flex items-center space-x-3">
-                    <div className="p-2 bg-gray-100 rounded-lg">
-                      <CreditCard className="w-5 h-5 text-gray-600" />
+                    <div className="p-3 bg-gradient-to-br from-green-100 to-emerald-100 rounded-2xl">
+                      <CreditCard className="w-5 h-5 text-[#0A5C2B]" />
                     </div>
                     <div>
                       <div className="flex items-center space-x-2">
@@ -125,7 +125,7 @@ export default function PaymentPage() {
                           {method.name}
                         </h3>
                         {method.isDefault && (
-                          <span className="px-2 py-1 bg-[#0A5C2B] text-white text-xs font-medium rounded-full">
+                          <span className="px-3 py-1 bg-[#0A5C2B] text-white text-xs font-medium rounded-full">
                             기본
                           </span>
                         )}
@@ -174,7 +174,7 @@ export default function PaymentPage() {
           <h2 className="text-lg font-semibold text-gray-900 mb-4">
             결제 내역
           </h2>
-          <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+          <div className="bg-white/70 backdrop-blur-xl rounded-3xl shadow-lg border border-white/20 overflow-hidden">
             {billingHistory.map((item, index) => (
               <motion.div
                 key={item.id}
@@ -209,23 +209,23 @@ export default function PaymentPage() {
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.5, delay: 0.3 }}
-          className="bg-white rounded-2xl p-4 shadow-sm border border-gray-100"
+          className="bg-white/70 backdrop-blur-xl rounded-3xl p-6 shadow-lg border border-white/20"
         >
           <h2 className="text-lg font-semibold text-gray-900 mb-4">
             멤버십 정보
           </h2>
           <div className="space-y-3">
             <div className="flex items-center justify-between">
-              <span className="text-gray-700">현재 멤버십</span>
-              <span className="text-[#0A5C2B] font-medium">프리미엄</span>
+              <span className="text-gray-600 font-medium">현재 멤버십</span>
+              <span className="text-[#0A5C2B] font-semibold">프리미엄</span>
             </div>
             <div className="flex items-center justify-between">
-              <span className="text-gray-700">월 요금</span>
-              <span className="font-medium">₩29,900</span>
+              <span className="text-gray-600 font-medium">월 요금</span>
+              <span className="font-semibold">₩29,900</span>
             </div>
             <div className="flex items-center justify-between">
-              <span className="text-gray-700">다음 결제일</span>
-              <span className="font-medium">2024년 2월 15일</span>
+              <span className="text-gray-600 font-medium">다음 결제일</span>
+              <span className="font-semibold">2024년 2월 15일</span>
             </div>
           </div>
         </motion.div>
diff --git a/src/pages/myPage/profile.tsx b/src/pages/myPage/profile.tsx
index 92c460d..be990be 100644
--- a/src/pages/myPage/profile.tsx
+++ b/src/pages/myPage/profile.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { motion } from "framer-motion";
-import { ArrowLeft, Edit3, Save, X, Camera } from "lucide-react";
+import { ArrowLeft, Edit3, Save, X } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 
 export default function ProfilePage() {
@@ -10,8 +10,6 @@ export default function ProfilePage() {
     name: "홍길동",
     email: "hong@example.com",
     phone: "010-1234-5678",
-    avatar:
-      "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face",
     membership: "프리미엄",
     joinDate: "2024년 1월",
   });
@@ -37,49 +35,33 @@ export default function ProfilePage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      {/* 헤더 */}
-      <div className="bg-white border-b border-gray-200">
-        <div className="px-4 py-4 flex items-center justify-between">
+    <div className="min-h-screen bg-gray-50/50">
+      {/* 헤더 - 모바일에서만 표시 */}
+      <div className="lg:hidden bg-white/80 backdrop-blur-xl border-b border-gray-200/50 sticky top-0 z-10">
+        <div className="max-w-md mx-auto px-6 py-4 flex items-center justify-between">
           <button
-            onClick={() => navigate(-1)}
-            className="p-2 rounded-full hover:bg-gray-100 transition-colors"
+            onClick={() => navigate("/mypage")}
+            className="p-2 rounded-full hover:bg-gray-100/80 transition-colors"
           >
-            <ArrowLeft className="w-5 h-5 text-gray-600" />
+            <ArrowLeft className="w-5 h-5 text-gray-700" />
           </button>
-          <h1 className="text-lg font-semibold text-gray-900">개인정보 관리</h1>
+          <h1 className="text-lg font-semibold text-gray-900">프로필</h1>
           <div className="w-9"></div>
         </div>
       </div>
 
-      <div className="px-4 py-6 space-y-6">
-        {/* 프로필 이미지 섹션 */}
+      <div className="max-w-md mx-auto px-6 py-8 space-y-6">
+        {/* 사용자 정보 헤더 */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.5 }}
-          className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100"
+          className="text-center space-y-3"
         >
-          <div className="flex flex-col items-center space-y-4">
-            <div className="relative">
-              <img
-                src={user.avatar}
-                alt={user.name}
-                className="w-24 h-24 rounded-full object-cover border-4 border-gray-100"
-              />
-              <button className="absolute -bottom-2 -right-2 bg-[#0A5C2B] text-white p-2 rounded-full shadow-lg hover:bg-[#0A5C2B]/90 transition-colors">
-                <Camera className="w-4 h-4" />
-              </button>
-            </div>
-            <div className="text-center">
-              <h2 className="text-xl font-semibold text-gray-900">
-                {user.name}
-              </h2>
-              <span className="px-3 py-1 bg-[#0A5C2B] text-white text-sm font-medium rounded-full">
-                {user.membership}
-              </span>
-            </div>
-          </div>
+          <h2 className="text-2xl font-semibold text-gray-900">{user.name}</h2>
+          <span className="inline-flex items-center px-4 py-1.5 bg-gradient-to-r from-blue-500 to-purple-500 text-white text-sm font-medium rounded-full shadow-sm">
+            {user.membership}
+          </span>
         </motion.div>
 
         {/* 개인정보 폼 */}
@@ -87,14 +69,14 @@ export default function ProfilePage() {
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.5, delay: 0.1 }}
-          className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden"
+          className="bg-white/70 backdrop-blur-xl rounded-3xl shadow-lg border border-white/20 overflow-hidden"
         >
-          <div className="p-4 border-b border-gray-100 flex items-center justify-between">
-            <h3 className="font-semibold text-gray-900">기본 정보</h3>
+          <div className="p-6 border-b border-gray-200/30 flex items-center justify-between">
+            <h3 className="font-semibold text-gray-900 text-lg">기본 정보</h3>
             {!isEditing ? (
               <button
                 onClick={() => setIsEditing(true)}
-                className="flex items-center space-x-1 text-[#0A5C2B] hover:text-[#0A5C2B]/80 transition-colors"
+                className="flex items-center space-x-1 text-blue-500 hover:text-blue-600 transition-colors px-3 py-1.5 rounded-full hover:bg-blue-50"
               >
                 <Edit3 className="w-4 h-4" />
                 <span className="text-sm font-medium">수정</span>
@@ -103,14 +85,14 @@ export default function ProfilePage() {
               <div className="flex items-center space-x-2">
                 <button
                   onClick={handleCancel}
-                  className="flex items-center space-x-1 text-gray-600 hover:text-gray-800 transition-colors"
+                  className="flex items-center space-x-1 text-gray-500 hover:text-gray-700 transition-colors px-3 py-1.5 rounded-full hover:bg-gray-50"
                 >
                   <X className="w-4 h-4" />
                   <span className="text-sm font-medium">취소</span>
                 </button>
                 <button
                   onClick={handleSave}
-                  className="flex items-center space-x-1 text-[#0A5C2B] hover:text-[#0A5C2B]/80 transition-colors"
+                  className="flex items-center space-x-1 text-blue-500 hover:text-blue-600 transition-colors px-3 py-1.5 rounded-full hover:bg-blue-50"
                 >
                   <Save className="w-4 h-4" />
                   <span className="text-sm font-medium">저장</span>
@@ -119,10 +101,10 @@ export default function ProfilePage() {
             )}
           </div>
 
-          <div className="p-4 space-y-4">
+          <div className="p-6 space-y-6">
             {/* 이름 */}
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
+            <div className="space-y-2">
+              <label className="block text-sm font-medium text-gray-600">
                 이름
               </label>
               {isEditing ? (
@@ -132,16 +114,16 @@ export default function ProfilePage() {
                   onChange={(e) =>
                     setFormData({ ...formData, name: e.target.value })
                   }
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#0A5C2B]/20 focus:border-[#0A5C2B]"
+                  className="w-full px-4 py-3 bg-gray-50/50 border border-gray-200/50 rounded-2xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 focus:bg-white transition-all"
                 />
               ) : (
-                <p className="text-gray-900">{user.name}</p>
+                <p className="text-gray-900 text-lg py-2">{user.name}</p>
               )}
             </div>
 
             {/* 이메일 */}
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
+            <div className="space-y-2">
+              <label className="block text-sm font-medium text-gray-600">
                 이메일
               </label>
               {isEditing ? (
@@ -151,16 +133,16 @@ export default function ProfilePage() {
                   onChange={(e) =>
                     setFormData({ ...formData, email: e.target.value })
                   }
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#0A5C2B]/20 focus:border-[#0A5C2B]"
+                  className="w-full px-4 py-3 bg-gray-50/50 border border-gray-200/50 rounded-2xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 focus:bg-white transition-all"
                 />
               ) : (
-                <p className="text-gray-900">{user.email}</p>
+                <p className="text-gray-900 text-lg py-2">{user.email}</p>
               )}
             </div>
 
             {/* 전화번호 */}
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
+            <div className="space-y-2">
+              <label className="block text-sm font-medium text-gray-600">
                 전화번호
               </label>
               {isEditing ? (
@@ -170,19 +152,19 @@ export default function ProfilePage() {
                   onChange={(e) =>
                     setFormData({ ...formData, phone: e.target.value })
                   }
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#0A5C2B]/20 focus:border-[#0A5C2B]"
+                  className="w-full px-4 py-3 bg-gray-50/50 border border-gray-200/50 rounded-2xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 focus:bg-white transition-all"
                 />
               ) : (
-                <p className="text-gray-900">{user.phone}</p>
+                <p className="text-gray-900 text-lg py-2">{user.phone}</p>
               )}
             </div>
 
             {/* 가입일 (읽기 전용) */}
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
+            <div className="space-y-2">
+              <label className="block text-sm font-medium text-gray-600">
                 가입일
               </label>
-              <p className="text-gray-900">{user.joinDate}</p>
+              <p className="text-gray-900 text-lg py-2">{user.joinDate}</p>
             </div>
           </div>
         </motion.div>
@@ -192,21 +174,21 @@ export default function ProfilePage() {
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.5, delay: 0.2 }}
-          className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden"
+          className="bg-white/70 backdrop-blur-xl rounded-3xl shadow-lg border border-white/20 overflow-hidden"
         >
-          <div className="p-4 border-b border-gray-100">
-            <h3 className="font-semibold text-gray-900">계정 정보</h3>
+          <div className="p-6 border-b border-gray-200/30">
+            <h3 className="font-semibold text-gray-900 text-lg">계정 정보</h3>
           </div>
-          <div className="p-4 space-y-4">
+          <div className="p-6 space-y-6">
             <div className="flex items-center justify-between">
-              <span className="text-gray-700">멤버십 등급</span>
-              <span className="text-[#0A5C2B] font-medium">
+              <span className="text-gray-600 font-medium">멤버십 등급</span>
+              <span className="text-blue-500 font-semibold">
                 {user.membership}
               </span>
             </div>
             <div className="flex items-center justify-between">
-              <span className="text-gray-700">계정 상태</span>
-              <span className="text-green-600 font-medium">활성</span>
+              <span className="text-gray-600 font-medium">계정 상태</span>
+              <span className="text-green-500 font-semibold">활성</span>
             </div>
           </div>
         </motion.div>
diff --git a/src/pages/myPage/security.tsx b/src/pages/myPage/security.tsx
new file mode 100644
index 0000000..0b3b0f7
--- /dev/null
+++ b/src/pages/myPage/security.tsx
@@ -0,0 +1,338 @@
+import { useState } from "react";
+import { motion } from "framer-motion";
+import {
+  ArrowLeft,
+  Shield,
+  Lock,
+  Eye,
+  EyeOff,
+  Smartphone,
+  CheckCircle,
+  AlertTriangle,
+} from "lucide-react";
+import { useNavigate } from "react-router-dom";
+
+export default function SecurityPage() {
+  const navigate = useNavigate();
+  const [showCurrentPassword, setShowCurrentPassword] = useState(false);
+  const [showNewPassword, setShowNewPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+  const [passwords, setPasswords] = useState({
+    current: "",
+    new: "",
+    confirm: "",
+  });
+
+  const [securitySettings, setSecuritySettings] = useState({
+    twoFactorAuth: false,
+    biometricLogin: true,
+    sessionTimeout: "30분",
+    loginAlerts: true,
+  });
+
+  const [recentActivity] = useState([
+    {
+      id: 1,
+      action: "로그인",
+      location: "서울, 대한민국",
+      device: "iPhone 15 Pro",
+      time: "2분 전",
+      status: "success",
+    },
+    {
+      id: 2,
+      action: "비밀번호 변경",
+      location: "서울, 대한민국",
+      device: "MacBook Pro",
+      time: "1일 전",
+      status: "success",
+    },
+    {
+      id: 3,
+      action: "로그인 시도",
+      location: "부산, 대한민국",
+      device: "Unknown Device",
+      time: "3일 전",
+      status: "failed",
+    },
+  ]);
+
+  const handlePasswordChange = (field: string, value: string) => {
+    setPasswords((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleSecuritySettingChange = (key: string) => {
+    setSecuritySettings((prev) => ({
+      ...prev,
+      [key]: !prev[key as keyof typeof prev],
+    }));
+  };
+
+  const handleChangePassword = () => {
+    if (passwords.new === passwords.confirm) {
+      console.log("비밀번호 변경:", passwords);
+      setPasswords({ current: "", new: "", confirm: "" });
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    return status === "success" ? (
+      <CheckCircle className="w-4 h-4 text-green-500" />
+    ) : (
+      <AlertTriangle className="w-4 h-4 text-red-500" />
+    );
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50/50">
+      {/* 헤더 - 모바일에서만 표시 */}
+      <div className="lg:hidden bg-white/80 backdrop-blur-xl border-b border-gray-200/50 sticky top-0 z-10">
+        <div className="max-w-md mx-auto px-6 py-4 flex items-center justify-between">
+          <button
+            onClick={() => navigate("/mypage")}
+            className="p-2 rounded-full hover:bg-gray-100/80 transition-colors"
+          >
+            <ArrowLeft className="w-5 h-5 text-gray-700" />
+          </button>
+          <h1 className="text-lg font-semibold text-gray-900">보안</h1>
+          <div className="w-9"></div>
+        </div>
+      </div>
+
+      <div className="max-w-md mx-auto px-6 py-8 space-y-6">
+        {/* 보안 상태 */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="bg-white/70 backdrop-blur-xl rounded-3xl p-6 shadow-lg border border-white/20"
+        >
+          <div className="flex items-center space-x-3 mb-4">
+            <div className="p-3 bg-gradient-to-br from-green-100 to-emerald-100 rounded-2xl">
+              <Shield className="w-6 h-6 text-[#0A5C2B]" />
+            </div>
+            <div>
+              <h2 className="text-lg font-semibold text-gray-900">보안 상태</h2>
+              <p className="text-sm text-gray-600">
+                계정이 안전하게 보호되고 있습니다
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center space-x-2">
+            <CheckCircle className="w-5 h-5 text-green-500" />
+            <span className="text-green-600 font-medium">보안 강도: 높음</span>
+          </div>
+        </motion.div>
+
+        {/* 비밀번호 변경 */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.1 }}
+          className="bg-white/70 backdrop-blur-xl rounded-3xl p-6 shadow-lg border border-white/20"
+        >
+          <div className="flex items-center space-x-3 mb-6">
+            <div className="p-3 bg-gradient-to-br from-green-100 to-emerald-100 rounded-2xl">
+              <Lock className="w-6 h-6 text-[#0A5C2B]" />
+            </div>
+            <div>
+              <h2 className="text-lg font-semibold text-gray-900">
+                비밀번호 변경
+              </h2>
+              <p className="text-sm text-gray-600">
+                정기적으로 비밀번호를 변경하세요
+              </p>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                현재 비밀번호
+              </label>
+              <div className="relative">
+                <input
+                  type={showCurrentPassword ? "text" : "password"}
+                  value={passwords.current}
+                  onChange={(e) =>
+                    handlePasswordChange("current", e.target.value)
+                  }
+                  className="w-full px-4 py-3 pr-12 bg-gray-50/50 border border-gray-200/50 rounded-2xl focus:outline-none focus:ring-2 focus:ring-[#0A5C2B]/20 focus:border-[#0A5C2B] focus:bg-white transition-all"
+                />
+                <button
+                  onClick={() => setShowCurrentPassword(!showCurrentPassword)}
+                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                >
+                  {showCurrentPassword ? (
+                    <EyeOff className="w-5 h-5" />
+                  ) : (
+                    <Eye className="w-5 h-5" />
+                  )}
+                </button>
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                새 비밀번호
+              </label>
+              <div className="relative">
+                <input
+                  type={showNewPassword ? "text" : "password"}
+                  value={passwords.new}
+                  onChange={(e) => handlePasswordChange("new", e.target.value)}
+                  className="w-full px-4 py-3 pr-12 bg-gray-50/50 border border-gray-200/50 rounded-2xl focus:outline-none focus:ring-2 focus:ring-[#0A5C2B]/20 focus:border-[#0A5C2B] focus:bg-white transition-all"
+                />
+                <button
+                  onClick={() => setShowNewPassword(!showNewPassword)}
+                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                >
+                  {showNewPassword ? (
+                    <EyeOff className="w-5 h-5" />
+                  ) : (
+                    <Eye className="w-5 h-5" />
+                  )}
+                </button>
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                새 비밀번호 확인
+              </label>
+              <div className="relative">
+                <input
+                  type={showConfirmPassword ? "text" : "password"}
+                  value={passwords.confirm}
+                  onChange={(e) =>
+                    handlePasswordChange("confirm", e.target.value)
+                  }
+                  className="w-full px-4 py-3 pr-12 bg-gray-50/50 border border-gray-200/50 rounded-2xl focus:outline-none focus:ring-2 focus:ring-[#0A5C2B]/20 focus:border-[#0A5C2B] focus:bg-white transition-all"
+                />
+                <button
+                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                >
+                  {showConfirmPassword ? (
+                    <EyeOff className="w-5 h-5" />
+                  ) : (
+                    <Eye className="w-5 h-5" />
+                  )}
+                </button>
+              </div>
+            </div>
+
+            <button
+              onClick={handleChangePassword}
+              disabled={
+                !passwords.current || !passwords.new || !passwords.confirm
+              }
+              className="w-full bg-[#0A5C2B] text-white py-3 px-4 rounded-2xl font-medium hover:bg-[#0A5C2B]/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              비밀번호 변경
+            </button>
+          </div>
+        </motion.div>
+
+        {/* 보안 설정 */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+          className="bg-white/70 backdrop-blur-xl rounded-3xl p-6 shadow-lg border border-white/20"
+        >
+          <h2 className="text-lg font-semibold text-gray-900 mb-6">
+            보안 설정
+          </h2>
+          <div className="space-y-4">
+            {Object.entries(securitySettings).map(([key, value]) => (
+              <div key={key} className="flex items-center justify-between">
+                <div className="flex items-center space-x-3">
+                  <div className="p-2 bg-gradient-to-br from-green-100 to-emerald-100 rounded-xl">
+                    <Smartphone className="w-4 h-4 text-[#0A5C2B]" />
+                  </div>
+                  <span className="text-gray-700 font-medium">
+                    {key === "twoFactorAuth" && "2단계 인증"}
+                    {key === "biometricLogin" && "생체 인증"}
+                    {key === "sessionTimeout" && "세션 타임아웃"}
+                    {key === "loginAlerts" && "로그인 알림"}
+                  </span>
+                </div>
+                {key === "sessionTimeout" ? (
+                  <select
+                    value={value}
+                    onChange={(e) =>
+                      setSecuritySettings((prev) => ({
+                        ...prev,
+                        [key]: e.target.value,
+                      }))
+                    }
+                    className="px-3 py-1 bg-gray-50 border border-gray-200 rounded-lg text-sm"
+                  >
+                    <option value="15분">15분</option>
+                    <option value="30분">30분</option>
+                    <option value="1시간">1시간</option>
+                    <option value="24시간">24시간</option>
+                  </select>
+                ) : (
+                  <button
+                    onClick={() => handleSecuritySettingChange(key)}
+                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                      value ? "bg-[#0A5C2B]" : "bg-gray-200"
+                    }`}
+                  >
+                    <span
+                      className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                        value ? "translate-x-6" : "translate-x-1"
+                      }`}
+                    />
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        </motion.div>
+
+        {/* 최근 활동 */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.3 }}
+          className="bg-white/70 backdrop-blur-xl rounded-3xl p-6 shadow-lg border border-white/20"
+        >
+          <h2 className="text-lg font-semibold text-gray-900 mb-6">
+            최근 활동
+          </h2>
+          <div className="space-y-4">
+            {recentActivity.map((activity, index) => (
+              <motion.div
+                key={activity.id}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.3, delay: index * 0.1 }}
+                className="flex items-center space-x-4 p-4 bg-gray-50/50 rounded-2xl"
+              >
+                <div className="flex-shrink-0">
+                  {getStatusIcon(activity.status)}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between">
+                    <h3 className="font-medium text-gray-900">
+                      {activity.action}
+                    </h3>
+                    <span className="text-xs text-gray-500">
+                      {activity.time}
+                    </span>
+                  </div>
+                  <p className="text-sm text-gray-600">{activity.device}</p>
+                  <p className="text-xs text-gray-500">{activity.location}</p>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/myPage/support.tsx b/src/pages/myPage/support.tsx
new file mode 100644
index 0000000..28da011
--- /dev/null
+++ b/src/pages/myPage/support.tsx
@@ -0,0 +1,228 @@
+import { useState } from "react";
+import { motion } from "framer-motion";
+import {
+  ArrowLeft,
+  MessageCircle,
+  Mail,
+  Phone,
+  HelpCircle,
+  FileText,
+  Send,
+  ChevronRight,
+} from "lucide-react";
+import { useNavigate } from "react-router-dom";
+
+export default function SupportPage() {
+  const navigate = useNavigate();
+  const [selectedCategory, setSelectedCategory] = useState("");
+  const [message, setMessage] = useState("");
+
+  const faqItems = [
+    {
+      id: 1,
+      question: "계정을 어떻게 삭제하나요?",
+      answer: "설정 > 계정 관리 > 계정 삭제에서 계정을 삭제할 수 있습니다.",
+    },
+    {
+      id: 2,
+      question: "비밀번호를 잊어버렸어요",
+      answer:
+        "로그인 화면에서 '비밀번호 찾기'를 클릭하여 이메일로 재설정 링크를 받으세요.",
+    },
+    {
+      id: 3,
+      question: "앱이 제대로 작동하지 않아요",
+      answer:
+        "앱을 완전히 종료한 후 다시 시작해보세요. 문제가 지속되면 고객지원팀에 문의해주세요.",
+    },
+    {
+      id: 4,
+      question: "결제 관련 문의",
+      answer:
+        "결제 수단 페이지에서 결제 내역을 확인하거나, 고객지원팀으로 직접 문의해주세요.",
+    },
+  ];
+
+  const contactMethods = [
+    {
+      icon: <MessageCircle className="w-6 h-6 text-[#0A5C2B]" />,
+      title: "채팅 지원",
+      description: "실시간 채팅으로 빠른 도움을 받으세요",
+      action: "채팅 시작",
+    },
+    {
+      icon: <Mail className="w-6 h-6 text-[#0A5C2B]" />,
+      title: "이메일 지원",
+      description: "support@ballfin.com",
+      action: "이메일 보내기",
+    },
+    {
+      icon: <Phone className="w-6 h-6 text-[#0A5C2B]" />,
+      title: "전화 지원",
+      description: "1588-0000 (평일 9:00-18:00)",
+      action: "전화 걸기",
+    },
+  ];
+
+  const handleSendMessage = () => {
+    if (message.trim()) {
+      console.log("메시지 전송:", message);
+      setMessage("");
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50/50">
+      {/* 헤더 - 모바일에서만 표시 */}
+      <div className="lg:hidden bg-white/80 backdrop-blur-xl border-b border-gray-200/50 sticky top-0 z-10">
+        <div className="max-w-md mx-auto px-6 py-4 flex items-center justify-between">
+          <button
+            onClick={() => navigate("/mypage")}
+            className="p-2 rounded-full hover:bg-gray-100/80 transition-colors"
+          >
+            <ArrowLeft className="w-5 h-5 text-gray-700" />
+          </button>
+          <h1 className="text-lg font-semibold text-gray-900">고객지원</h1>
+          <div className="w-9"></div>
+        </div>
+      </div>
+
+      <div className="max-w-md mx-auto px-6 py-8 space-y-6">
+        {/* 문의하기 */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="bg-white/70 backdrop-blur-xl rounded-3xl p-6 shadow-lg border border-white/20"
+        >
+          <div className="flex items-center space-x-3 mb-6">
+            <div className="p-3 bg-gradient-to-br from-green-100 to-emerald-100 rounded-2xl">
+              <HelpCircle className="w-6 h-6 text-[#0A5C2B]" />
+            </div>
+            <div>
+              <h2 className="text-lg font-semibold text-gray-900">문의하기</h2>
+              <p className="text-sm text-gray-600">
+                궁금한 점을 빠르게 해결해드립니다
+              </p>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                문의 유형
+              </label>
+              <select
+                value={selectedCategory}
+                onChange={(e) => setSelectedCategory(e.target.value)}
+                className="w-full px-4 py-3 bg-gray-50/50 border border-gray-200/50 rounded-2xl focus:outline-none focus:ring-2 focus:ring-[#0A5C2B]/20 focus:border-[#0A5C2B] focus:bg-white transition-all"
+              >
+                <option value="">문의 유형을 선택하세요</option>
+                <option value="account">계정 관련</option>
+                <option value="payment">결제 관련</option>
+                <option value="technical">기술적 문제</option>
+                <option value="feature">기능 문의</option>
+                <option value="other">기타</option>
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                문의 내용
+              </label>
+              <textarea
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                placeholder="문의하실 내용을 자세히 적어주세요..."
+                rows={4}
+                className="w-full px-4 py-3 bg-gray-50/50 border border-gray-200/50 rounded-2xl focus:outline-none focus:ring-2 focus:ring-[#0A5C2B]/20 focus:border-[#0A5C2B] focus:bg-white transition-all resize-none"
+              />
+            </div>
+
+            <button
+              onClick={handleSendMessage}
+              disabled={!message.trim() || !selectedCategory}
+              className="w-full flex items-center justify-center space-x-2 bg-[#0A5C2B] text-white py-3 px-4 rounded-2xl font-medium hover:bg-[#0A5C2B]/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <Send className="w-4 h-4" />
+              <span>문의 보내기</span>
+            </button>
+          </div>
+        </motion.div>
+
+        {/* 연락처 */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.1 }}
+          className="space-y-4"
+        >
+          <h2 className="text-lg font-semibold text-gray-900">
+            다른 방법으로 연락하기
+          </h2>
+          {contactMethods.map((method, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.3, delay: index * 0.1 }}
+              className="bg-white/70 backdrop-blur-xl rounded-3xl p-6 shadow-lg border border-white/20"
+            >
+              <div className="flex items-center space-x-4">
+                <div className="p-3 bg-gradient-to-br from-green-100 to-emerald-100 rounded-2xl">
+                  {method.icon}
+                </div>
+                <div className="flex-1">
+                  <h3 className="font-semibold text-gray-900 mb-1">
+                    {method.title}
+                  </h3>
+                  <p className="text-sm text-gray-600">{method.description}</p>
+                </div>
+                <button className="p-2 text-gray-400 hover:text-[#0A5C2B] hover:bg-[#0A5C2B]/10 rounded-full transition-colors">
+                  <ChevronRight className="w-5 h-5" />
+                </button>
+              </div>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* 자주 묻는 질문 */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+          className="bg-white/70 backdrop-blur-xl rounded-3xl p-6 shadow-lg border border-white/20"
+        >
+          <div className="flex items-center space-x-3 mb-6">
+            <div className="p-3 bg-gradient-to-br from-green-100 to-emerald-100 rounded-2xl">
+              <FileText className="w-6 h-6 text-[#0A5C2B]" />
+            </div>
+            <div>
+              <h2 className="text-lg font-semibold text-gray-900">
+                자주 묻는 질문
+              </h2>
+              <p className="text-sm text-gray-600">빠른 답변을 확인해보세요</p>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            {faqItems.map((item, index) => (
+              <motion.div
+                key={item.id}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.3, delay: index * 0.1 }}
+                className="border border-gray-200/50 rounded-2xl p-4 hover:bg-gray-50/50 transition-colors"
+              >
+                <h3 className="font-medium text-gray-900 mb-2">
+                  {item.question}
+                </h3>
+                <p className="text-sm text-gray-600">{item.answer}</p>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}