diff --git a/build.sbt b/build.sbt
index f7609577..f763ed15 100644
--- a/build.sbt
+++ b/build.sbt
@@ -42,6 +42,7 @@ libraryDependencies ++=
   "com.google.android.gms" % "play-services-analytics" % "10.0.1" ::
   "com.google.android.gms" % "play-services-gcm" % "10.0.1" ::
   "com.j256.ormlite" % "ormlite-android" % "5.0" ::
+  "com.mikepenz" % "crossfader" % "1.5.0" ::
   "com.mikepenz" % "fastadapter" % "2.1.5" ::
   "com.mikepenz" % "iconics-core" % "2.8.2" ::
   "com.mikepenz" % "materialdrawer" % "5.8.1" ::
diff --git a/src/main/res/layout/layout_main.xml b/src/main/res/layout/layout_main.xml
index 1ca4a71d..b2bf4ebb 100644
--- a/src/main/res/layout/layout_main.xml
+++ b/src/main/res/layout/layout_main.xml
@@ -3,7 +3,7 @@
                 xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
                 android:layout_width="match_parent" android:layout_height="match_parent"
                 tools:ignore="UnknownIdInLayout" android:clipChildren="false">
-    <android.support.design.widget.CoordinatorLayout android:id="@+id/content"
+    <FrameLayout android:id="@+id/fragment_holder"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:layout_above="@+id/stat"/>
diff --git a/src/main/res/layout/layout_profiles_item.xml b/src/main/res/layout/layout_profiles_item.xml
index 2a0c6ebd..8bb44a46 100644
--- a/src/main/res/layout/layout_profiles_item.xml
+++ b/src/main/res/layout/layout_profiles_item.xml
@@ -11,7 +11,7 @@
                                                    android:layout_marginStart="8dp"
                                                    android:layout_marginEnd="8dp"
                                                    android:layout_gravity="center_horizontal"
-                                                   app:bounded_width="480dp"
+                                                   app:bounded_width="@dimen/profile_item_max_width"
                                                    android:id="@+id/indicator">
         <LinearLayout android:layout_width="match_parent"
             android:layout_height="wrap_content"
diff --git a/src/main/res/values/dimen.xml b/src/main/res/values/dimen.xml
index c11d2a7a..ad252519 100644
--- a/src/main/res/values/dimen.xml
+++ b/src/main/res/values/dimen.xml
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
+    <dimen name="profile_item_max_width">480dp</dimen>
     <!-- TODO: Remove when this issue is fixed: https://github.com/JorgeCastilloPrz/FABProgressCircle/issues/19 -->
     <dimen name="fab_margin_top">-44dp</dimen>
 </resources>
diff --git a/src/main/scala/com/github/shadowsocks/MainActivity.scala b/src/main/scala/com/github/shadowsocks/MainActivity.scala
index 7bd6bcb7..4d323893 100644
--- a/src/main/scala/com/github/shadowsocks/MainActivity.scala
+++ b/src/main/scala/com/github/shadowsocks/MainActivity.scala
@@ -45,6 +45,9 @@ import com.github.shadowsocks.ShadowsocksApplication.app
 import com.github.shadowsocks.aidl.IShadowsocksServiceCallback
 import com.github.shadowsocks.utils.CloseUtils.autoDisconnect
 import com.github.shadowsocks.utils._
+import com.mikepenz.crossfader.Crossfader
+import com.mikepenz.crossfader.view.CrossFadeSlidingPaneLayout
+import com.mikepenz.materialdrawer.interfaces.ICrossfader
 import com.mikepenz.materialdrawer.model.PrimaryDrawerItem
 import com.mikepenz.materialdrawer.model.interfaces.IDrawerItem
 import com.mikepenz.materialdrawer.{Drawer, DrawerBuilder}
@@ -67,6 +70,7 @@ class MainActivity extends Activity with ServiceBoundContext with Drawer.OnDrawe
   private val handler = new Handler()
   private var fab: FloatingActionButton = _
   private var fabProgressCircle: FABProgressCircle = _
+  var crossfader: Crossfader[CrossFadeSlidingPaneLayout] = _
   var drawer: Drawer = _
 
   private var testCount: Int = _
@@ -142,7 +146,7 @@ class MainActivity extends Activity with ServiceBoundContext with Drawer.OnDrawe
     rxText.setText(TrafficMonitor.formatTraffic(rxTotal))
     txRateText.setText(TrafficMonitor.formatTraffic(txRate) + "/s")
     rxRateText.setText(TrafficMonitor.formatTraffic(rxRate) + "/s")
