diff --git a/Weibo/Assets.xcassets/edit.imageset/Contents.json b/Weibo/Assets.xcassets/edit.imageset/Contents.json
new file mode 100644
index 0000000..c9c7d7d
--- /dev/null
+++ b/Weibo/Assets.xcassets/edit.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "edit.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Weibo/Assets.xcassets/edit.imageset/edit.png b/Weibo/Assets.xcassets/edit.imageset/edit.png
new file mode 100644
index 0000000..5851f8c
Binary files /dev/null and b/Weibo/Assets.xcassets/edit.imageset/edit.png differ
diff --git a/Weibo/Assets.xcassets/house.imageset/Contents.json b/Weibo/Assets.xcassets/house.imageset/Contents.json
new file mode 100644
index 0000000..cd657f9
--- /dev/null
+++ b/Weibo/Assets.xcassets/house.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "house.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Weibo/Assets.xcassets/house.imageset/house.png b/Weibo/Assets.xcassets/house.imageset/house.png
new file mode 100644
index 0000000..e7fdae8
Binary files /dev/null and b/Weibo/Assets.xcassets/house.imageset/house.png differ
diff --git a/Weibo/Assets.xcassets/red packet.imageset/Contents.json b/Weibo/Assets.xcassets/red packet.imageset/Contents.json
new file mode 100644
index 0000000..0bb330d
--- /dev/null
+++ b/Weibo/Assets.xcassets/red packet.imageset/Contents.json	
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "red packet.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Weibo/Assets.xcassets/red packet.imageset/red packet.png b/Weibo/Assets.xcassets/red packet.imageset/red packet.png
new file mode 100644
index 0000000..43c41e2
Binary files /dev/null and b/Weibo/Assets.xcassets/red packet.imageset/red packet.png differ
diff --git a/Weibo/Assets.xcassets/user-search-line.imageset/Contents.json b/Weibo/Assets.xcassets/user-search-line.imageset/Contents.json
new file mode 100644
index 0000000..f551f2d
--- /dev/null
+++ b/Weibo/Assets.xcassets/user-search-line.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "user-search-line.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Weibo/Assets.xcassets/user-search-line.imageset/user-search-line.png b/Weibo/Assets.xcassets/user-search-line.imageset/user-search-line.png
new file mode 100644
index 0000000..419a60a
Binary files /dev/null and b/Weibo/Assets.xcassets/user-search-line.imageset/user-search-line.png differ
diff --git a/Weibo/Assets.xcassets/user.imageset/Contents.json b/Weibo/Assets.xcassets/user.imageset/Contents.json
new file mode 100644
index 0000000..21d8882
--- /dev/null
+++ b/Weibo/Assets.xcassets/user.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "user.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Weibo/Assets.xcassets/user.imageset/user.png b/Weibo/Assets.xcassets/user.imageset/user.png
new file mode 100644
index 0000000..f6cffaa
Binary files /dev/null and b/Weibo/Assets.xcassets/user.imageset/user.png differ
diff --git a/Weibo/ContentView.swift b/Weibo/ContentView.swift
index dee98f3..bb57cd1 100644
--- a/Weibo/ContentView.swift
+++ b/Weibo/ContentView.swift
@@ -16,8 +16,15 @@ struct ContentView: View {
 
     var body: some View {
         TabView(selection: self.$selection) {
-            IndexView().tabItem { Text("首页") }.tag(1)
-            LoginView().tabItem { Text("我") }.tag(2)
+            IndexView().tabItem { VStack {
+                Image("house")
+                Text("首页")
+                    .foregroundColor(Color.black)
+                } }.tag(1)
+            LoginView().tabItem { VStack {
+                Image("user")
+                Text("我")
+                } }.tag(2)
         }
     }
 }
diff --git a/Weibo/IndexView.swift b/Weibo/IndexView.swift
index 811762b..cb7417f 100644
--- a/Weibo/IndexView.swift
+++ b/Weibo/IndexView.swift
@@ -8,40 +8,103 @@
 
 import SwiftUI
 import AlamofireImage
