diff --git a/.vscode/settings.json b/.vscode/settings.json
index 759123b..2a03361 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -24,6 +24,7 @@
   "discord.enabled": true,
   "chat.tools.terminal.autoApprove": {
     "npx jest": true,
-    "npm run lint": true
+    "npm run lint": true,
+    "npx tec --noEmit": true
   }
 }
diff --git a/__tests__/kkuko/KkukoHome.test.tsx b/__tests__/kkuko/KkukoHome.test.tsx
index 74e8343..7992e44 100644
--- a/__tests__/kkuko/KkukoHome.test.tsx
+++ b/__tests__/kkuko/KkukoHome.test.tsx
@@ -26,6 +26,6 @@ describe('KkukoHome', () => {
         expect(screen.getByText('각 모드별로 승리가 많은 유저들의 랭킹을 확인할 수 있습니다.')).toBeInTheDocument();
         
         const rankingLink = screen.getByRole('link', { name: /구경하기/i });
-        expect(rankingLink).toHaveAttribute('href', '/kkuko/ranking');
+        expect(rankingLink).toHaveAttribute('href', '/kkuko/ranking?mode=ALL');
     });
 });
diff --git a/__tests__/kkuko/profile/hooks/useKkukoProfile.test.ts b/__tests__/kkuko/profile/hooks/useKkukoProfile.test.ts
deleted file mode 100644
index 6e20ec3..0000000
--- a/__tests__/kkuko/profile/hooks/useKkukoProfile.test.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { renderHook, act, waitFor } from '@testing-library/react';
-import { useKkukoProfile } from '@/app/kkuko/profile/hooks/useKkukoProfile';
-import * as api from '@/app/kkuko/shared/lib/api';
-
-// Mock API
-jest.mock('@/app/kkuko/shared/lib/api', () => ({
-    fetchModes: jest.fn(),
-    fetchTotalUsers: jest.fn(),
-    fetchProfile: jest.fn(),
-    fetchItems: jest.fn(),
-    fetchExpRank: jest.fn()
-}));
-
-// Mock useRecentSearches
-const mockSaveToRecentSearches = jest.fn();
-const mockRemoveFromRecentSearches = jest.fn();
-jest.mock('@/app/kkuko/profile/hooks/useRecentSearches', () => ({
-    useRecentSearches: jest.fn(() => ({
-        recentSearches: [],
-        saveToRecentSearches: mockSaveToRecentSearches,
-        removeFromRecentSearches: mockRemoveFromRecentSearches
-    }))
-}));
-
-describe('useKkukoProfile', () => {
-    beforeEach(() => {
-        jest.clearAllMocks();
-        (api.fetchModes as jest.Mock).mockResolvedValue({ data: { status: 200, data: [] } });
-        (api.fetchTotalUsers as jest.Mock).mockResolvedValue({ data: { status: 200, data: { totalUsers: 100 } } });
-    });
-
-    it('should fetch modes and total users on mount', async () => {
-        const { result } = renderHook(() => useKkukoProfile());
-        
-        await waitFor(() => {
-             expect(api.fetchModes).toHaveBeenCalled();
-             expect(api.fetchTotalUsers).toHaveBeenCalled();
-             expect(result.current.totalUserCount).toBe(100);
-        });
-    });
-
-    it('should fetch profile successfully', async () => {
-        const mockProfileData = {
-            user: { id: 'test', nickname: 'Test', level: 1, exp: 0, exordial: '' },
-            equipment: [{ itemId: 'item1', slot: 'head' }],
-            presence: { updatedAt: new Date().toISOString() }
-        };
-        const mockItemsData = [{ id: 'item1', name: 'Item 1' }];
-
-        (api.fetchProfile as jest.Mock).mockResolvedValue({ status: 200, data: { status: 200, data: mockProfileData } });
-        (api.fetchItems as jest.Mock).mockResolvedValue({ data: { status: 200, data: mockItemsData } });
-        (api.fetchExpRank as jest.Mock).mockResolvedValue({ data: { rank: 5 } });
-
-        const { result } = renderHook(() => useKkukoProfile());
-
-        await act(async () => {
-            await result.current.fetchProfile('Test', 'nick');
-        });
-
-        expect(result.current.profileData).toEqual(mockProfileData);
-        expect(result.current.itemsData).toEqual(mockItemsData);
-        expect(result.current.expRank).toBe(5);
-        expect(mockSaveToRecentSearches).toHaveBeenCalledWith('Test', 'nick');
-    });
-
-    it('should handle profile not found (status 404)', async () => {
-         (api.fetchProfile as jest.Mock).mockResolvedValue({ status: 404 });
-         
-         const { result } = renderHook(() => useKkukoProfile());
-
-         await act(async () => {
-            await result.current.fetchProfile('Unknown', 'nick');
-        });
-
-        expect(result.current.error).toBe('등록된 유저가 아닙니다.');
-        expect(result.current.profileData).toBeNull();
-    });
-
-    it('should handle API errors', async () => {
-        (api.fetchProfile as jest.Mock).mockRejectedValue(new Error('Network Error'));
-
-        const { result } = renderHook(() => useKkukoProfile());
-
-        await act(async () => {
-            await result.current.fetchProfile('Test', 'nick');
-        });
-
-        expect(result.current.error).toBe('프로필을 불러오는데 실패했습니다.');
-    });
-});
diff --git a/__tests__/kkuko/profile/hooks/useKkukoProfile.test.tsx b/__tests__/kkuko/profile/hooks/useKkukoProfile.test.tsx
new file mode 100644
index 0000000..5f202a8
--- /dev/null
+++ b/__tests__/kkuko/profile/hooks/useKkukoProfile.test.tsx
@@ -0,0 +1,118 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { useKkukoProfile } from '@/app/kkuko/profile/hooks/useKkukoProfile';
+import * as api from '@/app/kkuko/shared/lib/api';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React, { ReactNode } from 'react';
+
+// Mock API
+jest.mock('@/app/kkuko/shared/lib/api', () => ({
+    fetchModes: jest.fn(),
+    fetchTotalUsers: jest.fn(),
+    fetchProfile: jest.fn(),
+    fetchProfileByNickname: jest.fn(),
+    fetchItems: jest.fn(),
+    fetchExpRank: jest.fn()
+}));
+
+// Mock useRecentSearches
+const mockSaveToRecentSearches = jest.fn();
+const mockRemoveFromRecentSearches = jest.fn();
+jest.mock('@/app/kkuko/profile/hooks/useRecentSearches', () => ({
+    useRecentSearches: jest.fn(() => ({
+        recentSearches: [],
+        saveToRecentSearches: mockSaveToRecentSearches,
+        removeFromRecentSearches: mockRemoveFromRecentSearches
+    }))
+}));
+
+const createWrapper = () => {
+    const queryClient = new QueryClient({
+        defaultOptions: {
+            queries: {
+                retry: false,
+            },
+        },
+    });
+    return ({ children }: { children: ReactNode }) => (
+        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+};
+
+describe('useKkukoProfile', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        (api.fetchModes as jest.Mock).mockResolvedValue({ data: { status: 200, data: [] } });
+        (api.fetchTotalUsers as jest.Mock).mockResolvedValue({ data: { status: 200, data: { totalUsers: 100 } } });
+    });
+
+    it('should fetch modes and total users on mount', async () => {
+        const { result } = renderHook(() => useKkukoProfile(), { wrapper: createWrapper() });
+        
+        await waitFor(() => {
+             expect(api.fetchModes).toHaveBeenCalled();
+             expect(api.fetchTotalUsers).toHaveBeenCalled();
+             expect(result.current.totalUserCount).toBe(100);
+        });
+    });
+
+    it('should fetch profile successfully', async () => {
+        const mockProfileData = {
+            user: { id: 'test', nickname: 'Test', level: 1, exp: 0, exordial: '' },
+            equipment: [{ itemId: 'item1', slot: 'head' }],
+            presence: { updatedAt: new Date().toISOString() }
+        };
+        const mockItemsData = [{ id: 'item1', name: 'Item 1' }];
+
+        // Mock fetchProfileByNicknameApi not fetchProfile because default is 'nick'
+        (api.fetchProfileByNickname as jest.Mock).mockResolvedValue({ data: { status: 200, data: mockProfileData } });
+        (api.fetchProfile as jest.Mock).mockResolvedValue({ data: { status: 200, data: mockProfileData } });
+        (api.fetchItems as jest.Mock).mockResolvedValue({ data: { status: 200, data: mockItemsData } });
+        (api.fetchExpRank as jest.Mock).mockResolvedValue({ data: { rank: 5 } });
+
+        const { result } = renderHook(() => useKkukoProfile(), { wrapper: createWrapper() });
+
+        act(() => {
+            result.current.fetchProfile('Test', 'nick');
+        });
+
+        await waitFor(() => {
+            expect(result.current.profileData).toEqual(mockProfileData);
+            expect(result.current.itemsData).toEqual(mockItemsData);
+            expect(result.current.expRank).toBe(5);
+        });
+        
+        expect(mockSaveToRecentSearches).toHaveBeenCalledWith('Test', 'nick');
+    });
+
+    it('should handle profile not found (status 404)', async () => {
+         const error = new Error('Not Found');
+         // eslint-disable-next-line @typescript-eslint/no-explicit-any
+         (error as any).response = { status: 404 };
+         (api.fetchProfileByNickname as jest.Mock).mockRejectedValue(error);
+         
+         const { result } = renderHook(() => useKkukoProfile(), { wrapper: createWrapper() });
+
+         act(() => {
+            result.current.fetchProfile('Unknown', 'nick');
+        });
+
+        await waitFor(() => {
+             expect(result.current.error).toBe('등록된 유저가 아닙니다.');
+             expect(result.current.profileData).toBeNull();
+        });
+    });
+
+    it('should handle API errors', async () => {
+        (api.fetchProfileByNickname as jest.Mock).mockRejectedValue(new Error('Network Error'));
+
+        const { result } = renderHook(() => useKkukoProfile(), { wrapper: createWrapper() });
+
+        act(() => {
+            result.current.fetchProfile('Test', 'nick');
+        });
+
+        await waitFor(() => {
+            expect(result.current.error).toBe('프로필을 불러오는데 실패했습니다.');
+        });
+    });
+});
diff --git a/__tests__/kkuko/ranking/components/Podium.test.tsx b/__tests__/kkuko/ranking/components/Podium.test.tsx
index dc2ab36..b4b1427 100644
--- a/__tests__/kkuko/ranking/components/Podium.test.tsx
+++ b/__tests__/kkuko/ranking/components/Podium.test.tsx
@@ -1,12 +1,26 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { Podium } from '@/app/kkuko/ranking/components/Podium';
 import { RankingEntry, ProfileData } from '@/app/types/kkuko.types';
 import * as api from '@/app/kkuko/shared/lib/api';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 jest.mock('@/app/kkuko/shared/lib/api');
 jest.mock('@/app/kkuko/shared/components/ProfileAvatar', () => () => <div data-testid="profile-avatar" />);
 
