diff --git a/app/src/main/java/com/example/cyclofit/ui/fragment/LeaderboardFragment.kt b/app/src/main/java/com/example/cyclofit/ui/fragment/LeaderboardFragment.kt
index 7e78f59..26effff 100644
--- a/app/src/main/java/com/example/cyclofit/ui/fragment/LeaderboardFragment.kt
+++ b/app/src/main/java/com/example/cyclofit/ui/fragment/LeaderboardFragment.kt
@@ -5,6 +5,7 @@ import android.util.Log
 import android.view.*
 import android.widget.Button
 import android.widget.CheckBox
+import android.widget.RadioButton
 import androidx.appcompat.widget.SearchView.OnQueryTextListener
 import androidx.core.view.MenuProvider
 import androidx.recyclerview.widget.LinearLayoutManager
@@ -152,13 +153,13 @@ class LeaderboardFragment : BaseFragment() {
                         ) { view, alertDialog ->
                             var boolean = true
 
-                            val sortName = view.findViewById<CheckBox>(R.id.id_tv_sort_by_name)
+                            val sortName = view.findViewById<RadioButton>(R.id.id_tv_sort_by_name)
                             val sortDistance =
-                                view.findViewById<CheckBox>(R.id.id_tv_sort_by_distance)
+                                view.findViewById<RadioButton>(R.id.id_tv_sort_by_distance)
                             val checkAscending =
-                                view.findViewById<CheckBox>(R.id.id_tv_sort_ascending)
+                                view.findViewById<RadioButton>(R.id.id_tv_sort_ascending)
                             val checkDescending =
-                                view.findViewById<CheckBox>(R.id.id_tv_sort_descending)
+                                view.findViewById<RadioButton>(R.id.id_tv_sort_descending)
                             val btnSortList =
                                 view.findViewById<Button>(R.id.id_btn_sort_list)
 
@@ -166,16 +167,16 @@ class LeaderboardFragment : BaseFragment() {
                             sortName.setOnClickListener {
                                 if (sortName.isChecked) {
                                     sortDistance.isChecked = false
-                                    checkAscending.text = "from A to Z"
-                                    checkDescending.text = "from Z to A"
+                                    checkAscending.text = "From A to Z"
+                                    checkDescending.text = "From Z to A"
                                 }
                             }
                             // check sorting method descending
                             sortDistance.setOnClickListener {
                                 if (sortDistance.isChecked) {
                                     sortName.isChecked = false
-                                    checkAscending.text = "from highest"
-                                    checkDescending.text = "from lowest"
+                                    checkAscending.text = "From highest"
+                                    checkDescending.text = "From lowest"
                                 }
                             }
 
diff --git a/app/src/main/res/drawable/checkbox_bg.xml b/app/src/main/res/drawable/checkbox_bg.xml
new file mode 100644
index 0000000..f6418cb
--- /dev/null
+++ b/app/src/main/res/drawable/checkbox_bg.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/checkbox_check_bg" android:state_checked="true" />
+    <item android:drawable="@drawable/checkbox_uncheck_bg" />
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/checkbox_check_bg.xml b/app/src/main/res/drawable/checkbox_check_bg.xml
new file mode 100644
index 0000000..d1519e6
--- /dev/null
+++ b/app/src/main/res/drawable/checkbox_check_bg.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/backgroundColor" />
+            <stroke
+                android:width="3dp"
+                android:color="@color/dark_green" />
+            <corners android:radius="10dp" />
+        </shape>
+    </item>
+</layer-list>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/checkbox_uncheck_bg.xml b/app/src/main/res/drawable/checkbox_uncheck_bg.xml
new file mode 100644
index 0000000..c023f4c
--- /dev/null
+++ b/app/src/main/res/drawable/checkbox_uncheck_bg.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/backgroundColor" />
+            <stroke
+                android:width="3dp"
+                android:color="#ababab" />
+            <corners android:radius="10dp" />
+        </shape>
+    </item>
+</layer-list>
\ No newline at end of file
diff --git a/app/src/main/res/layout/sort_leader_layout.xml b/app/src/main/res/layout/sort_leader_layout.xml
index 3139e2a..ba6c556 100644
--- a/app/src/main/res/layout/sort_leader_layout.xml
+++ b/app/src/main/res/layout/sort_leader_layout.xml
@@ -2,67 +2,69 @@
 <androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
+    android:background="@color/backgroundColor"
+    android:gravity="center_horizontal"
     android:orientation="vertical"
-    android:paddingHorizontal="10dp"
-    android:gravity="center_horizontal">
+    android:padding="16dp">
+
     <LinearLayout
-        android:layout_width="wrap_content"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:orientation="vertical">
-        <CheckBox
+        android:orientation="horizontal">
+
+        <RadioButton
             android:id="@+id/id_tv_sort_by_name"
-            style="@style/Widget.AppCompat.Button.Borderless"
-            android:layout_width="match_parent"
+            android:layout_width="125dp"
             android:layout_height="wrap_content"
-            android:layout_marginVertical="5dp"
-            android:text="@string/by_name"
-            android:textAllCaps="false"
+            android:layout_marginEnd="8dp"
+            android:background="@drawable/checkbox_bg"
+            android:button="@null"
             android:checked="true"
+            android:padding="8dp"
+            android:textSize="15sp"
+            android:text="@string/sort_by_name"
+            android:textAlignment="center"
             android:textStyle="bold" />
 
-        <CheckBox
+        <RadioButton
             android:id="@+id/id_tv_sort_by_distance"
-            style="@style/Widget.AppCompat.Button.Borderless"
-            android:layout_width="match_parent"
+            android:layout_width="125dp"
             android:layout_height="wrap_content"
-            android:text="@string/by_distance"
-            android:textAllCaps="false"
+            android:layout_marginStart="8dp"
+            android:textSize="15sp"
+            android:background="@drawable/checkbox_bg"
+            android:button="@null"
             android:checked="false"
+            android:padding="8dp"
+            android:text="@string/sort_by_distance"
+            android:textAlignment="center"
             android:textStyle="bold" />
     </LinearLayout>
 
 
-    <LinearLayout
-        android:layout_width="wrap_content"
+    <RadioButton
+        android:id="@+id/id_tv_sort_ascending"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginTop="10dp"
-        android:orientation="horizontal">
+        android:layout_marginTop="8dp"
+        android:checked="true"
+        android:text="From A to Z" />
 
-        <CheckBox
-            android:id="@+id/id_tv_sort_ascending"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginHorizontal="5dp"
-            android:checked="true"
-            android:text="from A to Z" />
+    <RadioButton
+        android:id="@+id/id_tv_sort_descending"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginBottom="8dp"
+        android:text="From Z to A" />
 
-        <CheckBox
-            android:id="@+id/id_tv_sort_descending"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginHorizontal="5dp"
-            android:text="from Z to A" />
-    </LinearLayout>
     <Button
+        android:id="@+id/id_btn_sort_list"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginVertical="5dp"
-        android:layout_marginBottom="20dp"
+        android:layout_height="56dp"
+        android:layout_gravity="end"
         android:text="Sort"
-        android:id="@+id/id_btn_sort_list"
-        android:textColor="@color/black"
         android:textAllCaps="false"
-        android:layout_gravity="end"
+        android:textColor="@color/black"
         android:textSize="25sp"
-        android:textStyle="bold|italic" />
+        android:textStyle="bold" />
 </androidx.appcompat.widget.LinearLayoutCompat>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 5050421..2530620 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -10,8 +10,8 @@
     <string name="hello_blank_fragment">Hello blank fragment</string>
     <string name="DialogTitle">Choose Theme</string>
     <string name="climbuptxt">km away to climb up</string>
-    <string name="by_name">by name</string>
-    <string name="by_distance">by distance</string>
+    <string name="sort_by_name">Sort by name</string>
+    <string name="sort_by_distance">Sort by distance</string>
     <string-array name="DialogContents">
         <item>>White Theme</item>
         <item>Black Theme</item>