diff --git a/css/style.css b/css/style.css
index 013d858..b0a56bd 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,25 @@
+@font-face {
+    font-family:"bombard";
+    src: url("../fonts/BOMBARD_.ttf") format("truetype"),
+         url("../fonts/BOMBARD_.otf") format("opentype");
+    font-weight:normal;
+    font-style:normal;
+}
+
+@font-face {
+    font-family:"moonshiner";
+    src: url("../fonts/moonshiner-round.ttf") format("truetype");
+    font-weight:normal;
+    font-style:normal;
+}
+
+@font-face {
+    font-family:"overpass";
+    src: url("../fonts/Overpass-VariableFont_wght.ttf") format("truetype");
+    font-weight: 100 900;
+    font-style: normal;
+}
+
 @font-face {
     font-family:"Pubg Sans Regular";
     src:url("../fonts/PUBG_SANS.eot?") format("eot"),
@@ -8,24 +30,6 @@
     font-style:normal;
 }
 
-@font-face {
-    font-family:"Bombard";
-    src:url("../fonts/bombard.woff") format("woff"),
-        url("../fonts/bombard.woff") format("woff2");
-    font-weight:normal;
-    font-style:normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family:"Moonshiner";
-    src:url("../fonts/Moonshiner.woff") format("woff"),
-        url("../fonts/Moonshiner.woff") format("woff2");
-    font-weight:normal;
-    font-style:normal;
-    font-display: swap;
-}
-
 .fade-enter-active, .fade-leave-active {
     transition: opacity 0.5s
 }
@@ -57,7 +61,7 @@
     transform: translate(-50%);
     bottom: 3vh;
     font-size: 3vh;
