diff --git a/src/apis/user/userController.ts b/src/apis/user/userController.ts
index 0b56ced..ccb4383 100644
--- a/src/apis/user/userController.ts
+++ b/src/apis/user/userController.ts
@@ -30,3 +30,13 @@ export const addUserInfo = async (apiKey: string) => {
     throw error
   }
 }
+
+export const syncCharacter = async () => {
+  try {
+    const response = await basicApi.post(`/api/game-character/sync-character`)
+    return response.data
+  } catch (error) {
+    console.error('Error syncing character:', error)
+    throw error
+  }
+}
diff --git a/src/components/character/CharacterPage.tsx b/src/components/character/CharacterPage.tsx
index 88ef241..66e8d89 100644
--- a/src/components/character/CharacterPage.tsx
+++ b/src/components/character/CharacterPage.tsx
@@ -6,11 +6,18 @@ import { InventoryContainer } from './inventory/InventoryContainer'
 import { StatContainer } from './StatContainer'
 import { useCharacterData } from '../../hooks/character/useCharacterData'
 import { useInventory } from '../../hooks/character/useInventory'
-import { useNavigate } from 'react-router-dom'
+
 import { useUserStore } from '../../store/userStore'
 import { searchCharacterOcid } from '../../apis/character/characterController'
 