+
+
+struct ButtonView:View{
+    var title:String
+    var action:() -> Void
+
+    @Binding var activeMenu:String
+    
+     func isActive(name:String)->Color{
+         if name==self.activeMenu{
+             return Color.orange
+         }else{
+             return Color.black
+         }
+     }
+    
+    var body: some View{
+        Button(action: action) {
+            Text(title)
+                .foregroundColor(isActive(name: title))
+        }
+        .padding(.all, 10.0)
+        .frame(width: 90.0)
+        .background(Color(red: 222/255, green: 223/255, blue: 222/255, opacity: 1.0))
+        .clipShape(Rectangle())
+        .cornerRadius(3)
+    }
+}
+
+struct TextView:View {
+    var title:String
+    var isActive:Bool
+     var body: some View{
+        if isActive{
+            return Text(title)
+            .foregroundColor(Color.black)
+            .fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
+        }else{
+            return Text(title)
+            .foregroundColor(Color.gray)
+        }
+    }
+}
+
 struct TopView:View {
     
     @Binding var icon: String
     
+    @State var activeMenu:String="全部关注"
+    
+    @State var menuIndex=0
+ 
     var body: some View{
         VStack {
-            HStack(alignment: .center){
-                Button(action: {
-                    if self.icon=="arrowbottom"{
-                        self.icon="arrowtop"
-                    }else{
-                        self.icon="arrowbottom"
+            HStack {
+                Image("user-search-line")
+                Spacer()
+                HStack{
+                    Button(action: {
+                        if self.icon=="arrowbottom"{
+                            self.icon="arrowtop"
+                        }else{
+                            self.icon="arrowbottom"
+                        }
+                        self.menuIndex=0
+                    }) {
+                        HStack {
+                            TextView(title: self.activeMenu, isActive: self.menuIndex==0)
+                            Image(self.icon)
+                                .padding(.leading, -9.0)
+                                
+                        }
                     }
-                }) {
-                    HStack {
-                        Text("最新微博")
-                            .foregroundColor(Color.black)
-                        Image(self.icon)
+                    Button(action: {
+                        print("推荐")
+                        self.menuIndex=1
+                    }){
+                        TextView(title: "推荐", isActive: self.menuIndex==1)
+                    }
+                    Button(action: {
+                        print("同城")
+                        self.menuIndex=2
+                    }){
+                        TextView(title: "同城", isActive: self.menuIndex==2)
                     }
                 }
-                Button(action: {
-                    print("推荐")
-                }){
-                    Text("推荐")
-                        .foregroundColor(Color.gray)
-                }
-                Button(action: {
-                    print("同城")
-                }){
-                    Text("同城")
-                        .foregroundColor(Color.gray)
+                Spacer()
+                HStack(){
+                       Image("red packet")
+                       Image("edit")
                 }
+                .padding(.trailing, 18.0)
+                .frame(width: nil)
+                
             }
-            if self.icon=="arrowtop"{
+           
+            if self.icon=="arrowbottom"{
                 HStack {
                     Text("默认分组")
                         .foregroundColor(Color.gray)
@@ -53,6 +116,97 @@ struct TopView:View {
                             .foregroundColor(Color.orange)
                     }
                 }
+                .padding(EdgeInsets(top: 5, leading: 20, bottom: 0, trailing: 20))
+                HStack(spacing: 10.0){
+                    ButtonView(title: "全部关注", action: {
+                        print("全部关注")
+                        self.activeMenu="全部关注"
+                        self.icon="arrowtop"
+                    },activeMenu: self.$activeMenu)
+                    ButtonView(title: "最新微博", action: {
+                        print("最新微博")
+                        self.activeMenu="最新微博"
+                        self.icon="arrowtop"
+                    },activeMenu: self.$activeMenu)
+                    ButtonView(title: "特别关注", action: {
+                        print("特别关注")
+                        self.activeMenu="特别关注"
+                        self.icon="arrowtop"
+                    },activeMenu: self.$activeMenu)
+                    ButtonView(title: "好友圈", action: {
+                        print("好友圈")
+                        self.activeMenu="好友圈"
+                        self.icon="arrowtop"
+                    },activeMenu: self.$activeMenu)
+                }
+                .padding(.top, 10.0)
+                HStack(spacing: 10.0){
+                    ButtonView(title: "原创", action: {
+                        print("原创")
+                        self.activeMenu="原创"
+                        self.icon="arrowtop"
+                    },activeMenu: self.$activeMenu)
+                    ButtonView(title: "视频", action: {
+                        print("视频")
+                        self.activeMenu="视频"
+                        self.icon="arrowtop"
+                    },activeMenu: self.$activeMenu)
+                    ButtonView(title: "V+微博", action: {
+                        print("V+微博")
+                        self.activeMenu="V+微博"
+                        self.icon="arrowtop"
+                    },activeMenu: self.$activeMenu)
+                    ButtonView(title: "群微博", action: {
+                        print("群微博")
+                        self.activeMenu="群微博"
+                        self.icon="arrowtop"
+                    },activeMenu: self.$activeMenu)
+                }
+                .padding(.top, 10.0)
+                HStack {
+                    Text("我的分组")
+                        .foregroundColor(Color.gray)
+                        .padding(.leading, 20.0)
+                    Spacer()
+                }
+                .padding(.top, 10.0)
+                HStack(spacing: 10.0){
+                    ButtonView(title: "名人明星", action: {
+                        print("名人明星")
+                        self.activeMenu="名人明星"
+                        self.icon="arrowtop"
+                    },activeMenu: self.$activeMenu)
+                    ButtonView(title: "同事", action: {
+                        print("同事")
+                        self.activeMenu="同事"
+                        self.icon="arrowtop"
+                    },activeMenu: self.$activeMenu)
+                    ButtonView(title: "同学", action: {
+                        print("同学")
+                        self.activeMenu="同学"
+                        self.icon="arrowtop"
+                    },activeMenu: self.$activeMenu)
+                    ButtonView(title: "悄悄关注", action: {
+                        print("悄悄关注")
+                        self.activeMenu="悄悄关注"
+                        self.icon="arrowtop"
+                    },activeMenu: self.$activeMenu)
+                }
+                .padding(.top, 10.0)
+                HStack(){
+            
+                        Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
+                            Text("+新建分组")
+                        }
+                        .foregroundColor(Color.black)
+                        .padding(10.0)
+                        .frame(width: 100.0)
+                        .overlay(Rectangle()
+                        .stroke(Color.gray, style: StrokeStyle(lineWidth: 2, dash: [5])))
+                        Spacer()
+         
+                }
+                .padding(10.0)
             }
         }
     }
@@ -88,7 +242,7 @@ struct RowView:View {
 
 struct IndexView: View {
     
-    @State var icon: String="arrowbottom"
+    @State var icon: String="arrowtop"
     
     var body: some View {
         VStack {