+const createWrapper = () => {
+    const queryClient = new QueryClient({
+        defaultOptions: {
+            queries: {
+                retry: false,
+            },
+        },
+    });
+    return ({ children }: { children: ReactNode }) => (
+        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+};
+
 describe('Podium', () => {
     const mockEntries: RankingEntry[] = [
         {
@@ -41,12 +55,12 @@ describe('Podium', () => {
 
     it('should calculate style correctly', () => {
         // Just checking rendering to ensure no crashes
-        render(<Podium topThree={mockEntries} option="win" />);
+        render(<Podium topThree={mockEntries} option="win" />, { wrapper: createWrapper() });
         // Wait for effects
     });
 
     it('should render top 3 users', async () => {
-        render(<Podium topThree={mockEntries} option="win" />);
+        render(<Podium topThree={mockEntries} option="win" />, { wrapper: createWrapper() });
         
         await waitFor(() => {
             expect(screen.getByText('User1')).toBeInTheDocument();
@@ -56,7 +70,7 @@ describe('Podium', () => {
     });
 
     it('should fetch profile data on mount', async () => {
-        render(<Podium topThree={mockEntries} option="win" />);
+        render(<Podium topThree={mockEntries} option="win" />, { wrapper: createWrapper() });
         
         await waitFor(() => {
             expect(api.fetchProfile).toHaveBeenCalledTimes(3);
diff --git a/app/admin/AdminPage.tsx b/app/admin/AdminPage.tsx
index edffbdd..794f640 100644
--- a/app/admin/AdminPage.tsx
+++ b/app/admin/AdminPage.tsx
@@ -99,7 +99,7 @@ const AdminDashboard = () => {
             title: '공지사항 관리',
             description: '서비스 공지사항을 작성하고 관리합니다',
             icon: Megaphone,
-            path: '/admin/notice',
+            path: '/notification',
             color: 'text-orange-600',
             bgColor: 'bg-orange-50 hover:bg-orange-100',
             borderColor: 'border-orange-200'
@@ -233,7 +233,7 @@ const AdminDashboard = () => {
                                 <span className="text-sm font-medium text-gray-700 dark:text-gray-200">로그 관리</span>
                             </button>
                             <button
-                                onClick={() => handleNavigation('/admin/notice')}
+                                onClick={() => handleNavigation('/notification')}
                                 className="flex flex-col items-center p-4 rounded-lg border-2 border-gray-200 dark:border-gray-700 hover:border-yellow-300 hover:bg-yellow-50 dark:hover:bg-yellow-900 transition-all duration-200 bg-white dark:bg-transparent"
                             >
                                 <Megaphone className="w-8 h-8 text-yellow-600 mb-2" />
diff --git a/app/admin/api-server/ApiServerMangerHome.tsx b/app/admin/api-server/ApiServerMangerHome.tsx
index 0c7e330..b22e018 100644
--- a/app/admin/api-server/ApiServerMangerHome.tsx
+++ b/app/admin/api-server/ApiServerMangerHome.tsx
@@ -15,6 +15,11 @@ export default function ApiServerAdminHome() {
       description: 'API Server 및 Crawler 로그 조회',
       href: '/admin/api-server/logs',
     },
+    {
+      title: 'Items 관리',
+      description: '아이템 상태 확인 및 수정',
+      href: '/admin/api-server/items',
+    }
   ];
 
   return (
diff --git a/app/admin/api-server/api.ts b/app/admin/api-server/api.ts
index 3980133..2018953 100644
--- a/app/admin/api-server/api.ts
+++ b/app/admin/api-server/api.ts
@@ -1,6 +1,15 @@
 // API Server Admin API Functions
 import axios from 'axios';
-import type { CrawlerHealthResponse, SaveSessionRequest, SaveSessionResponse, RestartCrawlerResponse } from './types';
+import type { 
+  CrawlerHealthResponse, 
+  SaveSessionRequest, 
+  SaveSessionResponse, 
+  RestartCrawlerResponse,
+  ItemsResponse,
+  Item,
+  CreateItemRequest,
+  UpdateItemRequest
+} from './types';
 import { SCM } from '@/app/lib/supabaseClient';
 import zlib from 'zlib';
 
@@ -49,6 +58,71 @@ export const restartCrawler = async (
   return response.data;
 };
 
+// Item APIs
+export const fetchItems = async (page: number = 1): Promise<ItemsResponse> => {
+  const headers = await getAuthHeaders();
+  const response = await axios.get<ItemsResponse>(
+    `${BASE_URL}/admin/item/items`,
+    { 
+      headers,
+      params: { page }
+    }
+  );
+  return response.data;
+};
+
+export const createItem = async (data: CreateItemRequest): Promise<Item> => {
+  const headers = await getAuthHeaders();
+  const response = await axios.post<Item>(
+    `${BASE_URL}/admin/item`,
+    data,
+    { headers }
+  );
+  return response.data;
+};
+
+export const updateItem = async (id: string, data: UpdateItemRequest): Promise<Item> => {
+  const headers = await getAuthHeaders();
+  const response = await axios.put<Item>(
+    `${BASE_URL}/admin/item/${id}`,
+    data,
+    { headers }
+  );
+  return response.data;
+};
+
+export const deleteItem = async (id: string): Promise<void> => {
+  const headers = await getAuthHeaders();
+  await axios.delete(
+    `${BASE_URL}/admin/item/${id}`,
+    { headers }
+  );
+};
+
+export const searchItems = async (name: string, page: number = 1): Promise<ItemsResponse> => {
+  const headers = await getAuthHeaders();
+  const response = await axios.get<ItemsResponse>(
+    `${BASE_URL}/admin/item/items/name/${encodeURIComponent(name)}`,
+    { 
+      headers,
+      params: { page }
+    }
+  );
+  return response.data;
+};
+
+export const searchItemsByGroup = async (group: string, page: number = 1): Promise<ItemsResponse> => {
+  const headers = await getAuthHeaders();
+  const response = await axios.get<ItemsResponse>(
+    `${BASE_URL}/admin/item/items/group/${encodeURIComponent(group)}`,
+    { 
+      headers,
+      params: { page }
+    }
+  );
+  return response.data;
+};
+
 // Logs APIs
 const isGzip = (u8: Uint8Array) => u8 && u8.length >= 2 && u8[0] === 0x1f && u8[1] === 0x8b;
 
diff --git a/app/admin/api-server/items/ItemsMangeHome.tsx b/app/admin/api-server/items/ItemsMangeHome.tsx
new file mode 100644
index 0000000..5cce21e
--- /dev/null
+++ b/app/admin/api-server/items/ItemsMangeHome.tsx
@@ -0,0 +1,252 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { Plus, Search } from 'lucide-react'
+import axios, { AxiosError } from 'axios'
+
+import { Button } from '@/app/components/ui/button'
+import { Input } from '@/app/components/ui/input'
+import ConfirmModal from '@/app/components/ConfirmModal'
+import ItemsTable from './_components/ItemsTable'
+import EditItemModal from './_components/EditItemModal'
+import { Item, ItemInput } from './_components/types'
+import { ErrorMessage } from '@/app/types/type'
+import ErrorModal from '@/app/components/ErrModal'
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/app/components/ui/select"
+
+import * as API from '../api'
+
+export default function ItemsManageHome() {
+    const queryClient = useQueryClient()
+    const [page, setPage] = useState(1)
+    const [searchTerm, setSearchTerm] = useState('')
+    const [searchType, setSearchType] = useState('name')
+    const [debouncedSearch, setDebouncedSearch] = useState('')
+
+    // Modal states
+    const [isEditModalOpen, setIsEditModalOpen] = useState(false)
+    const [isConfirmOpen, setIsConfirmOpen] = useState(false)
+    const [editingItem, setEditingItem] = useState<Item | null>(null)
+    const [deletingItem, setDeletingItem] = useState<Item | null>(null)
+    const [isReadOnly, setIsReadOnly] = useState(false)
+    
+    // Error state
+    const [error, setError] = useState<ErrorMessage | null>(null)
+
+    // Debounce search
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedSearch(searchTerm)
+            setPage(1) // Reset page on search
+        }, 500)
+        return () => clearTimeout(timer)
+    }, [searchTerm])
+
+    const fetchItemsFn = async () => {
+        if (debouncedSearch) {
+            if (searchType === 'group') {
+                return API.searchItemsByGroup(debouncedSearch, page)
+            }
+            return API.searchItems(debouncedSearch, page)
+        }
+        return API.fetchItems(page)
+    }
+
+    const { data, isLoading, isError, error: queryError } = useQuery({
+        queryKey: ['items', page, debouncedSearch, searchType],
+        queryFn: fetchItemsFn,
+    })
+
+    const createMutation = useMutation({
+        mutationFn: (newItem: ItemInput) => API.createItem(newItem),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['items'] })
+            setIsEditModalOpen(false)
+        },
+        onError: (err) => handleError(err),
+    })
+
+    const updateMutation = useMutation({
+        mutationFn: (updatedItem: ItemInput) => {
+            const { id, ...rest } = updatedItem
+            return API.updateItem(id, rest)
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['items'] })
+            setIsEditModalOpen(false)
+        },
+        onError: (err) => handleError(err),
+    })
+
+    const deleteMutation = useMutation({
+        mutationFn: (id: string) => API.deleteItem(id),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['items'] })
+            setIsConfirmOpen(false)
+        },
+        onError: (err) => handleError(err),
+    })
+
+    const handleError = (err: Error | AxiosError | unknown) => {
+        const errorObj = err instanceof Error ? err : new Error(String(err));
+        const axiosError = axios.isAxiosError(err) ? err : null
+        
+        const errMsg: ErrorMessage = {
+            ErrName: errorObj.name || 'Error',
+            ErrMessage: errorObj.message || 'An error occurred',
+            ErrStackRace: errorObj.stack,
+            HTTPStatus: axiosError?.response?.status,
+            HTTPData: JSON.stringify(axiosError?.response?.data),
+            inputValue: JSON.stringify(editingItem || deletingItem),
+        }
+        setError(errMsg)
+    }
+
+    const handleEdit = (item: Item) => {
+        setEditingItem(item)
+        setIsReadOnly(false)
+        setIsEditModalOpen(true)
+    }
+
+    const handleCreate = () => {
+        setEditingItem(null)
+        setIsReadOnly(false)
+        setIsEditModalOpen(true)
+    }
+
+    const handleRowClick = (item: Item) => {
+        setEditingItem(item)
+        setIsReadOnly(true)
+        setIsEditModalOpen(true)
+    }
+
+    const handleDeleteClick = (item: Item) => {
+        setDeletingItem(item)
+        setIsConfirmOpen(true)
+    }
+
+    const handleSave = (itemInput: ItemInput) => {
+        if (editingItem) {
+            updateMutation.mutate(itemInput)
+        } else {
+            createMutation.mutate(itemInput)
+        }
+    }
+
+    const handleConfirmDelete = () => {
+        if (deletingItem) {
+            deleteMutation.mutate(deletingItem.id)
+        }
+    }
+
+    // Effect to show query error
+    useEffect(() => {
+        if (isError && queryError) {
+            handleError(queryError)
+        }
+    }, [isError, queryError])
+    
+    // When searchType changes, refetch if there is a search term
+    useEffect(() => {
+        if (debouncedSearch) {
+             queryClient.invalidateQueries({ queryKey: ['items'] })
+        }
+    }, [searchType, queryClient, debouncedSearch])
+
+    return (
+        <div className="container mx-auto py-10 space-y-6 min-h-[calc(100vh-200px)]">
+            <div className="flex justify-between items-center">
+                <h1 className="text-3xl font-bold">Item Management</h1>
+                <Button onClick={handleCreate} className="gap-2">
+                    <Plus className="h-4 w-4" /> Add Item
+                </Button>
+            </div>
+
+            <div className="flex items-center space-x-2 w-full max-w-lg">
+                <Select value={searchType} onValueChange={setSearchType}>
+                    <SelectTrigger className="w-[120px]">
+                        <SelectValue placeholder="Search by" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="name">Name</SelectItem>
+                        <SelectItem value="group">Group</SelectItem>
+                    </SelectContent>
+                </Select>
+                <div className="relative flex-1">
+                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                    <Input
+                        placeholder={`Search by ${searchType}...`}
+                        value={searchTerm}
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                        className="pl-9"
+                    />
+                </div>
+            </div>
+
+            <ItemsTable
+                items={data?.items || []}
+                isLoading={isLoading}
+                onEdit={handleEdit}
+                onDelete={handleDeleteClick}
+                onRowClick={handleRowClick}
+            />
+
+            {/* Pagination */}
+            {data && data.totalPages > 1 && (
+                <div className="flex items-center justify-center space-x-2 mt-4">
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setPage((p) => Math.max(1, p - 1))}
+                        disabled={page === 1}
+                    >
+                        Previous
+                    </Button>
+                    <span className="text-sm">
+                        Page {data.currentPage} of {data.totalPages}
+                    </span>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setPage((p) => Math.min(data.totalPages, p + 1))}
+                        disabled={page === data.totalPages}
+                    >
+                        Next
+                    </Button>
+                </div>
+            )}
+
+            <EditItemModal
+                open={isEditModalOpen}
+                onOpenChange={setIsEditModalOpen}
+                item={editingItem}
+                onSave={handleSave}
+                isSaving={createMutation.isPending || updateMutation.isPending}
+                readOnly={isReadOnly}
+            />
+
+            <ConfirmModal
+                open={isConfirmOpen}
+                onClose={() => setIsConfirmOpen(false)}
+                onConfirm={handleConfirmDelete}
+                title="Delete Item"
+                description={`Are you sure you want to delete item "${deletingItem?.name}"? This action cannot be undone.`}
+            />
+
+            {error && (
+                <ErrorModal
+                    error={error}
+                    onClose={() => setError(null)}
+                />
+            )}
+        </div>
+    )
+}
diff --git a/app/admin/api-server/items/_components/EditItemModal.tsx b/app/admin/api-server/items/_components/EditItemModal.tsx
new file mode 100644
index 0000000..5f99666
--- /dev/null
+++ b/app/admin/api-server/items/_components/EditItemModal.tsx
@@ -0,0 +1,214 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/app/components/ui/dialog'
+import { Button } from '@/app/components/ui/button'
+import { Input } from '@/app/components/ui/input'
+import { Label } from '@/app/components/ui/label'
+import { Textarea } from '@/app/components/ui/textarea'
+import { Item, ItemInput } from './types'
+
+interface EditItemModalProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    item: Item | null
+    onSave: (item: ItemInput) => void
+    isSaving: boolean
+    readOnly?: boolean
+}
+
+/**
+ * EditItemModal component
+ * Modal for creating or editing an item.
+ * Validates JSON for the 'options' field.
+ */
+export default function EditItemModal({
+    open,
+    onOpenChange,
+    item,
+    onSave,
+    isSaving,
+    readOnly = false,
+}: EditItemModalProps) {
+    const isEditMode = !!item
+    const title = readOnly ? 'View Item' : isEditMode ? 'Edit Item' : 'Create Item'
+
+    const [formData, setFormData] = useState<ItemInput>({
+        id: '',
+        name: '',
+        description: '',
+        group: '',
+        options: {},
+    })
+
+    const [optionsJson, setOptionsJson] = useState('{}')
+    const [jsonError, setJsonError] = useState<string | null>(null)
+
+    useEffect(() => {
+        if (open) {
+            if (item) {
+                setFormData({
+                    id: item.id,
+                    name: item.name,
+                    description: item.description,
+                    group: item.group,
+                    options: item.options,
+                })
+                setOptionsJson(JSON.stringify(item.options, null, 2))
+            } else {
+                // Reset for create mode
+                setFormData({
+                    id: '',
+                    name: '',
+                    description: '',
+                    group: '',
+                    options: {},
+                })
+                setOptionsJson('{}')
+            }
+            setJsonError(null)
+        }
+    }, [open, item])
+
+    const handleInputChange = (
+        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    ) => {
+        const { name, value } = e.target
+        setFormData((prev) => ({ ...prev, [name]: value }))
+    }
+
+    const handleJsonChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const value = e.target.value
+        setOptionsJson(value)
+        try {
+            JSON.parse(value)
+            setJsonError(null)
+        } catch (err) {
+            setJsonError((err as Error).message)
+        }
+    }
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault()
+        if (jsonError) return
+
+        try {
+            const parsedOptions = JSON.parse(optionsJson)
+            onSave({
+                ...formData,
+                options: parsedOptions,
+            })
+        } catch (_err) {
+            setJsonError('Invalid JSON')
+        }
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[800px] max-h-[90vh] overflow-y-auto">
+                <DialogHeader>
+                    <DialogTitle>
+                        {title}
+                    </DialogTitle>
+                </DialogHeader>
+                <form onSubmit={handleSubmit} className="grid gap-4 py-4">
+                    <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="id" className="text-right">
+                            ID
+                        </Label>
+                        <Input
+                            id="id"
+                            name="id"
+                            value={formData.id}
+                            onChange={handleInputChange}
+                            className="col-span-3"
+                            disabled={isEditMode || readOnly}
+                            required
+                        />
+                    </div>
+                    <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="name" className="text-right">
+                            Name
+                        </Label>
+                        <Input
+                            id="name"
+                            name="name"
+                            value={formData.name}
+                            onChange={handleInputChange}
+                            className="col-span-3"
+                            disabled={readOnly}
+                            required
+                        />
+                    </div>
+                    <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="group" className="text-right">
+                            Group
+                        </Label>
+                        <Input
+                            id="group"
+                            name="group"
+                            value={formData.group}
+                            onChange={handleInputChange}
+                            className="col-span-3"
+                            disabled={readOnly}
+                            required
+                        />
+                    </div>
+                    <div className="grid grid-cols-4 items-start gap-4">
+                        <Label htmlFor="description" className="text-right pt-2">
+                            Description
+                        </Label>
+                        <Textarea
+                            id="description"
+                            name="description"
+                            value={formData.description}
+                            onChange={handleInputChange}
+                            className="col-span-3"
+                            rows={3}
+                            disabled={readOnly}
+                        />
+                    </div>
+                    <div className="grid grid-cols-4 items-start gap-4">
+                        <Label htmlFor="options" className="text-right pt-2">
+                            Options (JSON)
+                        </Label>
+                        <div className="col-span-3">
+                            <Textarea
+                                id="options"
+                                name="options"
+                                value={optionsJson}
+                                onChange={handleJsonChange}
+                                className={`font-mono text-xs ${
+                                    jsonError ? 'border-red-500' : ''
+                                }`}
+                                rows={10}
+                                disabled={readOnly}
+                            />
+                            {jsonError && (
+                                <p className="text-xs text-red-500 mt-1">
+                                    {jsonError}
+                                </p>
+                            )}
+                        </div>
+                    </div>
+                    <DialogFooter>
+                        <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+                            {readOnly ? 'Close' : 'Cancel'}
+                        </Button>
+                        {!readOnly && (
+                            <Button type="submit" disabled={isSaving || !!jsonError}>
+                                {isSaving ? 'Saving...' : 'Save'}
+                            </Button>
+                        )}
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    )
+}
diff --git a/app/admin/api-server/items/_components/ItemsTable.tsx b/app/admin/api-server/items/_components/ItemsTable.tsx
new file mode 100644
index 0000000..2c5116c
--- /dev/null
+++ b/app/admin/api-server/items/_components/ItemsTable.tsx
@@ -0,0 +1,202 @@
+'use client'
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@/app/components/ui/table'
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+} from '@tanstack/react-table'
+import { Button } from '@/app/components/ui/button'
+import { Edit2, Trash2 } from 'lucide-react'
+import { useMemo } from 'react'
+import { Item } from './types'
+import Spinner from '@/app/components/Spinner'
+
+interface ItemsTableProps {
+    items: Item[]
+    isLoading: boolean
+    onEdit: (item: Item) => void
+    onDelete: (item: Item) => void
+    onRowClick: (item: Item) => void
+}
+
+/**
+ * ItemsTable component
+ * Renders a table of items using @tanstack/react-table
+ * Columns are dynamically generated based on the first item's schema
+ */
+export default function ItemsTable({ items, isLoading, onEdit, onDelete, onRowClick }: ItemsTableProps) {
+    const columns = useMemo<ColumnDef<Item>[]>(() => {
+        if (!items || items.length === 0) return []
+
+        // Generate columns from the first item
+        const firstItem = items[0]
+        const keys = Object.keys(firstItem) as (keyof Item)[]
+
+        const generatedColumns: ColumnDef<Item>[] = keys.map((key) => {
+            return {
+                accessorKey: key,
+                header: key.charAt(0).toUpperCase() + key.slice(1),
+                cell: ({ getValue }) => {
+                    const value = getValue()
+                    
+                    if (key === 'updatedAt') {
+                        const dateNum = typeof value === 'string' ? parseInt(value, 10) : Number(value);
+                        if (!isNaN(dateNum)) {
+                            return new Date(dateNum).toLocaleString()
+                        }
+                    }
+                    if (key === 'options' && typeof value === 'object') {
+                        return <div className="max-w-[200px] truncate text-xs font-mono" title={JSON.stringify(value, null, 2)}>{JSON.stringify(value)}</div>
+                    }
+                    if (key === 'updatedAt') {
+                        // Already handled above, but keeping structure clean if reordered.
+                        // Actually, I should remove the old block if I inserted a new one before it. 
+                        // But wait, I am in replace_string_in_file tool. I inserted the check BEFORE 'options' check in previous call?
+                        // No, let me look at the previous call.
+                        // I replaced:
+                        // if (key === 'options' && typeof value === 'object') {
+                        // WITH:
+                        // if (key === 'updatedAt') { ... } 
+                        // if (key === 'options' && typeof value === 'object') {
+                        
+                        // So I need to REMOVE the old updatedAt check which was AFTER 'options'.
+                        // The old code had:
+                        // if (key === 'options' ...
+                        //     return ...
+                        // }
+                        // if (key === 'updatedAt' && typeof value === 'number') {
+                        //     return ...
+                        // }
+                        
+                        // My previous tool call inserted the new updatedAt check BEFORE options.
+                        // So now I have:
+                        // ...
+                        // if (key === 'updatedAt') ...
+                        // if (key === 'options' ...
+                        // if (key === 'updatedAt' && typeof value === 'number') ...
+                        // 
+                        // I need to remove the second (original) updatedAt check.
+                    }
+                    if (typeof value === 'string' && value.length > 50) {
+                        return <div className="max-w-[200px] truncate" title={value}>{value}</div>
+                    }
+                    return String(value)
+                },
+            }
+        })
+
+        // Add actions column
+        generatedColumns.push({
+            id: 'actions',
+            header: 'Actions',
+            cell: ({ row }) => {
+                const item = row.original
+                return (
+                    <div className="flex gap-2" onClick={(e) => e.stopPropagation()}>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => onEdit(item)}
+                            title="Edit"
+                        >
+                            <Edit2 className="h-4 w-4" />
+                        </Button>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => onDelete(item)}
+                            title="Delete"
+                            className="text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/10"
+                        >
+                            <Trash2 className="h-4 w-4" />
+                        </Button>
+                    </div>
+                )
+            },
+        })
+
+        return generatedColumns
+    }, [items, onEdit, onDelete])
+
+    const table = useReactTable({
+        data: items,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+    })
+
+    if (isLoading) {
+         return (
+             <div className="w-full h-48 flex items-center justify-center">
+                <Spinner />
+            </div>
+        )
+    }
+
+    if (!items || items.length === 0) {
+        return <div className="text-center py-10 text-muted-foreground">No items found.</div>
+    }
+
+    return (
+        <div className="rounded-md border">
+            <Table>
+                <TableHeader>
+                    {table.getHeaderGroups().map((headerGroup) => (
+                        <TableRow key={headerGroup.id}>
+                            {headerGroup.headers.map((header) => {
+                                return (
+                                    <TableHead key={header.id}>
+                                        {header.isPlaceholder
+                                            ? null
+                                            : flexRender(
+                                                  header.column.columnDef.header,
+                                                  header.getContext()
+                                              )}
+                                    </TableHead>
+                                )
+                            })}
+                        </TableRow>
+                    ))}
+                </TableHeader>
+                <TableBody>
+                    {table.getRowModel().rows?.length ? (
+                        table.getRowModel().rows.map((row) => (
+                            <TableRow
+                                key={row.id}
+                                data-state={row.getIsSelected() && 'selected'}
+                                onClick={() => onRowClick(row.original)}
+                                className="cursor-pointer hover:bg-muted/50 transition-colors"
+                            >
+                                {row.getVisibleCells().map((cell) => (
+                                    <TableCell key={cell.id} className="border-x first:border-l-0 last:border-r-0">
+                                        {flexRender(
+                                            cell.column.columnDef.cell,
+                                            cell.getContext()
+                                        )}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        ))
+                    ) : (
+                        <TableRow>
+                            <TableCell
+                                colSpan={columns.length}
+                                className="h-24 text-center"
+                            >
+                                No results.
+                            </TableCell>
+                        </TableRow>
+                    )}
+                </TableBody>
+            </Table>
+        </div>
+    )
+}
diff --git a/app/admin/api-server/items/_components/types.ts b/app/admin/api-server/items/_components/types.ts
new file mode 100644
index 0000000..cf48220
--- /dev/null
+++ b/app/admin/api-server/items/_components/types.ts
@@ -0,0 +1,14 @@
+export interface ItemOptions {
+    [key: string]: number | undefined
+}
+
+export interface Item {
+    id: string
+    name: string
+    description: string
+    updatedAt: number
+    group: string
+    options: ItemOptions
+}
+
+export type ItemInput = Omit<Item, 'updatedAt'>
diff --git a/app/admin/api-server/items/page.tsx b/app/admin/api-server/items/page.tsx
new file mode 100644
index 0000000..dde3fee
--- /dev/null
+++ b/app/admin/api-server/items/page.tsx
@@ -0,0 +1,3 @@
+import ItemsManageHome from "./ItemsMangeHome";
+
+export default ItemsManageHome;
\ No newline at end of file
diff --git a/app/admin/api-server/types.ts b/app/admin/api-server/types.ts
index 6f9678f..05286fb 100644
--- a/app/admin/api-server/types.ts
+++ b/app/admin/api-server/types.ts
@@ -23,3 +23,43 @@ export interface RestartCrawlerResponse {
   status: string;
   channel: string;
 }
+
+export interface ItemOption {
+  gEXP?: number;
+  hEXP?: number;
+  gMNY?: number;
+  hMNY?: number;
+  [key: string]: number | undefined;
+}
+
+export interface Item {
+  id: string;
+  name: string;
+  description: string;
+  updatedAt: number;
+  group: string;
+  options: ItemOption;
+}
+
+export interface ItemsResponse {
+  items: Item[];
+  totalCount: number;
+  currentPage: number;
+  totalPages: number;
+}
+
+export interface CreateItemRequest {
+  id: string;
+  name: string;
+  description: string;
+  group: string;
+  options: ItemOption;
+}
+
+export interface UpdateItemRequest {
+  name?: string;
+  description?: string;
+  group?: string;
+  options?: ItemOption;
+}
+
diff --git a/app/admin/notice/NoticeManagementPage.tsx b/app/admin/notice/NoticeManagementPage.tsx
deleted file mode 100644
index b3b4ed4..0000000
--- a/app/admin/notice/NoticeManagementPage.tsx
+++ /dev/null
@@ -1,634 +0,0 @@
-"use client";
-import React, { useEffect, useState } from 'react';
-import Image from 'next/image';
-import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle
-} from '@/app/components/ui/card';
-import { Button } from '@/app/components/ui/button';
-import { Input } from '@/app/components/ui/input';
-import { Textarea } from '@/app/components/ui/textarea';
-import { Label } from '@/app/components/ui/label';
-import {
-    Megaphone,
-    Plus,
-    Edit,
-    Trash2,
-    Save,
-    X,
-    AlertCircle,
-    Info,
-    Upload,
-    ArrowLeft,
-
-} from 'lucide-react';
-import { SCM } from '@/app/lib/supabaseClient';
-import Spinner from '@/app/components/Spinner';
-import { PostgrestError } from '@supabase/supabase-js';
-import { StorageError } from '@supabase/storage-js';
-import ErrorModal from '@/app/components/ErrModal';
-import CompleteModal from '@/app/components/CompleteModal';
-import ConfirmModal from '@/app/components/ConfirmModal';
-import Link from 'next/link';
-
-interface NotificationData {
-    id: number;
-    title: string;
-    body: string;
-    img: string | null;
-    created_at: string;
-    end_at: string;
-}
-
-const NoticeManagementPage = () => {
-    const [currentNotice, setCurrentNotice] = useState<NotificationData | null>(null);
-    const [isLoading, setIsLoading] = useState(true);
-    const [isEditing, setIsEditing] = useState(false);
-    const [isCreating, setIsCreating] = useState(false);
-    const [isImageUploading, setIsImageUploading] = useState(false);
-    const [selectedFile, setSelectedFile] = useState<File | null>(null);
-    const [imagePreview, setImagePreview] = useState<string>('');
-    const [formData, setFormData] = useState({
-        title: '',
-        body: '',
-        img: '',
-        end_at: ''
-    });
-    const [errorImageMessage, setErrorImageMessage] = useState('');
-    const [successModal, setSuccessModal] = useState({ isOpen: false, message: '' });
-    const [deleteConfirmModal, setDeleteConfirmModal] = useState(false);
-    const [errorModalOpen, setErrorModalOpen] = useState<ErrorMessage | null>(null);
-
-    // 모달 표시 함수
-    const makeError = (error: PostgrestError | StorageError, inputValue: string) => {
-        setErrorModalOpen({
-            ErrName: error.name,
-            ErrMessage: error.message,
-            ErrStackRace: error.stack,
-            inputValue: inputValue
-        })
-    }
-
-    const showSuccess = (message: string) => {
-        setSuccessModal({ isOpen: true, message });
-    };
-
-    // 현재 공지사항 가져오기
-    const fetchCurrentNotice = async () => {
-        setIsLoading(true);
-        const { data, error } = await SCM.get().notice();
-        if (error) {
-            setIsLoading(false);
-            return makeError(error, '공지사항 조회');
-        }
-        setCurrentNotice(data);
-        setIsLoading(false);
-    };
-
-    useEffect(() => {
-        fetchCurrentNotice();
-    }, []);
-
-    // 폼 데이터 초기화
-    const resetForm = () => {
-        setFormData({
-            title: '',
-            body: '',
-            img: '',
-            end_at: ''
-        });
-        setSelectedFile(null);
-        setImagePreview('');
-    };
-
-    // 파일 선택 핸들러
-    const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setErrorImageMessage('');
-        const file = event.target.files?.[0];
-        if (file) {
-            // 파일 크기 체크 (5MB 제한)
-            if (file.size > 5 * 1024 * 1024) {
-                setErrorImageMessage('파일 크기는 5MB 이하여야 합니다.');
-                return;
-            }
-
-            // 파일 타입 체크
-            if (!file.type.startsWith('image/')) {
-                setErrorImageMessage('이미지 파일만 업로드 가능합니다.');
-                return;
-            }
-
-            setSelectedFile(file);
-
-            // 미리보기 생성
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                setImagePreview(e.target?.result as string);
-            };
-            reader.readAsDataURL(file);
-        }
-    };
-
-    // 이미지 업로드
-    const uploadImage = async () => {
-        setErrorImageMessage('');
-        if (!selectedFile) return null;
-
-        setIsImageUploading(true);
-        const fileName = `notice_img/${Date.now()}_${selectedFile.name}`;
-        const { error } = await SCM.uploadImage(selectedFile, fileName);
-
-        if (error) {
-            makeError(error, '이미지 업로드');
-            setIsImageUploading(false);
-            return null;
-        }
-
-        // 공개 URL 가져오기
-        const { data: publicUrlData } = SCM.getPublicUrl(fileName);
-        setIsImageUploading(false);
-        return publicUrlData.publicUrl;
-
-    };
-
-    // 이미지 제거
-    const removeImage = () => {
-        setSelectedFile(null);
-        setImagePreview('');
-        setErrorImageMessage('');
-        setFormData(prev => ({ ...prev, img: '' }));
-    };
-
-    // 수정 모드 시작
-    const startEdit = () => {
-        if (currentNotice) {
-            setFormData({
-                title: currentNotice.title,
-                body: currentNotice.body,
-                img: currentNotice.img || '',
-                end_at: currentNotice.end_at ? new Date(currentNotice.end_at).toISOString().slice(0, 16) : ''
-            });
-            setImagePreview(currentNotice.img || '');
-        }
-        setIsEditing(true);
-    };
-
-    // 작성 모드 시작
-    const startCreate = () => {
-        resetForm();
-        setIsCreating(true);
-    };
-
-    // 공지사항 생성
-    const handleCreate = async () => {
-        if (!formData.title.trim() || !formData.body.trim()) {
-            return;
-        }
-
-        setIsLoading(true);
-        try {
-            // 이미지 업로드 (선택된 파일이 있는 경우)
-            let imageUrl = formData.img;
-            if (selectedFile) {
-                const uploadedUrl = await uploadImage();
-                if (uploadedUrl) {
-                    imageUrl = uploadedUrl;
-                } else {
-                    return; // 업로드 실패 시 중단
-                }
-            }
-
-            // 기존 공지사항이 있으면 삭제
-            if (currentNotice) {
-                const { error: deleteError } = await SCM.delete().notificationById(currentNotice.id);
-                if (deleteError) {
-                    makeError(deleteError, '기존 공지사항 삭제');
-                    return;
-                }
-            }
-
-            const insertData = {
-                title: formData.title.trim(),
-                body: formData.body.trim(),
-                img: imageUrl.trim() || null,
-                end_at: formData.end_at
-            };
-
-            const { data, error } = await SCM.add().notification(insertData);
-            if (error) {
-                makeError(error, '공지사항 생성');
-                return;
-            }
-
-            setCurrentNotice(data);
-            setIsCreating(false);
-            resetForm();
-            showSuccess('공지사항이 성공적으로 생성되었습니다.');
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    // 공지사항 수정
-    const handleUpdate = async () => {
-        if (!currentNotice) {
-            return;
-        }
-
-        setIsLoading(true);
-        try {
-            // 이미지 업로드 (선택된 파일이 있는 경우)
-            let imageUrl = formData.img;
-            if (selectedFile) {
-                const uploadedUrl = await uploadImage();
-                if (uploadedUrl) {
-                    imageUrl = uploadedUrl;
-                } else {
-                    return; // 업로드 실패 시 중단
-                }
-            }
-
-            const updateData = {
-                title: formData.title.trim(),
-                body: formData.body.trim(),
-                img: imageUrl.trim() || null,
-                end_at: formData.end_at ? new Date(formData.end_at).toISOString() : null
-            };
-
-            const { data, error } = await SCM.update().notification(currentNotice.id, updateData);
-            if (error) {
-                makeError(error, '공지사항 수정');
-                return;
-            }
-
-            setCurrentNotice(data);
-            setIsEditing(false);
-            resetForm();
-            showSuccess('공지사항이 성공적으로 수정되었습니다.');
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    // 삭제 확인 모달 열기
-    const openDeleteConfirm = () => {
-        setDeleteConfirmModal(true);
-    };
-
-    // 공지사항 삭제
-    const handleDelete = async () => {
-        if (!currentNotice) return;
-
-        setDeleteConfirmModal(false);
-        setIsLoading(true);
-        try {
-            const { error } = await SCM.delete().notificationById(currentNotice.id);
-            if (error) {
-                makeError(error, '공지사항 삭제');
-                return;
-            }
-
-            setCurrentNotice(null);
-            showSuccess('공지사항이 성공적으로 삭제되었습니다.');
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    // 편집 취소
-    const cancelEdit = () => {
-        setIsEditing(false);
-        setIsCreating(false);
-        resetForm();
-    };
-
-    if (isLoading) {
-        return (
-            <div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6 transition-colors duration-300 flex items-center justify-center">
-                <Spinner />
-            </div>
-        );
-    }
-
-    return (
-        <div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6 transition-colors duration-300">
-            <div className="max-w-4xl mx-auto">
-                {/* 관리자 대시보드로 이동 버튼 */}
-                <Link href={'/admin'} className="mb-4 flex">
-                    <Button variant="outline">
-                        <ArrowLeft />
-                        관리자 대시보드로 이동
-                    </Button>
-                </Link>
-                
-                {/* 헤더 */}
-                <div className="mb-8">
-                    <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2 flex items-center gap-3">
-                        <Megaphone className="w-8 h-8 text-orange-600" />
-                        공지사항 관리
-                    </h1>
-                    <p className="text-gray-600 dark:text-gray-300">
-                        현재 등록된 공지사항을 관리하고 새로운 공지사항을 작성할 수 있습니다.
-                    </p>
-                </div>
-
-                {/* 현재 공지사항 */}
-                {!isCreating && (
-                    <Card className="mb-6 bg-white dark:bg-gray-800 shadow-sm border border-transparent dark:border-gray-700">
-                        <CardHeader>
-                            <div className="flex justify-between items-start">
-                                <div>
-                                    <CardTitle className="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
-                                        <Info className="w-5 h-5" />
-                                        현재 공지사항
-                                    </CardTitle>
-                                    <CardDescription className="dark:text-gray-300">
-                                        {currentNotice ? '현재 서비스에 표시되고 있는 공지사항입니다.' : '등록된 공지사항이 없습니다.'}
-                                    </CardDescription>
-                                </div>
-                                <div className="flex gap-2">
-                                    {currentNotice && !isEditing && (
-                                        <>
-                                            <Button
-                                                variant="outline"
-                                                size="sm"
-                                                onClick={startEdit}
-                                                className="text-blue-600 border-blue-600 hover:bg-blue-50"
-                                            >
-                                                <Edit className="w-4 h-4 mr-1" />
-                                                수정
-                                            </Button>
-                                            <Button
-                                                variant="outline"
-                                                size="sm"
-                                                onClick={openDeleteConfirm}
-                                                className="text-red-600 border-red-600 hover:bg-red-50"
-                                            >
-                                                <Trash2 className="w-4 h-4 mr-1" />
-                                                삭제
-                                            </Button>
-                                        </>
-                                    )}
-                                    {!currentNotice && !isEditing && (
-                                        <Button
-                                            onClick={startCreate}
-                                            className="bg-green-600 hover:bg-green-700 text-white"
-                                        >
-                                            <Plus className="w-4 h-4 mr-1" />
-                                            공지사항 작성
-                                        </Button>
-                                    )}
-                                </div>
-                            </div>
-                        </CardHeader>
-                        <CardContent>
-                            {currentNotice && !isEditing ? (
-                                <div className="space-y-4">
-                                    <div>
-                                        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
-                                            {currentNotice.title}
-                                        </h3>
-                                        <p className="text-gray-600 dark:text-gray-300 whitespace-pre-wrap leading-relaxed">
-                                            {currentNotice.body}
-                                        </p>
-                                    </div>
-                                    {currentNotice.img && (
-                                        <div>
-                                            <Image
-                                                src={currentNotice.img}
-                                                alt="공지 이미지"
-                                                width={800}
-                                                height={600}
-                                                className="max-w-full h-auto rounded-lg border border-gray-200 dark:border-gray-700"
-                                                style={{ width: 'auto', height: 'auto' }}
-                                            />
-                                        </div>
-                                    )}
-                                    <div className="flex flex-wrap gap-4 text-sm text-gray-500 dark:text-gray-400">
-                                        <span>생성일: {new Date(currentNotice.created_at).toLocaleString('ko-KR')}</span>
-                                        {currentNotice.end_at && (
-                                            <span>만료일: {new Date(currentNotice.end_at).toLocaleString('ko-KR')}</span>
-                                        )}
-                                    </div>
-                                </div>
-                            ) : !currentNotice && !isEditing ? (
-                                <div className="text-center py-8 text-gray-500 dark:text-gray-400">
-                                    <AlertCircle className="w-12 h-12 mx-auto mb-4" />
-                                    <p>등록된 공지사항이 없습니다.</p>
-                                    <p className="text-sm">새로운 공지사항을 작성해주세요.</p>
-                                </div>
-                            ) : null}
-                        </CardContent>
-                    </Card>
-                )}
-
-                {/* 편집/생성 폼 */}
-                {(isEditing || isCreating) && (
-                    <Card className="bg-white dark:bg-gray-800 shadow-sm border border-transparent dark:border-gray-700">
-                        <CardHeader>
-                            <CardTitle className="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
-                                {isCreating ? <Plus className="w-5 h-5" /> : <Edit className="w-5 h-5" />}
-                                {isCreating ? '새 공지사항 작성' : '공지사항 수정'}
-                            </CardTitle>
-                            <CardDescription className="dark:text-gray-300">
-                                {isCreating ? '새로운 공지사항을 작성합니다.' : '현재 공지사항을 수정합니다.'}
-                            </CardDescription>
-                        </CardHeader>
-                        <CardContent className="space-y-6">
-                            <div>
-                                <Label htmlFor="title" className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                                    제목 *
-                                </Label>
-                                <Input
-                                    id="title"
-                                    type="text"
-                                    placeholder="공지사항 제목을 입력하세요"
-                                    value={formData.title}
-                                    onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
-                                    className="mt-1"
-                                />
-                            </div>
-
-                            <div>
-                                <Label htmlFor="body" className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                                    내용 *
-                                </Label>
-                                <Textarea
-                                    id="body"
-                                    placeholder="공지사항 내용을 입력하세요"
-                                    value={formData.body}
-                                    onChange={(e) => setFormData(prev => ({ ...prev, body: e.target.value }))}
-                                    className="mt-1 min-h-[200px]"
-                                />
-                            </div>
-
-                            <div>
-                                <Label htmlFor="img" className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                                    이미지
-                                </Label>
-                                <div className="mt-1 space-y-3">
-                                    {/* 파일 업로드 */}
-                                    <div className="flex items-center gap-3">
-                                        <Input
-                                            id="img-file"
-                                            type="file"
-                                            accept="image/*"
-                                            onChange={handleFileSelect}
-                                            className="hidden"
-                                        />
-                                        <Button
-                                            type="button"
-                                            variant="outline"
-                                            onClick={() => document.getElementById('img-file')?.click()}
-                                            disabled={isImageUploading}
-                                            className="flex items-center gap-2"
-                                        >
-                                            {isImageUploading ? (
-                                                <div className="w-4 h-4 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin"></div>
-                                            ) : (
-                                                <Upload className="w-4 h-4" />
-                                            )}
-                                            {isImageUploading ? '업로드 중...' : '이미지 선택'}
-                                        </Button>
-                                    </div>
-
-                                    {/* 이미지 미리보기 */}
-                                    {(imagePreview || formData.img) && (
-                                        <div className="relative">
-                                            <Image
-                                                src={imagePreview || formData.img}
-                                                alt="이미지 미리보기"
-                                                width={600}
-                                                height={192}
-                                                className="max-w-full max-h-48 rounded-lg border border-gray-200 dark:border-gray-700"
-                                                style={{ width: 'auto', height: 'auto', objectFit: 'contain' }}
-                                            />
-                                            <Button
-                                                type="button"
-                                                variant="outline"
-                                                size="sm"
-                                                onClick={removeImage}
-                                                className="absolute top-2 right-2 bg-white/80 hover:bg-white"
-                                            >
-                                                <X className="w-4 h-4" />
-                                            </Button>
-                                        </div>
-                                    )}
-
-                                    {/* URL 직접 입력 */}
-                                    <Input
-                                        id="img"
-                                        type="url"
-                                        disabled
-                                        value={formData.img}
-                                        onChange={(e) => {
-                                            setFormData(prev => ({ ...prev, img: e.target.value }));
-                                            if (e.target.value && !selectedFile) {
-                                                setImagePreview(e.target.value);
-                                            }
-                                        }}
-                                        className="text-sm"
-                                    />
-                                    <p className="text-xs text-gray-500 dark:text-gray-400">
-                                        이미지 파일을 업로드하세요. (최대 5MB)
-                                    </p>
-                                    {errorImageMessage && (
-                                        <div className="text-sm text-red-600 dark:text-red-400">
-                                            {errorImageMessage}
-                                        </div>
-                                    )}
-                                </div>
-                            </div>
-
-                            <div>
-                                <Label htmlFor="end_at" className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                                    만료 일시 *
-                                </Label>
-                                <Input
-                                    id="end_at"
-                                    type="datetime-local"
-                                    value={formData.end_at}
-                                    onChange={(e) => setFormData(prev => ({ ...prev, end_at: e.target.value }))}
-                                    className="mt-1"
-                                />
-                                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                                    만료일자를 정확하게 하지 않으면 공지사항이 원하지 않을때 사라질 수 있습니다.
-                                </p>
-                            </div>
-
-                            <div className="flex gap-3 pt-4">
-                                <Button
-                                    onClick={isCreating ? handleCreate : handleUpdate}
-                                    disabled={isImageUploading || !formData.title.trim() || !formData.body.trim() || !formData.end_at}
-                                    className="bg-green-600 hover:bg-green-700 text-white"
-                                >
-                                    <Save className="w-4 h-4 mr-1" />
-                                    {isCreating ? '작성 완료' : '수정 완료'}
-                                </Button>
-                                <Button
-                                    variant="outline"
-                                    onClick={cancelEdit}
-                                    disabled={isImageUploading}
-                                    className="text-gray-600 border-gray-300 hover:bg-gray-50"
-                                >
-                                    <X className="w-4 h-4 mr-1" />
-                                    취소
-                                </Button>
-                            </div>
-                        </CardContent>
-                    </Card>
-                )}
-
-                {/* 도움말 */}
-                <Card className="mt-6 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800">
-                    <CardContent className="p-4">
-                        <h3 className="text-sm font-semibold text-blue-800 dark:text-blue-200 mb-2 flex items-center gap-2">
-                            <Info className="w-4 h-4" />
-                            사용 가이드
-                        </h3>
-                        <ul className="text-xs text-blue-700 dark:text-blue-300 space-y-1">
-                            <li>• 시스템은 하나의 공지사항만 활성화됩니다.</li>
-                            <li>• 새 공지사항을 작성하면 기존 공지사항은 자동으로 교체됩니다.</li>
-                            <li>• 이미지는 파일 업로드를 해야 합니다.</li>
-                            <li>• 업로드된 이미지는 Supabase 스토리지의 public_img/notice_img 경로에 저장됩니다.</li>
-                            <li>• 이미지 파일은 최대 5MB까지 업로드 가능합니다.</li>
-                            <li>• 만료 일시를 설정하면 해당 시간 이후 공지사항이 자동으로 숨겨집니다.</li>
-                        </ul>
-                    </CardContent>
-                </Card>
-            </div>
-
-            {/* 에러 모달 */}
-            {errorModalOpen && (
-                <ErrorModal
-                    error={errorModalOpen}
-                    onClose={() => setErrorModalOpen(null)}
-                />
-            )}
-
-            {/* 성공 모달 */}
-            <CompleteModal
-                open={successModal.isOpen}
-                onClose={() => setSuccessModal({ isOpen: false, message: '' })}
-                title={successModal.message}
-            />
-
-            {/* 삭제 확인 모달 */}
-            {deleteConfirmModal && (
-                <ConfirmModal
-                    open={deleteConfirmModal}
-                    onClose={() => setDeleteConfirmModal(false)}
-                    onConfirm={handleDelete}
-                    title="정말로 현재 공지사항을 삭제하시겠습니까?"
-                    description="삭제된 공지사항은 복구할 수 없습니다."
-                />
-            )}
-
-        </div>
-    );
-};
-
-export default NoticeManagementPage;
diff --git a/app/admin/notice/page.tsx b/app/admin/notice/page.tsx
deleted file mode 100644
index 5e26100..0000000
--- a/app/admin/notice/page.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import NoticeManagementPage from "./NoticeManagementPage";
-
-export async function generateMetadata() {
-    return {
-        title: "끄코 유틸리티 - 공지사항 관리",
-        description: `끄코 유틸리티 - 공지사항 관리`,
-        openGraph: {
-            title: "끄코 유틸리티 - 공지사항 관리",
-            description: "끄코 유틸리티 - 공지사항 관리",
-            type: "website",
-            url: "https://kkuko-utils.vercel.app/admin/notice",
-            siteName: "끄코 유틸리티",
-            locale: "ko_KR",
-        },
-    };
-}
-
-export default function AdminNoticePage(){
-    return <NoticeManagementPage />
-}
diff --git a/app/api/kkuko/image/route.ts b/app/api/kkuko/image/route.ts
index b4969d5..139183d 100644
--- a/app/api/kkuko/image/route.ts
+++ b/app/api/kkuko/image/route.ts
@@ -1,6 +1,6 @@
 import { NextRequest } from "next/server";
 
-export const runtime = 'edge';
+export const runtime = "edge";
 
 export async function GET(req: NextRequest) {
   const { searchParams } = new URL(req.url);
@@ -19,7 +19,7 @@ export async function GET(req: NextRequest) {
     return new Response("Invalid image url", { status: 400 });
   }
 
-  const imageResponse = await fetch(imageUrl, { signal }).finally(() => clearTimeout(timer));
+  const imageResponse = await fetch(imageUrl, { signal, next: { revalidate: 60 * 60 * 24 * 90 } }).finally(() => clearTimeout(timer));
 
   if (!imageResponse.ok) {
     return new Response("Failed to fetch image", {
diff --git a/app/components/MarkdownViewer.tsx b/app/components/MarkdownViewer.tsx
new file mode 100644
index 0000000..4d53fa0
--- /dev/null
+++ b/app/components/MarkdownViewer.tsx
@@ -0,0 +1,12 @@
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+export default function MarkdownViewer({ content }: { content: string }) {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+}
diff --git a/app/footer.tsx b/app/footer.tsx
index 9c15665..6ac0e2b 100644
--- a/app/footer.tsx
+++ b/app/footer.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { Bug, FileText, ExternalLink } from 'lucide-react';
+import { Bug, FileText, ExternalLink, Megaphone } from 'lucide-react';
 
 const Footer = () => {
   return (
@@ -62,11 +62,19 @@ const Footer = () => {
               
               <Link
                 href="/release-note"
-                className="group flex items-center space-x-3 p-3 rounded-lg bg-gray-800/50 hover:bg-gray-700/50 transition-all duration-200 border border-gray-700/50 hover:border-gray-600/50 sm:col-span-2"
+                className="group flex items-center space-x-3 p-3 rounded-lg bg-gray-800/50 hover:bg-gray-700/50 transition-all duration-200 border border-gray-700/50 hover:border-gray-600/50"
               >
                 <FileText className="w-5 h-5 text-gray-400 group-hover:text-blue-400 transition-colors" />
                 <span className="text-sm font-medium group-hover:text-white transition-colors">Release Notes</span>
               </Link>
+
+              <Link 
+                href="/notification"
+                className="group flex items-center space-x-3 p-3 rounded-lg bg-gray-800/50 hover:bg-gray-700/50 transition-all duration-200 border border-gray-700/50 hover:border-gray-600/50"
+              >
+                <Megaphone className="w-5 h-5 text-gray-400 group-hover:text-yellow-400 transition-colors" />
+                <span className="text-sm font-medium group-hover:text-white transition-colors">공지사항</span>
+              </Link>
               
               <Link
                 href="/terms"
diff --git a/app/globals.css b/app/globals.css
index 7812c49..269439e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -59,29 +59,27 @@
   }
   .dark {
 
-    --background: 0 0% 3.9%;
+    /* 배경 */
+    --background: 222 47% 11%;        /* gray-900 */
+    --foreground: 210 40% 96%;
 
-    --foreground: 0 0% 98%;
+    /* 카드 / 팝오버 */
+    --card: 215 28% 17%;              /* gray-800 */
+    --card-foreground: 210 40% 96%;
 
-    --card: 0 0% 3.9%;
+    --popover: 215 28% 17%;
+    --popover-foreground: 210 40% 96%;
 
-    --card-foreground: 0 0% 98%;
-
-    --popover: 0 0% 3.9%;
-
-    --popover-foreground: 0 0% 98%;
-
-    --primary: 0 0% 98%;
-
-    --primary-foreground: 0 0% 9%;
+    --primary: 210 40% 96%;
+    --primary-foreground: 222 47% 11%;
 
     --secondary: 0 0% 14.9%;
 
     --secondary-foreground: 0 0% 98%;
 
-    --muted: 0 0% 14.9%;
-
-    --muted-foreground: 0 0% 63.9%;
+    /* 보조 색상 */
+    --muted: 215 25% 22%;
+    --muted-foreground: 215 15% 65%;
 
     --accent: 0 0% 14.9%;
 
@@ -91,11 +89,11 @@
 
     --destructive-foreground: 0 0% 98%;
 
-    --border: 0 0% 14.9%;
-
-    --input: 0 0% 14.9%;
+    /* 테두리 / 인풋 */
+    --border: 215 20% 27%;            /* gray-700 */
+    --input: 215 20% 27%;
 
-    --ring: 0 0% 83.1%;
+    --ring: 215 20% 65%;
 
     --chart-1: 220 70% 50%;
 
diff --git a/app/kkuko/KkukoHome.tsx b/app/kkuko/KkukoHome.tsx
index f39132c..50510a9 100644
--- a/app/kkuko/KkukoHome.tsx
+++ b/app/kkuko/KkukoHome.tsx
@@ -57,7 +57,7 @@ export default function KkukoHome() {
                         각 모드별로 승리가 많은 유저들의 랭킹을 확인할 수 있습니다.
                     </p>
 
-                    <Link href="/kkuko/ranking" className="block">
+                    <Link href="/kkuko/ranking?mode=ALL" className="block">
                         <button className="w-full bg-gradient-to-r from-emerald-500 to-green-600 hover:from-emerald-600 hover:to-green-700 text-white px-6 py-4 rounded-xl font-semibold shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center group">
                             구경하기
                             <ArrowRight className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform duration-300" />
diff --git a/app/kkuko/profile/KkukoProfile.tsx b/app/kkuko/profile/KkukoProfile.tsx
index 23d21d3..7de64e6 100644
--- a/app/kkuko/profile/KkukoProfile.tsx
+++ b/app/kkuko/profile/KkukoProfile.tsx
@@ -16,6 +16,7 @@ export default function KkukoProfile() {
     const searchParams = useSearchParams();
     const {
         profileData,
+        profileList,
         itemsData,
         modesData,
         loading,
@@ -26,7 +27,8 @@ export default function KkukoProfile() {
         expRank,
         recentSearches,
         fetchProfile,
-        removeFromRecentSearches
+        removeFromRecentSearches,
+        selectProfile
     } = useKkukoProfile();
 
     const [showItemModal, setShowItemModal] = useState(false);
@@ -76,8 +78,38 @@ export default function KkukoProfile() {
                 </div>
             )}
 
-            {/* Empty State - No search yet */}
-            {!loading && !error && !profileData && (
+            {/* List Selection */}
+            {!profileData && profileList && !loading && (
+                 <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-2xl mx-auto">
+                    <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">검색 결과 선택</h2>
+                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                        여러 유저가 검색되었습니다. 조회할 유저를 선택해주세요.
+                    </p>
+                    <ul className="space-y-2">
+                        {profileList.map((profile) => (
+                             <li key={profile.user.id} 
+                                 className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors"
+                                 onClick={() => selectProfile(profile)}
+                             >
+                                <div className="flex justify-between items-center">
+                                    <div className="flex items-center gap-2">
+                                        <span className="font-bold text-lg text-gray-900 dark:text-gray-100">{profile.user.nickname}</span>
+                                        <span className="px-2 py-0.5 text-xs rounded bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-100">
+                                            Lv. {profile.user.level}
+                                        </span>
+                                    </div>
+                                    <div className="text-sm text-gray-500 dark:text-gray-400">
+                                        ID: {profile.user.id}
+                                    </div>
+                                </div>
+                             </li>
+                        ))}
+                    </ul>
+                 </div>
+            )}
+
+            {/* Empty State - No search yet AND No List */}
+            {!loading && !error && !profileData && !profileList && (
                 <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-12 text-center">
                     <div className="max-w-md mx-auto">
                         <Search className="w-16 h-16 mx-auto mb-4 text-gray-400 dark:text-gray-500" />
diff --git a/app/kkuko/profile/components/ProfileHeader.tsx b/app/kkuko/profile/components/ProfileHeader.tsx
index af2d1a0..53ec058 100644
--- a/app/kkuko/profile/components/ProfileHeader.tsx
+++ b/app/kkuko/profile/components/ProfileHeader.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
+import Link from 'next/link';
 import { ItemInfo, ProfileData } from '@/types/kkuko.types';
 import TryRenderImg from '../../shared/components/TryRenderImg';
 import ProfileAvatar from '../../shared/components/ProfileAvatar';
-import { getNicknameColor } from '../utils/profileHelper';
+import { formatLastSeen, formatObservedAt, getNicknameStyle } from '../utils/profileHelper';
 
 interface ProfileHeaderProps {
     profileData: ProfileData;
@@ -65,7 +66,7 @@ export default function ProfileHeader({ profileData, itemsData, expRank }: Profi
                     <div>
                         <h2
                             className="text-3xl font-bold"
-                            style={{ color: getNicknameColor(profileData.equipment, isDarkTheme) }}
+                            style={getNicknameStyle(profileData.equipment, isDarkTheme)}
                         >
                             {profileData.user.nickname}
                         </h2>
@@ -101,10 +102,10 @@ export default function ProfileHeader({ profileData, itemsData, expRank }: Profi
                             </div>
                         </div>
 
-                        {/* <div className="col-span-2">
-                            <p className="text-sm text-gray-500 dark:text-gray-400">마지막 관측</p>
+                        <div className="col-span-2">
+                            <p className="text-sm text-gray-500 dark:text-gray-400">정보 갱신 시각</p>
                             <p className="text-lg font-semibold text-gray-900 dark:text-gray-100">{formatObservedAt(profileData.user.observedAt)}</p>
-                        </div> */}
+                        </div> 
 
                         <div>
                             <p className="text-sm text-gray-500 dark:text-gray-400">접속 상태</p>
@@ -118,8 +119,9 @@ export default function ProfileHeader({ profileData, itemsData, expRank }: Profi
                             {profileData.presence.channelId ? (
                                 <p className="text-xs text-gray-600 dark:text-gray-400">채널: {profileData.presence.channelId}</p>
                             ) : (
-                                // <p className="text-xs text-gray-600 dark:text-gray-400">마지막 접속: {formatLastSeen(profileData.presence.updatedAt)}</p>
-                                <></>
+                                profileData.presence.updatedAt !== null ?
+                                <p className="text-xs text-gray-600 dark:text-gray-400">마지막 접속: {formatLastSeen(profileData.presence.updatedAt)}</p> :
+                                null
                             )}
                         </div>
 
@@ -134,6 +136,11 @@ export default function ProfileHeader({ profileData, itemsData, expRank }: Profi
                             </p>
                         </div>
                     </div>
+                    <div className="flex justify-end mt-1">
+                        <Link href="/notification/9" className="text-xs text-gray-400 dark:text-gray-500 hover:underline">
+                            정보 비공개 요청
+                        </Link>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/app/kkuko/profile/hooks/useKkukoProfile.ts b/app/kkuko/profile/hooks/useKkukoProfile.ts
index a333708..e3984d5 100644
--- a/app/kkuko/profile/hooks/useKkukoProfile.ts
+++ b/app/kkuko/profile/hooks/useKkukoProfile.ts
@@ -1,140 +1,206 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import {
     fetchModes as fetchModesApi,
     fetchTotalUsers as fetchTotalUsersApi,
     fetchProfile as fetchProfileApi,
+    fetchProfileByNickname as fetchProfileByNicknameApi,
     fetchItems as fetchItemsApi,
     fetchExpRank as fetchExpRankApi
 } from '../../shared/lib/api';
-import { Equipment, ItemInfo, Mode, ProfileData } from '@/types/kkuko.types';
+import { Equipment, Mode, ProfileData } from '@/app/types/kkuko.types';
 import { useRecentSearches } from './useRecentSearches';
 
+interface ErrorMessage {
+    ErrName: string;
+    ErrMessage: string;
+    ErrStackRace: string | null;
+    inputValue: string;
+    location: string;
+}
+
 export const useKkukoProfile = () => {
-    const [profileData, setProfileData] = useState<ProfileData | null>(null);
-    const [itemsData, setItemsData] = useState<ItemInfo[]>([]);
-    const [modesData, setModesData] = useState<Mode[]>([]);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [detailedError, setDetailedError] = useState<ErrorMessage | null>(null);
-    const [totalUserCount, setTotalUserCount] = useState<number>(0);
-    const [expRank, setExpRank] = useState<number | null>(null);
+    // Search state
+    const [searchQuery, setSearchQuery] = useState<string>('');
+    const [searchType, setSearchType] = useState<'nick' | 'id'>('nick');
+    const [shouldFetchProfile, setShouldFetchProfile] = useState(false);
     
-    // Recent searches hook integration
+    // New state for selection from list
+    const [selectedProfile, setSelectedProfile] = useState<ProfileData | null>(null);
+
+    // Error state
+    const [detailedError, setDetailedError] = useState<ErrorMessage | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
     const { recentSearches, saveToRecentSearches, removeFromRecentSearches } = useRecentSearches();
 
+    // Helper to create error object
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const handleError = useCallback((err: any, inputValue: string, location: string) => {
-        const errorMsg: ErrorMessage = {
-            ErrName: err.name || "Error",
-            ErrMessage: err.message || "Unknown error",
-            ErrStackRace: err.stack || null,
-            inputValue: inputValue,
-            location: location
-        };
-        setDetailedError(errorMsg);
-        console.error(`Failed at ${location}:`, err);
-    }, []);
-
-    const fetchModes = useCallback(async () => {
-        try {
+    const createError = (err: any, inputValue: string, location: string): ErrorMessage => ({
+        ErrName: err.name || "Error",
+        ErrMessage: err.message || "Unknown error",
+        ErrStackRace: err.stack || null,
+        inputValue: inputValue,
+        location: location
+    });
+
+    // 1. Fetch Modes (independent, 1 hour stale time)
+    const { data: modesData = [] } = useQuery({
+        queryKey: ['kkuko-modes-raw'],
+        queryFn: async () => {
             const response = await fetchModesApi();
-            const result = await response.data;
-            if (result.status === 200) {
-                setModesData(result.data);
-            }
-        } catch (err) {
-            handleError(err, 'fetchModes', 'fetchModes');
-        }
-    }, [handleError]);
-
-    const fetchTotalUsers = useCallback(async () => {
-        try {
+            return response.data.data as Mode[];
+        },
+        staleTime: 60 * 60 * 1000,
+    });
+
+    // 2. Fetch Total Users (independent, 5 minutes stale time)
+    const { data: totalUserCount = 0 } = useQuery({
+        queryKey: ['kkuko-total-users'],
+        queryFn: async () => {
             const response = await fetchTotalUsersApi();
-            const result = await response.data;
-            if (result.status === 200) {
-                setTotalUserCount(result.data.totalUsers);
+            return response.data.data.totalUsers as number;
+        },
+        staleTime: 5 * 60 * 1000,
+    });
+
+    // 3. Fetch Profile (dependent on search)
+    const { 
+        data: queryResult = null, 
+        isLoading: profileLoading,
+        error: profileError,
+        isSuccess: profileSuccess
+    } = useQuery({
+        queryKey: ['kkuko-profile', searchQuery, searchType],
+        queryFn: async () => {
+            if (searchType === 'nick') {
+                 try {
+                     const response = await fetchProfileByNicknameApi(searchQuery);
+                     const data = response.data.data;
+                     
+                     if (Array.isArray(data)) {
+                        if (data.length === 0) throw new Error('NOT_FOUND');
+                        if (data.length === 1) return { type: 'single', data: data[0] as ProfileData };
+                        return { type: 'list', data: data as ProfileData[] };
+                     }
+                     return { type: 'single', data: data as ProfileData };
+                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                 } catch (err: any) {
+                     if (err.response?.status === 404) throw new Error('NOT_FOUND');
+                     if (err.response?.status === 403) throw new Error('PRIVATE_PROFILE');
+                     throw err;
+                 }
+            } else {
+                 try {
+                     const response = await fetchProfileApi(searchQuery, searchType);
+                     return { type: 'single', data: response.data.data as ProfileData };
+                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                 } catch (err: any) {
+                     if (err.response?.status === 404) throw new Error('NOT_FOUND');
+                     if (err.response?.status === 403) throw new Error('PRIVATE_PROFILE');
+                     throw err;
+                 }
             }
-        } catch (err) {
-            handleError(err, 'fetchTotalUsers', 'fetchTotalUsers');
-        }
-    }, [handleError]);
+        },
+        enabled: shouldFetchProfile && !!searchQuery,
+        staleTime: 5 * 60 * 1000,
+        retry: false,
+    });
 
+    const profileList = queryResult?.type === 'list' ? (queryResult.data as ProfileData[]) : null;
 
-    const fetchItems = useCallback(async (itemIds: string) => {
-        try {
-            const response = await fetchItemsApi(itemIds);
-            const result = await response.data;
-            if (result.status === 200) {
-                const newItems = Array.isArray(result.data) ? result.data : [result.data];
-                setItemsData(newItems);
-            }
-        } catch (err) {
-            handleError(err, itemIds, 'fetchItems');
-        }
-    }, [handleError]);
-
-    const fetchExpRank = useCallback(async (userId: string) => {
-        try {
-            const response = await fetchExpRankApi(userId);
-            setExpRank(response.data.rank);
-        } catch (err) {
-            handleError(err, userId, 'fetchExpRank');
+    // Update selectedProfile when query result changes (for single result)
+    useEffect(() => {
+        if (profileSuccess && queryResult) {
+             if (queryResult.type === 'single') {
+                 setSelectedProfile(queryResult.data as ProfileData);
+             } else {
+                 // For list, we wait for user selection, so start with null
+                 setSelectedProfile(null);
+             }
         }
-    }, [handleError]);
+    }, [profileSuccess, queryResult]);
 
-    const fetchProfile = useCallback(async (query: string, type: 'nick' | 'id') => {
-        setLoading(true);
-        setError(null);
-        setDetailedError(null);
-        setProfileData(null);
-        setItemsData([]); 
-        setExpRank(null);
+    // Derived profileData is the Selected Profile
+    const profileData = selectedProfile;
 
-        try {
-            const response = await fetchProfileApi(query, type);
+    // Handle Profile Errors & Success side effects
+    useEffect(() => {
+        if (profileError) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const err = profileError as any;
+            const isPrivate = err.message === 'PRIVATE_PROFILE' || err.response?.status === 403;
+            const isNotFound = err.message === 'NOT_FOUND' || err.response?.status === 404;
 
-            if (response.status === 404) {
+            if (isNotFound) {
                 setError('등록된 유저가 아닙니다.');
-                setLoading(false);
-                return;
+            } else if (isPrivate) {
+                setError('프로필이 비공개된 유저 입니다.'); 
+                setDetailedError(null); 
+            } else {
+                setError('프로필을 불러오는데 실패했습니다.');
+                setDetailedError(createError(profileError, searchQuery, 'fetchProfile'));
             }
+            setShouldFetchProfile(false);
+        }
+    }, [profileError, searchQuery]);
 
-            const result = await response.data;
+    useEffect(() => {
+        if (profileSuccess) {
+            saveToRecentSearches(searchQuery, searchType);
+            setError(null);
+            setDetailedError(null);
+        }
+    }, [profileSuccess, saveToRecentSearches, searchQuery, searchType]);
 
-            if (result.status === 200) {
-                setProfileData(result.data);
 
-                // Fetch items data
-                if (result.data.equipment.length > 0) {
-                    const itemIds = result.data.equipment.map((eq: Equipment) => eq.itemId).join(',');
-                    fetchItems(itemIds);
-                }
+    // 4. Fetch Items (dependent on selectedProfile)
+    const itemIds = profileData?.equipment?.length 
+        ? profileData.equipment.map((eq: Equipment) => eq.itemId).join(',') 
+        : null;
 
-                // Fetch exp rank
-                fetchExpRank(result.data.user.id);
-                
-                // Save to recent searches
-                saveToRecentSearches(query, type);
-            }
-        } catch (err) {
-            setError('프로필을 불러오는데 실패했습니다.');
-            handleError(err, query, 'fetchProfile');
-        } finally {
-            setLoading(false);
-        }
-    }, [fetchItems, fetchExpRank, saveToRecentSearches, handleError]);
-
-    // Initial load
-    useEffect(() => {
-        fetchModes();
-        fetchTotalUsers();
-    }, [fetchModes, fetchTotalUsers]);
+    const { data: itemsData = [] } = useQuery({
+        queryKey: ['kkuko-items', itemIds],
+        queryFn: async () => {
+            if (!itemIds) return [];
+            const response = await fetchItemsApi(itemIds);
+            const result = response.data;
+            return Array.isArray(result.data) ? result.data : [result.data];
+        },
+        enabled: !!itemIds,
+        staleTime: 5 * 60 * 1000,
+    });
+
+    // 5. Fetch Exp Rank (dependent on selectedProfile)
+    const userId = profileData?.user?.id;
+
+    const { data: expRank = null } = useQuery({
+        queryKey: ['kkuko-exp-rank', userId],
+        queryFn: async () => {
+            if (!userId) return null;
+            const response = await fetchExpRankApi(userId);
+            return response.data.rank as number;
+        },
+        enabled: !!userId,
+        staleTime: 5 * 60 * 1000,
+    });
+
+    // Trigger fetch
+    const fetchProfile = useCallback((query: string, type: 'nick' | 'id') => {
+        setSearchQuery(query);
+        setSearchType(type);
+        setShouldFetchProfile(true);
+        setError(null);
+        setDetailedError(null);
+        setSelectedProfile(null);
+    }, []);
 
     return {
         profileData,
+        profileList,
         itemsData,
         modesData,
-        loading,
+        loading: profileLoading && shouldFetchProfile,
         error,
         detailedError,
         setDetailedError,
@@ -142,6 +208,7 @@ export const useKkukoProfile = () => {
         expRank,
         recentSearches,
         fetchProfile,
-        removeFromRecentSearches
+        removeFromRecentSearches,
+        selectProfile: setSelectedProfile
     };
 };
diff --git a/app/kkuko/profile/utils/profileHelper.ts b/app/kkuko/profile/utils/profileHelper.ts
index 8670ab7..8546e98 100644
--- a/app/kkuko/profile/utils/profileHelper.ts
+++ b/app/kkuko/profile/utils/profileHelper.ts
@@ -1,5 +1,6 @@
 import { Equipment, ItemInfo, KkukoRecord, Mode, isSpecialOptions } from '@/types/kkuko.types';
 import { NICKNAME_COLORS, OPTION_NAMES, SLOT_NAMES } from '../../shared/lib/const';
+import { CSSProperties } from 'react';
 
 export const getNicknameColor = (equipment: Equipment[], isDarkTheme: boolean): string => {
     const nikItem = equipment.find(eq => eq.slot === 'NIK');
@@ -11,6 +12,21 @@ export const getNicknameColor = (equipment: Equipment[], isDarkTheme: boolean):
     return NICKNAME_COLORS[colorKey] || defaultColor;
 };
 
+export const getNicknameStyle = (equipment: Equipment[], isDarkTheme: boolean): CSSProperties => {
+    const nikItem = equipment.find(eq => eq.slot === 'NIK');
+
+    if (nikItem?.itemId === '25_815_blue_red_name') {
+        return {
+            background: 'linear-gradient(127deg,rgba(255, 81, 81, 1) 0%, rgba(50, 137, 255, 1) 100%)',
+            color: 'transparent',
+            WebkitBackgroundClip: 'text',
+            backgroundClip: 'text'
+        };
+    }
+
+    return { color: getNicknameColor(equipment, isDarkTheme) };
+};
+
 export const extractColorFromLabel = (description: string, isDarkTheme: boolean): string => {
     const defaultColor = isDarkTheme ? '#FFFFFF' : '#000000';
     const match = description.match(/<label class='x-([^']+)'>.*?<\/label>/);
diff --git a/app/kkuko/ranking/KkukoRaking.tsx b/app/kkuko/ranking/KkukoRaking.tsx
index 506a2f4..49d6646 100644
--- a/app/kkuko/ranking/KkukoRaking.tsx
+++ b/app/kkuko/ranking/KkukoRaking.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Trophy, TrendingUp, Target } from 'lucide-react';
+import { Trophy, TrendingUp, Target, Gamepad2 } from 'lucide-react';
 import { Tabs, TabsList, TabsTrigger } from '@/app/components/ui/tabs';
 import { ModeSelector } from './components/ModeSelector';
 import { RankingList } from './components/RankingList';
@@ -82,6 +82,13 @@ export default function KkukoRanking() {
                                 <Trophy className="w-4 h-4 mr-2" />
                                 경험치 순위
                             </TabsTrigger>
+                            <TabsTrigger 
+                                value="total"
+                                className="data-[state=active]:bg-green-600 data-[state=active]:text-white"
+                            >
+                                <Gamepad2 className="w-4 h-4 mr-2" />
+                                플레이 판 수
+                            </TabsTrigger>
                         </TabsList>
                     </Tabs>
                 </div>
diff --git a/app/kkuko/ranking/components/ModeSelector.tsx b/app/kkuko/ranking/components/ModeSelector.tsx
index 5e2fde4..1447e84 100644
--- a/app/kkuko/ranking/components/ModeSelector.tsx
+++ b/app/kkuko/ranking/components/ModeSelector.tsx
@@ -18,6 +18,7 @@ interface ModeSelectorProps {
 }
 
 const GROUP_LABELS: Record<string, string> = {
+    def: '기본',
     kor: '🇰🇷 한국어 모드',
     eng: '🇺🇸 영어 모드',
     event: '🎉 이벤트 모드',
@@ -27,7 +28,7 @@ export function ModeSelector({ modes, selectedMode, onModeChange }: ModeSelector
     // Group modes by category
     const groupedModes = modes.reduce((acc, mode) => {
         const group = mode.group || 'other';
-        if (!['kor', 'eng', 'event'].includes(group)) return acc;
+        if (!['kor', 'eng', 'event', 'def'].includes(group)) return acc;
         if (!acc[group]) {
             acc[group] = [];
         }
@@ -37,7 +38,7 @@ export function ModeSelector({ modes, selectedMode, onModeChange }: ModeSelector
 
     // Sort groups: kor, eng, event, others
     const sortedGroups = Object.keys(groupedModes).sort((a, b) => {
-        const order = ['kor', 'eng', 'event'];
+        const order = ['def', 'kor', 'eng', 'event'];
         const indexA = order.indexOf(a);
         const indexB = order.indexOf(b);
         if (indexA === -1 && indexB === -1) return a.localeCompare(b);
diff --git a/app/kkuko/ranking/components/Podium.tsx b/app/kkuko/ranking/components/Podium.tsx
index ae33c71..ad1adc7 100644
--- a/app/kkuko/ranking/components/Podium.tsx
+++ b/app/kkuko/ranking/components/Podium.tsx
@@ -1,10 +1,10 @@
 'use client';
 
-import { useState, useEffect } from 'react';
 import Link from 'next/link';
+import { useQuery } from '@tanstack/react-query';
 import { TrendingUp, User, Crown } from 'lucide-react';
 import { Card } from '@/app/components/ui/card';
-import type { RankingEntry, RankingOption, ProfileData, ItemInfo } from '@/app/types/kkuko.types';
+import type { RankingEntry, RankingOption, ProfileData } from '@/app/types/kkuko.types';
 import ProfileAvatar from '../../shared/components/ProfileAvatar';
 import { fetchProfile, fetchItems } from '../../shared/lib/api';
 
@@ -14,60 +14,62 @@ interface PodiumProps {
 }
 
 export function Podium({ topThree, option }: PodiumProps) {
-    const [profiles, setProfiles] = useState<Record<string, ProfileData>>({});
-    const [itemsData, setItemsData] = useState<ItemInfo[]>([]);
-
-    useEffect(() => {
-        if (topThree.length === 0) return;
-
-        const loadProfiles = async () => {
-            try {
-                // Fetch profiles for all top 3 users parallel
-                const validEntries = topThree.slice(0, 3);
-                
-                const profilePromises = validEntries.map(entry => 
-                    fetchProfile(entry.userInfo.id, 'id')
-                        .then(res => (res.data && res.data.status === 200) ? res.data.data : null)
-                        .catch(err => {
-                            console.error(`Failed to fetch profile for ${entry.userInfo.nickname}`, err);
-                            return null;
-                        })
-                );
-
-                const resolvedProfiles = (await Promise.all(profilePromises)).filter((p): p is ProfileData => p !== null);
-                
-                const newProfiles: Record<string, ProfileData> = {};
-                const allItemIds = new Set<string>();
-
-                resolvedProfiles.forEach(p => {
-                    if (!p || !p.user) return;
-                    newProfiles[p.user.id] = p;
-                    
-                    // Collect item IDs
-                    if (p.equipment) {
-                        p.equipment.forEach(e => {
-                            if (e.itemId) allItemIds.add(e.itemId);
-                        });
-                    }
-                });
-
-                setProfiles(newProfiles);
-
-                // Fetch items details needed for rendering avatars
-                if (allItemIds.size > 0) {
-                    const idsString = Array.from(allItemIds).join(',');
-                    const itemsResponse = await fetchItems(idsString);
-                    if (itemsResponse.data && itemsResponse.data.status === 200) {
-                        setItemsData(itemsResponse.data.data);
-                    }
-                }
-            } catch (error) {
-                console.error("Failed to load podium profiles", error);
-            }
-        };
-
-        loadProfiles();
-    }, [topThree]);
+    // 1. Fetch Profiles for top 3 users
+    const topThreeIds = topThree.slice(0, 3).map(entry => entry.userInfo.id).join(',');
+
+    const { data: profiles = {} } = useQuery({
+        queryKey: ['podium-profiles', topThreeIds],
+        queryFn: async () => {
+            if (!topThreeIds) return {};
+            
+            const validEntries = topThree.slice(0, 3);
+            const profilePromises = validEntries.map(entry => 
+                fetchProfile(entry.userInfo.id, 'id')
+                    .then(res => (res.data && res.data.status === 200) ? res.data.data : null)
+                    .catch(err => {
+                        console.error(`Failed to fetch profile for ${entry.userInfo.nickname}`, err);
+                        return null;
+                    })
+            );
+
+            const resolvedProfiles = (await Promise.all(profilePromises)).filter((p): p is ProfileData => p !== null);
+            
+            const newProfiles: Record<string, ProfileData> = {};
+            resolvedProfiles.forEach(p => {
+                if (!p || !p.user) return;
+                newProfiles[p.user.id] = p;
+            });
+            return newProfiles;
+        },
+        enabled: topThree.length > 0,
+        staleTime: 5 * 60 * 1000, // 5 minutes
+    });
+
+    // 2. Extract item IDs from fetched profiles
+    const allItemIds = new Set<string>();
+    Object.values(profiles).forEach(p => {
+        if (p.equipment) {
+            p.equipment.forEach(e => {
+                if (e.itemId) allItemIds.add(e.itemId);
+            });
+        }
+    });
+    const itemIdsString = Array.from(allItemIds).join(',');
+
+    // 3. Fetch Items
+    const { data: itemsData = [] } = useQuery({
+        queryKey: ['podium-items', itemIdsString],
+        queryFn: async () => {
+             if (!itemIdsString) return [];
+             const itemsResponse = await fetchItems(itemIdsString);
+             if (itemsResponse.data && itemsResponse.data.status === 200) {
+                 return itemsResponse.data.data;
+             }
+             return [];
+        },
+        enabled: allItemIds.size > 0,
+        staleTime: 5 * 60 * 1000, // 5 minutes
+    });
 
     if (topThree.length === 0) return null;
 
@@ -202,9 +204,9 @@ export function Podium({ topThree, option }: PodiumProps) {
                                         <div className="flex items-center gap-2">
                                             <TrendingUp className="w-5 h-5" />
                                             <span className="font-bold text-base">
-                                                {option === 'win' 
-                                                    ? entry.userRecord.win.toLocaleString() 
-                                                    : entry.userRecord.exp.toLocaleString()}
+                                                {option === 'exp' 
+                                                    ? entry.userRecord.exp.toLocaleString()
+                                                    : entry.userRecord.win.toLocaleString()}
                                             </span>
                                         </div>
                                         <div className="text-xs opacity-90 font-medium">
diff --git a/app/kkuko/ranking/components/RankingCard.tsx b/app/kkuko/ranking/components/RankingCard.tsx
index db6d6d0..b5eee76 100644
--- a/app/kkuko/ranking/components/RankingCard.tsx
+++ b/app/kkuko/ranking/components/RankingCard.tsx
@@ -3,11 +3,11 @@
 import Link from 'next/link';
 import { Trophy, TrendingUp } from 'lucide-react';
 import { Card } from '@/app/components/ui/card';
-import type { RankingEntry } from '@/app/types/kkuko.types';
+import type { RankingEntry, RankingOption } from '@/app/types/kkuko.types';
 
 interface RankingCardProps {
     entry: RankingEntry;
-    option: 'win' | 'exp';
+    option: RankingOption;
 }
 
 export function RankingCard({ entry, option }: RankingCardProps) {
@@ -55,10 +55,16 @@ export function RankingCard({ entry, option }: RankingCardProps) {
                 {/* Stats */}
                 <div className="flex-shrink-0 flex gap-6 text-sm">
                     <div className="text-center">
-                        <div className="text-gray-600 dark:text-gray-400 mb-1">{option === 'win' ? '승리' : '경험치'}</div>
+                        <div className="text-gray-600 dark:text-gray-400 mb-1">
+                            {option === 'exp' ? '경험치' : option === 'total' ? '플레이 판 수' : '승리'}
+                        </div>
                         <div className="text-gray-900 dark:text-white font-bold flex items-center gap-1">
                             <TrendingUp className="w-4 h-4 text-green-600 dark:text-green-500" />
-                            {option === 'win' ? userRecord.win.toLocaleString() : userRecord.exp.toLocaleString()}
+                            {option === 'exp' 
+                                ? userRecord.exp.toLocaleString() 
+                                : option === 'total'
+                                    ? userRecord.total.toLocaleString()
+                                    : userRecord.win.toLocaleString()}
                         </div>
                     </div>
                     <div className="text-center">
diff --git a/app/kkuko/ranking/hooks/useKkukoRanking.ts b/app/kkuko/ranking/hooks/useKkukoRanking.ts
index fa391d9..53d461f 100644
--- a/app/kkuko/ranking/hooks/useKkukoRanking.ts
+++ b/app/kkuko/ranking/hooks/useKkukoRanking.ts
@@ -1,95 +1,145 @@
 import { useState, useEffect, useCallback } from 'react';
-import { rankingCache } from '../lib/cache';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
+import { useQuery } from '@tanstack/react-query';
 import { fetchModes as fetchModesApi, fetchRanking as fetchRankingApi } from '../../shared/lib/api';
 import type { RankingEntry, RankingOption, Mode } from '@/app/types/kkuko.types';
 
+interface ErrorMessage {
+    ErrName: string;
+    ErrMessage: string;
+    ErrStackRace: string | null;
+    inputValue: string;
+    location: string;
+}
+
 export const useKkukoRanking = () => {
-    const [modes, setModes] = useState<Mode[]>([]);
+    const searchParams = useSearchParams();
+    const router = useRouter();
+    const pathname = usePathname();
+
     const [selectedMode, setSelectedMode] = useState<string>('');
-    const [rankings, setRankings] = useState<RankingEntry[]>([]);
     const [option, setOption] = useState<RankingOption>('win');
     const [page, setPage] = useState(1);
-    const [loading, setLoading] = useState(false);
-    const [modesLoading, setModesLoading] = useState(true);
     const [detailedError, setDetailedError] = useState<ErrorMessage | null>(null);
 
+    // Helper to create error object
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const handleError = useCallback((err: any, inputValue: string, location: string) => {
-        const errorMsg: ErrorMessage = {
-            ErrName: err.name || "Error",
-            ErrMessage: err.message || "Unknown error",
-            ErrStackRace: err.stack || null,
-            inputValue: inputValue,
-            location: location
-        };
-        setDetailedError(errorMsg);
-        console.error(`Failed at ${location}:`, err);
-    }, []);
+    const createError = (err: any, inputValue: string, location: string): ErrorMessage => ({
+        ErrName: err.name || "Error",
+        ErrMessage: err.message || "Unknown error",
+        ErrStackRace: err.stack || null,
+        inputValue: inputValue,
+        location: location
+    });
 
-    const fetchModes = useCallback(async () => {
-        setModesLoading(true);
-        try {
+    // 1. Fetch Modes
+    const { 
+        data: modes = [], 
+        isLoading: modesLoading,
+        error: modesError
+    } = useQuery({
+        queryKey: ['kkuko-modes'],
+        queryFn: async () => {
             const response = await fetchModesApi();
             const modesData = response.data.data as Mode[];
-            setModes(modesData);
-            if (modesData.length > 0) {
-                setSelectedMode(modesData[0].modeId);
-            }
-        } catch (error) {
-            handleError(error, 'fetchModes', 'fetchModes');
-            setModes([]);
-        } finally {
-            setModesLoading(false);
-        }
-    }, [handleError]);
+            return [...modesData, { modeId: 'ALL', modeName: '전체 모드', group: 'def' }];
+        },
+        staleTime: 60 * 60 * 1000, // 1 hour
+    });
 
-    const fetchRankings = useCallback(async () => {
-        if (!selectedMode) return;
-
-        const cacheKey = { mode: selectedMode, page, option };
-        const cachedData = rankingCache.get(cacheKey);
-
-        if (cachedData) {
-            setRankings(cachedData);
-            return;
+    // Handle modes error
+    useEffect(() => {
+        if (modesError) {
+            setDetailedError(createError(modesError, 'fetchModes', 'fetchModes'));
         }
+    }, [modesError]);
 
-        setLoading(true);
-        try {
+    // 2. Fetch Rankings
+    const {
+        data: rankings = [],
+        isLoading: rankingsLoading,
+        error: rankingsError
+    } = useQuery({
+        queryKey: ['kkuko-rankings', selectedMode, page, option],
+        queryFn: async () => {
+            if (!selectedMode) return [];
             const response = await fetchRankingApi(selectedMode, page, option);
-            const rankingsData = response.data.data as RankingEntry[];
-            setRankings(rankingsData);
-            rankingCache.set(cacheKey, rankingsData);
-        } catch (error) {
-            handleError(error, `mode: ${selectedMode}, page: ${page}, option: ${option}`, 'fetchRankings');
-            setRankings([]);
-        } finally {
-            setLoading(false);
+            return response.data.data as RankingEntry[];
+        },
+        enabled: !!selectedMode,
+        staleTime: 5 * 60 * 1000, // 5 minutes
+    });
+
+    // Handle rankings error
+    useEffect(() => {
+        if (rankingsError) {
+            setDetailedError(createError(rankingsError, `mode: ${selectedMode}, page: ${page}, option: ${option}`, 'fetchRankings'));
         }
-    }, [selectedMode, page, option, handleError]);
+    }, [rankingsError, selectedMode, page, option]);
 
-    // Fetch modes on mount
+    // Sync mode with URL
     useEffect(() => {
-        fetchModes();
-    }, [fetchModes]);
+        if (modes.length === 0) return;
+
+        const queryMode = searchParams.get('mode');
+        const isValidQueryMode = queryMode && modes.some(m => m.modeId === queryMode);
+        
+        if (isValidQueryMode) {
+            if (selectedMode !== queryMode) {
+                setSelectedMode(queryMode);
+                setPage(1);
+            }
+        } else {
+            if (modes.length > 0) {
+                 const defaultMode = modes[0].modeId;
+                 if (selectedMode !== defaultMode && !queryMode) {
+                     setSelectedMode(defaultMode);
+                 }
+                 if (queryMode !== defaultMode) {
+                     const params = new URLSearchParams(searchParams.toString());
+                     params.set('mode', defaultMode);
+                     router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+                 }
+            }
+        }
+    }, [modes, searchParams, pathname, router, selectedMode]);
 
-    // Fetch rankings when dependencies change
+    // Sync option with URL
     useEffect(() => {
-        fetchRankings();
-    }, [fetchRankings]);
+        const queryOption = searchParams.get('option');
+        if (queryOption && ['win', 'exp', 'total'].includes(queryOption)) {
+            if (option !== queryOption) {
+                setOption(queryOption as RankingOption);
+                setPage(1);
+            }
+        }
+    }, [searchParams, option]);
 
     const handleModeChange = useCallback((modeId: string) => {
         setSelectedMode(modeId);
         setPage(1);
-    }, []);
+        
+        const params = new URLSearchParams(searchParams.toString());
+        params.set('mode', modeId);
+        params.delete('page');
+        
+        router.push(`${pathname}?${params.toString()}`);
+    }, [pathname, router, searchParams]);
 
     const handleOptionChange = useCallback((value: string) => {
         setOption(value as RankingOption);
         setPage(1);
-    }, []);
+        
+        const params = new URLSearchParams(searchParams.toString());
+        params.set('option', value);
+        params.delete('page');
+        
+        router.push(`${pathname}?${params.toString()}`);
+    }, [pathname, router, searchParams]);
 
     const handlePageChange = useCallback((newPage: number) => {
         setPage(newPage);
+        window.scrollTo({ top: 0, behavior: 'smooth' });
     }, []);
 
     return {
@@ -98,7 +148,7 @@ export const useKkukoRanking = () => {
         rankings,
         option,
         page,
-        loading,
+        loading: rankingsLoading,
         modesLoading,
         detailedError,
         setDetailedError,
diff --git a/app/kkuko/ranking/page.tsx b/app/kkuko/ranking/page.tsx
index 040f923..267b801 100644
--- a/app/kkuko/ranking/page.tsx
+++ b/app/kkuko/ranking/page.tsx
@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import KkukoRaking from "./KkukoRaking";
 
 export async function generateMetadata() {
@@ -16,5 +17,9 @@ export async function generateMetadata() {
 }
 
 export default function KkukoRakingPage() {
-    return <KkukoRaking />;
+    return (
+		<Suspense fallback={<div>Loading...</div>}>
+			<KkukoRaking />
+		</Suspense>
+	);
 }
\ No newline at end of file
diff --git a/app/kkuko/shared/lib/api.ts b/app/kkuko/shared/lib/api.ts
index 3950404..7bb3001 100644
--- a/app/kkuko/shared/lib/api.ts
+++ b/app/kkuko/shared/lib/api.ts
@@ -31,6 +31,10 @@ export async function fetchProfile(query: string, type: 'nick' | 'id') {
     })
 }
 
+export async function fetchProfileByNickname(nickname: string) {
+    return await client.get(`/profile/nickname/${encodeURIComponent(nickname)}`);
+}
+
 export async function fetchItems(itemsIds: string) {
     return await client.get<{data: ItemInfo[], status: number}>(`/item?query=${encodeURIComponent(itemsIds)}`);
 }
@@ -44,7 +48,7 @@ export async function fetchExpRank(userId: string) {
 export async function fetchRanking(
     mode: string, 
     page: number = 1, 
-    option: 'win' | 'exp' = 'win'
+    option: 'win' | 'exp' | 'total' = 'win'
 ) {
     return await client.get(`/ranking/${mode}`, {
         params: {
diff --git a/app/layout.tsx b/app/layout.tsx
index b5dd87c..00bc861 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -42,7 +42,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }>) {
 	return (
-		<html lang="en" suppressHydrationWarning>
+		<html lang="ko" suppressHydrationWarning>
 			<head />
 			<body
 				className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen dark:bg-gray-900`}>
diff --git a/app/lib/supabase/ISupabaseClientManager.ts b/app/lib/supabase/ISupabaseClientManager.ts
index 96a3364..d0b7958 100644
--- a/app/lib/supabase/ISupabaseClientManager.ts
+++ b/app/lib/supabase/ISupabaseClientManager.ts
@@ -38,7 +38,7 @@ export interface IAddManager {
     wordsThemes(q: addWordThemeQueryType[]): Promise<PostgrestSingleResponse<{words:{word: string}; themes: {name: string}}[]>>;
     wordThemesReq(q: {word_id: number, theme_id: number, typez: "add" | "delete", req_by: string | null}[]): Promise<PostgrestSingleResponse<{typez: "add" | "delete"; themes:{name: string}}[]>>
     waitWords(q: {word: string, requested_by: string | null, request_type: "add"}[]): Promise<PostgrestSingleResponse<(wait_word)[]>>;
-    notification(data: { title: string; body: string; img?: string | null; end_at: string }): Promise<PostgrestSingleResponse<notification>>;
+    notification(data: { title: string; body: string; img?: string | null; end_at: string; is_important?: boolean; is_modal?: boolean }): Promise<PostgrestSingleResponse<notification>>;
 }
 
 // get 관련 타입
@@ -95,6 +95,8 @@ export interface IGetManager{
     wordsByAdvancedQuery(input: advancedQueryType): Promise<{data: {word: string, nextWordCount: number}[], error: null} | {data: null; error: PostgrestError}>;
     wordState(): Promise<{data: {firstLetterCounts: word_first_letter_counts[]; lastLetterCounts: word_last_letter_counts[];}, error: null}|{data: null; error: PostgrestError}>;
     docsLastUpdate(id: number): Promise<PostgrestSingleResponse<{last_update: string;} | null>>
+    allNotifications(): Promise<PostgrestSingleResponse<notification[]>>;
+    notificationById(id: number): Promise<PostgrestSingleResponse<notification | null>>;
 }
 
 // delete 관련 타입
@@ -121,7 +123,7 @@ export interface IUpdateManager{
     userContribution({ userId, amount }: { userId: string, amount?: number }): Promise<PostgrestSingleResponse<undefined>>;
     docsLastUpdate(docs_ids: number[]): Promise<void>;
     docView(id: number): Promise<void>;
-    notification(id: number, data: { title?: string; body?: string; img?: string | null; end_at?: string | null }): Promise<PostgrestSingleResponse<notification>>;
+    notification(id: number, data: { title?: string; body?: string; img?: string | null; end_at?: string | null; is_important?: boolean; is_modal?: boolean }): Promise<PostgrestSingleResponse<notification>>;
 }
 
 // 전체 supabaseManager 타입 
diff --git a/app/lib/supabase/SupabaseClientManager.ts b/app/lib/supabase/SupabaseClientManager.ts
index 429ad22..81d4dad 100644
--- a/app/lib/supabase/SupabaseClientManager.ts
+++ b/app/lib/supabase/SupabaseClientManager.ts
@@ -68,7 +68,7 @@ class AddManager implements IAddManager {
     public async waitWords(q: { word: string; requested_by: string | null; request_type: 'add'; }[]) {
         return this.supabase.from('wait_words').upsert(q, { onConflict: "word", ignoreDuplicates: true }).select('*');
     }
-    public async notification(data: { title: string; body: string; img?: string | null; end_at: string }) {
+    public async notification(data: { title: string; body: string; img?: string | null; end_at: string, is_important?: boolean, is_modal?: boolean }) {
         return await this.supabase.from('notification').insert(data).select('*').single();
     }
 
@@ -745,7 +745,7 @@ class GetManager implements IGetManager {
     public async notice() {
         const today = new Date();
         today.setHours(23, 59, 59, 999);
-        return await this.supabase.from('notification').select('*').gte('end_at', today.toISOString()).order('created_at', { ascending: false }).limit(1).maybeSingle();
+        return await this.supabase.from('notification').select('*').gte('end_at', today.toISOString()).eq('is_modal', true).order('created_at', { ascending: false }).limit(1).maybeSingle();
     }
     public async wordsThemesByWordId(wordIds: number[]) {
         return await this.supabase.from('word_themes').select('word_id, themes(*)').in('word_id', wordIds);
@@ -762,6 +762,14 @@ class GetManager implements IGetManager {
         return { data: { firstLetterCounts: data1, lastLetterCounts: data2 }, error: null };
     }
 
+    async allNotifications() {
+        return await this.supabase.from('notification').select('*').order('created_at', { ascending: false });
+    }
+
+    async notificationById(id: number) {
+        return await this.supabase.from('notification').select('*').eq('id', id).maybeSingle();
+    }
+
 }
 
 class DeleteManager implements IDeleteManager {
@@ -844,7 +852,7 @@ class UpdateManager implements IUpdateManager {
     public async docView(id: number): Promise<void> {
         await this.supabase.rpc('increment_doc_views', { doc_id: id })
     }
-    public async notification(id: number, data: { title?: string; body?: string; img?: string | null; end_at: string }) {
+    public async notification(id: number, data: { title?: string; body?: string; img?: string | null; end_at: string, is_important?: boolean; is_modal?: boolean }) {
         return await this.supabase.from('notification').update(data).eq('id', id).select('*').single();
     }
 }
diff --git a/app/notification/Notification.tsx b/app/notification/Notification.tsx
new file mode 100644
index 0000000..e3eaa4f
--- /dev/null
+++ b/app/notification/Notification.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Bell, Calendar, Megaphone, Pin, PenSquare } from "lucide-react";
+import { format } from "date-fns";
+import { ko } from "date-fns/locale";
+import type { Database } from "@/types/database.types";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { useSelector } from "react-redux";
+import { Button } from "@/components/ui/button";
+import type { RootState } from "../store/store";
+
+type NotificationType = Database['public']['Tables']['notification']['Row'];
+
+interface NotificationProps {
+    notifications: NotificationType[];
+}
+
+/**
+ * 공지사항 목록을 표시하는 컴포넌트입니다.
+ * 중요 공지사항은 상단에 고정되며 강조 표시됩니다.
+ * 관리자는 글쓰기 버튼이 노출됩니다.
+ * 
+ * @param {Object} props - 컴포넌트 props
+ * @param {NotificationType[]} props.notifications - 표시할 공지사항 데이터 배열
+ */
+export default function Notification({ notifications }: NotificationProps) {
+    const user = useSelector((state: RootState) => state.user);
+
+    // 중요 공지사항 우선 정렬 (true가 위로), 그 다음 생성일 내림차순
+    const sortedNotifications = [...notifications].sort((a, b) => {
+        const aImportant = a.is_important ?? false;
+        const bImportant = b.is_important ?? false;
+
+        if (aImportant === bImportant) {
+            return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
+        }
+        return aImportant ? -1 : 1;
+    });
+
+    return (
+        <div className="space-y-6 px-4 md:px-0 max-w-4xl mx-auto min-h-[60vh]">
+            <div className="flex items-center justify-between mb-6">
+                <div className="flex items-center gap-2">
+                     <Bell className="w-6 h-6 text-primary" />
+                     <h1 className="text-2xl font-bold tracking-tight">공지사항</h1>
+                </div>
+                {user.role === "admin" && (
+                    <Link href="/notification/write">
+                        <Button size="sm" className="gap-2">
+                            <PenSquare className="w-4 h-4" />
+                            작성하기
+                        </Button>
+                    </Link>
+                )}
+            </div>
+
+            {notifications.length === 0 ? (
+                <div className="flex flex-col items-center justify-center min-h-[400px] gap-4 text-muted-foreground">
+                    <Megaphone className="w-12 h-12 opacity-20" />
+                    <p>등록된 공지사항이 없습니다.</p>
+                </div>
+            ) : (
+                <div className="grid gap-3">
+                    {sortedNotifications.map((notice) => (
+                        <Link key={notice.id} href={`/notification/${notice.id}`}>
+                            <Card 
+                                className={cn(
+                                    "transition-all hover:shadow-md cursor-pointer dark:border-zinc-800",
+                                    notice.is_important && "border-primary/50 bg-primary/5 dark:bg-primary/10"
+                                )}
+                            >
+                                <CardHeader className="p-4 sm:p-6">
+                                    <div className="flex items-center justify-between gap-4">
+                                        <div className="flex items-center gap-3 overflow-hidden">
+                                            {notice.is_important ? (
+                                                 <Pin className="w-4 h-4 text-primary shrink-0 rotate-45 fill-primary" />
+                                            ) : (
+                                                <div className="w-4" /> 
+                                            )}
+                                            <div className="space-y-1 truncate">
+                                                <div className="flex items-center gap-2">
+                                                    {notice.is_important && <Badge variant="default" className="text-xs h-5 px-1.5">필독</Badge>}
+                                                    <CardTitle className="text-base sm:text-lg truncate">{notice.title}</CardTitle>
+                                                </div>
+                                                <CardDescription className="flex items-center gap-1 text-xs">
+                                                    <Calendar className="w-3 h-3" />
+                                                    {format(new Date(notice.created_at), "yyyy-MM-dd", { locale: ko })}
+                                                </CardDescription>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </CardHeader>
+                            </Card>
+                        </Link>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/app/notification/[id]/NotificationDetail.tsx b/app/notification/[id]/NotificationDetail.tsx
new file mode 100644
index 0000000..3d49791
--- /dev/null
+++ b/app/notification/[id]/NotificationDetail.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Calendar, ChevronLeft, Pin, Edit, Trash2 } from "lucide-react";
+import { format } from "date-fns";
+import { ko } from "date-fns/locale";
+import type { Database } from "@/types/database.types";
+import Image from "next/image";
+import Link from "next/link";
+import { Separator } from "@/components/ui/separator";
+import ReactMarkdown from "react-markdown";
+import { useSelector } from "react-redux";
+import type { RootState } from "../../store/store";
+import { SCM } from "@/lib/supabaseClient";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import ErrorModal from "@/components/ErrModal";
+import type { ErrorMessage } from "@/types/type";
+import ConfirmModal from "@/components/ConfirmModal";
+import { PostgrestError } from "@supabase/supabase-js";
+import CompleteModal from "@/app/components/CompleteModal";
+
+type NotificationType = Database['public']['Tables']['notification']['Row'];
+
+interface NotificationDetailProps {
+    notification: NotificationType;
+}
+
+/**
+ * 공지사항 상세 내용을 표시하는 컴포넌트입니다.
+ * 
+ * @param {Object} props - 컴포넌트 props
+ * @param {NotificationType} props.notification - 표시할 공지사항 데이터
+ */
+export default function NotificationDetail({ notification }: NotificationDetailProps) {
+    const user = useSelector((state: RootState) => state.user);
+    const router = useRouter();
+    const [error, setError] = useState<ErrorMessage | null>(null);
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const [isDeleting, setIsDeleting] = useState(false);
+    const [completeStatus, setCompleteStatus] = useState<{title: string; description: string;} | null>(null);
+
+    const handleDelete = async () => {
+        try {
+            setIsDeleting(true);
+            const { error } = await SCM.delete().notificationById(notification.id);
+            
+            if (error) throw error;
+            
+            setCompleteStatus({
+                title: "공지사항이 삭제되었습니다.",
+                description: "공지사항이 성공적으로 삭제되었습니다. 목록으로 돌아갑니다."
+            });
+        } catch (error) {
+            console.error("Delete failed:", error);
+            const pgError = error as PostgrestError;
+            setError({
+                ErrName: pgError.code || "Delete Error",
+                ErrMessage: pgError.message || "공지사항 삭제에 실패했습니다.",
+                ErrStackRace: pgError.details,
+                inputValue: `Delete ID: ${notification.id}`,
+                location: "NotificationDetail"
+            });
+        } finally {
+            setIsDeleting(false);
+            setIsDeleteModalOpen(false);
+        }
+    };
+
+    const handleCloseCompleteModal = () => {
+        router.push("/notification");
+        router.refresh();
+    };
+
+    return (
+        <div className="space-y-6 px-4 md:px-0 max-w-4xl mx-auto">
+            {error && <ErrorModal error={error} onClose={() => setError(null)} />}
+            {completeStatus && (
+                <CompleteModal 
+                    open={completeStatus !== null}
+                    title={completeStatus.title}
+                    description={completeStatus.description}
+                    onClose={handleCloseCompleteModal}
+                />
+            )}
+            <ConfirmModal 
+                open={isDeleteModalOpen}
+                onClose={() => setIsDeleteModalOpen(false)}
+                title="공지사항 삭제"
+                description="이 공지사항을 정말 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다."
+                onConfirm={handleDelete}
+                
+            />
+
+            <div className="flex items-center justify-between mb-6">
+                <div className="flex items-center gap-2">
+                    <Link href="/notification">
+                        <Button variant="ghost" size="icon" className="h-8 w-8">
+                            <ChevronLeft className="h-4 w-4" />
+                        </Button>
+                    </Link>
+                    <h1 className="text-xl font-bold tracking-tight">공지사항 상세</h1>
+                </div>
+
+                {user.role === "admin" && (
+                    <div className="flex gap-2">
+                        <Link href={`/notification/${notification.id}/edit`}>
+                            <Button variant="outline" size="sm" className="gap-2">
+                                <Edit className="w-4 h-4" />
+                                수정
+                            </Button>
+                        </Link>
+                        <Button 
+                            variant="destructive" 
+                            size="sm" 
+                            className="gap-2"
+                            onClick={() => setIsDeleteModalOpen(true)}
+                            disabled={isDeleting}
+                        >
+                            <Trash2 className="w-4 h-4" />
+                            삭제
+                        </Button>
+                    </div>
+                )}
+            </div>
+
+            <Card className="dark:border-zinc-800">
+                <CardHeader className="space-y-4">
+                    <div className="space-y-2">
+                        <div className="flex flex-wrap items-center gap-2">
+                            {notification.is_important && (
+                                <Badge variant="secondary" className="bg-primary/10 text-primary hover:bg-primary/20 border-primary/20 gap-1">
+                                    <Pin className="w-3 h-3 fill-primary" />
+                                    필독
+                                </Badge>
+                            )}
+                            {notification.is_modal && (
+                                <Badge variant="outline" className="text-muted-foreground">
+                                    팝업 공지
+                                </Badge>
+                            )}
+                        </div>
+                        <CardTitle className="text-2xl font-bold leading-tight">{notification.title}</CardTitle>
+                    </div>
+                    
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                        <Calendar className="w-4 h-4" />
+                        <span>{format(new Date(notification.created_at), "yyyy년 M월 d일 a h:mm", { locale: ko })}</span>
+                    </div>
+                </CardHeader>
+                
+                <Separator />
+                
+                <CardContent className="pt-6">
+                    <div className="text-base leading-relaxed text-foreground min-h-[100px] [&>ul]:list-disc [&>ul]:pl-6 [&>ol]:list-decimal [&>ol]:pl-6 [&>h1]:text-2xl [&>h1]:font-bold [&>h1]:mb-4 [&>h2]:text-xl [&>h2]:font-bold [&>h2]:mb-3 [&>h3]:text-lg [&>h3]:font-bold [&>h3]:mb-2 [&>p]:mb-4 [&>a]:text-primary [&>a]:underline [&>blockquote]:border-l-4 [&>blockquote]:pl-4 [&>blockquote]:italic">
+                        <ReactMarkdown>{notification.body}</ReactMarkdown>
+                    </div>
+                    
+                    {notification.img && (
+                        <div className="mt-8 rounded-lg overflow-hidden border bg-muted/50">
+                            <div className="relative w-full aspect-video max-w-2xl mx-auto">
+                                <Image 
+                                    src={notification.img} 
+                                    alt={notification.title} 
+                                    className="object-contain" 
+                                    fill 
+                                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 700px"
+                                />
+                            </div>
+                        </div>
+                    )}
+                </CardContent>
+            </Card>
+
+            <div className="flex justify-center pt-4 pb-8">
+                <Link href="/notification">
+                    <Button variant="outline" className="px-8">목록으로 돌아가기</Button>
+                </Link>
+            </div>
+        </div>
+    );
+}
diff --git a/app/notification/[id]/edit/page.tsx b/app/notification/[id]/edit/page.tsx
new file mode 100644
index 0000000..b29d161
--- /dev/null
+++ b/app/notification/[id]/edit/page.tsx
@@ -0,0 +1,34 @@
+import NotificationWrite from "../../write/NotificationWrite";
+import { notFound } from "next/navigation";
+import { type Metadata } from "next";
+import { SCM } from "@/app/lib/supabaseClient";
+
+interface PageProps {
+    params: Promise<{ id: string }>;
+}
+
+export const metadata: Metadata = {
+    title: "공지사항 수정 - 끄코 유틸",
+};
+
+export default async function NotificationEditPage({ params }: PageProps) {
+    const { id } = await params;
+    const notificationId = parseInt(id);
+    
+    if (isNaN(notificationId)) {
+        notFound();
+    }
+    
+    const { data: notification, error } = await SCM.get().notificationById(notificationId);
+
+    if (error || !notification) {
+        if (error) console.error("Error fetching notification for edit:", error);
+        notFound();
+    }
+
+    return (
+        <main className="container mx-auto py-8 px-4">
+            <NotificationWrite notification={notification} />
+        </main>
+    );
+}
diff --git a/app/notification/[id]/page.tsx b/app/notification/[id]/page.tsx
new file mode 100644
index 0000000..afa21e0
--- /dev/null
+++ b/app/notification/[id]/page.tsx
@@ -0,0 +1,63 @@
+import { createSupabaseServerClient } from "@/lib/supabaseServer";
+import NotificationDetail from "./NotificationDetail";
+import { notFound } from "next/navigation";
+import { type Metadata } from "next";
+
+interface PageProps {
+    params: Promise<{ id: string }>;
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+    const { id } = await params;
+    const supabase = await createSupabaseServerClient();
+    
+    const { data: notification } = await supabase
+        .from('notification')
+        .select('title')
+        .eq('id', parseInt(id))
+        .single();
+        
+    if (!notification) {
+        return {
+            title: "공지사항을 찾을 수 없습니다",
+        };
+    }
+
+    return {
+        title: `${notification.title} - 공지사항`,
+        description: `끄코 유틸 공지사항: ${notification.title}`,
+    };
+}
+
+/**
+ * 공지사항 상세 페이지입니다.
+ */
+export default async function NotificationDetailPage({ params }: PageProps) {
+    const { id } = await params;
+    
+    // ID 유효성 검사 (숫자인지 확인)
+    const notificationId = parseInt(id);
+    if (isNaN(notificationId)) {
+        notFound();
+    }
+
+    const supabase = await createSupabaseServerClient();
+    
+    // 직접 쿼리하여 데이터 가져오기 (SupabaseClientManager에는 getById가 없으므로)
+    const { data: notification, error } = await supabase
+        .from('notification')
+        .select('*')
+        .eq('id', notificationId)
+        .single();
+
+    if (error || !notification) {
+        if (error) console.error("Error fetching notification:", error);
+        notFound();
+    }
+
+    return (
+        <main className="container mx-auto py-8">
+            <NotificationDetail notification={notification} />
+        </main>
+    );
+}
diff --git a/app/notification/components/NotificationWriteForm.tsx b/app/notification/components/NotificationWriteForm.tsx
new file mode 100644
index 0000000..32ab9e4
--- /dev/null
+++ b/app/notification/components/NotificationWriteForm.tsx
@@ -0,0 +1,300 @@
+import type { Database } from '@/types/database.types';
+import { useEffect, useRef, useState } from 'react';
+import { format } from "date-fns";
+import { SCM } from '@/lib/supabaseClient';
+import { useRouter } from 'next/navigation';
+import { PostgrestError } from "@supabase/supabase-js";
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from "@/components/ui/button";
+import { ChevronLeft, Loader2, Upload, X } from 'lucide-react';
+import Link from 'next/link';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import MarkdownViewer from '@/components/MarkdownViewer';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import Image from 'next/image';
+import { Textarea } from '@/components/ui/textarea';
+import CompleteModal from '@/components/CompleteModal';
+
+type NotificationType = Database['public']['Tables']['notification']['Row'];
+
+interface NotificationWriteProps {
+    notification?: NotificationType;
+    onError?: (error: PostgrestError) => void;
+}
+
+/**
+ * 공지사항 작성 컴포넌트
+ * 관리자 권한이 있는 사용자만 접근 가능합니다.
+ * notification prop이 전달되면 수정 모드로 동작합니다.
+ */
+export default function NotificationWriteForm({ notification, onError }: NotificationWriteProps) {
+    const router = useRouter();
+    const [isLoading, setIsLoading] = useState(false);
+    const [title, setTitle] = useState(notification?.title || "");
+    const [body, setBody] = useState(notification?.body || "");
+    const [endDate, setEndDate] = useState(
+        notification ? format(new Date(notification.end_at), "yyyy-MM-dd") : ""
+    );
+    const [isImportant, setIsImportant] = useState(notification?.is_important || false);
+    const [isModal, setIsModal] = useState(notification?.is_modal || false);
+    const [uploading, setUploading] = useState(false);
+    const [imageUrl, setImageUrl] = useState<string | null>(notification?.img || null);
+    const [fileName, setFileName] = useState<string | null>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const [completeState, setCompleteState] = useState<{title: string; description: string} | null>(null)
+
+    useEffect(() => {
+        if (notification) {
+            setTitle(notification.title);
+            setBody(notification.body);
+            setEndDate(format(new Date(notification.end_at), "yyyy-MM-dd"));
+            setIsImportant(notification.is_important || false);
+            setIsModal(notification.is_modal || false);
+            setImageUrl(notification.img);
+        }
+    }, [notification]);
+
+    const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        try {
+            setUploading(true);
+            const path = `notifications/${Date.now()}_${file.name}`;
+            const { error: uploadError } = await SCM.uploadImage(file, path);
+
+            if (uploadError) throw uploadError;
+
+            const { data } = SCM.getPublicUrl(path);
+            if (data?.publicUrl) {
+                setImageUrl(data.publicUrl);
+                setFileName(file.name);
+            }
+        } catch (error) {
+            console.error("Image upload failed:", error);
+            onError?.(error as PostgrestError);
+        } finally {
+            setUploading(false);
+        }
+    };
+
+    const handleRemoveImage = async () => {
+        setImageUrl(null);
+        setFileName(null);
+        if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+        }
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!title.trim() || !body.trim() || (isModal && !endDate)) {
+            alert("제목, 내용, 종료일을 모두 입력해주세요.");
+            return;
+        }
+
+        try {
+            setIsLoading(true);
+            let result;
+
+            if (notification) {
+                // 수정
+                result = await SCM.update().notification(notification.id, {
+                    title,
+                    body,
+                    img: imageUrl,
+                    end_at: endDate === "" ? new Date(Date.now()).toISOString() : new Date(endDate).toISOString(),
+                    is_important: isImportant,
+                    is_modal: isModal,
+                });
+            } else {
+                // 추가
+                result = await SCM.add().notification({
+                    title,
+                    body,
+                    img: imageUrl,
+                    end_at: endDate === "" ? new Date(Date.now()).toISOString() : new Date(endDate).toISOString(),
+                    is_important: isImportant,
+                    is_modal: isModal,
+                });
+            }
+
+            if (result.error) throw result.error;
+            // show success modal
+            setCompleteState({
+                title: notification ? '공지사항이 수정되었습니다.' : '공지사항이 등록되었습니다.',
+                description: ''
+            });
+        } catch (error) {
+            console.error("Notification submit failed:", error);
+            onError?.(error as PostgrestError);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleCloseCompleteModal = () => {
+        router.push(notification ? `/notification/${notification.id}` : "/notification");
+        router.refresh();
+    }
+
+    return (
+        <div className="max-w-4xl mx-auto space-y-6">
+            {completeState && (
+                <CompleteModal
+                    open={true}
+                    onClose={handleCloseCompleteModal}
+                    title={completeState.title}
+                    description={completeState.description}
+                />
+            )}
+            <div className="flex items-center gap-2 mb-6">
+                <Link href={notification ? `/notification/${notification.id}` : "/notification"}>
+                    <Button variant="ghost" size="icon" className="h-8 w-8">
+                        <ChevronLeft className="h-4 w-4" />
+                    </Button>
+                </Link>
+                <h1 className="text-2xl font-bold tracking-tight">{notification ? "공지사항 수정" : "공지사항 작성"}</h1>
+            </div>
+
+            <Card>
+                <CardHeader>
+                    <CardTitle>{notification ? "공지사항 수정" : "새 공지사항"}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <form onSubmit={handleSubmit} className="space-y-6">
+                        <div className="space-y-2">
+                            <Label htmlFor="title">제목</Label>
+                            <Input
+                                id="title"
+                                value={title}
+                                onChange={(e) => setTitle(e.target.value)}
+                                placeholder="공지사항 제목을 입력하세요"
+                                required
+                            />
+                        </div>
+
+                        <div className="flex flex-col md:flex-row gap-6">
+                            <div className="space-y-2 flex-1">
+                                <Label htmlFor="endDate">게시 종료일</Label>
+                                <Input
+                                    id="endDate"
+                                    type="date"
+                                    value={endDate}
+                                    onChange={(e) => setEndDate(e.target.value)}
+                                    required={isModal}
+                                />
+                            </div>
+                            <div className="flex items-end gap-6 pb-2">
+                                <div className="flex items-center gap-2">
+                                    <Checkbox
+                                        id="isImportant"
+                                        checked={isImportant}
+                                        onCheckedChange={(checked) => setIsImportant(checked as boolean)}
+                                    />
+                                    <Label htmlFor="isImportant">중요 공지 (상단 고정)</Label>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                    <Checkbox
+                                        id="isModal"
+                                        checked={isModal}
+                                        onCheckedChange={(checked) => setIsModal(checked as boolean)}
+                                    />
+                                    <Label htmlFor="isModal">팝업 공지</Label>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label>이미지 첨부</Label>
+                            <div className="flex items-center gap-4">
+                                <Input
+                                    type="file"
+                                    accept="image/*"
+                                    className="hidden"
+                                    ref={fileInputRef}
+                                    onChange={handleImageUpload}
+                                />
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    onClick={() => fileInputRef.current?.click()}
+                                    disabled={uploading}
+                                >
+                                    {uploading ? (
+                                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                                    ) : (
+                                        <Upload className="w-4 h-4 mr-2" />
+                                    )}
+                                    이미지 선택
+                                </Button>
+                                {fileName && <span className="text-sm text-muted-foreground">{fileName}</span>}
+                                {imageUrl && (
+                                    <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        onClick={handleRemoveImage}
+                                        className="text-destructive hover:text-destructive/90"
+                                    >
+                                        <X className="w-4 h-4" />
+                                    </Button>
+                                )}
+                            </div>
+                            {imageUrl && (
+                                <div className="mt-2 relative w-full h-48 bg-muted rounded-md overflow-hidden">
+                                    <Image
+                                        src={imageUrl}
+                                        alt="Preview"
+                                        fill
+                                        className="object-contain"
+                                    />
+                                </div>
+                            )}
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label>내용 (Markdown 지원)</Label>
+                            <Tabs defaultValue="write" className="w-full">
+                                <TabsList>
+                                    <TabsTrigger value="write">작성하기</TabsTrigger>
+                                    <TabsTrigger value="preview">미리보기</TabsTrigger>
+                                </TabsList>
+                                <TabsContent value="write" className="mt-2">
+                                    <Textarea
+                                        value={body}
+                                        onChange={(e) => setBody(e.target.value)}
+                                        placeholder="공지 내용을 입력하세요 (Markdown 문법 지원)"
+                                        className="min-h-[300px] font-mono"
+                                        required
+                                    />
+                                </TabsContent>
+                                <TabsContent value="preview" className="mt-2">
+                                    <div className="min-h-[300px] border rounded-md p-4 prose dark:prose-invert max-w-none overflow-y-auto">
+                                        {body ? (
+                                            <MarkdownViewer content={body} />
+                                        ) : (
+                                            <p className="text-muted-foreground text-sm">내용을 입력하면 미리보기가 표시됩니다.</p>
+                                        )}
+                                    </div>
+                                </TabsContent>
+                            </Tabs>
+                        </div>
+
+                        <div className="flex justify-end gap-2">
+                            <Link href={notification ? `/notification/${notification.id}` : "/notification"}>
+                                <Button type="button" variant="outline">취소</Button>
+                            </Link>
+                            <Button type="submit" disabled={isLoading || uploading}>
+                                {isLoading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+                                {notification ? "수정하기" : "등록하기"}
+                            </Button>
+                        </div>
+                    </form>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/app/notification/page.tsx b/app/notification/page.tsx
new file mode 100644
index 0000000..f0ddbfd
--- /dev/null
+++ b/app/notification/page.tsx
@@ -0,0 +1,31 @@
+import { createSupabaseServerClient } from "@/lib/supabaseServer";
+import { SupabaseClientManager } from "@/lib/supabase/SupabaseClientManager";
+import Notification from "./Notification";
+import { type Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "공지사항 - 끄코 유틸",
+    description: "끄코 유틸의 공지사항 목록입니다.",
+};
+
+export const revalidate = 60;
+
+/**
+ * 공지사항 페이지 컴포넌트입니다.
+ * 서버 사이드에서 데이터를 가져와 Notification 클라이언트 컴포넌트에 전달합니다.
+ */
+export default async function NotificationPage() {
+    const supabase = await createSupabaseServerClient();
+    const scm = new SupabaseClientManager(supabase);
+    const { data: notifications, error } = await scm.get().allNotifications();
+
+    if (error) {
+        console.error("Failed to fetch notifications:", error);
+    }
+
+    return (
+        <main className="container mx-auto py-8">
+            <Notification notifications={notifications || []} />
+        </main>
+    );
+}
diff --git a/app/notification/write/NotificationWrite.tsx b/app/notification/write/NotificationWrite.tsx
new file mode 100644
index 0000000..a6a23a8
--- /dev/null
+++ b/app/notification/write/NotificationWrite.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { useState } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../store/store";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import NotificationWriteForm from "../components/NotificationWriteForm";
+import ErrorModal from "@/components/ErrModal";
+import type { ErrorMessage } from "@/types/type";
+import type { Database } from "@/types/database.types";
+
+type NotificationType = Database['public']['Tables']['notification']['Row'];
+
+interface NotificationWriteProps {
+    notification?: NotificationType;
+}
+
+export default function NotificationWrite({ notification }: NotificationWriteProps) {
+    const user = useSelector((state: RootState) => state.user);
+    const [error, setError] = useState<ErrorMessage | null>(null);
+
+    // 관리자 권한 체크
+    if (user.role !== "admin") {
+        return (
+            <div className="flex flex-col items-center justify-center min-h-[400px] gap-4">
+                <p className="text-destructive font-bold text-lg">접근 권한이 없습니다.</p>
+                <Link href="/notification">
+                    <Button variant="outline">돌아가기</Button>
+                </Link>
+            </div>
+        );
+    }
+
+    return (
+        <div className="max-w-4xl mx-auto space-y-6">
+            {error && <ErrorModal error={error} onClose={() => setError(null)} />}
+            <NotificationWriteForm
+                notification={notification}
+                onError={(err) => {
+                    const supabaseError = err;
+                    const errCode = supabaseError?.['code'];
+                    setError({
+                        ErrName: errCode || "Notification Error",
+                        ErrMessage: errCode === "23P01" ? "모달 공지가 겹쳤습니다 (동일 기간에 모달 공지는 하나만 가능합니다)" : (supabaseError?.message || "공지사항 처리에 실패했습니다."),
+                        ErrStackRace: supabaseError?.details || null,
+                        inputValue: notification?.title || "",
+                        HTTPStatus: errCode,
+                        location: "NotificationWrite"
+                    });
+                }}
+            />
+        </div>
+    );
+}
diff --git a/app/notification/write/page.tsx b/app/notification/write/page.tsx
new file mode 100644
index 0000000..4ac42c8
--- /dev/null
+++ b/app/notification/write/page.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import NotificationWrite from "./NotificationWrite";
+
+export default function NotificationWritePage() {
+    return (
+        <main className="container mx-auto py-8 px-4">
+            <NotificationWrite />
+        </main>
+    );
+}
diff --git a/app/privacy/page.tsx b/app/privacy/page.tsx
index 3a1d6ab..22f4404 100644
--- a/app/privacy/page.tsx
+++ b/app/privacy/page.tsx
@@ -176,7 +176,7 @@ const PrivacyPolicy = () => {
                 <div className="bg-slate-50 dark:bg-slate-700 p-4 rounded-lg">
                   <p><strong>개인정보 보호책임자</strong></p>
                   <p>개발자: hafskjfha</p>
-                  <p>연락처: jtw7913@gmail.com</p>
+                  <p>연락처: admin@solidloop-studio.xyz</p>
                 </div>
               </div>
             </div>
@@ -223,7 +223,7 @@ const PrivacyPolicy = () => {
             <div className="border-t pt-6 mt-8">
               <div className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
                 <Shield className="h-4 w-4" />
-                <span>개인정보 관련 문의사항이 있으시면 GitHub 이슈또는 이메일(jtw7913@gmail.com) 통해 연락주시기 바랍니다.</span>
+                <span>개인정보 관련 문의사항이 있으시면 GitHub 이슈또는 이메일(admin@solidloop-studio.xyz) 통해 연락주시기 바랍니다.</span>
               </div>
             </div>
           </CardContent>
diff --git a/app/providers.tsx b/app/providers.tsx
index 922b2c1..a843316 100644
--- a/app/providers.tsx
+++ b/app/providers.tsx
@@ -3,14 +3,25 @@
 import { Provider } from "react-redux";
 import { store } from "./store/store";
 import { ThemeProvider } from 'next-themes'
-import React from "react";
+import React, { useState } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 export function Providers({ children }: { children: React.ReactNode }) {
+    const [queryClient] = useState(() => new QueryClient({
+        defaultOptions: {
+        queries: {
+                staleTime: 60 * 1000, // 1분 동안 데이터를 '신선한' 상태로 간주
+            },
+        },
+    }));
+    
     return (
         <Provider store={store}>
-            <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-                {children}
-            </ThemeProvider>
+            <QueryClientProvider client={queryClient}>
+                <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+                    {children}
+                </ThemeProvider>
+            </QueryClientProvider>
         </Provider>
     );
 }
\ No newline at end of file
diff --git a/app/terms/page.tsx b/app/terms/page.tsx
index a234246..daf7ce2 100644
--- a/app/terms/page.tsx
+++ b/app/terms/page.tsx
@@ -183,7 +183,7 @@ const TermsOfService = () => {
             <div className="border-t pt-6 mt-8">
               <div className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
                 <Shield className="h-4 w-4" />
-                <span>문의사항이 있으시면 GitHub 이슈 또는 이메일(jtw7913@gmail.com)을 통해 연락주시기 바랍니다.</span>
+                <span>문의사항이 있으시면 GitHub 이슈 또는 이메일(admin@solidloop-studio.xyz)을 통해 연락주시기 바랍니다.</span>
               </div>
             </div>
           </CardContent>
diff --git a/app/types/database.types.ts b/app/types/database.types.ts
index d190ce2..ab13820 100644
--- a/app/types/database.types.ts
+++ b/app/types/database.types.ts
@@ -196,6 +196,8 @@ export type Database = {
           end_at: string
           id: number
           img: string | null
+          is_important: boolean
+          is_modal: boolean
           title: string
         }
         Insert: {
@@ -204,6 +206,8 @@ export type Database = {
           end_at: string
           id?: number
           img?: string | null
+          is_important?: boolean
+          is_modal?: boolean
           title: string
         }
         Update: {
@@ -212,6 +216,8 @@ export type Database = {
           end_at?: string
           id?: number
           img?: string | null
+          is_important?: boolean
+          is_modal?: boolean
           title?: string
         }
         Relationships: []
diff --git a/app/types/kkuko.types.ts b/app/types/kkuko.types.ts
index 5ac6dc7..5cfbff5 100644
--- a/app/types/kkuko.types.ts
+++ b/app/types/kkuko.types.ts
@@ -5,6 +5,8 @@ export interface UserProfile {
     observedAt: string;
     exordial: string;
     level: number;
+    isPublic: boolean;
+    isLastOnlineHidden: boolean;
 }
 
 export interface Equipment {
@@ -28,7 +30,7 @@ export interface Presence {
     channelId: string | null;
     roomId: string | null;
     crawlerId: string;
-    updatedAt: string;
+    updatedAt: string | null;
 }
 
 export interface ProfileData {
@@ -88,7 +90,7 @@ export interface RankingEntry {
     };
 }
 
-export type RankingOption = 'win' | 'exp';
+export type RankingOption = 'win' | 'exp' | 'total';
 
 export function isSpecialOptions(obj: unknown): obj is SpecialOptions {
     return !!obj && typeof obj === 'object' &&
diff --git a/app/word/search/[query]/WordInfoPage.tsx b/app/word/search/[query]/WordInfoPage.tsx
index b101eca..2be80ef 100644
--- a/app/word/search/[query]/WordInfoPage.tsx
+++ b/app/word/search/[query]/WordInfoPage.tsx
@@ -7,9 +7,8 @@ import type { PostgrestError } from '@supabase/supabase-js';
 import { calculateKoreanInitials, count } from '@/app/lib/lib';
 import LoadingPage, {useLoadingState } from '@/app/components/LoadingPage';
 import axios from 'axios';
-import { useRouter } from 'next/navigation';
+import { useRouter, notFound } from 'next/navigation';
 import { WordInfoProps } from './WordInfo';
-import NotFound from '@/app/not-found-client';
 
 export default function WordInfoPage({ query }: { query: string }) {
     const [errorView, setErrorView] = useState<string | null>(null);
@@ -260,7 +259,7 @@ export default function WordInfoPage({ query }: { query: string }) {
         
     }, [query]);
 
-    if (isNotFound) { return <NotFound />; }
+    if (isNotFound) { return notFound(); }
 
     if (loadingState.isLoading) { return <LoadingPage title={'단어 정보'} /> }
 
diff --git a/app/word/search/components/SearchResults.tsx b/app/word/search/components/SearchResults.tsx
index c4c1077..d2c24c6 100644
--- a/app/word/search/components/SearchResults.tsx
+++ b/app/word/search/components/SearchResults.tsx
@@ -113,6 +113,17 @@ export default function SearchResults({
         });
     };
 
+    if (showOverlay) {
+        return (
+            <div className="absolute inset-0 bg-black/50 z-50 flex items-center justify-center backdrop-blur-sm pointer-events-auto">
+                <div className="text-white text-lg font-medium">
+                    <Loader2 className="h-8 w-8 animate-spin mx-auto mb-2" />
+                    로딩 중...
+                </div>
+            </div>
+        )
+    }
+
     return (
         <div className="bg-white dark:bg-gray-900 rounded-xl shadow-lg flex-1 flex flex-col min-h-0 overflow-hidden">
             <div className="flex justify-between items-center bg-gray-50 dark:bg-gray-800 px-4 py-3 border-b border-gray-200 dark:border-gray-700 rounded-t-xl flex-shrink-0">
@@ -134,15 +145,6 @@ export default function SearchResults({
                     pointerEvents: showOverlay ? 'none' : 'auto'
                 }}
             >
-                {/* 가림막 오버레이 */}
-                {showOverlay && (
-                    <div className="absolute inset-0 bg-black/50 z-50 flex items-center justify-center backdrop-blur-sm pointer-events-auto">
-                        <div className="text-white text-lg font-medium">
-                            <Loader2 className="h-8 w-8 animate-spin mx-auto mb-2" />
-                            로딩 중...
-                        </div>
-                    </div>
-                )}
 
                 {!searchPerformed ? (
                     <div className="flex items-center justify-center h-full">
diff --git a/docs/api_docs.md b/docs/api_docs.md
index 61e6415..bbe2129 100644
--- a/docs/api_docs.md
+++ b/docs/api_docs.md
@@ -1,210 +1,594 @@
-# api server docs - api v1
+# API Server Documentation  
+**API Version:** v1
 
-## 목차
+---
 
-## base url
-- https://api.solidloop-studio.xyz/api/v1
+## Base URL
 
-## Admin
-  - authorization 부분에 supabase jwt토큰을 필수로 넣어야 함.
+| Environment | URL |
+|------------|-----|
+| Production | `https://api.solidloop-studio.xyz/api/v1` |
+
+---
+
+## Authentication
+
+### Admin API
+- 모든 `/admin/*` API는 **Supabase JWT 토큰**이 필요함
+- `Authorization` 헤더에 Bearer Token 형식으로 전달
+
+```
+
+Authorization: <supabase_jwt_token>
+
+````
+
+---
+
+## Admin API
 
 ### Crawler
-#### [GET] /admin/crawler/health
-- 크롤러 채널별로 health 상태를 반환합니다.
 
-- response schema
+#### GET /admin/crawler/health
+크롤러 채널별 상태를 조회합니다.
+
+**Response**
+
+| Field | Type | Description |
+|------|------|-------------|
+| channels | `{ id: string; healthy: boolean }[]` | 채널별 헬스 상태 |
+
 ```ts
 {
-    channels:{id: string, healthy: boolean}[]
+  channels: {
+    id: string;
+    healthy: boolean;
+  }[];
 }
-```
+````
+
+---
+
+#### POST /admin/crawler/session
 
-#### [POST] /admin/crawler/session
-- 크롤러의 세션 정보를 저장합니다.
+크롤러의 세션 정보를 저장합니다.
+
+**Request Body**
+
+| Field        | Type   | Description |
+| ------------ | ------ | ----------- |
+| channelId    | string | 채널 ID       |
+| jwtToken     | string | JWT 토큰      |
+| refreshToken | string | Refresh 토큰  |
 
-- Request body
 ```ts
 {
-  channelId: string,
-  jwtToken: string,
-  refreshToken: string
+  channelId: string;
+  jwtToken: string;
+  refreshToken: string;
 }
 ```
 
-- response schema
+**Response**
+
 ```ts
-  { message: 'Session saved successfully' }
+{
+  message: "Session saved successfully";
+}
 ```
 
-#### [POST] /admin/crawler/restart/:channelId
-- 해당 채널의 크롤러를 재시작 합니다
+---
+
+#### POST /admin/crawler/restart/:channelId
+
+특정 채널의 크롤러를 재시작합니다.
+
+**Path Parameter**
+
+| Name      | Type   | Description |
+| --------- | ------ | ----------- |
+| channelId | string | 크롤러 채널 ID   |
+
+**Response**
 
-- response schema
 ```ts
 {
-    status: "ok",
-    channel: channelId
+  status: "ok",
+  channel: string
 }
 ```
 
+---
+
 ### Logs
-#### [GET] /admin/logs/api-server
-- api-server의 로그 조회
 
-- Parameters
-  - date: 조회할 로그의 날짜 (형식 YYYY-MM-DD, 기본값 오늘 날짜)
-  
-- Response
-  - text/plain
+#### GET /admin/logs/api-server
+
+API 서버 로그를 조회합니다.
+
+**Query Parameters**
+
+| Name | Type   | Default | Description          |
+| ---- | ------ | ------- | -------------------- |
+| date | string | 오늘 날짜   | 로그 날짜 (`YYYY-MM-DD`) |
+
+**Response**
+
+* `text/plain`
+
+---
+
+#### GET /admin/logs/crawler
+
+크롤러 로그를 조회합니다.
 
-#### [GET] /admin/logs/crawler
-- crawlwe의 로그 조회
+**Query Parameters**
 
-- Parameters
-  - date: 조회할 로그의 날짜 (형식 YYYY-MM-DD, 기본값 오늘 날짜)
-  
-- Response
-  - text/plain
+| Name | Type   | Default | Description          |
+| ---- | ------ | ------- | -------------------- |
+| date | string | 오늘 날짜   | 로그 날짜 (`YYYY-MM-DD`) |
 
-## User
-### [GET] /profile/total
-- 등록된 총 사용자 수 조회
+**Response**
+
+* `text/plain`
+
+---
+
+### Item (Admin)
+
+- 아이템 조회시 각 페이지당 최대 30개의 아이템입니다.
+
+#### GET /admin/item/items
+
+아이템 목록을 조회합니다.
+
+**Query Parameters**
+
+| Name   | Type   | Description      |
+| ------ | ------ | ---------------- |
+| page | number | 페이지 번호 |
+
+---
+
+**Response**
+
+```ts
+{
+  items: {
+    id: string;
+    name: string;
+    description: string;
+    updatedAt: number;
+    group: string;
+    options: {
+      gEXP?: number; // 획득 경험치
+      hEXP?: number; // 분당 추가 경험치
+      gMNY?: number; // 획득 핑
+      hMNY?: number; // 분당 추가 핑
+      [key: string]: number;
+    };
+  }[];
+  totalCount: number;
+  currentPage: number;
+  totalPages: number;
+}
+```
+
+---
+
+### GET /admin/item/items/group/:group
+
+특정 그룹의 아이템 목록을 조회합니다.
+
+**Path Parameter**
+| Name  | Type   | Description   |
+| ----- | ------ | ------------- |
+| group | string | 아이템 그룹 이름 |
+
+---
+**Response**
+
+```ts
+{
+  items: {
+    id: string;
+    name: string;
+    description: string;
+    updatedAt: number;
+    group: string;
+    options: {
+      gEXP?: number; // 획득 경험치
+      hEXP?: number; // 분당 추가 경험치
+      gMNY?: number; // 획득 핑
+      hMNY?: number; // 분당 추가 핑
+      [key: string]: number;
+    };
+  }[];
+  totalCount: number;
+  currentPage: number;
+  totalPages: number;
+}
+```
+
+---
+
+### GET /admin/item/items/name/:name
+
+특정 이름을 포함하는 아이템 목록을 조회합니다.
+
+**Path Parameter**
+| Name  | Type   | Description   |
+| ----- | ------ | ------------- |
+| name  | string | 아이템 이름 일부 |
+
+---
+
+**Response**
+
+```ts
+{
+  items: {
+    id: string;
+    name: string;
+    description: string;
+    updatedAt: number;
+    group: string;
+    options: {
+      gEXP?: number; // 획득 경험치
+      hEXP?: number; // 분당 추가 경험치
+      gMNY?: number; // 획득 핑
+      hMNY?: number; // 분당 추가 핑
+      [key: string]: number;
+    };
+  }[];
+  totalCount: number;
+  currentPage: number;
+  totalPages: number;
+}
+```
+
+---
+
+### POST /admin/item
+
+아이템을 추가합니다.
+
+**Request Body**
+| Field       | Type   | Description    |
+| ----------- | ------ | -------------- |
+| id          | string | 아이템 ID       |
+| name        | string | 아이템 이름     |
+| description | string | 아이템 설명     |
+| group       | string | 아이템 그룹 이름 |
+| options     | object | 아이템 옵션     |
+
+```ts
+{
+  id: string;
+  name: string;
+  description: string;
+  group: string;
+  options: object;
+}
+```
+
+--- 
+Response (201)
+
+```ts
+{
+  id: string;
+  group: string;
+  name: string;
+  description: string;
+  updatedAt: number;
+  options: object;
+}
+```
+
+---
+
+### PUT /admin/item/:id
+
+아이템 정보를 수정합니다.
+
+**Path Parameter**
+| Name | Type   | Description |
+| ---- | ------ | ----------- |
+| id   | string | 아이템 ID    |
+
+**Request Body**
+| Field       | Type   | Description    |
+| ----------- | ------ | -------------- |
+| name        | string | 아이템 이름     |
+| description | string | 아이템 설명     |
+| group       | string | 아이템 그룹 이름 |
+| options     | object | 아이템 옵션     |
+
+```ts
+{
+  name?: string;
+  description?: string;
+  group?: string;
+  options?: object;
+}
+```
+
+---
+**Response (200)**
+
+```ts
+{
+  id: string;
+  group: string;
+  name: string;
+  description: string;
+  updatedAt: number;
+  options: object;
+}
+```
+
+---
+
+### DELETE /admin/item/:id
+
+아이템을 삭제합니다.
+
+**Path Parameter**
+| Name | Type   | Description |
+| ---- | ------ | ----------- |
+| id   | string | 아이템 ID    |
+
+---
+**Response (204)**
+No Content - 성공적으로 삭제됨
+
+
+---
+
+## User API
+
+### GET /profile/total
+
+등록된 총 사용자 수를 조회합니다.
+
+**Response**
 
-#### Response
 ```ts
 {
   data: {
-    totalUsers: number
+    totalUsers: number;
   },
-  status: 200
+  status: 200;
+}
+```
+
+---
+
+### GET /profile/:query
+
+유저 프로필 정보를 조회합니다.
+
+**Path Parameter**
+
+| Name  | Type   | Description   |
+| ----- | ------ | ------------- |
+| query | string | 닉네임 또는 사용자 ID |
+
+**Query Parameters**
+
+| Name | Type   | Description | Values       |
+| ---- | ------ | ----------- | ------------ |
+| type | string | query의 유형   | `nick`, `id` |
+
+---
+
+#### Response (200)
+
+```ts
+{
+  data: {
+    user: {
+      id: string;
+      nickname: string;
+      exp: number;
+      observedAt: string; // ISO format
+      exordial: string;
+      level: number;
+      isPublic: boolean;
+      isLastOnlineHidden: boolean;
+    };
+    equipment: {
+      userId: string;
+      slot: string;
+      itemId: string;
+    }[];
+    record: {
+      id: string;
+      userId: string;
+      modeId: string;
+      total: number;
+      win: number;
+      exp: number;
+      playtime: number; // ms
+    }[];
+    presence: {
+      userId: string;
+      channelId: string | null;
+      roomId: string | null;
+      crawlerId: string;
+      updatedAt: string | null; // ISO format, if isLastOnlineHidden is true then null
+    };
+  };
+  status: 200;
+}
+```
+
+#### Error Codes
+
+| Status | Description |
+| ------ | ----------- |
+| 403    | 유저 정보가 비공개  |
+| 404    | 등록되지 않은 유저  |
+
+---
+### GET /profile/nickname/:nickname
+
+유저 정보를 조회합니다. 중복된 닉네임을 처리하기 위함입니다.
+
+**Path Parameter**
+
+| Name  | Type   | Description   |
+| ----- | ------ | ------------- |
+| nickname | string | 닉네임 |
+
+---
+
+#### Response (200)
+
+```ts
+{
+  data: {
+    user: {
+      id: string;
+      nickname: string;
+      exp: number;
+      observedAt: string; // ISO format
+      exordial: string;
+      level: number;
+      isPublic: boolean;
+      isLastOnlineHidden: boolean;
+    };
+    equipment: {
+      userId: string;
+      slot: string;
+      itemId: string;
+    }[];
+    record: {
+      id: string;
+      userId: string;
+      modeId: string;
+      total: number;
+      win: number;
+      exp: number;
+      playtime: number; // ms
+    }[];
+    presence: {
+      userId: string;
+      channelId: string | null;
+      roomId: string | null;
+      crawlerId: string;
+      updatedAt: string | null; // ISO format, if isLastOnlineHidden is true then null
+    };
+  }[];
+  status: 200;
+}
+```
+
+---
+
+## Item API
+
+### GET /item
+
+아이템 정보를 조회합니다.
+
+**Query Parameters**
+
+| Name  | Type   | Description        |
+| ----- | ------ | ------------------ |
+| query | string | 조회할 아이템 ID (쉼표 구분) |
+
+**Response**
+
+```ts
+{
+  data: {
+    id: string;
+    name: string;
+    description: string;
+    updatedAt: number;
+    group: string;
+    options: {
+      gEXP?: number; // 획득 경험치
+      hEXP?: number; // 분당 추가 경험치
+      gMNY?: number; // 획득 핑
+      hMNY?: number; // 분당 추가 핑
+      [key: string]: number;
+    };
+  };
+  status: 200;
+}
+```
+
+---
+
+## Mode API
+
+### GET /mode
+
+전체 모드 정보를 조회합니다.
+
+**Response**
+
+```ts
+{
+  data: {
+    modeId: string;
+    modeName: string;
+    group: string;
+  }[];
+  status: 200;
 }
 ```
 
-### [GET] /profile/:query
-- 유저 프로필 조회
-
-- Parameters
-  - query: string / 닉네임 또는 사용자 ID
-  - type: string / 쿼리의 유형 (닉네임 또는 사용자 ID) / Available values : nick, id
+---
+
+## Ranking API
+
+### GET /ranking/:mode
+
+모드별 랭킹을 조회합니다.
+
+**Path Parameter**
+
+| Name | Type   | Description              |
+| ---- | ------ | ------------------------ |
+| mode | string | 모드 ID (`ALL` 사용 시 전체 합산) |
+
+**Query Parameters**
+
+| Name   | Type   | Default | Description               |
+| ------ | ------ | ------- | ------------------------- |
+| page   | number | 1       | 페이지 번호                    |
+| option | string | -       | `win` (승리 수), `exp` (경험치), `total` (총 플레이 판 수) |
+
+---
+
+**Response**
 
-Response
-- code 200
 ```ts
 {
-    data:{
-        user: {
-            id: string,
-            nickname: string,
-            exp: number,
-            observedAt: string, // iso format
-            exordial: string,
-            level: number
-        },
-        equipment: {
-            userId: string,
-            slot: string,
-            itemId: string
-        }[],
-        record: {
-            id: string,
-            userId: string,
-            modeId: string,
-            total: number,
-            win: number,
-            exp: number,
-            playtime: number // ms
-        }[],
-        presence: {
-            userId: string,
-            channelId: string | null,
-            roomId: string | null,
-            crawlerId: string,
-            updatedAt: string // ios format
-        }
-    },
-    status: 200
-}
-```
-- code 404
-등록된 유저가 아님.
-
-
-## Item
-### [GET] /item
-- 아이템 정보 조회
-
-Parameters:
-- query: 조회할 아이템 ID들 (쉼표로 구분)
-
-Response:
-```ts
-{
-    data: {
-        id: string,
-        name: string,
-        description: string,
-        updatedAt: number,
-        group: string,
-        options: {
-            gEXP?: number, // 획득 경험치
-            hEXP?: number, // 분당 추가 경험치
-            gMNY?: number, // 획득 핑
-            hMNY?: number, // 분당 추가 핑
-            [key: string]: number
-        }
-    },
-    status: 200
-}
-```
-
-## Mode
-### [GET] /mode
-- 모드 전체 정보 조회
-
-Response:
-```ts
-{
-    data: {
-        modeId: string,
-        modeName: string,
-        group: string
-    }[],
-    status: 200
-}
-```
-
-## Ranking
-### [GET] /ranking/:mode
-- 모드에 맞는 랭킹 조회
-
-Parameters:
-- mode: 랭킹을 조회할 모드 ID
-- page: 페이지 번호 (기본값 1)
-- option: 랭킹 옵션 (win 승리수 기준, exp 경험치 기준)
-
-Response:
-```ts
-{
-    data:{
-        rank: number,
-        userRecord: {
-            id: number,
-            userId: string,
-            modeId: string,
-            total: number,
-            win: number,
-            exp: number,
-            playtime: number
-        },
-        userInfo: {
-            id: string,
-            nickname: string,
-            exp: number,
-            observedAt: string, // iso format
-            exordial: string,
-            level: number
-        }
-    },
-    status: 200
-}
-```
\ No newline at end of file
+  data: {
+    rank: number;
+    userRecord: {
+      id: number;
+      userId: string;
+      modeId: string;
+      total: number;
+      win: number;
+      exp: number;
+      playtime: number;
+    };
+    userInfo: {
+      id: string;
+      nickname: string;
+      exp: number;
+      observedAt: string;
+      exordial: string;
+      level: number;
+    };
+  };
+  status: 200;
+}
+```
diff --git a/package-lock.json b/package-lock.json
index b93305f..0dcc764 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,8 @@
         "@reduxjs/toolkit": "^2.5.0",
         "@supabase/ssr": "^0.6.1",
         "@supabase/supabase-js": "^2.48.1",
+        "@tailwindcss/typography": "^0.5.19",
+        "@tanstack/react-query": "^5.90.20",
         "@tanstack/react-table": "^8.21.2",
         "@tanstack/react-virtual": "^3.13.9",
         "@types/react-window": "^1.8.8",
@@ -60,6 +62,7 @@
         "react-redux": "^9.2.0",
         "react-window": "^1.8.11",
         "recharts": "^2.15.3",
+        "remark-gfm": "^4.0.1",
         "swr": "^2.3.3",
         "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7",
@@ -149,14 +152,24 @@
       }
     },
     "node_modules/@actions/http-client": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@actions/http-client/-/http-client-3.0.0.tgz",
-      "integrity": "sha512-1s3tXAfVMSz9a4ZEBkXXRQD4QhY3+GAsWSbaYpeknPOKEeyRiU3lH+bHiLMZdo2x/fIeQ/hscL1wCkDLVM2DZQ==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@actions/http-client/-/http-client-3.0.2.tgz",
+      "integrity": "sha512-JP38FYYpyqvUsz+Igqlc/JG6YO9PaKuvqjM3iGvaLqFnJ7TFmcLyy2IDrY0bI0qCQug8E9K+elv5ZNfw62ZJzA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "tunnel": "^0.0.6",
-        "undici": "^5.28.5"
+        "undici": "^6.23.0"
+      }
+    },
+    "node_modules/@actions/http-client/node_modules/undici": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.23.0.tgz",
+      "integrity": "sha512-VfQPToRA5FZs/qJxLIinmU59u0r7LXqoJkCzinq3ckNJp3vKEh7jTWN589YQ5+aoAC/TGRLyJLCPKcLQbM8r9g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.17"
       }
     },
     "node_modules/@actions/io": {
@@ -2113,13 +2126,10 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
-      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
       "license": "MIT",
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
       "engines": {
         "node": ">=6.9.0"
       }
@@ -2815,9 +2825,9 @@
       }
     },
     "node_modules/@emnapi/core": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.7.1.tgz",
-      "integrity": "sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg==",
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.1.tgz",
+      "integrity": "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -3582,6 +3592,7 @@
       "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
       "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "minipass": "^7.0.4"
       },
@@ -4231,9 +4242,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "15.5.9",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.9.tgz",
-      "integrity": "sha512-4GlTZ+EJM7WaW2HEZcyU317tIQDjkQIyENDLxYJfSWlfqguN+dHkZgyQTV/7ykvobU7yEH5gKvreNrH4B6QgIg==",
+      "version": "15.5.12",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.12.tgz",
+      "integrity": "sha512-pUvdJN1on574wQHjaBfNGDt9Mz5utDSZFsIIQkMzPgNS8ZvT4H2mwOrOIClwsQOb6EGx5M76/CZr6G8i6pSpLg==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
@@ -4247,9 +4258,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.7.tgz",
-      "integrity": "sha512-IZwtxCEpI91HVU/rAUOOobWSZv4P2DeTtNaCdHqLcTJU4wdNXgAySvKa/qJCgR5m6KI8UsKDXtO2B31jcaw1Yw==",
+      "version": "15.5.12",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.12.tgz",
+      "integrity": "sha512-RnRjBtH8S8eXCpUNkQ+543DUc7ys8y15VxmFU9HRqlo9BG3CcBUiwNtF8SNoi2xvGCVJq1vl2yYq+3oISBS0Zg==",
       "cpu": [
         "arm64"
       ],
@@ -4263,9 +4274,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.7.tgz",
-      "integrity": "sha512-UP6CaDBcqaCBuiq/gfCEJw7sPEoX1aIjZHnBWN9v9qYHQdMKvCKcAVs4OX1vIjeE+tC5EIuwDTVIoXpUes29lg==",
+      "version": "15.5.12",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.12.tgz",
+      "integrity": "sha512-nqa9/7iQlboF1EFtNhWxQA0rQstmYRSBGxSM6g3GxvxHxcoeqVXfGNr9stJOme674m2V7r4E3+jEhhGvSQhJRA==",
       "cpu": [
         "x64"
       ],
@@ -4279,9 +4290,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.7.tgz",
-      "integrity": "sha512-NCslw3GrNIw7OgmRBxHtdWFQYhexoUCq+0oS2ccjyYLtcn1SzGzeM54jpTFonIMUjNbHmpKpziXnpxhSWLcmBA==",
+      "version": "15.5.12",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.12.tgz",
+      "integrity": "sha512-dCzAjqhDHwmoB2M4eYfVKqXs99QdQxNQVpftvP1eGVppamXh/OkDAwV737Zr0KPXEqRUMN4uCjh6mjO+XtF3Mw==",
       "cpu": [
         "arm64"
       ],
@@ -4295,9 +4306,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.7.tgz",
-      "integrity": "sha512-nfymt+SE5cvtTrG9u1wdoxBr9bVB7mtKTcj0ltRn6gkP/2Nu1zM5ei8rwP9qKQP0Y//umK+TtkKgNtfboBxRrw==",
+      "version": "15.5.12",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.12.tgz",
+      "integrity": "sha512-+fpGWvQiITgf7PUtbWY1H7qUSnBZsPPLyyq03QuAKpVoTy/QUx1JptEDTQMVvQhvizCEuNLEeghrQUyXQOekuw==",
       "cpu": [
         "arm64"
       ],
@@ -4311,9 +4322,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.7.tgz",
-      "integrity": "sha512-hvXcZvCaaEbCZcVzcY7E1uXN9xWZfFvkNHwbe/n4OkRhFWrs1J1QV+4U1BN06tXLdaS4DazEGXwgqnu/VMcmqw==",
+      "version": "15.5.12",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.12.tgz",
+      "integrity": "sha512-jSLvgdRRL/hrFAPqEjJf1fFguC719kmcptjNVDJl26BnJIpjL3KH5h6mzR4mAweociLQaqvt4UyzfbFjgAdDcw==",
       "cpu": [
         "x64"
       ],
@@ -4327,9 +4338,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.7.tgz",
-      "integrity": "sha512-4IUO539b8FmF0odY6/SqANJdgwn1xs1GkPO5doZugwZ3ETF6JUdckk7RGmsfSf7ws8Qb2YB5It33mvNL/0acqA==",
+      "version": "15.5.12",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.12.tgz",
+      "integrity": "sha512-/uaF0WfmYqQgLfPmN6BvULwxY0dufI2mlN2JbOKqqceZh1G4hjREyi7pg03zjfyS6eqNemHAZPSoP84x17vo6w==",
       "cpu": [
         "x64"
       ],
@@ -4343,9 +4354,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.7.tgz",
-      "integrity": "sha512-CpJVTkYI3ZajQkC5vajM7/ApKJUOlm6uP4BknM3XKvJ7VXAvCqSjSLmM0LKdYzn6nBJVSjdclx8nYJSa3xlTgQ==",
+      "version": "15.5.12",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.12.tgz",
+      "integrity": "sha512-xhsL1OvQSfGmlL5RbOmU+FV120urrgFpYLq+6U8C6KIym32gZT6XF/SDE92jKzzlPWskkbjOKCpqk5m4i8PEfg==",
       "cpu": [
         "arm64"
       ],
@@ -4359,9 +4370,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.7.tgz",
-      "integrity": "sha512-gMzgBX164I6DN+9/PGA+9dQiwmTkE4TloBNx8Kv9UiGARsr9Nba7IpcBRA1iTV9vwlYnrE3Uy6I7Aj6qLjQuqw==",
+      "version": "15.5.12",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.12.tgz",
+      "integrity": "sha512-Z1Dh6lhFkxvBDH1FoW6OU/L6prYwPSlwjLiZkExIAh8fbP6iI/M7iGTQAJPYJ9YFlWobCZ1PHbchFhFYb2ADkw==",
       "cpu": [
         "x64"
       ],
@@ -6547,6 +6558,57 @@
         "tslib": "^2.8.0"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
+      "integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+      }
+    },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.90.20",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.20.tgz",
+      "integrity": "sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.90.20",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.20.tgz",
+      "integrity": "sha512-vXBxa+qeyveVO7OA0jX1z+DeyCA4JKnThKv411jd5SORpBKgkcVnYKCiBgECvADvniBX7tobwBmg01qq9JmMJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.90.20"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@tanstack/react-table": {
       "version": "8.21.2",
       "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.2.tgz",
@@ -8155,12 +8217,13 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.1.tgz",
-      "integrity": "sha512-hU4EGxxt+j7TQijx1oYdAjw4xuIp1wRQSsbMFwSthCWeBQur1eF+qJ5iQ5sN3Tw8YRzQNKb8jszgBdMDVqwJcw==",
+      "version": "1.13.5",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.5.tgz",
+      "integrity": "sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==",
+      "license": "MIT",
       "dependencies": {
-        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.4",
+        "follow-redirects": "^1.15.11",
+        "form-data": "^4.0.5",
         "proxy-from-env": "^1.1.0"
       }
     },
@@ -8669,6 +8732,7 @@
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
       "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
       "dev": true,
+      "license": "BlueOak-1.0.0",
       "engines": {
         "node": ">=18"
       }
@@ -9092,9 +9156,9 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
     "node_modules/d3-array": {
@@ -9542,9 +9606,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/diff": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
-      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.4.tgz",
+      "integrity": "sha512-X07nttJQkwkfKfvTPG/KSnE2OMdcUCao6+eXF3wmnIQRn2aPAHH3VxDbDOdegkd6JbPsXqShpvEOHfAT+nCNwQ==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.3.1"
@@ -10645,9 +10709,9 @@
       "license": "ISC"
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.9",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
-      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
       "funding": [
         {
           "type": "individual",
@@ -10691,9 +10755,10 @@
       }
     },
     "node_modules/form-data": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
-      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -13361,9 +13426,9 @@
       }
     },
     "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
       "license": "MIT"
     },
     "node_modules/lodash.camelcase": {
@@ -13507,6 +13572,16 @@
         "tmpl": "1.0.5"
       }
     },
+    "node_modules/markdown-table": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
+      "integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.0.0.tgz",
@@ -13516,6 +13591,34 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mdast-util-find-and-replace": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
+      "integrity": "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "escape-string-regexp": "^5.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/mdast-util-from-markdown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.2.tgz",
@@ -13539,6 +13642,107 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdast-util-gfm": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
+      "integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-gfm-autolink-literal": "^2.0.0",
+        "mdast-util-gfm-footnote": "^2.0.0",
+        "mdast-util-gfm-strikethrough": "^2.0.0",
+        "mdast-util-gfm-table": "^2.0.0",
+        "mdast-util-gfm-task-list-item": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-autolink-literal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-find-and-replace": "^3.0.0",
+        "micromark-util-character": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-strikethrough": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "markdown-table": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-task-list-item": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdast-util-mdx-expression": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
@@ -13763,6 +13967,127 @@
         "micromark-util-types": "^2.0.0"
       }
     },
+    "node_modules/micromark-extension-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-extension-gfm-autolink-literal": "^2.0.0",
+        "micromark-extension-gfm-footnote": "^2.0.0",
+        "micromark-extension-gfm-strikethrough": "^2.0.0",
+        "micromark-extension-gfm-table": "^2.0.0",
+        "micromark-extension-gfm-tagfilter": "^2.0.0",
+        "micromark-extension-gfm-task-list-item": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-strikethrough": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
+      "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-tagfilter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/micromark-factory-destination": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
@@ -14208,6 +14533,7 @@
       "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
       "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "minipass": "^7.1.2"
       },
@@ -14289,12 +14615,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "15.5.9",
-      "resolved": "https://registry.npmjs.org/next/-/next-15.5.9.tgz",
-      "integrity": "sha512-agNLK89seZEtC5zUHwtut0+tNrc0Xw4FT/Dg+B/VLEo9pAcS9rtTKpek3V6kVcVwsB2YlqMaHdfZL4eLEVYuCg==",
+      "version": "15.5.12",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.5.12.tgz",
+      "integrity": "sha512-Fi/wQ4Etlrn60rz78bebG1i1SR20QxvV8tVp6iJspjLUSHcZoeUXCt+vmWoEcza85ElZzExK/jJ/F6SvtGktjA==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "15.5.9",
+        "@next/env": "15.5.12",
         "@swc/helpers": "0.5.15",
         "caniuse-lite": "^1.0.30001579",
         "postcss": "8.4.31",
@@ -14307,14 +14633,14 @@
         "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "15.5.7",
-        "@next/swc-darwin-x64": "15.5.7",
-        "@next/swc-linux-arm64-gnu": "15.5.7",
-        "@next/swc-linux-arm64-musl": "15.5.7",
-        "@next/swc-linux-x64-gnu": "15.5.7",
-        "@next/swc-linux-x64-musl": "15.5.7",
-        "@next/swc-win32-arm64-msvc": "15.5.7",
-        "@next/swc-win32-x64-msvc": "15.5.7",
+        "@next/swc-darwin-arm64": "15.5.12",
+        "@next/swc-darwin-x64": "15.5.12",
+        "@next/swc-linux-arm64-gnu": "15.5.12",
+        "@next/swc-linux-arm64-musl": "15.5.12",
+        "@next/swc-linux-x64-gnu": "15.5.12",
+        "@next/swc-linux-x64-musl": "15.5.12",
+        "@next/swc-win32-arm64-msvc": "15.5.12",
+        "@next/swc-win32-x64-msvc": "15.5.12",
         "sharp": "^0.34.3"
       },
       "peerDependencies": {
@@ -15557,12 +15883,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/regenerator-runtime": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "license": "MIT"
-    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.3.tgz",
@@ -15633,6 +15953,24 @@
         "node": ">=6"
       }
     },
+    "node_modules/remark-gfm": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
+      "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-gfm": "^3.0.0",
+        "micromark-extension-gfm": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-parse": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
@@ -15664,6 +16002,21 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-stringify": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
+      "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -16540,16 +16893,17 @@
       }
     },
     "node_modules/supabase": {
-      "version": "2.62.5",
-      "resolved": "https://registry.npmjs.org/supabase/-/supabase-2.62.5.tgz",
-      "integrity": "sha512-KjR57sEwNpTLOMHo+Nt9bHtq9RGWV0GGp6MWALp7RQtOcZdUopUOH+hoOojAuVyk4ChOipB7POu0y3vssW272A==",
+      "version": "2.76.6",
+      "resolved": "https://registry.npmjs.org/supabase/-/supabase-2.76.6.tgz",
+      "integrity": "sha512-VewP9LqtOhJZaZR75vcM99Q8exjPjBm9YiMvBn04zx1ikdX1DNPmzAilBJLK/ivjPDxMTlmag6+iJvJ+B+mIOA==",
       "dev": true,
       "hasInstallScript": true,
+      "license": "MIT",
       "dependencies": {
         "bin-links": "^6.0.0",
         "https-proxy-agent": "^7.0.2",
         "node-fetch": "^3.3.2",
-        "tar": "7.5.2"
+        "tar": "7.5.7"
       },
       "bin": {
         "supabase": "bin/supabase"
@@ -16714,10 +17068,11 @@
       }
     },
     "node_modules/tar": {
-      "version": "7.5.2",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.2.tgz",
-      "integrity": "sha512-7NyxrTE4Anh8km8iEy7o0QYPs+0JKBTj5ZaqHg6B39erLg0qYXN3BijtShwbsNSvQ+LN75+KV+C4QR/f6Gwnpg==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.7.tgz",
+      "integrity": "sha512-fov56fJiRuThVFXD6o6/Q354S7pnWMJIVlDBYijsTNx6jKSE4pvrDTs6lUnmGvNyfJwFQQwWy3owKz1ucIhveQ==",
       "dev": true,
+      "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/fs-minipass": "^4.0.0",
         "chownr": "^3.0.0",
@@ -17419,9 +17774,9 @@
       }
     },
     "node_modules/use-sync-external-store": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
-      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -17880,6 +18235,7 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
       "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
       "dev": true,
+      "license": "BlueOak-1.0.0",
       "engines": {
         "node": ">=18"
       }
diff --git a/package.json b/package.json
index c9942f3..7143151 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,8 @@
     "@reduxjs/toolkit": "^2.5.0",
     "@supabase/ssr": "^0.6.1",
     "@supabase/supabase-js": "^2.48.1",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tanstack/react-query": "^5.90.20",
     "@tanstack/react-table": "^8.21.2",
     "@tanstack/react-virtual": "^3.13.9",
     "@types/react-window": "^1.8.8",
@@ -68,6 +70,7 @@
     "react-redux": "^9.2.0",
     "react-window": "^1.8.11",
     "recharts": "^2.15.3",
+    "remark-gfm": "^4.0.1",
     "swr": "^2.3.3",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
diff --git a/supabase/.temp/cli-latest b/supabase/.temp/cli-latest
index 8c68db7..1dd6178 100644
--- a/supabase/.temp/cli-latest
+++ b/supabase/.temp/cli-latest
@@ -1 +1 @@
-v2.67.1
\ No newline at end of file
+v2.75.0
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 773b1e6..9e136e2 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -58,5 +58,5 @@ export default {
   		}
   	}
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
 } satisfies Config;