-    val child = getFragmentManager.findFragmentById(R.id.content).asInstanceOf[ToolbarFragment]
+    val child = getFragmentManager.findFragmentById(R.id.fragment_holder).asInstanceOf[ToolbarFragment]
     if (state != State.STOPPING && child != null) child.onTrafficUpdated(txRate, rxRate, txTotal, rxTotal)
   }
 
@@ -173,8 +177,9 @@ class MainActivity extends Activity with ServiceBoundContext with Drawer.OnDrawe
   override def onCreate(savedInstanceState: Bundle) {
     super.onCreate(savedInstanceState)
     setContentView(R.layout.layout_main)
-    drawer = new DrawerBuilder()
+    val drawerBuilder = new DrawerBuilder()
       .withActivity(this)
+      .withTranslucentStatusBar(true)
       .withHeader(R.layout.layout_header)
       .addDrawerItems(
         new PrimaryDrawerItem()
@@ -204,7 +209,21 @@ class MainActivity extends Activity with ServiceBoundContext with Drawer.OnDrawe
       .withOnDrawerItemClickListener(this)
       .withActionBarDrawerToggle(true)
       .withSavedInstance(savedInstanceState)
-      .build()
+    val miniDrawerWidth = getResources.getDimension(R.dimen.material_mini_drawer_item)
+    if (getResources.getDisplayMetrics.widthPixels >=
+      getResources.getDimension(R.dimen.profile_item_max_width) + miniDrawerWidth) {
+      drawer = drawerBuilder.withGenerateMiniDrawer(true).buildView()
+      crossfader = new Crossfader[CrossFadeSlidingPaneLayout]()
+      crossfader.withContent(findViewById(android.R.id.content))
+        .withFirst(drawer.getSlider, getResources.getDimensionPixelSize(R.dimen.material_drawer_width))
+        .withSecond(drawer.getMiniDrawer.build(this), miniDrawerWidth.toInt)
+        .withSavedInstance(savedInstanceState)
+        .build()
+      drawer.getMiniDrawer.withCrossFader(new ICrossfader { // a wrapper is needed
+        def isCrossfaded: Boolean = crossfader.isCrossFaded
+        def crossfade(): Unit = crossfader.crossFade()
+      })
+    } else drawer = drawerBuilder.build()
 
     val header = drawer.getHeader
     val title = header.findViewById(R.id.drawer_title).asInstanceOf[TextView]
@@ -318,7 +337,7 @@ class MainActivity extends Activity with ServiceBoundContext with Drawer.OnDrawe
 
   private def displayFragment(fragment: ToolbarFragment) {
     currentFragment = fragment
-    getFragmentManager.beginTransaction().replace(R.id.content, fragment).commitAllowingStateLoss()
+    getFragmentManager.beginTransaction().replace(R.id.fragment_holder, fragment).commitAllowingStateLoss()
     drawer.closeDrawer()
   }
 
@@ -368,6 +387,7 @@ class MainActivity extends Activity with ServiceBoundContext with Drawer.OnDrawe
   override def onSaveInstanceState(outState: Bundle) {
     super.onSaveInstanceState(outState)
     drawer.saveInstanceState(outState)
+    if (crossfader != null) crossfader.saveInstanceState(outState)
   }
 
   override def onDestroy() {
diff --git a/src/main/scala/com/github/shadowsocks/ToolbarFragment.scala b/src/main/scala/com/github/shadowsocks/ToolbarFragment.scala
index c76fefe6..5810aefd 100644
--- a/src/main/scala/com/github/shadowsocks/ToolbarFragment.scala
+++ b/src/main/scala/com/github/shadowsocks/ToolbarFragment.scala
@@ -32,7 +32,7 @@ class ToolbarFragment extends Fragment {
     super.onViewCreated(view, savedInstanceState)
     toolbar = view.findViewById(R.id.toolbar).asInstanceOf[Toolbar]
     val activity = getActivity.asInstanceOf[MainActivity]
-    activity.drawer.setToolbar(activity, toolbar, true)
+    if (activity.crossfader == null) activity.drawer.setToolbar(activity, toolbar, true)
   }
 
   def onTrafficUpdated(txRate: Long, rxRate: Long, txTotal: Long, rxTotal: Long): Unit = ()