diff --git a/logic/Client/GameStatusBar.xaml.cs b/logic/Client/GameStatusBar.xaml.cs
index 974f97cc..9f246eed 100644
--- a/logic/Client/GameStatusBar.xaml.cs
+++ b/logic/Client/GameStatusBar.xaml.cs
@@ -4,9 +4,11 @@ namespace Client;
 
 public partial class GameStatusBar : ContentView
 {
-    private readonly int lengthOfHp1Slide;
-    private readonly int lengthOfHp2Slide;
-    private readonly int lengthOfHp3Slide;
+    private bool haveSetSlideLength = false;
+    double lengthOfWormHole1HpSlide = 80;
+    double lengthOfWormHole2HpSlide = 80;
+    double lengthOfWormHole3HpSlide = 80;
+
     private readonly int WormHoleFullHp = 18000;
     public GameStatusBar(Grid parent, int Row, int Column)
     {
@@ -25,13 +27,13 @@ public void SetWormHoleValue(MessageOfBuilding wormholeMsg)
         switch (wormholeMsg.BuildingId)
         {
             case 0:
-                WormHole1HpSlide.WidthRequest = wormholeMsg.Hp / WormHoleFullHp * lengthOfHp1Slide;
+                WormHole1HpSlide.WidthRequest = wormholeMsg.Hp / WormHoleFullHp * lengthOfWormHole1HpSlide;
                 break;
             case 1:
-                WormHole2HpSlide.WidthRequest = wormholeMsg.Hp / WormHoleFullHp * lengthOfHp2Slide;
+                WormHole2HpSlide.WidthRequest = wormholeMsg.Hp / WormHoleFullHp * lengthOfWormHole2HpSlide;
                 break;
             case 2:
-                WormHole3HpSlide.WidthRequest = wormholeMsg.Hp / WormHoleFullHp * lengthOfHp3Slide;
+                WormHole3HpSlide.WidthRequest = wormholeMsg.Hp / WormHoleFullHp * lengthOfWormHole3HpSlide;
                 break;
         }
     }
@@ -55,4 +57,11 @@ public void SetGameTimeValue(MessageOfAll obj)
         GameTime.Text += sec.ToString();
     }
 
+    public void SlideLengthSet()
+    {
+        UtilFunctions.SlideLengthSet(WormHole1HpSlide, ref haveSetSlideLength, ref lengthOfWormHole1HpSlide, GameStatusGrid.Width);
+        UtilFunctions.SlideLengthSet(WormHole2HpSlide, ref haveSetSlideLength, ref lengthOfWormHole2HpSlide, GameStatusGrid.Width);
+        UtilFunctions.SlideLengthSet(WormHole3HpSlide, ref haveSetSlideLength, ref lengthOfWormHole3HpSlide, GameStatusGrid.Width);
+        haveSetSlideLength = true;
+    }
 }
\ No newline at end of file
diff --git a/logic/Client/MainPage.xaml b/logic/Client/MainPage.xaml
index b9589a7a..e0011a64 100644
--- a/logic/Client/MainPage.xaml
+++ b/logic/Client/MainPage.xaml
@@ -29,6 +29,7 @@ TargetType="Label">
                     <ColumnDefinition Width="530"/>
                     <ColumnDefinition Width="0.5*" />
                     <ColumnDefinition Width="6*" />
+                    <ColumnDefinition Width="0.5*" />
                 </Grid.ColumnDefinitions>
 
                 <Grid.RowDefinitions>