-export const CharacterPage = () => {
+import { FiAlertTriangle, FiSearch } from 'react-icons/fi'
+import Button from '../common/Button'
+
+interface CharacterPageProps {
+  type: 'character' | 'search'
+}
+
+export const CharacterPage = ({ type }: CharacterPageProps) => {
   const { characterStats, ability, hyperStat, basic, isLoading, error } =
     useCharacterData()
   const [characterName, setCharacterName] = useState('')
@@ -18,7 +25,7 @@ export const CharacterPage = () => {
   const { inventory } = useInventory()
 
   const [showStats, setShowStats] = useState(true)
-  const nav = useNavigate()
+
   const { setCharacterOcid } = useUserStore()
   const [searchLoading, setSearchLoading] = useState(false)
 
@@ -36,39 +43,168 @@ export const CharacterPage = () => {
         return
       }
       setCharacterOcid(ocid)
-    } catch (error) {
-      console.error(error)
+    } catch {
       alert('캐릭터 검색에 실패했습니다.')
     } finally {
       setSearchLoading(false)
     }
   }
 
-  if (isLoading) {
+  if (error) {
     return (
       <div className="w-full h-full flex justify-center items-center p-8">
-        <div className="flex flex-col items-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mb-4"></div>
-          <p className="text-gray-600 font-medium">
-            캐릭터 정보를 불러오는 중...
-          </p>
+        <div className="max-w-lg w-full bg-white rounded-xl p-8 shadow-lg">
+          <div>
+            <div className="flex items-center justify-center mb-6 relative">
+              {type === 'character' && (
+                <div className="absolute top-0 right-0 flex flex-col items-center justify-center gap-2">
+                  <div className="relative group">
+                    {/* <button
+                      onClick={syncCharacterHandler}
+                      disabled={isSyncing}
+                      className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-all duration-200 
+                        ${
+                          isSyncing
+                            ? 'bg-gray-100 cursor-not-allowed'
+                            : 'hover:bg-red-50 bg-white border border-red-200 shadow-sm hover:shadow-md hover:border-red-300'
+                        }`}>
+                      <FiRefreshCcw
+                        className={`text-xl flex-shrink-0 
+                          ${
+                            isSyncing
+                              ? 'animate-spin text-gray-400'
+                              : 'text-red-500 group-hover:rotate-180 transition-transform duration-500'
+                          }`}
+                      />
+                      <span
+                        className={`text-sm font-medium ${isSyncing ? 'text-gray-400' : 'text-red-500'}`}>
+                        {isSyncing ? '동기화 중...' : '동기화'}
+                      </span>
+                    </button> */}
+                    <div className="absolute invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-all duration-200 top-full left-1/2 -translate-x-1/2 mt-2 z-10">
+                      <div className="bg-white border border-gray-100 text-gray-600 px-4 py-3 rounded-xl shadow-lg relative">
+                        <div className="absolute w-3 h-3 bg-white border-t border-l border-gray-100 transform -rotate-45 left-1/2 -translate-x-1/2 -top-1.5"></div>
+                        <div className="w-[280px]">
+                          <p className="text-sm leading-relaxed">
+                            본캐릭터는 넥슨 OpenAPI에서 레벨이 가장 높은
+                            캐릭터를 기준으로 자동 설정됩니다.
+                          </p>
+                          <p className="text-sm mt-2 flex items-center gap-1">
+                            <span className="text-gray-400">
+                              정보가 정확하지 않다면
+                            </span>
+                            <strong className="text-red-500">동기화</strong>
+                            <span className="text-gray-400">
+                              버튼을 눌러주세요
+                            </span>
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+              <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
+                <FiAlertTriangle className="text-red-500 text-2xl" />
+              </div>
+            </div>
+            <h1 className="text-xl font-bold text-center text-gray-800 mb-2">
+              캐릭터 정보를 불러올 수 없습니다
+            </h1>
+            <p className="text-gray-600 text-center mb-6">
+              2023년 12월 21일 이후의 데이터만 조회할 수 있습니다.
+            </p>
+          </div>
+          <div className="bg-white rounded-xl p-5 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden h-fit self-start">
+            <div className="flex flex-col justify-between">
+              <div className="flex items-center gap-3 mb-3">
+                <div className="w-8 h-8 bg-gradient-to-br from-blue-100 to-blue-200 rounded-lg flex items-center justify-center shadow-sm">
+                  <FiSearch className="text-blue-600 text-lg" />
+                </div>
+                <h2 className="text-base font-semibold text-gray-800">
+                  캐릭터 검색
+                </h2>
+              </div>
+              <div className="space-y-3">
+                <input
+                  type="text"
+                  placeholder="캐릭터 이름을 입력하세요"
+                  value={characterName}
+                  onChange={e => setCharacterName(e.target.value)}
+                  className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm bg-white"
+                />
+                <Button
+                  size="medium"
+                  scheme="solid"
+                  disabled={searchLoading}
+                  className={`w-full text-sm bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 transition-all shadow-sm ${
+                    searchLoading
+                      ? 'bg-blue-300 cursor-not-allowed'
+                      : 'bg-blue-500 hover:bg-blue-600'
+                  }`}
+                  onClick={searchCharacterHandler}>
+                  {searchLoading ? '검색 중...' : '검색'}
+                </Button>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     )
   }
 
-  if (error) {
-    alert(
-      '2023년 12월 21일 이후의 데이터만 조회할 수 있습니다.\n게임에 접속한 뒤 다시 시도해주세요.'
-    )
-    nav('/')
-  }
-
   return (
     <div className="w-full h-full flex flex-col gap-4 py-4">
       {/* 탭 버튼 */}
       <div className="flex justify-between items-center mb-2 max-w-6xl mx-auto w-full px-4">
-        <div className="w-64"></div>
+        {type === 'character' ? (
+          <div className="flex flex-col items-center justify-center gap-2 mr-24">
+            <div className="relative group">
+              {/* <button
+                onClick={syncCharacterHandler}
+                disabled={isSyncing}
+                className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-all duration-200 
+                  ${
+                    isSyncing
+                      ? 'bg-gray-100 cursor-not-allowed'
+                      : 'hover:bg-red-50 bg-white border border-red-200 shadow-sm hover:shadow-md hover:border-red-300'
+                  }`}>
+                <FiRefreshCcw
+                  className={`text-xl flex-shrink-0 
+                    ${
+                      isSyncing
+                        ? 'animate-spin text-gray-400'
+                        : 'text-red-500 group-hover:rotate-180 transition-transform duration-500'
+                    }`}
+                />
+                <span
+                  className={`text-sm font-medium ${isSyncing ? 'text-gray-400' : 'text-red-500'}`}>
+                  {isSyncing ? '동기화 중...' : '동기화'}
+                </span>
+              </button> */}
+              <div className="absolute invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-all duration-200 top-full left-1/2 -translate-x-1/2 mt-2 z-10">
+                <div className="bg-white border border-gray-100 text-gray-600 px-4 py-3 rounded-xl shadow-lg relative">
+                  <div className="absolute w-3 h-3 bg-white border-t border-l border-gray-100 transform -rotate-45 left-1/2 -translate-x-1/2 -top-1.5"></div>
+                  <div className="w-[280px]">
+                    <p className="text-sm leading-relaxed">
+                      본캐릭터는 넥슨 OpenAPI에서 레벨이 가장 높은 캐릭터를
+                      기준으로 자동 설정됩니다.
+                    </p>
+                    <p className="text-sm mt-2 flex items-center gap-1">
+                      <span className="text-gray-400">
+                        정보가 정확하지 않다면
+                      </span>
+                      <strong className="text-red-500">동기화</strong>
+                      <span className="text-gray-400">버튼을 눌러주세요</span>
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="w-64"></div>
+        )}
         <div className="bg-white shadow-sm rounded-lg p-1 flex gap-1">
           <button
             onClick={() => setShowStats(true)}
@@ -112,39 +248,76 @@ export const CharacterPage = () => {
       </div>
 
       {/* 콘텐츠 영역 */}
-      <div className="w-full max-w-6xl mx-auto rounded-xl bg-white/90 shadow-lg border border-blue-100 p-3 sm:p-4">
-        {showStats ? (
-          <div className="grid grid-cols-1 lg:grid-cols-4 gap-3">
-            {/* 캐릭터 정보와 어빌리티 (큰 화면에서 세로로 배치) */}
-            <div className="lg:col-span-1 order-1 flex flex-col gap-3">
-              {/* 캐릭터 정보 (작은 화면에서 맨 위) */}
-              <div>{basic && <CharacterInfoContainer basic={basic} />}</div>
-
-              {/* 어빌리티 (캐릭터 정보 아래에 배치) */}
-              <div>{ability && <AbilitryContainer ability={ability} />}</div>
-            </div>
+      {isLoading ? (
+        <div className="w-full max-w-6xl mx-auto rounded-xl bg-white/90 shadow-lg border border-blue-100 p-3 sm:p-4">
+          {showStats ? (
+            <div className="grid grid-cols-1 lg:grid-cols-4 gap-3">
+              {/* 캐릭터 정보와 어빌리티 스켈레톤 */}
+              <div className="lg:col-span-1 order-1 flex flex-col gap-3">
+                <div className="bg-gray-100 animate-pulse rounded-lg h-[200px]"></div>
+                <div className="bg-gray-100 animate-pulse rounded-lg h-[150px]"></div>
+              </div>
+
+              {/* 기본 스탯 스켈레톤 */}
+              <div className="lg:col-span-2 order-3 lg:order-2">
+                <div className="bg-gray-100 animate-pulse rounded-lg h-[500px]"></div>
+              </div>
 
-            {/* 기본 스탯 (큰 화면에서 중앙에 위치) */}
-            <div className="lg:col-span-2 order-3 lg:order-2 min-h-[500px]">
-              {characterStats && <StatContainer Stats={characterStats} />}
+              {/* 하이퍼 스탯 스켈레톤 */}
+              <div className="lg:col-span-1 order-4 lg:order-3">
+                <div className="bg-gray-100 animate-pulse rounded-lg h-[500px]"></div>
+              </div>
             </div>
+          ) : (
+            <div className="w-full grid grid-cols-1 md:grid-cols-2 gap-4">
+              {/* 캐릭터 이미지 스켈레톤 */}
+              <div className="bg-gray-100 animate-pulse rounded-lg h-[600px]"></div>
+              {/* 장비 정보 스켈레톤 */}
+              <div className="grid grid-cols-3 gap-2">
+                {Array.from({ length: 15 }).map((_, index) => (
+                  <div
+                    key={index}
+                    className="bg-gray-100 animate-pulse rounded-lg aspect-square"></div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="w-full max-w-6xl mx-auto rounded-xl bg-white/90 shadow-lg border border-blue-100 p-3 sm:p-4">
+          {showStats ? (
+            <div className="grid grid-cols-1 lg:grid-cols-4 gap-3">
+              {/* 캐릭터 정보와 어빌리티 (큰 화면에서 세로로 배치) */}
+              <div className="lg:col-span-1 order-1 flex flex-col gap-3">
+                {/* 캐릭터 정보 (작은 화면에서 맨 위) */}
+                <div>{basic && <CharacterInfoContainer basic={basic} />}</div>
+
+                {/* 어빌리티 (캐릭터 정보 아래에 배치) */}
+                <div>{ability && <AbilitryContainer ability={ability} />}</div>
+              </div>
+
+              {/* 기본 스탯 (큰 화면에서 중앙에 위치) */}
+              <div className="lg:col-span-2 order-3 lg:order-2 min-h-[500px]">
+                {characterStats && <StatContainer Stats={characterStats} />}
+              </div>
 
-            {/* 하이퍼 스탯 (큰 화면에서 오른쪽에 위치) */}
-            <div className="lg:col-span-1 order-4 lg:order-3 min-h-[500px] flex flex-col">
-              {hyperStat && <HyperStatContainer hyperStat={hyperStat} />}
+              {/* 하이퍼 스탯 (큰 화면에서 오른쪽에 위치) */}
+              <div className="lg:col-span-1 order-4 lg:order-3 min-h-[500px] flex flex-col">
+                {hyperStat && <HyperStatContainer hyperStat={hyperStat} />}
+              </div>
             </div>
-          </div>
-        ) : (
-          <div className="w-full">
-            {inventory && basic?.character_image && (
-              <InventoryContainer
-                inventory={inventory}
-                characterImg={basic?.character_image}
-              />
-            )}
-          </div>
-        )}
-      </div>
+          ) : (
+            <div className="w-full">
+              {inventory && basic?.character_image && (
+                <InventoryContainer
+                  inventory={inventory}
+                  characterImg={basic?.character_image}
+                />
+              )}
+            </div>
+          )}
+        </div>
+      )}
     </div>
   )
 }
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index 8a00f9f..6d4f307 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -5,6 +5,7 @@ import Logo from '../../assets/logo.png'
 import { useState } from 'react'
 import { useAuthStore } from '../../store/authStore'
 import KakaoOpenChatButton from './KakaoOpenChatButton'
+import { useUserStore } from '../../store/userStore'
 
 function Header() {
   const { userLogout } = useAuth()
@@ -12,6 +13,7 @@ function Header() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
   const { userType } = useAuthStore()
+  const { setCharacterOcid, userInfo } = useUserStore()
 
   const KAKAO_CHAT_LINK = 'https://open.kakao.com/o/s4tfG2Ah'
 
@@ -59,7 +61,10 @@ function Header() {
               <Button
                 scheme="subtle"
                 size="small"
-                onClick={() => nav('/character')}
+                onClick={() => {
+                  nav('/character')
+                  setCharacterOcid(userInfo?.ocid || '')
+                }}
                 className="hover:text-blue-600 font-medium transition-all">
                 캐릭터정보
               </Button>
diff --git a/src/components/modal/room/RoomManageModal.tsx b/src/components/modal/room/RoomManageModal.tsx
index 2c9388a..625b755 100644
--- a/src/components/modal/room/RoomManageModal.tsx
+++ b/src/components/modal/room/RoomManageModal.tsx
@@ -1,5 +1,4 @@
 import { Room } from '../../../types/rooms'
-import InputText from '../../common/InputText'
 import ModalLayout from '../ModalLayout'
 import { useAdmin } from '../../../hooks/room/useAdmin'
 import { useState } from 'react'
@@ -76,80 +75,196 @@ export const GuildManageModal = ({
       size="medium"
       title={`${room.groupName} 관리`}
       showFooterButtons={false}>
-      <div className="bg-white p-8 rounded-lg max-w-4xl w-full">
-        <div className="space-y-4">
-          <div className="flex justify-between items-center">
-            <h3 className="text-lg font-semibold">관리자 목록</h3>
-            <div className="flex items-center gap-2">
-              <InputText
-                placeholder="관리자 추가"
-                value={characterName}
-                onChange={e => {
-                  setCharacterName(e.target.value)
-                  // 입력 시작하면 이전 메시지 제거
-                  setMessage(null)
-                }}
-              />
+      <div className="bg-white rounded-lg max-w-4xl w-full">
+        <div className="space-y-6 max-h-[calc(90vh-200px)] overflow-y-auto p-6">
+          {/* 안내 메시지 */}
+          <div className="bg-blue-50 border border-blue-100 rounded-xl p-4">
+            <div className="flex items-start gap-3">
+              <div className="p-2 bg-blue-100 rounded-lg">
+                <IoAlertCircle className="text-blue-600 text-xl" />
+              </div>
+              <div>
+                <h3 className="text-blue-900 font-medium mb-1">
+                  관리자 초대 시 주의사항
+                </h3>
+                <p className="text-sm text-blue-700 leading-relaxed">
+                  관리자로 초대할 때는 반드시 해당 길드원의{' '}
+                  <strong>본캐릭터</strong>를 등록해야 합니다.
+                  <br />
+                  본캐릭터는 넥슨 OpenAPI에서 레벨이 가장 높은 캐릭터를 기준으로
+                  자동 설정됩니다.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* 관리자 추가 폼 */}
+          <div className="bg-gray-50 border border-gray-100 rounded-xl p-6">
+            <div className="flex justify-between items-center mb-4">
+              <h3 className="text-lg font-semibold text-gray-800">
+                관리자 추가
+              </h3>
+            </div>
+            <div className="flex flex-col sm:flex-row items-stretch gap-3">
+              <div className="flex-1 relative">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <svg
+                    className="h-5 w-5 text-gray-400"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round">
+                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                    <circle
+                      cx="12"
+                      cy="7"
+                      r="4"></circle>
+                  </svg>
+                </div>
+                <input
+                  type="text"
+                  placeholder="관리자로 추가할 캐릭터 이름을 입력하세요"
+                  value={characterName}
+                  onChange={e => {
+                    setCharacterName(e.target.value)
+                    setMessage(null)
+                  }}
+                  className="w-full pl-10 pr-4 py-2.5 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                />
+              </div>
               <button
-                className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-blue-300 disabled:cursor-not-allowed transition-colors"
+                className={`px-6 py-2.5 rounded-lg font-medium transition-all duration-200 flex items-center justify-center gap-2 min-w-[120px] ${
+                  isAddingAdmin || !characterName.trim()
+                    ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                    : 'bg-blue-500 text-white hover:bg-blue-600 hover:shadow-md'
+                }`}
                 onClick={handleAdd}
                 disabled={isAddingAdmin || !characterName.trim()}>
                 {isAddingAdmin ? (
-                  <div className="flex items-center gap-2">
-                    <div className="w-4 h-4 border-t-2 border-white rounded-full animate-spin" />
+                  <>
+                    <div className="w-4 h-4 border-t-2 border-current rounded-full animate-spin" />
                     추가 중...
-                  </div>
+                  </>
                 ) : (
-                  '관리자 추가'
+                  <>
+                    <svg
+                      className="w-5 h-5"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+                      />
+                    </svg>
+                    관리자 추가
+                  </>
                 )}
               </button>
             </div>
           </div>
 
+          {/* 메시지 표시 */}
           {message && (
             <div
-              className={`flex items-center gap-2 p-3 rounded-lg ${
+              className={`flex items-center gap-2 p-4 rounded-lg ${
                 message.type === 'success'
-                  ? 'bg-green-50 text-green-700'
-                  : 'bg-red-50 text-red-700'
+                  ? 'bg-green-50 text-green-700 border border-green-100'
+                  : 'bg-red-50 text-red-700 border border-red-100'
               }`}>
               <IoAlertCircle className="text-xl flex-shrink-0" />
-              <span>{message.text}</span>
+              <span className="text-sm">{message.text}</span>
             </div>
           )}
 
-          <div className="border rounded-lg p-4">
-            <div className="grid grid-cols-2 gap-4 mb-4">
-              <div className="font-medium">닉네임</div>
-              <div className="font-medium">권한</div>
+          {/* 관리자 목록 */}
+          <div className="bg-white border border-gray-100 rounded-xl overflow-hidden flex flex-col">
+            <div className="px-6 py-4 border-b border-gray-100">
+              <h3 className="text-lg font-semibold text-gray-800">
+                관리자 목록
+              </h3>
             </div>
-            {room.admins.map((admin, index) => (
-              <div
-                key={admin}
-                className="grid grid-cols-2 gap-4 px-2 py-2 border-t items-center">
-                <div>{admin}</div>
-                <div className="flex space-x-2">
-                  {room.admins.length > 0 &&
-                    room.admins[index] !== userName && (
+            <div className="min-h-[200px] max-h-[calc(90vh-500px)] overflow-y-auto">
+              <div className="divide-y divide-gray-100">
+                {room.admins.map(admin => (
+                  <div
+                    key={admin}
+                    className="flex items-center justify-between px-6 py-4 hover:bg-gray-50/80 transition-colors group">
+                    <div className="flex items-center gap-3">
+                      <div className="p-2 bg-gray-50 rounded-lg group-hover:bg-white transition-colors">
+                        <svg
+                          className="w-5 h-5 text-gray-600"
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round">
+                          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                          <circle
+                            cx="12"
+                            cy="7"
+                            r="4"></circle>
+                        </svg>
+                      </div>
+                      <div>
+                        <span className="text-gray-900 font-medium">
+                          {admin}
+                        </span>
+                        {admin === userName && (
+                          <span className="ml-2 inline-flex items-center px-2 py-0.5 bg-blue-100 text-blue-700 text-xs font-medium rounded-full">
+                            나
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                    {admin !== userName && (
                       <button
                         onClick={() => handleRemove(admin)}
                         disabled={
                           isRemovingAdmin && removingAdminName === admin
                         }
-                        className="px-2 py-1 bg-red-500 text-white rounded hover:bg-red-600 disabled:bg-red-300 disabled:cursor-not-allowed transition-colors">
+                        className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all duration-200 flex items-center gap-2 ${
+                          isRemovingAdmin && removingAdminName === admin
+                            ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                            : 'bg-red-50 text-red-600 hover:bg-red-100 hover:shadow-sm'
+                        }`}>
                         {isRemovingAdmin && removingAdminName === admin ? (
-                          <div className="flex items-center gap-2">
-                            <div className="w-3 h-3 border-t-2 border-white rounded-full animate-spin" />
+                          <>
+                            <div className="w-3 h-3 border-t-2 border-current rounded-full animate-spin" />
                             제거 중...
-                          </div>
+                          </>
                         ) : (
-                          '제거'
+                          <>
+                            <svg
+                              className="w-4 h-4"
+                              fill="none"
+                              stroke="currentColor"
+                              viewBox="0 0 24 24"
+                              xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                              />
+                            </svg>
+                            제거
+                          </>
                         )}
                       </button>
                     )}
-                </div>
+                  </div>
+                ))}
               </div>
-            ))}
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/hooks/character/useCharacterData.ts b/src/hooks/character/useCharacterData.ts
index 6f8cac6..49a6416 100644
--- a/src/hooks/character/useCharacterData.ts
+++ b/src/hooks/character/useCharacterData.ts
@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query'
+import { useMutation, useQuery } from '@tanstack/react-query'
 import {
   fetchCharacterAbility,
   fetchCharacterBasic,
@@ -14,10 +14,14 @@ import {
 
 import { useUserStore } from '../../store/userStore'
 import { useEffect } from 'react'
+import { syncCharacter } from '../../apis/user/userController'
+import { useAuth } from '../useAuth'
+import { useNavigate } from 'react-router-dom'
 
 export const useCharacterData = () => {
   const { setUserName, characterOcid } = useUserStore()
-
+  const { userLogout } = useAuth()
+  const nav = useNavigate()
   const {
     data: characterStats,
     isLoading: statsLoading,
@@ -70,6 +74,28 @@ export const useCharacterData = () => {
     retry: false
   })
 
+  const mutateSyncCharacter = useMutation({
+    mutationFn: () => syncCharacter(),
+    onSuccess: () => {
+      alert('동기화가 완료되었습니다. 다시 로그인해주세요.')
+      userLogout()
+      nav('/')
+    },
+    onError: () => {
+      alert('동기화에 실패했습니다. 다시 시도해주세요.')
+    }
+  })
+
+  const syncCharacterHandler = async () => {
+    if (mutateSyncCharacter.isPending) return
+
+    try {
+      await mutateSyncCharacter.mutateAsync()
+    } catch {
+      alert('동기화에 실패했습니다. 다시 시도해주세요.')
+    }
+  }
+
   useEffect(() => {
     if (basic?.character_name) {
       setUserName(basic.character_name)
@@ -87,6 +113,8 @@ export const useCharacterData = () => {
     hyperStat,
     basic,
     isLoading,
-    error
+    error,
+    syncCharacterHandler,
+    isSyncing: mutateSyncCharacter.isPending
   }
 }
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
index c47e7bb..7dd1b7c 100644
--- a/src/hooks/useAuth.ts
+++ b/src/hooks/useAuth.ts
@@ -10,17 +10,23 @@ export const useAuth = () => {
 
   const userLogin = async () => {
     try {
-      const provider = new GoogleAuthProvider()
+      const provider = await new GoogleAuthProvider()
       const result = await signInWithPopup(authService, provider)
       const token = await result.user.getIdToken()
 
-      if (token && result.user.uid) {
-        storeLogin(token, result.user.uid, 'member')
-        const userInfo = await fetchUserInfo(result.user.uid)
-        return userInfo
+      if (!token || !result.user.uid) {
+        throw new Error('로그인에 필요한 정보를 가져올 수 없습니다.')
       }
-    } catch (error) {
-      console.log(error)
+
+      storeLogin(token, result.user.uid, 'member')
+      const userInfo = await fetchUserInfo(result.user.uid)
+
+      if (!userInfo) {
+        throw new Error('사용자 정보를 가져올 수 없습니다.')
+      }
+      return userInfo
+    } catch {
+      return null
     }
   }
 
diff --git a/src/pages/Character.tsx b/src/pages/Character.tsx
index 743c65c..1ec2480 100644
--- a/src/pages/Character.tsx
+++ b/src/pages/Character.tsx
@@ -1,7 +1,7 @@
 import { CharacterPage } from '../components/character/CharacterPage'
 
 const Character = () => {
-  return <CharacterPage />
+  return <CharacterPage type="character" />
 }
 
 export default Character
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index a38ae8f..0a2c66c 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -60,8 +60,7 @@ const Home = () => {
           nav('/signup')
         }
       }
-    } catch (error) {
-      console.error(error)
+    } catch {
       alert('로그인에 실패했습니다.')
     }
   }
@@ -83,8 +82,7 @@ const Home = () => {
       await storeLogin('', '', 'search')
       setCharacterOcid(ocid)
       nav(`/searchCharacter`)
-    } catch (error) {
-      console.error(error)
+    } catch {
       alert('캐릭터 검색에 실패했습니다.')
     } finally {
       setSearchLoading(false)
diff --git a/src/pages/SearchCharacter.tsx b/src/pages/SearchCharacter.tsx
index 9ca9202..b0a49b9 100644
--- a/src/pages/SearchCharacter.tsx
+++ b/src/pages/SearchCharacter.tsx
@@ -1,5 +1,5 @@
 import { CharacterPage } from '../components/character/CharacterPage'
 
 export const SearchCharacter = () => {
-  return <CharacterPage />
+  return <CharacterPage type="search" />
 }