-    font-family: 'Overpass-Reg'
+    font-family: 'overpass'
 }
 
 .loading-text > img {
@@ -347,7 +351,7 @@ body {
 }
 
 .sel-server-button {
-    font-family: 'Agency';
+    font-family: 'overpass', 'Agency';
     margin-bottom: 0.8vh;
     font-size: 2vh;
     text-align: left;
@@ -384,7 +388,7 @@ body {
 
 /* Custom Match Button */
 .custom-match-button {
-    font-family: 'Agency', sans-serif;
+    font-family: 'overpass', 'Agency', sans-serif;
     font-size: 2.2vh;
     font-weight: bold;
     text-transform: uppercase;
@@ -451,7 +455,7 @@ body {
 
 .friends-text {
     color: #fff;
-    font-family: 'Agency';
+    font-family: 'overpass', 'Agency';
     font-size: 2vh;
     margin-right: 1.5vh;
 }
@@ -684,7 +688,7 @@ body {
 .receive-invite-button {
     background-color: #E3B62F;
     color: #000;
-    font-family: 'Agency';
+    font-family: 'overpass';
     font-weight: bold;
     font-size: 1.8vh;
     padding: 0.1vh 2vh;
@@ -695,7 +699,7 @@ body {
     align-items: center;
     position: fixed;
     bottom: 0.8vh;
-    left: 13vw;
+    left: 16vw;
     z-index: 101;
 }
 
@@ -724,6 +728,7 @@ body {
 
 
 .nav-item {
+    font-family: 'overpass', 'Agency';
     color: rgba(255, 255, 255, 0.8);
     cursor: pointer;
     transition: color 0.2s ease;
@@ -804,6 +809,7 @@ body {
 }
 
 .player-name {
+    font-family: 'overpass', 'Agency';
     font-size: 2.5vh;
     font-weight: normal;
     color: #fff;
@@ -853,30 +859,33 @@ body {
 }
 
 .play-text {
-    font-family: 'Bombard', 'Agency', 'PUBG Sans Regular', sans-serif;
+    font-family: 'bombard', 'PUBG Sans Regular';
     color: #fff;
-    font-size: 6vh;
+    font-size: 7vh;
     text-transform: uppercase;
-    text-shadow: 0.2em 0.2em 0.4em rgba(0, 0, 0, 0.9);
-    margin-bottom: 0.8vh;
+    text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.9);
+    margin-bottom: 0;
     font-weight: bold;
-    letter-spacing: 5px;
+    letter-spacing: -0.03em;
     line-height: 1;
-    text-align: left;
     opacity: 1;
+    position: relative;
+    top: -0.5vh;
+    animation: pulse-opacity 5s infinite ease-in-out;
 }
 
 .tips-text {
-    font-family: 'Moonshiner', 'Agency', 'PUBG Sans Regular', sans-serif;
-    font-size: 3.2vh;
+    font-family: 'moonshiner', 'PUBG Sans Regular';
+    font-size: 4vh;
     text-transform: uppercase;
     color: rgba(227, 182, 47, 1);
-    text-shadow: 0.15em 0.15em 0.3em rgba(0, 0, 0, 0.9);
-    letter-spacing: 0.08em;
+    text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.9);
+    letter-spacing: 0.05em;
     position: relative;
-    opacity: 1;
+    opacity: 0.9;
     line-height: 1;
     text-align: left;
+    margin-top: -0.5vh;
 }
 
 /* Tips text container */
diff --git a/fonts/BOMBARD_.otf b/fonts/BOMBARD_.otf
new file mode 100644
index 0000000..5e88eb8
Binary files /dev/null and b/fonts/BOMBARD_.otf differ
diff --git a/fonts/BOMBARD_.ttf b/fonts/BOMBARD_.ttf
new file mode 100644
index 0000000..0cf607e
Binary files /dev/null and b/fonts/BOMBARD_.ttf differ
diff --git a/fonts/Moonshiner-Round.ttf b/fonts/Moonshiner-Round.ttf
new file mode 100644
index 0000000..ae6b331
Binary files /dev/null and b/fonts/Moonshiner-Round.ttf differ
diff --git a/fonts/Overpass-VariableFont_wght.ttf b/fonts/Overpass-VariableFont_wght.ttf
new file mode 100644
index 0000000..12f72c9
Binary files /dev/null and b/fonts/Overpass-VariableFont_wght.ttf differ
diff --git a/icons/twitch lookin.png b/icons/twitch lookin.png
new file mode 100644
index 0000000..0edf21a
Binary files /dev/null and b/icons/twitch lookin.png differ
diff --git a/index.html b/index.html
index 06313b7..8c65b30 100644
--- a/index.html
+++ b/index.html
@@ -39,43 +39,44 @@
         <p class="serial-text">Early Access v2.6.30.4</p> 
 <!-- 底部文字结束 -->
 
-        <!-- Friends Bar -->
-        <div class="friends-bar" @click="toggleFriendsList">
-            <img src="icons/Friend.png" class="friends-icon" alt="Friends">
-            <span class="friends-text">OG:BG Friends 3 / 4</span>
-        </div>
-        
-        <!-- Friends List Dropdown -->
-        <div class="friends-list-container" :class="{'show': showFriendsList}">
-            <div class="friends-list-header">
-                <span>OG:BG Friends</span>
-                <button class="refresh-button">Refresh</button>
+        <!-- Tab Content Area -->
+        <div v-if="activeTab === 'home'">
+            <!-- Friends Bar -->
+            <div class="friends-bar" @click="toggleFriendsList">
+                <img src="icons/Friend.png" class="friends-icon" alt="Friends">
+                <span class="friends-text">OG:BG Friends 3 / 4</span>
             </div>
-            <div class="friends-list">
-                <div class="friend-item" v-for="friend in friendsList" :key="friend.name" @click="selectFriend(friend)" :class="{'selected': selectedFriend && selectedFriend.name === friend.name}">
-                    <img :src="friend.avatar" class="friend-avatar" alt="Avatar">
-                    <div class="friend-info">
-                        <div class="friend-name">{{ friend.name }}</div>
-                        <div class="friend-status" :class="friend.status">{{ friend.status }}</div>
+            
+            <!-- Friends List Dropdown -->
+            <div class="friends-list-container" :class="{'show': showFriendsList}">
+                <div class="friends-list-header">
+                    <span>OG:BG Friends</span>
+                    <button class="refresh-button">Refresh</button>
+                </div>
+                <div class="friends-list">
+                    <div class="friend-item" v-for="friend in friendsList" :key="friend.name" @click="selectFriend(friend)" :class="{'selected': selectedFriend && selectedFriend.name === friend.name}">
+                        <img :src="friend.avatar" class="friend-avatar" alt="Avatar">
+                        <div class="friend-info">
+                            <div class="friend-name">{{ friend.name }}</div>
+                            <div class="friend-status" :class="friend.status">{{ friend.status }}</div>
+                        </div>
+                        <button class="invite-button" v-if="friend.status === 'online'">INVITE</button>
                     </div>
-                    <button class="invite-button" v-if="friend.status === 'online'">INVITE</button>
+                </div>
+                
+                <!-- Friend Action Dropdown -->
+                <div class="friend-action-dropdown" v-if="selectedFriend" :class="{'show': showFriendActions}">
+                    <button class="friend-action-button view-button" @click="viewFriendProfile">VIEW PROFILE</button>
+                    <button class="friend-action-button invite-button" @click="inviteFriend" v-if="selectedFriend.status === 'online'">INVITE</button>
                 </div>
             </div>
             
-            <!-- Friend Action Dropdown -->
-            <div class="friend-action-dropdown" v-if="selectedFriend" :class="{'show': showFriendActions}">
-                <button class="friend-action-button view-button" @click="viewFriendProfile">VIEW PROFILE</button>
-                <button class="friend-action-button invite-button" @click="inviteFriend" v-if="selectedFriend.status === 'online'">INVITE</button>
-            </div>
-        </div>
-        
-        <!-- Receive Invite Button -->
-        <button class="receive-invite-button" @click="toggleTickMark">
-            <img v-if="tickMarkEnabled" src="icons/Tick_mark_true.png" class="tick-mark" alt="Online">
-            <img v-else src="icons/Tick_mark_false.png" class="tick-mark" alt="Offline">
-            RECEIVE INVITE
-        </button>
-
+            <!-- Receive Invite Button -->
+            <button class="receive-invite-button" @click="toggleTickMark">
+                <img v-if="tickMarkEnabled" src="icons/Tick_mark_true.png" class="tick-mark" alt="Online">
+                <img v-else src="icons/Tick_mark_false.png" class="tick-mark" alt="Offline">
+                RECEIVE INVITE
+            </button>
 <!-- 选择框、开始按钮板块 -->
         <div class="game-play-container-top-left">
             <div class="button-container">
@@ -92,8 +93,8 @@
                     <div class="pubg-title-on-button">
                         <div class="play-text">PLAY</div>
                         <div class="tips-text-container">
-                            <div class="tips-text default-text">CLICK TO PLAY</div>
-                            <div class="tips-text hover-text">CHOOSE YOUR REGION</div>
+                            <div class="tips-text default-text">BATTLEGROUNDS</div>
+                            <div class="tips-text hover-text">CLICK TO PLAY</div>
                         </div>
                     </div>
                 </div>
@@ -124,6 +125,284 @@
                     </button>
                 </div>
         </div>
+        </div>
+
+        <div v-if="activeTab === 'character'" class="tab-content">
+            <!-- Friends Bar -->
+            <div class="friends-bar" @click="toggleFriendsList">
+                <img src="icons/Friend.png" class="friends-icon" alt="Friends">
+                <span class="friends-text">OG:BG Friends 3 / 4</span>
+            </div>
+            
+            <!-- Friends List Dropdown -->
+            <div class="friends-list-container" :class="{'show': showFriendsList}">
+                <div class="friends-list-header">
+                    <span>OG:BG Friends</span>
+                    <button class="refresh-button">Refresh</button>
+                </div>
+                <div class="friends-list">
+                    <div class="friend-item" v-for="friend in friendsList" :key="friend.name" @click="selectFriend(friend)" :class="{'selected': selectedFriend && selectedFriend.name === friend.name}">
+                        <img :src="friend.avatar" class="friend-avatar" alt="Avatar">
+                        <div class="friend-info">
+                            <div class="friend-name">{{ friend.name }}</div>
+                            <div class="friend-status" :class="friend.status">{{ friend.status }}</div>
+                        </div>
+                        <button class="invite-button" v-if="friend.status === 'online'">INVITE</button>
+                    </div>
+                </div>
+                
+                <!-- Friend Action Dropdown -->
+                <div class="friend-action-dropdown" v-if="selectedFriend" :class="{'show': showFriendActions}">
+                    <button class="friend-action-button view-button" @click="viewFriendProfile">VIEW PROFILE</button>
+                    <button class="friend-action-button invite-button" @click="inviteFriend" v-if="selectedFriend.status === 'online'">INVITE</button>
+                </div>
+            </div>
+            
+            <!-- Receive Invite Button -->
+            <button class="receive-invite-button" @click="toggleTickMark">
+                <img v-if="tickMarkEnabled" src="icons/Tick_mark_true.png" class="tick-mark" alt="Online">
+                <img v-else src="icons/Tick_mark_false.png" class="tick-mark" alt="Offline">
+                RECEIVE INVITE
+            </button>
+            
+            <!-- 选择框、开始按钮板块 -->
+            <div class="game-play-container-top-left">
+                <div class="button-container">
+                    <div class="multi-layer-button bro-loading" 
+                         id="join" 
+                         :class="{'active-hover': showServerDropdown, 'bro-loading': isLoading}" 
+                         @mouseenter="showServerDropdown = true" 
+                         @mouseleave="showServerDropdown = false" 
+                         @click="joinServer">
+                        <img src="images/1.png" alt="Button Layer 1" class="button-layer layer-1">
+                        <img src="images/2.png" alt="Button Layer 2" class="button-layer layer-2">
+                        <img src="images/3.png" alt="Button Layer 3" class="button-layer layer-3">
+                        <!-- PUBG Title on Button -->
+                        <div class="pubg-title-on-button">
+                            <div class="play-text">PLAY</div>
+                            <div class="tips-text-container">
+                                <div class="tips-text default-text">BATTLEGROUNDS</div>
+                                <div class="tips-text hover-text">CLICK TO PLAY</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="showServerDropdown = true" @mouseleave="showServerDropdown = false">
+                    <div class="dropdown-section">
+                        <div class="dropdown-header">REGION</div>
+                        <button v-for="server in serverList" 
+                                v-bind:class="{'sel-server-button': true, 'active': server.name === currentServer.name}" 
+                                :id="server.name" 
+                                v-on:click="selectServer(server)">
+                                <img class="checkmark" v-if="server.name === currentServer.name" src="icons/Tick_mark_true.png" alt="Selected">
+                                {{ server.name }}
+                        </button>
+                    </div>
+                    <div class="dropdown-section">
+                        <div class="dropdown-header">TEAM</div>
+                        <button v-for="team in teamList" 
+                                v-bind:class="{'sel-server-button': true, 'active': team === currentTeam}" 
+                                :id="team" 
+                                v-on:click="selectTeam(team)">
+                                <img class="checkmark" v-if="team === currentTeam" src="icons/Tick_mark_true.png" alt="Selected">
+                                {{ team }}
+                        </button>
+                    </div>
+                    <button class="custom-match-button" @click="joinCustomMatch">
+                        CUSTOM MATCH
+                    </button>
+                </div>
+            </div>
+            <div class="character-tab">
+                <h2>Character Management</h2>
+                <p>Character settings and customization options would go here.</p>
+            </div>
+        </div>
+
+        <div v-if="activeTab === 'rewards'" class="tab-content">
+            <!-- Friends Bar -->
+            <div class="friends-bar" @click="toggleFriendsList">
+                <img src="icons/Friend.png" class="friends-icon" alt="Friends">
+                <span class="friends-text">OG:BG Friends 3 / 4</span>
+            </div>
+            
+            <!-- Friends List Dropdown -->
+            <div class="friends-list-container" :class="{'show': showFriendsList}">
+                <div class="friends-list-header">
+                    <span>OG:BG Friends</span>
+                    <button class="refresh-button">Refresh</button>
+                </div>
+                <div class="friends-list">
+                    <div class="friend-item" v-for="friend in friendsList" :key="friend.name" @click="selectFriend(friend)" :class="{'selected': selectedFriend && selectedFriend.name === friend.name}">
+                        <img :src="friend.avatar" class="friend-avatar" alt="Avatar">
+                        <div class="friend-info">
+                            <div class="friend-name">{{ friend.name }}</div>
+                            <div class="friend-status" :class="friend.status">{{ friend.status }}</div>
+                        </div>
+                        <button class="invite-button" v-if="friend.status === 'online'">INVITE</button>
+                    </div>
+                </div>
+                
+                <!-- Friend Action Dropdown -->
+                <div class="friend-action-dropdown" v-if="selectedFriend" :class="{'show': showFriendActions}">
+                    <button class="friend-action-button view-button" @click="viewFriendProfile">VIEW PROFILE</button>
+                    <button class="friend-action-button invite-button" @click="inviteFriend" v-if="selectedFriend.status === 'online'">INVITE</button>
+                </div>
+            </div>
+            
+            <!-- Receive Invite Button -->
+            <button class="receive-invite-button" @click="toggleTickMark">
+                <img v-if="tickMarkEnabled" src="icons/Tick_mark_true.png" class="tick-mark" alt="Online">
+                <img v-else src="icons/Tick_mark_false.png" class="tick-mark" alt="Offline">
+                RECEIVE INVITE
+            </button>
+            
+            <!-- 选择框、开始按钮板块 -->
+            <div class="game-play-container-top-left">
+                <div class="button-container">
+                    <div class="multi-layer-button bro-loading" 
+                         id="join" 
+                         :class="{'active-hover': showServerDropdown, 'bro-loading': isLoading}" 
+                         @mouseenter="showServerDropdown = true" 
+                         @mouseleave="showServerDropdown = false" 
+                         @click="joinServer">
+                        <img src="images/1.png" alt="Button Layer 1" class="button-layer layer-1">
+                        <img src="images/2.png" alt="Button Layer 2" class="button-layer layer-2">
+                        <img src="images/3.png" alt="Button Layer 3" class="button-layer layer-3">
+                        <!-- PUBG Title on Button -->
+                        <div class="pubg-title-on-button">
+                            <div class="play-text">PLAY</div>
+                            <div class="tips-text-container">
+                                <div class="tips-text default-text">BATTLEGROUNDS</div>
+                                <div class="tips-text hover-text">CLICK TO PLAY</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="showServerDropdown = true" @mouseleave="showServerDropdown = false">
+                    <div class="dropdown-section">
+                        <div class="dropdown-header">REGION</div>
+                        <button v-for="server in serverList" 
+                                v-bind:class="{'sel-server-button': true, 'active': server.name === currentServer.name}" 
+                                :id="server.name" 
+                                v-on:click="selectServer(server)">
+                                <img class="checkmark" v-if="server.name === currentServer.name" src="icons/Tick_mark_true.png" alt="Selected">
+                                {{ server.name }}
+                        </button>
+                    </div>
+                    <div class="dropdown-section">
+                        <div class="dropdown-header">TEAM</div>
+                        <button v-for="team in teamList" 
+                                v-bind:class="{'sel-server-button': true, 'active': team === currentTeam}" 
+                                :id="team" 
+                                v-on:click="selectTeam(team)">
+                                <img class="checkmark" v-if="team === currentTeam" src="icons/Tick_mark_true.png" alt="Selected">
+                                {{ team }}
+                        </button>
+                    </div>
+                    <button class="custom-match-button" @click="joinCustomMatch">
+                        CUSTOM MATCH
+                    </button>
+                </div>
+            </div>
+            <div class="rewards-tab">
+                <h2>Rewards & Achievements</h2>
+                <p>Your rewards and achievements would be displayed here.</p>
+            </div>
+        </div>
+
+        <div v-if="activeTab === 'statistics'" class="tab-content">
+            <!-- Friends Bar -->
+            <div class="friends-bar" @click="toggleFriendsList">
+                <img src="icons/Friend.png" class="friends-icon" alt="Friends">
+                <span class="friends-text">OG:BG Friends 3 / 4</span>
+            </div>
+            
+            <!-- Friends List Dropdown -->
+            <div class="friends-list-container" :class="{'show': showFriendsList}">
+                <div class="friends-list-header">
+                    <span>OG:BG Friends</span>
+                    <button class="refresh-button">Refresh</button>
+                </div>
+                <div class="friends-list">
+                    <div class="friend-item" v-for="friend in friendsList" :key="friend.name" @click="selectFriend(friend)" :class="{'selected': selectedFriend && selectedFriend.name === friend.name}">
+                        <img :src="friend.avatar" class="friend-avatar" alt="Avatar">
+                        <div class="friend-info">
+                            <div class="friend-name">{{ friend.name }}</div>
+                            <div class="friend-status" :class="friend.status">{{ friend.status }}</div>
+                        </div>
+                        <button class="invite-button" v-if="friend.status === 'online'">INVITE</button>
+                    </div>
+                </div>
+                
+                <!-- Friend Action Dropdown -->
+                <div class="friend-action-dropdown" v-if="selectedFriend" :class="{'show': showFriendActions}">
+                    <button class="friend-action-button view-button" @click="viewFriendProfile">VIEW PROFILE</button>
+                    <button class="friend-action-button invite-button" @click="inviteFriend" v-if="selectedFriend.status === 'online'">INVITE</button>
+                </div>
+            </div>
+            
+            <!-- Receive Invite Button -->
+            <button class="receive-invite-button" @click="toggleTickMark">
+                <img v-if="tickMarkEnabled" src="icons/Tick_mark_true.png" class="tick-mark" alt="Online">
+                <img v-else src="icons/Tick_mark_false.png" class="tick-mark" alt="Offline">
+                RECEIVE INVITE
+            </button>
+            
+            <!-- 选择框、开始按钮板块 -->
+            <div class="game-play-container-top-left">
+                <div class="button-container">
+                    <div class="multi-layer-button bro-loading" 
+                         id="join" 
+                         :class="{'active-hover': showServerDropdown, 'bro-loading': isLoading}" 
+                         @mouseenter="showServerDropdown = true" 
+                         @mouseleave="showServerDropdown = false" 
+                         @click="joinServer">
+                        <img src="images/1.png" alt="Button Layer 1" class="button-layer layer-1">
+                        <img src="images/2.png" alt="Button Layer 2" class="button-layer layer-2">
+                        <img src="images/3.png" alt="Button Layer 3" class="button-layer layer-3">
+                        <!-- PUBG Title on Button -->
+                        <div class="pubg-title-on-button">
+                            <div class="play-text">PLAY</div>
+                            <div class="tips-text-container">
+                                <div class="tips-text default-text">BATTLEGROUNDS</div>
+                                <div class="tips-text hover-text">CLICK TO PLAY</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="showServerDropdown = true" @mouseleave="showServerDropdown = false">
+                    <div class="dropdown-section">
+                        <div class="dropdown-header">REGION</div>
+                        <button v-for="server in serverList" 
+                                v-bind:class="{'sel-server-button': true, 'active': server.name === currentServer.name}" 
+                                :id="server.name" 
+                                v-on:click="selectServer(server)">
+                                <img class="checkmark" v-if="server.name === currentServer.name" src="icons/Tick_mark_true.png" alt="Selected">
+                                {{ server.name }}
+                        </button>
+                    </div>
+                    <div class="dropdown-section">
+                        <div class="dropdown-header">TEAM</div>
+                        <button v-for="team in teamList" 
+                                v-bind:class="{'sel-server-button': true, 'active': team === currentTeam}" 
+                                :id="team" 
+                                v-on:click="selectTeam(team)">
+                                <img class="checkmark" v-if="team === currentTeam" src="icons/Tick_mark_true.png" alt="Selected">
+                                {{ team }}
+                        </button>
+                    </div>
+                    <button class="custom-match-button" @click="joinCustomMatch">
+                        CUSTOM MATCH
+                    </button>
+                </div>
+            </div>
+            <div class="statistics-tab">
+                <h2>Statistics</h2>
+                <p>Your game statistics would be displayed here.</p>
+            </div>
+        </div>
+
 <!-- 服务器玩家数量 -->
 
 <!-- 右上角区域 -->
@@ -132,10 +411,10 @@
             <div class="top-right-controls">
                 <!-- 顶部导航栏 -->
                 <div class="top-navigation">
-                    <div class="nav-item active">HOME</div>
-                    <div class="nav-item">CHARACTER</div>
-                    <div class="nav-item">REWARDS</div>
-                    <div class="nav-item">STATISTICS</div>
+                    <div class="nav-item" :class="{ 'active': activeTab === 'home' }" @click="changeTab('home')">HOME</div>
+                    <div class="nav-item" :class="{ 'active': activeTab === 'character' }" @click="changeTab('character')">CHARACTER</div>
+                    <div class="nav-item" :class="{ 'active': activeTab === 'rewards' }" @click="changeTab('rewards')">REWARDS</div>
+                    <div class="nav-item" :class="{ 'active': activeTab === 'statistics' }" @click="changeTab('statistics')">STATISTICS</div>
                 </div>
                 
                 <!-- 系统按钮占位符 -->
@@ -152,13 +431,13 @@
     </div>
 </div>
 
-        
-        <!-- 公告区域 -->
+ <!-- 公告区域 
         <div class="announcement-area">
             <div class="announcement-icon">
                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0" stroke="#E3B62F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    <circle cx="12" cy="14" r="3" stroke="#E3B62F" stroke-width="2"/>
+                    <circle cx="12" cy="12" r="10" stroke="#E3B62F" stroke-width="2"/>
+                    <line x1="12" y1="8" x2="12" y2="14" stroke="#E3B62F" stroke-width="2" stroke-linecap="round"/>
+                    <circle cx="12" cy="17" r="1" fill="#E3B62F"/>
                 </svg>
             </div>
             <div class="announcement-text">
@@ -166,14 +445,13 @@
                 <div class="announcement-link" onclick="joinDiscord()">interact with the community</div>
             </div>
         </div>
-        <!-- 第二个公告区域 -->
+        <!-- 第二个公告区域
         <div class="announcement-area">
             <div class="announcement-icon">
                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="#E3B62F" stroke-width="2"/>
-                    <line x1="16" y1="2" x2="16" y2="6" stroke="#E3B62F" stroke-width="2" stroke-linecap="round"/>
-                    <line x1="8" y1="2" x2="8" y2="6" stroke="#E3B62F" stroke-width="2" stroke-linecap="round"/>
-                    <line x1="3" y1="10" x2="21" y2="10" stroke="#E3B62F" stroke-width="2" stroke-linecap="round"/>
+                    <circle cx="12" cy="12" r="10" stroke="#E3B62F" stroke-width="2"/>
+                    <line x1="12" y1="8" x2="12" y2="14" stroke="#E3B62F" stroke-width="2" stroke-linecap="round"/>
+                    <circle cx="12" cy="17" r="1" fill="#E3B62F"/>
                 </svg>
             </div>
             <div class="announcement-text">
@@ -181,7 +459,8 @@
                 <div class="announcement-link" onclick="joinTelegram()">interact with the community</div>
             </div>
         </div>
-    </div>
+    </div>-->
+	
  </div> <!-- closes id="app" -->
     <script src="js/jquery-2.2.0.min.js"></script>
     <script src="js/jquery-ui-1.11.4.min.js"></script>
@@ -254,7 +533,8 @@
                     { name: "Land", avatar: "images/avatar/land.jpg", status: "online" },
                 ],
                 selectedFriend: null,
-                showFriendActions: false
+                showFriendActions: false,
+                activeTab: 'home'
             },
             methods: {
 		    selectServer: function(server) {
@@ -278,6 +558,9 @@
                 toggleTickMark: function() {
                     this.tickMarkEnabled = !this.tickMarkEnabled;
                 },
+                changeTab: function(tabName) {
+                    this.activeTab = tabName;
+                },
                 joinCustomMatch: function() {
                     try {
                         this.isLoading = true;