diff --git a/css/style.css b/css/style.css
index 013d858..af6c792 100644
--- a/css/style.css
+++ b/css/style.css
@@ -279,8 +279,6 @@ body {
 
 .layer-3 {
     z-index: 0;
-    width: 104%;
-    height: 112%;
     mix-blend-mode: multiply;
 }
 
@@ -303,15 +301,16 @@ body {
 /* 平铺服务器区域按钮 */
 .join-server-container {
     display: flex;
-    padding: 0.3vh 1.0vh 1.0vh 1.0vh;
+    padding: 0vh 1.5vh 1vh 1.5vh;
     margin-bottom: 0vh;
     margin-left: 0vh;
-    width: 26vh;
+    width: 25vh;
     flex-direction: column;
     color: #fff;
-    background-color: rgba(0, 0, 0, 0.95);
-    border: none;
-    border-radius: 0;
+    background-color: rgba(0, 0, 0, 0.85);
+    border: 1px solid rgba(227, 182, 47, 0.6);
+    border-top: none;
+    border-radius: 0 0 4px 4px;
     opacity: 0;
     max-height: 0;
     overflow: hidden;
@@ -325,13 +324,13 @@ body {
 
 .join-server-container.show {
     opacity: 1;
-    max-height: 100vh;
+    max-height: 80vh;
     overflow: visible;
     transform: translateY(0);
 }
 
 .dropdown-section {
-    margin-bottom: 2vh;
+    margin-bottom: 1.5vh;
 }
 
 .dropdown-header {
@@ -339,73 +338,44 @@ body {
     font-size: 2.2vh;
     color: rgba(227, 182, 47, 1);
     text-transform: uppercase;
-    margin-bottom: 1.5vh;
+    margin-bottom: 1vh;
     font-weight: bold;
     letter-spacing: 0.1em;
-    padding-bottom: 0.5vh;
-    border-bottom: 1px solid rgba(227, 182, 47, 1);
+    padding-bottom: 0.3vh;
+    border-bottom: 1px solid rgba(227, 182, 47, 0.3);
 }
 
 .sel-server-button {
     font-family: 'Agency';
     margin-bottom: 0.8vh;
-    font-size: 2vh;
+    font-size: 2.1vh;
     text-align: left;
-    padding: 0.6vh 0;
+    padding: 0.6vh 1vh;
     background-color: transparent;
     border: none;
-    color: rgba(255, 255, 255, 0.9);
+    color: rgba(255, 255, 255, 0.8);
     cursor: pointer;
     transition: all 0.2s ease;
     display: flex;
     align-items: center;
-    border-radius: 0;
-    width: 100%;
-    box-sizing: border-box;
+    border-radius: 2px;
 }
 
 .sel-server-button:hover {
     color: rgba(227, 182, 47, 1);
-    background-color: transparent;
+    background-color: rgba(227, 182, 47, 0.1);
 }
 
 .sel-server-button.active {
     color: rgba(227, 182, 47, 1);
-    background-color: transparent;
+    background-color: rgba(227, 182, 47, 0.15);
 }
 
 .checkmark {
     margin-right: 1.2vh;
-    width: 2.0vh;
-    height: 2.0vh;
-    object-fit: contain;
-    vertical-align: middle;
-}
-
-/* Custom Match Button */
-.custom-match-button {
-    font-family: 'Agency', sans-serif;
-    font-size: 2.2vh;
+    color: rgba(227, 182, 47, 1);
     font-weight: bold;
-    text-transform: uppercase;
-    color: #fff;
-    background-color: rgba(227, 182, 47, 0.7);
-    border: none;
-    border-radius: 0;
-    padding: 1.5vh 1.0vh;
-    margin: 1vh -1.0vh -1.0vh -1.0vh;
-    cursor: pointer;
-    text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.7);
-    transition: all 0.2s ease;
-    width: calc(100% + 2vh);
-    text-align: center;
-    letter-spacing: 0.1em;
-    box-sizing: border-box;
-}
-
-.custom-match-button:hover {
-    background-color: rgba(227, 182, 47, 1);
-    box-shadow: 0 0 15px rgba(227, 182, 47, 0.5);
+    font-size: 2vh;
 }
 
 
@@ -456,231 +426,6 @@ body {
     margin-right: 1.5vh;
 }
 
-/* Friends List Dropdown Styles */
-.friends-list-container {
-    position: fixed;
-    bottom: 4vh;
-    left: 0.5vw;
-    width: 13.5vw;
-    background-color: rgba(0, 0, 0, 0.9);
-    border-radius: 4px 4px 0 0;
-    border: none;
-    opacity: 0;
-    max-height: 0;
-    overflow: hidden;
-    transform: translateY(100%);
-    transition: opacity 0.3s ease, max-height 0.3s ease, transform 0.3s ease;
-    z-index: 99;
-    display: flex;
-    flex-direction: column;
-}
-
-.friends-list-container.show {
-    opacity: 1;
-    max-height: 50vh;
-    overflow: auto;
-    transform: translateY(0);
-}
-
-/* Hover effect to show friends list automatically */
-.friends-bar:hover + .friends-list-container,
-.friends-list-container:hover {
-    opacity: 1;
-    max-height: 50vh;
-    overflow: auto;
-    transform: translateY(0);
-}
-
-.friends-list-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1vh 1.5vh;
-    border-bottom: 1px solid rgba(227, 182, 47, 0.3);
-    background-color: rgba(0, 0, 0, 0.95);
-}
-
-.friends-list-header span {
-    color: #fff;
-    font-family: 'Agency';
-    font-size: 2vh;
-    font-weight: bold;
-}
-
-.refresh-button {
-    background-color: transparent;
-    color: #e3b62f;
-    border: 1px solid #e3b62f;
-    padding: 0.5vh 1vh;
-    font-size: 1.5vh;
-    font-family: 'Agency';
-    cursor: pointer;
-    border-radius: 2px;
-    transition: all 0.2s ease;
-}
-
-.refresh-button:hover {
-    background-color: rgba(227, 182, 47, 0.2);
-}
-
-.friends-list {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    overflow-y: auto;
-    max-height: calc(50vh - 6vh);
-}
-
-.friend-item {
-    display: flex;
-    align-items: center;
-    padding: 1vh 1.5vh;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    transition: background-color 0.2s ease;
-    cursor: pointer;
-}
-
-.friend-item:hover {
-    background-color: rgba(227, 182, 47, 0.1);
-}
-
-.friend-avatar {
-    width: 4vh;
-    height: 4vh;
-    border-radius: 50%;
-    margin-right: 1vh;
-    object-fit: cover;
-    border: 2px solid transparent;
-    transition: border-color 0.2s ease;
-}
-
-.friend-item:hover .friend-avatar {
-    border-color: #e3b62f;
-}
-
-.friend-info {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-.friend-name {
-    color: #fff;
-    font-family: 'Agency';
-    font-size: 1.8vh;
-    margin-bottom: 0.2vh;
-}
-
-.friend-status {
-    font-size: 1.4vh;
-    font-family: 'Agency';
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.friend-status.online {
-    color: #4CAF50;
-}
-
-.friend-status.offline {
-    color: #777;
-}
-
-.invite-button {
-    background-color: #e3b62f;
-    color: #000;
-    border: none;
-    padding: 0.5vh 1vh;
-    font-size: 1.5vh;
-    font-family: 'Agency';
-    font-weight: bold;
-    cursor: pointer;
-    border-radius: 2px;
-    transition: all 0.2s ease;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-    transition: opacity 0.2s ease;
-}
-
-.friend-item:hover .invite-button {
-    opacity: 1;
-    visibility: visible;
-    pointer-events: auto;
-}
-
-.invite-button:hover {
-    background-color: #fff;
-}
-
-/* Friend Item Selected State */
-.friend-item.selected {
-    background-color: rgba(227, 182, 47, 0.2);
-    border-left: 3px solid #e3b62f;
-}
-
-.friend-item.selected .friend-avatar {
-    border-color: #e3b62f;
-}
-
-/* Friend Action Dropdown */
-.friend-action-dropdown {
-    position: absolute;
-    bottom: 100%;
-    left: 0;
-    width: 100%;
-    background-color: rgba(0, 0, 0, 0.95);
-    border-top: 1px solid rgba(227, 182, 47, 0.3);
-    opacity: 0;
-    max-height: 0;
-    overflow: hidden;
-    transform: translateY(10px);
-    transition: opacity 0.3s ease, max-height 0.3s ease, transform 0.3s ease;
-    z-index: 110;
-}
-
-.friend-action-dropdown.show {
-    opacity: 1;
-    max-height: 100vh;
-    overflow: visible;
-    transform: translateY(0);
-}
-
-.friend-action-button {
-    display: block;
-    width: 100%;
-    padding: 1.2vh 1.5vh;
-    background-color: transparent;
-    border: none;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    color: #fff;
-    font-family: 'Agency';
-    font-size: 2vh;
-    font-weight: bold;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    text-align: left;
-}
-
-.friend-action-button:hover {
-    background-color: rgba(227, 182, 47, 0.1);
-    color: #e3b62f;
-}
-
-.friend-action-button.view-button:hover {
-    background-color: rgba(76, 175, 80, 0.1);
-    color: #4CAF50;
-}
-
-.friend-action-button.invite-button:hover {
-    background-color: rgba(227, 182, 47, 0.2);
-    color: #fff;
-}
-
 .receive-invite-button {
     background-color: #E3B62F;
     color: #000;
@@ -855,28 +600,27 @@ body {
 .play-text {
     font-family: 'Bombard', 'Agency', 'PUBG Sans Regular', sans-serif;
     color: #fff;
-    font-size: 6vh;
+    font-size: 5.5vh;
     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.5vh;
     font-weight: bold;
-    letter-spacing: 5px;
+    letter-spacing: 0.05em;
     line-height: 1;
-    text-align: left;
+    animation: pulse-opacity 3s infinite ease-in-out;
     opacity: 1;
 }
 
 .tips-text {
     font-family: 'Moonshiner', 'Agency', 'PUBG Sans Regular', sans-serif;
-    font-size: 3.2vh;
+    font-size: 3vh;
     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.1em;
     position: relative;
-    opacity: 1;
+    opacity: 0.9;
     line-height: 1;
-    text-align: left;
 }
 
 /* Tips text container */
@@ -908,8 +652,6 @@ body {
     left: 0;
     text-align: left;
     z-index: 2;
-    color: #fff;
-    text-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 16px rgba(227, 182, 47, 0.9), 0 0 32px rgba(227, 182, 47, 0.7);
 }
 
 /* Show hover text when button is hovered or dropdown is active */
diff --git a/images/avatar/h4tiux.jpg b/images/avatar/h4tiux.jpg
deleted file mode 100644
index aa8824c..0000000
Binary files a/images/avatar/h4tiux.jpg and /dev/null differ
diff --git a/images/avatar/land.jpg b/images/avatar/land.jpg
deleted file mode 100644
index e636a10..0000000
Binary files a/images/avatar/land.jpg and /dev/null differ
diff --git a/images/avatar/yash.jpg b/images/avatar/yash.jpg
deleted file mode 100644
index d82565d..0000000
Binary files a/images/avatar/yash.jpg and /dev/null differ
diff --git a/index.html b/index.html
index 06313b7..db6265e 100644
--- a/index.html
+++ b/index.html
@@ -40,33 +40,9 @@
 <!-- 底部文字结束 -->
 
         <!-- Friends Bar -->
-        <div class="friends-bar" @click="toggleFriendsList">
+        <div class="friends-bar">
             <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>
+            <span class="friends-text">OG:BG Friends 0 / 0</span>
         </div>
         
         <!-- Receive Invite Button -->
@@ -99,30 +75,17 @@
                 </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
+                <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)">
+                            <span class="checkmark" v-if="server.name === currentServer.name">✓</span>
+                            {{ server.name }}
                     </button>
                 </div>
+            </div>
         </div>
 <!-- 服务器玩家数量 -->
 
@@ -182,7 +145,6 @@
             </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>
     <script src="js/jquery.selectBoxIt-3.8.1.min.js"></script>
@@ -233,11 +195,10 @@
             el: '#app',
             data: {
                 serverList: serverList,
-                teamList: ["SOLO", "DUO", "SQUAD"],
                 Player: "player",
                 BP: 1363,
                 userSerial: "userSerial",
-                currentServer: serverList[2],
+                currentServer: serverList[0],
                 currentTeam: "SOLO",
                 isDebug: false,
                 language: "zh-CN",
@@ -246,23 +207,11 @@
                 showServerDropdown: false,
                 tickMarkEnabled: true,
                 isLoading: false,
-                showFriendsList: false,
-                friendsList: [
-                    { name: "H4TIUX", avatar: "images/avatar/h4tiux.jpg", status: "online" },
-                    { name: "xXMrYashXx", avatar: "images/avatar/yash.jpg", status: "online" },
-                    { name: "Kirito", avatar: "images/avatar/kirito.jpg", status: "offline" },
-                    { name: "Land", avatar: "images/avatar/land.jpg", status: "online" },
-                ],
-                selectedFriend: null,
-                showFriendActions: false
             },
             methods: {
-		    selectServer: function(server) {
+			    selectServer: function(server) {
                     app.currentServer = server;
                 },
-                selectTeam: function(team) {
-                    app.currentTeam = team;
-                },
                 joinServer: function() {
                     try {
                         this.isLoading = true;
@@ -277,44 +226,6 @@
                 l: l,
                 toggleTickMark: function() {
                     this.tickMarkEnabled = !this.tickMarkEnabled;
-                },
-                joinCustomMatch: function() {
-                    try {
-                        this.isLoading = true;
-                        // 这里可以添加自定义比赛的逻辑
-                        console.log('Joining custom match...');
-                    } catch (e) {
-                        console.error('Error joining custom match:', e);
-                        this.isLoading = false;
-                    }
-                },
-                toggleFriendsList: function() {
-                    this.showFriendsList = !this.showFriendsList;
-                    // 关闭好友操作菜单
-                    if (!this.showFriendsList) {
-                        this.showFriendActions = false;
-                        this.selectedFriend = null;
-                    }
-                },
-                selectFriend: function(friend) {
-                    if (this.selectedFriend && this.selectedFriend.name === friend.name) {
-                        // 如果点击的是已选中的好友，切换操作菜单显示状态
-                        this.showFriendActions = !this.showFriendActions;
-                    } else {
-                        // 选择新好友并显示操作菜单
-                        this.selectedFriend = friend;
-                        this.showFriendActions = true;
-                    }
-                },
-                viewFriendProfile: function() {
-                    console.log('Viewing profile of:', this.selectedFriend.name);
-                    // 这里可以添加查看好友资料的逻辑
-                    this.showFriendActions = false;
-                },
-                inviteFriend: function() {
-                    console.log('Inviting:', this.selectedFriend.name);
-                    // 这里可以添加邀请好友的逻辑
-                    this.showFriendActions = false;
                 }
             }
         });
@@ -354,4 +265,5 @@
             location.reload();
         }
     </script>
+ </div> <!-- closes id="app" -->
 </body>
\ No newline at end of file
diff --git a/js/serverList.js b/js/serverList.js
index 7501090..099e97a 100644
--- a/js/serverList.js
+++ b/js/serverList.js
@@ -2,9 +2,9 @@ var serverList = [
 
     {
 //name 控制在大厅显示的名称。
-        name: "NA SERVER",
+        name: "AS",
 //description 默认不显示，但必须保留该参数。
-        description: "North America Server",
+        description: "Asia Server",
 //ip 控制玩家连接的服务器地址
         ip: "43.248.139.242:8888" 
 
@@ -12,7 +12,7 @@ var serverList = [
     
     {
 //name 控制在大厅显示的名称。
-        name: "EU SERVER",
+        name: "EU",
 //description 默认不显示，但必须保留该参数。
         description: "European Server",
 //ip 控制玩家连接的服务器地址
@@ -22,29 +22,9 @@ var serverList = [
     
     {
 //name 控制在大厅显示的名称。
-        name: "AS SERVER",
+        name: "RU",
 //description 默认不显示，但必须保留该参数。
-        description: "Asia Server",
-//ip 控制玩家连接的服务器地址
-        ip: "81.177.135.63" 
-
-    },
-    
-    {
-//name 控制在大厅显示的名称。
-        name: "OC SERVER",
-//description 默认不显示，但必须保留该参数。
-        description: "Oceania Server",
-//ip 控制玩家连接的服务器地址
-        ip: "81.177.135.63" 
-
-    },
-    
-    {
-//name 控制在大厅显示的名称。
-        name: "SA SERVER",
-//description 默认不显示，但必须保留该参数。
-        description: "South America Server",
+        description: "Russian Server",
 //ip 控制玩家连接的服务器地址
         ip: "81.177.135.63" 
 
diff --git a/preview.png b/preview.png
index 9b85cbc..28d0b04 100644
Binary files a/preview.png and b/preview.png differ