diff --git a/app/src/main/java/com/timber/soft/myemoticon/MainActivity.kt b/app/src/main/java/com/timber/soft/myemoticon/MainActivity.kt
index f31c689..e3112c1 100644
--- a/app/src/main/java/com/timber/soft/myemoticon/MainActivity.kt
+++ b/app/src/main/java/com/timber/soft/myemoticon/MainActivity.kt
@@ -4,15 +4,22 @@ import android.content.Intent
 import android.content.pm.PackageInfo
 import android.content.pm.PackageManager
 import android.graphics.Color
+import android.graphics.Typeface
 import android.net.Uri
 import android.os.Build
 import android.os.Bundle
+import android.util.TypedValue
+import android.view.Gravity
 import android.view.View
+import android.widget.TextView
 import androidx.annotation.RequiresApi
 import androidx.appcompat.app.AppCompatActivity
+import androidx.core.content.ContextCompat
 import androidx.core.view.GravityCompat
 import androidx.drawerlayout.widget.DrawerLayout
 import androidx.fragment.app.Fragment
+import androidx.fragment.app.FragmentPagerAdapter
+import com.google.android.material.tabs.TabLayout
 import com.timber.soft.myemoticon.databinding.ActivityMainBinding
 import com.timber.soft.myemoticon.model.RootDataModel
 import com.timber.soft.myemoticon.tools.AppTools
@@ -76,16 +83,57 @@ class MainActivity : AppCompatActivity() {
             AppTools.parseJsonFile(assets.open("data.json"))
         )
         rootModelList.shuffle()
+
         for (i in rootModelList) {
             binding.tabLayout.addTab(
-                binding.tabLayout.newTab().setCustomView(R.layout.item_custom_tab)
+                binding.tabLayout.newTab()
             )
         }
 
+        for (i in 0 until binding.tabLayout.tabCount) {
+            val rootDataModel = rootModelList[i]
+            fragmentList.add(MainViewPagerFragment(rootDataModel))
+        }
 
+        binding.tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
+            override fun onTabSelected(p0: TabLayout.Tab?) {
+                val textView = TextView(this@MainActivity)
+                val selectedSize = TypedValue.applyDimension(
+                    TypedValue.COMPLEX_UNIT_PX, 24f, resources.displayMetrics
+                )
+                textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, selectedSize)
+                textView.typeface = Typeface.defaultFromStyle(Typeface.BOLD) //加粗
+                textView.setTextColor(ContextCompat.getColor(this@MainActivity, R.color.main_color))
+                textView.text = p0!!.text
+                p0.customView = textView
+            }
 
+            override fun onTabUnselected(p0: TabLayout.Tab?) {
+                p0?.customView = null
+            }
+
+            override fun onTabReselected(p0: TabLayout.Tab?) {
+            }
+        })
+
+        binding.viewpager.offscreenPageLimit = 3
+        binding.viewpager.adapter = object : FragmentPagerAdapter(supportFragmentManager) {
+            override fun getCount(): Int {
+                return fragmentList.size
+            }
+
+            override fun getItem(position: Int): Fragment {
+                return fragmentList[position]
+            }
+
+            override fun getPageTitle(position: Int): CharSequence {
+                return rootModelList[position].categoryName
+            }
+        }
+        binding.tabLayout.setupWithViewPager(binding.viewpager)
 
     }