diff --git a/logic/Client/MainPage.xaml.cs b/logic/Client/MainPage.xaml.cs
index 4cfbdc9a..b1c5c317 100644
--- a/logic/Client/MainPage.xaml.cs
+++ b/logic/Client/MainPage.xaml.cs
@@ -14,7 +14,7 @@ namespace Client
 {
     public partial class MainPage : ContentPage
     {
-
+        private bool UIinitiated = false;
         public MainPage()
         {
             Console.WriteLine("Hello World");
@@ -27,6 +27,7 @@ public MainPage()
             SetStatusBars();
             InitiateObjects();
             Map map = new Map(MainGrid, 0, 2, 2);
+            UIinitiated = true;
         }
 
         /* Set the StatusBars */
@@ -36,7 +37,6 @@ private void SetStatusBars()
             bluePlayer = new PlayerStatusBar(MainGrid, 1, 1, 1);
             gameStatusBar = new GameStatusBar(MainGrid, 0, 4);
         }
-
         /* initiate the Lists of Objects and CountList */
         private void InitiateObjects()
         {
@@ -410,9 +410,18 @@ private void Refresh(object sender, EventArgs e)
             {
                 lock (drawPicLock)
                 {
+                    if (UIinitiated)
+                    {
+                        redPlayer.SlideLengthSet();
+                        bluePlayer.SlideLengthSet();
+                        gameStatusBar.SlideLengthSet();
+                    }
                     if (!isClientStocked)
                     {
-                        MapGrid.Children.Clear();
+                        if (MapGrid.Children.Count() > 0)
+                        {
+                            MapGrid.Children.Clear();
+                        }
                         foreach (var data in listOfAll)
                         {
                             gameStatusBar.SetGameTimeValue(data);
diff --git a/logic/Client/PlayerStatusBar.xaml b/logic/Client/PlayerStatusBar.xaml
index 42f5246a..adddacec 100644
--- a/logic/Client/PlayerStatusBar.xaml
+++ b/logic/Client/PlayerStatusBar.xaml
@@ -18,7 +18,7 @@
             <Grid x:Name="PlayerRoleInfoGrid" Grid.Row="0">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="2*" />
-                    <ColumnDefinition Width="3*" />
+                    <ColumnDefinition Width="2*" />
                     <ColumnDefinition Width="3*" />
                 </Grid.ColumnDefinitions>
 
@@ -29,7 +29,7 @@
                 <BoxView x:Name="MyColor" Grid.Row="0" Grid.Column="0" HeightRequest="15" WidthRequest="15" HorizontalOptions="Center" VerticalOptions="Center" />
                 <Label x:Name="MyName" Text="Name" Grid.Row="0" Grid.Column="1" FontSize="15" HorizontalOptions="Start" HorizontalTextAlignment="Start" WidthRequest="300" VerticalOptions="Center" />
                 <Label x:Name="MyHpData" Text="100/100" Grid.Row="0" Grid.Column="2" FontSize="15" HorizontalOptions="End" HorizontalTextAlignment="Start" VerticalOptions="Center" />
-                <BoxView x:Name="MyHpSlide" Grid.Row="1" Grid.ColumnSpan="3" Grid.Column="0" HorizontalOptions="Start" WidthRequest="240"/>
+                <BoxView x:Name="MyHpSlide" Grid.Row="1" Grid.ColumnSpan="3" Grid.Column="0" HorizontalOptions="Start" WidthRequest="260"/>
             </Grid>
             <Label x:Name="MyMoney" Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="3" Text="  💰总经济：" Style="{StaticResource littleAttributes}" />
         </Grid>
diff --git a/logic/Client/PlayerStatusBar.xaml.cs b/logic/Client/PlayerStatusBar.xaml.cs
index c5551556..06ead772 100644
--- a/logic/Client/PlayerStatusBar.xaml.cs
+++ b/logic/Client/PlayerStatusBar.xaml.cs
@@ -5,18 +5,19 @@ namespace Client
 {
     public partial class PlayerStatusBar : ContentView
     {
+        private bool haveSetSlideLength = false;
         enum PlayerRole
         {
             Red,    //the down player
             Blue    //the up player
         };
         PlayerRole myRole;
-        private readonly int lengthOfHpSlide = 240;
-
+        private double lengthOfHpSlide = 240;
         List<ShipLabel> shipLabels = new List<ShipLabel>();
         public PlayerStatusBar(Grid parent, int Row, int Column, int role)
         {
             InitializeComponent();
+            MyHpSlide.WidthRequest = lengthOfHpSlide;
             if (role == 0)
             {
                 myRole = PlayerRole.Red;
@@ -37,6 +38,7 @@ public PlayerStatusBar(Grid parent, int Row, int Column, int role)
 
         private void DrawSelfInfo()
         {
+            MyHpSlide.WidthRequest = lengthOfHpSlide;
             if (myRole == PlayerRole.Red)
             {
                 MyName.Text = "Red Player";
@@ -63,13 +65,12 @@ private void DrawShipTable()
                 {
                     shipLabels[shipCounter].hpSlide.Color = Colors.Blue;
                 }
-                Grid shipStatusGrid = new Grid();
-                shipStatusGrid.RowDefinitions.Add(new RowDefinition());
-                shipStatusGrid.RowDefinitions.Add(new RowDefinition(10));
-                shipStatusGrid.Add(shipLabels[shipCounter].status);
-                shipStatusGrid.Add(shipLabels[shipCounter].hpSlide);
-                shipStatusGrid.SetRow(shipLabels[shipCounter].status, 0);
-                shipStatusGrid.SetRow(shipLabels[shipCounter].hpSlide, 1);
+                shipLabels[shipCounter].shipStatusGrid.RowDefinitions.Add(new RowDefinition());
+                shipLabels[shipCounter].shipStatusGrid.RowDefinitions.Add(new RowDefinition(10));
+                shipLabels[shipCounter].shipStatusGrid.Add(shipLabels[shipCounter].status);
+                shipLabels[shipCounter].shipStatusGrid.Add(shipLabels[shipCounter].hpSlide);
+                shipLabels[shipCounter].shipStatusGrid.SetRow(shipLabels[shipCounter].status, 0);
+                shipLabels[shipCounter].shipStatusGrid.SetRow(shipLabels[shipCounter].hpSlide, 1);
 
                 ShipAllAttributesGrid.Children.Add(shipLabels[shipCounter].name);
                 ShipAllAttributesGrid.Children.Add(shipLabels[shipCounter].producer);
@@ -77,7 +78,7 @@ private void DrawShipTable()
                 ShipAllAttributesGrid.Children.Add(shipLabels[shipCounter].armor);
                 ShipAllAttributesGrid.Children.Add(shipLabels[shipCounter].shield);
                 ShipAllAttributesGrid.Children.Add(shipLabels[shipCounter].weapon);
-                ShipAllAttributesGrid.Children.Add(shipStatusGrid);
+                ShipAllAttributesGrid.Children.Add(shipLabels[shipCounter].shipStatusGrid);
                 //ShipAllAttributesGrid.Children.Add(shipLabels[shipCounter].status);
 
                 ShipAllAttributesGrid.SetRow(shipLabels[shipCounter].name, shipCounter);
@@ -86,7 +87,7 @@ private void DrawShipTable()
                 ShipAllAttributesGrid.SetRow(shipLabels[shipCounter].armor, shipCounter);
                 ShipAllAttributesGrid.SetRow(shipLabels[shipCounter].shield, shipCounter);
                 ShipAllAttributesGrid.SetRow(shipLabels[shipCounter].weapon, shipCounter);
-                ShipAllAttributesGrid.SetRow(shipStatusGrid, shipCounter);
+                ShipAllAttributesGrid.SetRow(shipLabels[shipCounter].shipStatusGrid, shipCounter);
                 //ShipAllAttributesGrid.SetRow(shipLabels[shipCounter].status, shipCounter);
 
                 ShipAllAttributesGrid.SetColumn(shipLabels[shipCounter].name, 0);
@@ -95,7 +96,7 @@ private void DrawShipTable()
                 ShipAllAttributesGrid.SetColumn(shipLabels[shipCounter].armor, 3);
                 ShipAllAttributesGrid.SetColumn(shipLabels[shipCounter].shield, 4);
                 ShipAllAttributesGrid.SetColumn(shipLabels[shipCounter].weapon, 5);
-                ShipAllAttributesGrid.SetColumn(shipStatusGrid, 6);
+                ShipAllAttributesGrid.SetColumn(shipLabels[shipCounter].shipStatusGrid, 6);
                 //ShipAllAttributesGrid.SetColumn(shipLabels[shipCounter].status, 6);
             }
         }
@@ -125,6 +126,16 @@ public void SetShipValue(MessageOfShip ship)
             }
             //TODO: Dynamic change the ships
         }
+
+        public void SlideLengthSet()
+        {
+            UtilFunctions.SlideLengthSet(MyHpSlide, ref haveSetSlideLength, ref lengthOfHpSlide, PlayerRoleInfoGrid.Width);
+            foreach (ShipLabel shiplabel in shipLabels)
+            {
+                UtilFunctions.SlideLengthSet(shiplabel.hpSlide, ref haveSetSlideLength, ref shiplabel.lengthOfShipHpSlide, shiplabel.shipStatusGrid.Width);
+            }
+            haveSetSlideLength = true;
+        }
     }
     public class ShipLabel
     {
@@ -135,6 +146,8 @@ public class ShipLabel
         public Label shield = new Label() { Text = "shield" };
         public Label weapon = new Label() { Text = "weapon" };
         public Label status = new Label() { Text = "IDLE" };
+        public double lengthOfShipHpSlide = 80;
         public BoxView hpSlide = new BoxView() { Color = Colors.Red, WidthRequest = 80, HeightRequest = 3, HorizontalOptions = LayoutOptions.Start, VerticalOptions = LayoutOptions.End };
+        public Grid shipStatusGrid = new Grid();
     };
 }
\ No newline at end of file
diff --git a/logic/Client/UtilFunctions.cs b/logic/Client/UtilFunctions.cs
new file mode 100644
index 00000000..84db59b8
--- /dev/null
+++ b/logic/Client/UtilFunctions.cs
@@ -0,0 +1,29 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Client
+{
+    public class UtilFunctions
+    {
+        public static void SlideLengthSet(BoxView slide, ref bool haveSetSlideLength, ref double lengthOfSlide, double parentGridWidth)
+        {
+            if (parentGridWidth < 0)
+            {
+                return;
+            }
+            if (haveSetSlideLength == false)
+            {
+                lengthOfSlide = parentGridWidth;
+                slide.WidthRequest = lengthOfSlide;
+            }
+            else
+            {
+                slide.WidthRequest = slide.WidthRequest / lengthOfSlide * parentGridWidth;
+                lengthOfSlide = parentGridWidth;
+            }
+        }
+    }
+}