diff --git a/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayDialogFragment.kt b/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayDialogFragment.kt
index 24909402a2..63b79955a2 100644
--- a/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayDialogFragment.kt
+++ b/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayDialogFragment.kt
@@ -10,10 +10,14 @@ import android.view.View
 import android.view.ViewGroup
 import androidx.appcompat.app.AppCompatDialogFragment
 import androidx.core.view.updatePadding
+import kotlinx.android.synthetic.main.fragment_tab_tray_dialog.*
 import kotlinx.android.synthetic.main.fragment_tab_tray_dialog.view.*
+import mozilla.components.concept.tabstray.Tab
 import org.mozilla.fenix.R
 
-class TabTrayDialogFragment : AppCompatDialogFragment() {
+class TabTrayDialogFragment : AppCompatDialogFragment(), TabTrayInteractor {
+    private lateinit var tabTrayView: TabTrayView
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setStyle(STYLE_NO_TITLE, R.style.TabTrayDialogStyle)
@@ -27,11 +31,30 @@ class TabTrayDialogFragment : AppCompatDialogFragment() {
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
-        view.tabLayout.setOnApplyWindowInsetsListener { v, insets ->
-            v.updatePadding(
-                bottom = v.paddingBottom + insets.systemWindowInsetBottom
-            )
-            insets
-        }
+        tabTrayView = TabTrayView(view.tabLayout, this)
+
+        tabLayout.setOnClickListener { dismissAllowingStateLoss() }
+
+//        view.tabLayout.setOnApplyWindowInsetsListener { v, insets ->
+//            v.updatePadding(
+//                left = insets.systemWindowInsetLeft,
+//                right = insets.systemWindowInsetRight,
+//                top = insets.systemWindowInsetTop,
+//                bottom = insets.systemWindowInsetBottom
+//            )
+//            insets
+//        }
+    }
+
+    override fun onTabSelected(tab: Tab) {
+        TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
+    }
+
+    override fun onNewTabTapped(private: Boolean) {
+        TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
+    }
+
+    override fun onTabTrayDismissed() {
+        dismissAllowingStateLoss()
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayView.kt b/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayView.kt
new file mode 100644
index 0000000000..1f355e1312
--- /dev/null
+++ b/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayView.kt
@@ -0,0 +1,114 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+package org.mozilla.fenix.tabtray
+
+import android.util.Log
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import com.google.android.material.bottomsheet.BottomSheetBehavior
+import com.google.android.material.tabs.TabLayout
+import kotlinx.android.extensions.LayoutContainer
+import kotlinx.android.synthetic.main.component_tabstray.view.*
+import kotlinx.android.synthetic.main.component_tabstray_fab.view.*
+import kotlinx.android.synthetic.main.fragment_tab_tray.*
+import mozilla.components.browser.state.state.TabSessionState
+import mozilla.components.browser.tabstray.BrowserTabsTray
+import mozilla.components.concept.tabstray.Tab
+import mozilla.components.concept.tabstray.TabsTray
+import mozilla.components.feature.tabs.tabstray.TabsFeature
+import org.mozilla.fenix.R
+import org.mozilla.fenix.ext.components
+
+
+interface TabTrayInteractor {
+    fun onTabSelected(tab: Tab)
+    fun onNewTabTapped(private: Boolean)
+    fun onTabTrayDismissed()
+}
+/**
+ * View that contains and configures the BrowserAwesomeBar
+ */
+class TabTrayView(
+    private val container: ViewGroup,
+    private val interactor: TabTrayInteractor
+) : LayoutContainer, TabsTray.Observer, TabLayout.OnTabSelectedListener {
+    val fabView = LayoutInflater.from(container.context)
+        .inflate(R.layout.component_tabstray_fab, container, true)
+
+    val view = LayoutInflater.from(container.context)
+        .inflate(R.layout.component_tabstray, container, true)
+
+    private val behavior = BottomSheetBehavior.from(view.tab_wrapper)
+    private var tabsFeature: TabsFeature
+
+    override val containerView: View?
+        get() = container
+
+    init {
+        fabView.new_tab_button.compatElevation = 80.0f
+
+        behavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
+            override fun onSlide(bottomSheet: View, slideOffset: Float) {
+                Log.e("slideOffset", "$slideOffset")
+                if (slideOffset > -0.4) {
+                    fabView.new_tab_button.show()
+                } else {
+                    fabView.new_tab_button.hide()
+                }
+            }
+
+            override fun onStateChanged(bottomSheet: View, newState: Int) {
+                if (newState == BottomSheetBehavior.STATE_HIDDEN) {
+                    interactor.onTabTrayDismissed()
+                }
+            }
+        })
+
+        view.tab_layout.addOnTabSelectedListener(this)
+
+        tabsFeature = TabsFeature(
+            view.tabsTray,
+            view.context.components.core.store,
+            view.context.components.useCases.tabsUseCases,
+            { true },
+            { })
+
+        (view.tabsTray as? BrowserTabsTray)?.also { tray ->
+            TabsTouchHelper(tray.tabsAdapter).attachToRecyclerView(tray)
+        }
+
+        fabView.new_tab_button.setOnClickListener {
+            interactor.onNewTabTapped(view.tab_layout.selectedTabPosition == 1)
+        }
+
+        tabsTray.register(this)
+        tabsFeature.start()
+    }
+
+    override fun onTabClosed(tab: Tab) {}
+
+    override fun onTabSelected(tab: Tab) {
+        interactor.onTabSelected(tab)
+    }
+
+    override fun onTabReselected(tab: TabLayout.Tab?) {
+
+    }
+
+    override fun onTabUnselected(tab: TabLayout.Tab?) {
+
+    }
+
+    override fun onTabSelected(tab: TabLayout.Tab?) {
+        // Todo: We need a better way to determine which tab was selected.
+        val filter: (TabSessionState) -> Boolean = when (tab?.position) {
+            1 -> { state -> state.content.private }
+            else -> { state -> !state.content.private }
+        }
+
+        tabsFeature.filterTabs(filter)
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/res/layout/component_tabstray.xml b/app/src/main/res/layout/component_tabstray.xml
new file mode 100644
index 0000000000..bf38f05dfa
--- /dev/null
+++ b/app/src/main/res/layout/component_tabstray.xml
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<androidx.constraintlayout.widget.ConstraintLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:mozac="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/tab_wrapper"
+    android:layout_height="match_parent"
+    android:layout_width="match_parent"
+    android:background="?foundation"
+    style="@style/BottomSheetModal"
+    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
+    <View
+        android:id="@+id/handle"
+        android:layout_width="0dp"
+        android:layout_height="3dp"
+        android:layout_marginTop="8dp"
+        android:background="?secondaryText"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintWidth_percent="0.1"
+        app:layout_constraintTop_toTopOf="parent" />
+    <com.google.android.material.tabs.TabLayout
+        android:id="@+id/tab_layout"
+        android:layout_width="0dp"
+        android:layout_height="80dp"
+        app:tabIndicatorColor="?accent"
+        app:tabRippleColor="@android:color/transparent"
+        app:layout_constraintWidth_percent="0.5"
+        app:layout_constraintTop_toBottomOf="@+id/handle"
+        app:layout_constraintStart_toStartOf="parent">
+
+        <com.google.android.material.tabs.TabItem
+            android:id="@+id/default_tab_item"
+            android:layout_height="match_parent"
+            android:layout_width="0dp"
+            android:icon="@drawable/ic_tabs"
+            android:text="Default" />
+
+        <com.google.android.material.tabs.TabItem
+            android:id="@+id/private_tab_item"
+            android:layout_height="match_parent"
+            android:layout_width="0dp"
+            android:icon="@drawable/private_browsing_button"
+            android:text="Private" />
+    </com.google.android.material.tabs.TabLayout>
+    <ImageButton
+        android:id="@+id/tab_tray_overflow"
+        android:layout_width="48dp"
+        android:layout_height="48dp"
+        android:background="?android:attr/selectableItemBackgroundBorderless"
+        android:contentDescription="@string/open_tabs_menu"
+        app:srcCompat="@drawable/ic_menu"
+        android:layout_marginEnd="8dp"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toTopOf="@id/tab_layout"
+        app:layout_constraintBottom_toBottomOf="@id/tab_layout"/>
+    <mozilla.components.concept.tabstray.TabsTray
+        android:id="@+id/tabsTray"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/tab_layout"
+        mozac:tabsTrayItemBackgroundColor="?tabTrayItemBackground"
+        mozac:tabsTrayItemTextColor="?tabTrayItemText"
+        mozac:tabsTraySelectedItemBackgroundColor="?tabTrayItemSelectedBackground"
+        mozac:tabsTraySelectedItemTextColor="?tabTrayItemText"
+        mozac:tabsTrayItemUrlTextColor="?tabTrayItemUrl"
+        mozac:tabsTraySelectedItemUrlTextColor="?tabTrayItemUrl"
+        android:clipToPadding="false"
+        android:paddingBottom="90dp"/>
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/component_tabstray_fab.xml b/app/src/main/res/layout/component_tabstray_fab.xml
new file mode 100644
index 0000000000..6e89fcfc56
--- /dev/null
+++ b/app/src/main/res/layout/component_tabstray_fab.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<com.google.android.material.floatingactionbutton.FloatingActionButton
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/new_tab_button"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_gravity="bottom|end"
+    android:layout_margin="16dp"
+    android:backgroundTint="@color/photonBlue50"
+    android:contentDescription="TODO: Changeme"
+    app:srcCompat="@drawable/ic_new"
+    app:tint="@color/photonWhite"
+    android:fitsSystemWindows="true" />
diff --git a/app/src/main/res/layout/fragment_tab_tray_dialog.xml b/app/src/main/res/layout/fragment_tab_tray_dialog.xml
index 3d74fc117c..55db6639e5 100644
--- a/app/src/main/res/layout/fragment_tab_tray_dialog.xml
+++ b/app/src/main/res/layout/fragment_tab_tray_dialog.xml
@@ -2,20 +2,9 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
 <androidx.coordinatorlayout.widget.CoordinatorLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/tabLayout"
     android:layout_height="match_parent"
-    android:layout_width="match_parent">
-    <com.google.android.material.floatingactionbutton.FloatingActionButton
-        android:id="@+id/new_tab_button"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_gravity="bottom|end"
-        android:layout_margin="16dp"
-        android:backgroundTint="@color/photonBlue50"
-        android:contentDescription="TODO: Changeme"
-        app:srcCompat="@drawable/ic_new"
-        app:tint="@color/photonWhite" />
-</androidx.coordinatorlayout.widget.CoordinatorLayout>
\ No newline at end of file
+    android:layout_width="match_parent" />
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index 61ed7cec37..dbb5a9f6d6 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -553,6 +553,6 @@
     <style name="BottomSheetModal" parent="Widget.Design.BottomSheet.Modal">
         <item name="shapeAppearance">@style/BottomSheetShapeAppearance</item>
         <item name="behavior_halfExpandedRatio">0.4</item>
-        <item name="behavior_fitToContents">false</item>
+        <item name="behavior_fitToContents">true</item>
     </style>
 </resources>