+
     private fun getVersionName(): String {
         val pInfo: PackageInfo
         try {
diff --git a/app/src/main/java/com/timber/soft/myemoticon/MainViewPagerFragment.kt b/app/src/main/java/com/timber/soft/myemoticon/MainViewPagerFragment.kt
new file mode 100644
index 0000000..11495fe
--- /dev/null
+++ b/app/src/main/java/com/timber/soft/myemoticon/MainViewPagerFragment.kt
@@ -0,0 +1,107 @@
+package com.timber.soft.myemoticon
+
+import android.content.Context
+import android.os.Bundle
+import android.util.Log
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.widget.TextView
+import androidx.cardview.widget.CardView
+import androidx.fragment.app.Fragment
+import androidx.recyclerview.widget.GridLayoutManager
+import androidx.recyclerview.widget.LinearLayoutManager.VERTICAL
+import androidx.recyclerview.widget.RecyclerView
+import androidx.recyclerview.widget.StaggeredGridLayoutManager
+import com.timber.soft.myemoticon.model.ChildDataModel
+import com.timber.soft.myemoticon.model.RootDataModel
+
+class MainViewPagerFragment(private val rootModel: RootDataModel) : Fragment() {
+    override fun onCreateView(
+        inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
+    ): View? {
+        val view = inflater.inflate(R.layout.fragment_main, container, false)
+        val recyclerViewList: RecyclerView = view.findViewById(R.id.recycler_list)
+        recyclerViewList.layoutManager = StaggeredGridLayoutManager(2, VERTICAL)
+        val pagerAdapter = MainHomeCardAdapter(requireContext(),
+            rootModel,
+            object : MainHomeCardAdapter.OnItemClickListener {
+                override fun onItemClick(position: Int, childModel: ChildDataModel) {
+//                    val intent = Intent(requireContext(), DetailsActivity::class.java)
+//                    intent.putExtra("KEY_EXTRA", dataModel)
+//                    startActivity(intent)
+                    Log.d("onClick", "item has been click!")
+                }
+            })
+
+        recyclerViewList.adapter = pagerAdapter
+        return view
+    }
+}
+
+class MainHomeCardAdapter(
+    private val context: Context,
+    private val model: RootDataModel,
+    private val listener: OnItemClickListener
+) : RecyclerView.Adapter<MainHomeCardAdapter.PreViewHolder>() {
+    private val childModels = model.childList
+
+    inner class PreViewHolder(view: View) : RecyclerView.ViewHolder(view) {
+        val iconName: TextView = itemView.findViewById(R.id.icon_name)
+        val rootCard: CardView = itemView.findViewById(R.id.item_home_car)
+        val recyclerPreview: RecyclerView = itemView.findViewById(R.id.recycler_preview)
+    }
+
+    interface OnItemClickListener {
+        fun onItemClick(position: Int, childModel: ChildDataModel)
+    }
+
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PreViewHolder {
+        val view = LayoutInflater.from(context).inflate(R.layout.item_home_card, parent, false)
+        return PreViewHolder(view)
+    }
+
+    override fun getItemCount(): Int {
+        return childModels.size
+    }
+
+    override fun onBindViewHolder(holder: PreViewHolder, position: Int) {
+        val childModel = childModels[position]
+        holder.iconName.text = childModel.identifierName
+
+        holder.recyclerPreview.layoutManager = StaggeredGridLayoutManager(2, VERTICAL)
+
+        val cardImgAdapter = CardImgAdapter(context, childModel.previewList, childModel.count)
+
+        holder.recyclerPreview.adapter = cardImgAdapter
+
+        holder.rootCard.setOnClickListener() {
+            listener.onItemClick(position, childModel)
+        }
+    }
+}
+
+class CardImgAdapter(
+    private val context: Context,
+    private val urlList: List<String>,
+    private val imgCount: Int
+
+) : RecyclerView.Adapter<CardImgAdapter.ImgViewHolder>() {
+
+    inner class ImgViewHolder(view: View) : RecyclerView.ViewHolder(view) {
+
+    }
+
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ImgViewHolder {
+
+    }
+
+    override fun getItemCount(): Int {
+
+    }
+
+    override fun onBindViewHolder(holder: ImgViewHolder, position: Int) {
+
+    }
+
+}
\ No newline at end of file
diff --git a/app/src/main/res/drawable/shape_main_pre_count.xml b/app/src/main/res/drawable/shape_main_pre_count.xml
new file mode 100644
index 0000000..ef0ea1f
--- /dev/null
+++ b/app/src/main/res/drawable/shape_main_pre_count.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+    <solid android:color="@color/item_bg_color" />
+
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/shape_theme_color.xml b/app/src/main/res/drawable/shape_main_pre_img.xml
similarity index 62%
rename from app/src/main/res/drawable/shape_theme_color.xml
rename to app/src/main/res/drawable/shape_main_pre_img.xml
index bcacc99..7d259ed 100644
--- a/app/src/main/res/drawable/shape_theme_color.xml
+++ b/app/src/main/res/drawable/shape_main_pre_img.xml
@@ -1,8 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
-
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
-    <solid android:color="@color/theme_color"/>
-    <corners android:radius="24dp"/>
+    <corners android:radius="2dp" />
+    <solid android:color="@color/item_bg_color" />
 
 </shape>
\ No newline at end of file
diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml
index fa3bb8b..83f396d 100644
--- a/app/src/main/res/layout/activity_main.xml
+++ b/app/src/main/res/layout/activity_main.xml
@@ -22,8 +22,8 @@
                 android:id="@+id/bt_menu"
                 android:layout_width="40dp"
                 android:layout_height="40dp"
-                android:layout_marginStart="7dp"
-                android:padding="8dp"
+                android:layout_marginStart="4dp"
+                android:padding="10dp"
                 android:src="@drawable/svg_menu"
                 app:layout_constraintLeft_toLeftOf="parent"
                 app:layout_constraintTop_toTopOf="parent" />
@@ -44,21 +44,20 @@
             <!--tab-->
             <com.google.android.material.tabs.TabLayout
                 android:id="@+id/tabLayout"
-                android:layout_width="wrap_content"
+                android:layout_width="match_parent"
                 android:layout_height="40dp"
-                android:layout_marginTop="8dp"
+                android:layout_marginTop="4dp"
                 app:layout_constraintLeft_toLeftOf="parent"
                 app:layout_constraintTop_toBottomOf="@id/text_title"
-                app:tabIndicatorColor="@color/theme_color"
-                app:tabIndicatorFullWidth="false"
-                app:tabMode="scrollable" />
+                app:tabIndicatorColor="@color/main_color"
+                app:tabMode="scrollable"
+                app:tabSelectedTextColor="@color/main_color" />
 
             <!--内容-->
             <androidx.viewpager.widget.ViewPager
                 android:id="@+id/viewpager"
                 android:layout_width="match_parent"
                 android:layout_height="0dp"
-                android:layout_marginTop="4dp"
                 app:layout_constraintBottom_toBottomOf="parent"
                 app:layout_constraintTop_toBottomOf="@id/tabLayout" />
         </androidx.constraintlayout.widget.ConstraintLayout>
@@ -76,6 +75,7 @@
                 android:id="@+id/topPanel"
                 android:layout_width="match_parent"
                 android:layout_height="160dp"
+                android:background="@color/main_bg_color"
                 android:paddingBottom="14dp"
                 app:layout_constraintLeft_toLeftOf="parent"
                 app:layout_constraintTop_toTopOf="parent">
diff --git a/app/src/main/res/layout/fragment_main.xml b/app/src/main/res/layout/fragment_main.xml
new file mode 100644
index 0000000..92b6e8d
--- /dev/null
+++ b/app/src/main/res/layout/fragment_main.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@color/main_bg_color"
+    tools:context="com.timber.soft.myemoticon.MainViewPagerFragment">
+
+    <androidx.recyclerview.widget.RecyclerView
+        android:id="@+id/recycler_list"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:layout_marginEnd="12dp"
+        />
+
+</FrameLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/item_custom_tab.xml b/app/src/main/res/layout/item_custom_tab.xml
deleted file mode 100644
index 6d6d914..0000000
--- a/app/src/main/res/layout/item_custom_tab.xml
+++ /dev/null
@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="wrap_content"
-    android:layout_height="match_parent"
-    android:orientation="vertical">
-
-    <TextView
-        android:id="@+id/item_tab_name"
-        android:layout_width="wrap_content"
-        android:layout_height="0dp"
-        android:layout_weight="1"
-        android:gravity="center"
-        android:padding="18dp"
-        android:text="text_TAB"
-        android:textColor="@color/black"
-        android:textSize="14sp" />
-
-    <View
-        android:id="@+id/tab_line"
-        android:layout_width="match_parent"
-        android:layout_height="2dp"
-        android:background="@color/theme_color" />
-
-</LinearLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/item_home_card.xml b/app/src/main/res/layout/item_home_card.xml
new file mode 100644
index 0000000..049f30a
--- /dev/null
+++ b/app/src/main/res/layout/item_home_card.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+
+    android:layout_marginStart="12dp"
+    android:layout_marginTop="12dp"
+
+    android:background="@color/white"
+    android:id="@+id/item_home_car"
+
+    app:cardCornerRadius="8dp">
+
+    <RelativeLayout
+        android:layout_width="match_parent"
+        android:padding="12dp"
+        android:layout_height="match_parent">
+
+        <TextView
+            android:id="@+id/icon_name"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="@string/item_name"
+            android:textColor="@color/black"
+            android:textSize="12sp" />
+
+        <androidx.recyclerview.widget.RecyclerView
+            android:id="@+id/recycler_preview"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="6dp"
+            android:layout_below="@id/icon_name" />
+    </RelativeLayout>
+
+</androidx.cardview.widget.CardView>
\ No newline at end of file
diff --git a/app/src/main/res/layout/item_home_card_img.xml b/app/src/main/res/layout/item_home_card_img.xml
new file mode 100644
index 0000000..04d45b4
--- /dev/null
+++ b/app/src/main/res/layout/item_home_card_img.xml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginStart="6dp"
+    android:id="@+id/relayout_root"
+    android:background="@drawable/shape_main_pre_img"
+    android:orientation="horizontal"
+    android:padding="2dp">
+
+    <ImageView
+        android:id="@+id/pre_card_img"
+        android:layout_width="65dp"
+        android:layout_height="65dp"
+        android:layout_centerInParent="true"
+        android:scaleType="fitXY"
+        android:src="@mipmap/ic_launcher" />
+
+    <TextView
+        android:id="@+id/pre_car_count"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_centerInParent="true"
+        android:background="@drawable/shape_main_pre_count"
+        android:paddingStart="4dp"
+        android:paddingTop="2dp"
+        android:paddingEnd="4dp"
+        android:paddingBottom="2dp"
+        android:text="@string/item_count"
+        android:textColor="@color/main_color"
+        android:textSize="16sp" />
+
+</RelativeLayout>
\ No newline at end of file
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index cbfb0bd..bfc18e8 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -2,5 +2,8 @@
 <resources>
     <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
-    <color name="theme_color">#FF9800</color>
+    <color name="main_color">#FF9800</color>
+    <color name="main_bg_color">#80BFEFFF</color>
+    <color name="item_bg_color">#FFE4E1</color>
+    <color name="color_1c1c1c">#1C1C1C</color>
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index f1fe8ad..d4b35f4 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -3,4 +3,6 @@
     <string name="main_share">Share our Apps</string>
     <string name="main_rate">Find us in store</string>
     <string name="google_play_link">https://play.google.com/store/apps/details?id=</string>
+    <string name="item_name">Item Name</string>
+    <string name="item_count">+6</string>
 </resources>
\ No newline at end of file