diff --git a/.idea/misc.xml b/.idea/misc.xml
index d597663..7c1c993 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -4,6 +4,10 @@
     <option name="filePathToZoomLevelMap">
       <map>
         <entry key="..\:/Users/rjmco/AndroidStudioProjects/NimbleSurveys/app/src/main/res/drawable/ic_chevron_right_24.xml" value="0.346875" />
+        <entry key="..\:/Users/rjmco/AndroidStudioProjects/NimbleSurveys/app/src/main/res/drawable/rounded_edit_text.xml" value="0.4962962962962963" />
+        <entry key="..\:/Users/rjmco/AndroidStudioProjects/NimbleSurveys/app/src/main/res/drawable/tab_dot_selector.xml" value="0.346875" />
+        <entry key="..\:/Users/rjmco/AndroidStudioProjects/NimbleSurveys/app/src/main/res/drawable/tab_indicator_default.xml" value="0.346875" />
+        <entry key="..\:/Users/rjmco/AndroidStudioProjects/NimbleSurveys/app/src/main/res/drawable/tab_indicator_selected.xml" value="0.346875" />
         <entry key="..\:/Users/rjmco/AndroidStudioProjects/NimbleSurveys/app/src/main/res/layout/activity_main.xml" value="0.2341485507246377" />
         <entry key="..\:/Users/rjmco/AndroidStudioProjects/NimbleSurveys/app/src/main/res/layout/content_main.xml" value="0.2341485507246377" />
         <entry key="..\:/Users/rjmco/AndroidStudioProjects/NimbleSurveys/app/src/main/res/layout/content_survey_loading.xml" value="0.48686594202898553" />
@@ -12,6 +16,8 @@
         <entry key="..\:/Users/rjmco/AndroidStudioProjects/NimbleSurveys/app/src/main/res/layout/fragment_splash.xml" value="0.3307291666666667" />
         <entry key="..\:/Users/rjmco/AndroidStudioProjects/NimbleSurveys/app/src/main/res/layout/fragment_survey.xml" value="0.3541666666666667" />
         <entry key="..\:/Users/rjmco/AndroidStudioProjects/NimbleSurveys/app/src/main/res/layout/fragment_survey_details.xml" value="0.33" />
+        <entry key="..\:/Users/rjmco/AndroidStudioProjects/NimbleSurveys/app/src/main/res/layout/fragment_survey_list.xml" value="0.3307291666666667" />
+        <entry key="..\:/Users/rjmco/AndroidStudioProjects/NimbleSurveys/app/src/main/res/layout/fragment_survey_list_item.xml" value="0.3307291666666667" />
         <entry key="..\:/Users/rjmco/AndroidStudioProjects/NimbleSurveys/app/src/main/res/layout/fragment_survey_loading.xml" value="0.3307291666666667" />
         <entry key="..\:/Users/rjmco/AndroidStudioProjects/NimbleSurveys/app/src/main/res/layout/fragment_survey_shimmer.xml" value="0.3541666666666667" />
         <entry key="..\:/Users/rjmco/AndroidStudioProjects/NimbleSurveys/app/src/main/res/layout/item_survey.xml" value="0.3541666666666667" />
diff --git a/app/build.gradle b/app/build.gradle
index f0e3808..6a3b8d5 100644
--- a/app/build.gradle
+++ b/app/build.gradle
@@ -2,6 +2,7 @@ plugins {
     id 'com.android.application'
     id 'kotlin-android'
     id 'kotlin-kapt'
+    id 'kotlin-parcelize'
     id 'dagger.hilt.android.plugin'
     id 'androidx.navigation.safeargs.kotlin'
 }
diff --git a/app/src/main/java/com/example/nimblesurveys/login/LoginFragment.kt b/app/src/main/java/com/example/nimblesurveys/login/LoginFragment.kt
index 0d159ae..53d9e12 100644
--- a/app/src/main/java/com/example/nimblesurveys/login/LoginFragment.kt
+++ b/app/src/main/java/com/example/nimblesurveys/login/LoginFragment.kt
@@ -1,10 +1,12 @@
 package com.example.nimblesurveys.login
 
 import android.animation.AnimatorSet
+import android.content.Context
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import android.view.inputmethod.InputMethodManager
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
 import androidx.navigation.fragment.findNavController
@@ -50,6 +52,7 @@ class LoginFragment : Fragment() {
 
     private fun initUi() {
         binding.bLogin.setOnClickListener {
+            hideKeyboard(it)
             val email = binding.etUsername.text.toString()
             val password = binding.etPassword.text.toString()
             viewModel.login(email, password)
@@ -89,4 +92,9 @@ class LoginFragment : Fragment() {
             }
         }
     }
+
+    private fun hideKeyboard(view: View) {
+        val inputMethodManager = view.context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
+        inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)
+    }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/example/nimblesurveys/survey/SurveyListFragment.kt b/app/src/main/java/com/example/nimblesurveys/survey/SurveyListFragment.kt
index c3bd7bb..03e7b45 100644
--- a/app/src/main/java/com/example/nimblesurveys/survey/SurveyListFragment.kt
+++ b/app/src/main/java/com/example/nimblesurveys/survey/SurveyListFragment.kt
@@ -2,28 +2,25 @@ package com.example.nimblesurveys.survey
 
 import android.os.Bundle
 import android.view.LayoutInflater
-import android.view.MotionEvent
 import android.view.View
 import android.view.ViewGroup
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
 import androidx.navigation.fragment.findNavController
-import androidx.recyclerview.widget.PagerSnapHelper
-import androidx.recyclerview.widget.RecyclerView
-import com.example.nimblesurveys.databinding.FragmentSurveyBinding
-import com.example.nimblesurveys.util.PagerDecorator
-import com.example.nimblesurveys.util.PixelUtil
+import com.example.nimblesurveys.R
+import com.example.nimblesurveys.databinding.FragmentSurveyListBinding
 import com.example.nimblesurveys.util.finishOnBackPressed
 import com.google.android.material.snackbar.Snackbar
+import com.google.android.material.tabs.TabLayoutMediator
 import dagger.hilt.android.AndroidEntryPoint
 
 @AndroidEntryPoint
 class SurveyListFragment : Fragment() {
 
-    private lateinit var binding: FragmentSurveyBinding
+    private lateinit var binding: FragmentSurveyListBinding
     private val viewModel: SurveyListViewModel by viewModels()
 
-    private lateinit var adapter: SurveyListAdapter
+    private lateinit var adapter: SurveyListFragmentAdapter
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
@@ -36,7 +33,7 @@ class SurveyListFragment : Fragment() {
         container: ViewGroup?,
         savedInstanceState: Bundle?
     ): View {
-        binding = FragmentSurveyBinding.inflate(inflater, container, false)
+        binding = FragmentSurveyListBinding.inflate(inflater, container, false)
         return binding.root
     }
 
@@ -48,32 +45,33 @@ class SurveyListFragment : Fragment() {
         viewModel.getSurveys()
     }
 
-    private fun initUi() {
+    private fun initUi() = activity?.let { activity ->
         binding.shimmer.root.startShimmer()
-        adapter = SurveyListAdapter()
-        binding.recycler.setHasFixedSize(true)
-        binding.recycler.adapter = adapter
-        PagerSnapHelper().attachToRecyclerView(binding.recycler)
-        val pixelUtil = PixelUtil(binding.root.context)
-        val pagerDecorator = PagerDecorator(
-            pixelUtil.dpToPx(40f),
-            pixelUtil.dpToPx(32F) + pixelUtil.spToPx(28f * 3f) + pixelUtil.spToPx(18f * 3f)
-        )
-        binding.recycler.addItemDecoration(pagerDecorator)
-        binding.recycler.addOnItemTouchListener(object : RecyclerView.OnItemTouchListener {
-            override fun onTouchEvent(rv: RecyclerView, e: MotionEvent) = Unit
-            override fun onRequestDisallowInterceptTouchEvent(disallowIntercept: Boolean) = Unit
-            override fun onInterceptTouchEvent(rv: RecyclerView,  motionEvent: MotionEvent) =
-                pagerDecorator.isIndicatorPressing(motionEvent, rv)
-        })
 
-        binding.fab.setOnClickListener { viewModel.viewSurvey(pagerDecorator.activeIndicator) }
+        val tabPosY = binding.viewpager.height - (
+                resources.getDimension(R.dimen.activity_margin) +
+                        (resources.getDimension(R.dimen.text_medium) * 2) +
+                        (resources.getDimension(R.dimen.text_large) * 2.5f)
+                )
+
+        binding.tabLayout.y = tabPosY
+        adapter = SurveyListFragmentAdapter(activity)
+        binding.viewpager.adapter = adapter
+        TabLayoutMediator(binding.tabLayout, binding.viewpager) { _, _ -> }.attach()
+
+        binding.fab.setOnClickListener {
+            viewModel.viewSurvey(binding.tabLayout.selectedTabPosition)
+        }
     }
 
     private fun observeData() {
         viewModel.surveys.observe(viewLifecycleOwner) {
             it?.let {
-                adapter.submitList(it.map { survey -> survey.toListItem() })
+                adapter.setItems(it.map { survey -> survey.toListItem() })
+                viewModel.restorePage?.let { page ->
+                    binding.viewpager.setCurrentItem(page, false)
+                    viewModel.restorePage = null
+                }
                 binding.shimmer.root.visibility = View.GONE
                 binding.fab.show()
             }
@@ -86,6 +84,7 @@ class SurveyListFragment : Fragment() {
         }
         viewModel.eventViewSurvey.observe(viewLifecycleOwner) {
             it?.let {
+                viewModel.restorePage = binding.tabLayout.selectedTabPosition
                 val action = SurveyListFragmentDirections.actionSurveyListToDetails(it.id)
                 findNavController().navigate(action)
                 viewModel.onDoneViewSurvey()
diff --git a/app/src/main/java/com/example/nimblesurveys/survey/SurveyListFragmentAdapter.kt b/app/src/main/java/com/example/nimblesurveys/survey/SurveyListFragmentAdapter.kt
new file mode 100644
index 0000000..adfaf0f
--- /dev/null
+++ b/app/src/main/java/com/example/nimblesurveys/survey/SurveyListFragmentAdapter.kt
@@ -0,0 +1,25 @@
+package com.example.nimblesurveys.survey
+
+import android.annotation.SuppressLint
+import androidx.fragment.app.Fragment
+import androidx.fragment.app.FragmentActivity
+import androidx.viewpager2.adapter.FragmentStateAdapter
+
+class SurveyListFragmentAdapter(
+    fragmentActivity: FragmentActivity
+) : FragmentStateAdapter(fragmentActivity) {
+
+    private var items = listOf<SurveyListItem>()
+
+    override fun getItemCount(): Int = items.size
+
+    override fun createFragment(position: Int): Fragment =
+        SurveyListItemFragment.newInstance(items[position])
+
+    @SuppressLint("NotifyDataSetChanged")
+    fun setItems(items: List<SurveyListItem>) {
+        this.items = items
+        notifyDataSetChanged()
+    }
+
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/nimblesurveys/survey/SurveyListItem.kt b/app/src/main/java/com/example/nimblesurveys/survey/SurveyListItem.kt
new file mode 100644
index 0000000..429455e
--- /dev/null
+++ b/app/src/main/java/com/example/nimblesurveys/survey/SurveyListItem.kt
@@ -0,0 +1,14 @@
+package com.example.nimblesurveys.survey
+
+import android.os.Parcelable
+import kotlinx.parcelize.Parcelize
+
+@Parcelize
+data class SurveyListItem(
+    val id: String,
+    val name: String,
+    val description: String,
+    val coverImageUrl: String,
+    val coverImageThumbnailUrl: String,
+    val date: String
+): Parcelable
\ No newline at end of file
diff --git a/app/src/main/java/com/example/nimblesurveys/survey/SurveyListAdapter.kt b/app/src/main/java/com/example/nimblesurveys/survey/SurveyListItemFragment.kt
similarity index 56%
rename from app/src/main/java/com/example/nimblesurveys/survey/SurveyListAdapter.kt
rename to app/src/main/java/com/example/nimblesurveys/survey/SurveyListItemFragment.kt
index 444c96a..caef791 100644
--- a/app/src/main/java/com/example/nimblesurveys/survey/SurveyListAdapter.kt
+++ b/app/src/main/java/com/example/nimblesurveys/survey/SurveyListItemFragment.kt
@@ -1,32 +1,40 @@
 package com.example.nimblesurveys.survey
 
+import android.os.Bundle
 import android.view.LayoutInflater
+import android.view.View
 import android.view.ViewGroup
-import androidx.recyclerview.widget.DiffUtil
-import androidx.recyclerview.widget.ListAdapter
-import androidx.recyclerview.widget.RecyclerView
+import androidx.fragment.app.Fragment
 import com.bumptech.glide.Glide
-import com.example.nimblesurveys.databinding.ItemSurveyBinding
+import com.example.nimblesurveys.databinding.FragmentSurveyListItemBinding
 import java.text.ParseException
 import java.text.SimpleDateFormat
 import java.util.*
 import java.util.concurrent.TimeUnit
 
-class SurveyListAdapter :
-    ListAdapter<SurveyListItem, SurveyListViewHolder>(SurveyListItemDiffCallback()) {
-    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) =
-        SurveyListViewHolder.from(parent)
+class SurveyListItemFragment: Fragment() {
 
-    override fun onBindViewHolder(holder: SurveyListViewHolder, position: Int) =
-        holder.bind(getItem(position))
-}
+    private lateinit var binding: FragmentSurveyListItemBinding
+    private var surveyListItem: SurveyListItem? = null
 
-class SurveyListViewHolder(
-    private val binding: ItemSurveyBinding
-) : RecyclerView.ViewHolder(binding.root) {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        surveyListItem = arguments?.getParcelable(ARG_SURVEY_ITEM)
+    }
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View {
+        binding = FragmentSurveyListItemBinding.inflate(inflater, container, false)
+        return binding.root
+    }
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
 
-    fun bind(survey: SurveyListItem?) {
-        survey ?: return
+        val survey = surveyListItem ?: return
 
         binding.tvDate.text = survey.date.formatDate()
         binding.tvDateSubtitle.text = survey.date.getDifference()
@@ -70,25 +78,16 @@ class SurveyListViewHolder(
     }
 
     companion object {
-        fun from(parent: ViewGroup) = SurveyListViewHolder(
-            ItemSurveyBinding.inflate(LayoutInflater.from(parent.context), parent, false)
-        )
+
+        private const val ARG_SURVEY_ITEM = "ARG_SURVEY_ITEM"
+
+        @JvmStatic
+        fun newInstance(param: SurveyListItem) =
+            SurveyListItemFragment().apply {
+                arguments = Bundle().apply {
+                    putParcelable(ARG_SURVEY_ITEM, param)
+                }
+            }
+
     }
-}
-
-class SurveyListItemDiffCallback : DiffUtil.ItemCallback<SurveyListItem>() {
-    override fun areItemsTheSame(oldItem: SurveyListItem, newItem: SurveyListItem) =
-        oldItem.id == newItem.id
-
-    override fun areContentsTheSame(oldItem: SurveyListItem, newItem: SurveyListItem) =
-        oldItem == newItem
-}
-
-data class SurveyListItem(
-    val id: String,
-    val name: String,
-    val description: String,
-    val coverImageUrl: String,
-    val coverImageThumbnailUrl: String,
-    val date: String
-)
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/nimblesurveys/survey/SurveyListViewModel.kt b/app/src/main/java/com/example/nimblesurveys/survey/SurveyListViewModel.kt
index 88818cd..57ea029 100644
--- a/app/src/main/java/com/example/nimblesurveys/survey/SurveyListViewModel.kt
+++ b/app/src/main/java/com/example/nimblesurveys/survey/SurveyListViewModel.kt
@@ -28,6 +28,8 @@ class SurveyListViewModel @Inject constructor(
     private val _eventViewSurvey = MutableLiveData<Survey>()
     val eventViewSurvey: LiveData<Survey> get() = _eventViewSurvey
 
+    var restorePage: Int? = null
+
     fun getSurveys() = viewModelScope.launch {
         withContext(dispatchers.io()) {
             val surveyResult = getSurveysUseCase.execute()
diff --git a/app/src/main/java/com/example/nimblesurveys/util/PagerDecorator.kt b/app/src/main/java/com/example/nimblesurveys/util/PagerDecorator.kt
deleted file mode 100644
index 56051e2..0000000
--- a/app/src/main/java/com/example/nimblesurveys/util/PagerDecorator.kt
+++ /dev/null
@@ -1,114 +0,0 @@
-package com.example.nimblesurveys.util
-
-import android.graphics.Canvas
-import android.graphics.Color
-import android.graphics.Paint
-import android.view.MotionEvent
-import androidx.recyclerview.widget.LinearLayoutManager
-import androidx.recyclerview.widget.RecyclerView
-import kotlin.math.pow
-import kotlin.math.sqrt
-
-class PagerDecorator(
-    private val indicatorPosX: Float,
-    private val indicatorPosY: Float
-) : RecyclerView.ItemDecoration() {
-
-    private var paintStroke: Paint = Paint().apply {
-        style = Paint.Style.STROKE
-        strokeWidth = 4f
-        color = Color.WHITE
-    }
-
-    private val paintFill = Paint().apply {
-        style = Paint.Style.FILL
-        color = Color.WHITE
-    }
-
-    private val indicators = mutableListOf<Pair<Float, Float>>()
-
-    private val indicatorRadius = 15f
-    private val indicatorPadding = 180f
-
-    var activeIndicator = 0
-        private set
-    private var isInitialized = false
-
-    private var currentItemCount = 0
-
-    override fun onDrawOver(
-        canvas: Canvas,
-        parent: RecyclerView,
-        state: RecyclerView.State
-    ) {
-        parent.adapter?.let { adapter ->
-            val itemCount = adapter.itemCount
-            if (itemCount == 0) return@let
-            if (itemCount != currentItemCount) {
-                setupIndicators(parent)
-                currentItemCount = itemCount
-            }
-
-            with(canvas) {
-                for (i in 0 until itemCount) {
-                    drawCircle(indicators[i].first, indicators[i].second)
-                }
-            }
-
-            val visibleItem = (parent.layoutManager as LinearLayoutManager)
-                .findFirstCompletelyVisibleItemPosition()
-
-            if (visibleItem >= 0) {
-                activeIndicator = visibleItem
-            }
-
-            indicators[activeIndicator].let { canvas.drawCircle(it.first, it.second, true) }
-        }
-    }
-
-    private fun Canvas.drawCircle(x: Float, y: Float, isFill: Boolean = false) {
-        drawCircle(x, y, indicatorRadius, if (isFill) paintFill else paintStroke)
-    }
-
-    private fun setupIndicators(recyclerView: RecyclerView) {
-        val itemCount = recyclerView.adapter?.itemCount ?: 0
-        if (itemCount == 0) return
-
-        isInitialized = true
-
-//        val indicatorTotalWidth = indicatorRadius * itemCount + indicatorPadding
-//        val indicatorPosX = (recyclerView.width - indicatorTotalWidth) / 2f
-//        val indicatorPosY = recyclerView.height - (indicatorRadius * 6 / 2f)
-        val recyclerHeight = recyclerView.height
-
-        for (i in 0 until itemCount) {
-            indicators.add(indicatorPosX + (indicatorRadius * i * 4) to recyclerHeight - indicatorPosY)
-        }
-    }
-
-    fun isIndicatorPressing(motionEvent: MotionEvent, recyclerView: RecyclerView): Boolean {
-        when (motionEvent.action) {
-            MotionEvent.ACTION_DOWN -> {
-                checkIfIndicatorPressing(motionEvent.x, motionEvent.y)?.let {
-                    recyclerView.scrollToPosition(it)
-                }
-            }
-        }
-        return false
-    }
-
-    private fun checkIfIndicatorPressing(touchX: Float, touchY: Float): Int? {
-        indicators.indices.forEach {
-            // sqrt((x0-x1)*(x0-x1)+(y0-y1)*(y0-y1))<=r
-            if (sqrt(
-                    (indicators[it].first - touchX).toDouble().pow(2.0)
-                            + (indicators[it].second - touchY).toDouble().pow(2.0)
-                )
-                <= indicatorRadius * 2
-            ) {
-                return it
-            }
-        }
-        return null
-    }
-}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/nimblesurveys/util/PixelUtil.kt b/app/src/main/java/com/example/nimblesurveys/util/PixelUtil.kt
deleted file mode 100644
index 6624584..0000000
--- a/app/src/main/java/com/example/nimblesurveys/util/PixelUtil.kt
+++ /dev/null
@@ -1,18 +0,0 @@
-package com.example.nimblesurveys.util
-
-import android.content.Context
-import android.util.TypedValue
-
-class PixelUtil(private val context: Context) {
-    fun dpToPx(dp: Float) = TypedValue.applyDimension(
-        TypedValue.COMPLEX_UNIT_DIP,
-        dp,
-        context.resources.displayMetrics
-    )
-
-    fun spToPx(sp: Float) = TypedValue.applyDimension(
-        TypedValue.COMPLEX_UNIT_SP,
-        sp,
-        context.resources.displayMetrics
-    )
-}
\ No newline at end of file
diff --git a/app/src/main/res/drawable/tab_dot_selector.xml b/app/src/main/res/drawable/tab_dot_selector.xml
new file mode 100644
index 0000000..4aee392
--- /dev/null
+++ b/app/src/main/res/drawable/tab_dot_selector.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/tab_indicator_selected" android:state_selected="true" />
+    <item android:drawable="@drawable/tab_indicator_default" />
+</selector>
diff --git a/app/src/main/res/drawable/tab_indicator_default.xml b/app/src/main/res/drawable/tab_indicator_default.xml
new file mode 100644
index 0000000..b13246b
--- /dev/null
+++ b/app/src/main/res/drawable/tab_indicator_default.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:innerRadius="0dp"
+    android:shape="ring"
+    android:thickness="4dp"
+    android:useLevel="false">
+    <solid android:color="@color/white_tint" />
+</shape>
diff --git a/app/src/main/res/drawable/tab_indicator_selected.xml b/app/src/main/res/drawable/tab_indicator_selected.xml
new file mode 100644
index 0000000..bdca039
--- /dev/null
+++ b/app/src/main/res/drawable/tab_indicator_selected.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:innerRadius="0dp"
+    android:shape="ring"
+    android:thickness="4dp"
+    android:useLevel="false">
+    <solid android:color="@color/white" />
+</shape>
diff --git a/app/src/main/res/layout/fragment_login.xml b/app/src/main/res/layout/fragment_login.xml
index 0d1af7f..68da3b2 100644
--- a/app/src/main/res/layout/fragment_login.xml
+++ b/app/src/main/res/layout/fragment_login.xml
@@ -51,11 +51,10 @@
 
         <com.google.android.material.textfield.TextInputLayout
             android:id="@+id/tilUsername"
-            style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
+            style="@style/TextField"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_margin="16dp"
-            android:alpha="0.5"
             app:hintEnabled="false"
             app:layout_constraintBottom_toTopOf="@id/tilPassword">
 
@@ -63,16 +62,20 @@
                 android:id="@+id/etUsername"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:hint="@string/email" />
+                android:hint="@string/email"
+                android:imeOptions="actionNext"
+                android:maxLines="1"
+                android:inputType="text"
+                android:textColor="@color/white"
+                android:textColorHint="@color/white_tint" />
         </com.google.android.material.textfield.TextInputLayout>
 
         <com.google.android.material.textfield.TextInputLayout
             android:id="@+id/tilPassword"
-            style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
+            style="@style/TextField"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_margin="16dp"
-            android:alpha="0.5"
             app:hintEnabled="false"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintTop_toTopOf="parent">
@@ -82,8 +85,11 @@
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:hint="@string/password"
+                android:imeOptions="actionDone"
                 android:inputType="text|textPassword"
-                tools:text="email@sample.com" />
+                android:maxLines="1"
+                android:textColor="@color/white"
+                android:textColorHint="@color/white_tint" />
         </com.google.android.material.textfield.TextInputLayout>
 
         <Button
diff --git a/app/src/main/res/layout/fragment_survey.xml b/app/src/main/res/layout/fragment_survey_list.xml
similarity index 60%
rename from app/src/main/res/layout/fragment_survey.xml
rename to app/src/main/res/layout/fragment_survey_list.xml
index 5bd9f3c..f97d31e 100644
--- a/app/src/main/res/layout/fragment_survey.xml
+++ b/app/src/main/res/layout/fragment_survey_list.xml
@@ -6,14 +6,36 @@
     android:layout_height="match_parent"
     android:background="@color/black">
 
-    <androidx.recyclerview.widget.RecyclerView
-        android:id="@+id/recycler"
+    <androidx.viewpager2.widget.ViewPager2
+        android:id="@+id/viewpager"
         android:layout_width="match_parent"
-        android:layout_height="match_parent"
+        android:layout_height="match_parent" />
+
+    <com.google.android.material.tabs.TabLayout
+        android:id="@+id/tabLayout"
+        style="@style/TabLayoutDots"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/activity_margin"
+        android:background="@color/transparent"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="@id/guideVertical"
+        app:layout_constraintStart_toStartOf="parent"
+        app:tabMode="scrollable" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guide"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
         android:orientation="horizontal"
-        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
-        tools:itemCount="1"
-        tools:listitem="@layout/item_survey" />
+        app:layout_constraintGuide_begin="585dp" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideVertical"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.5" />
 
     <ImageView
         android:id="@+id/ivAvatar"
diff --git a/app/src/main/res/layout/fragment_survey_list_item.xml b/app/src/main/res/layout/fragment_survey_list_item.xml
new file mode 100644
index 0000000..cc627ec
--- /dev/null
+++ b/app/src/main/res/layout/fragment_survey_list_item.xml
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    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">
+
+    <ImageView
+        android:id="@+id/ivBackground"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:contentDescription="@string/survey_image"
+        android:scaleType="centerCrop"
+        android:tintMode="src_over"
+        app:tint="@color/image_background_tint"
+        tools:src="@tools:sample/backgrounds/scenic"
+        tools:tint="@color/image_background_tint" />
+
+    <TextView
+        android:id="@+id/tvDate"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/activity_margin"
+        android:layout_marginTop="@dimen/activity_margin"
+        android:textAllCaps="true"
+        android:textColor="@color/white"
+        android:textSize="@dimen/text_small"
+        android:textStyle="bold"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:text="Monday, June 15" />
+
+    <TextView
+        android:id="@+id/tvDateSubtitle"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/activity_margin"
+        android:textColor="@color/white"
+        android:textSize="@dimen/text_large"
+        android:textStyle="bold"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/tvDate"
+        tools:text="Today" />
+
+    <TextView
+        android:id="@+id/tvSurveyName"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/activity_margin"
+        android:layout_marginEnd="@dimen/activity_with_fab_margin"
+        android:ellipsize="end"
+        android:maxLines="2"
+        android:textColor="@color/white"
+        android:textSize="@dimen/text_large"
+        android:textStyle="bold"
+        app:layout_constraintBottom_toTopOf="@+id/tvSurveyDescription"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        tools:text="Working from home Check-In" />
+
+    <TextView
+        android:id="@+id/tvSurveyDescription"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/activity_margin"
+        android:layout_marginEnd="@dimen/activity_with_fab_margin"
+        android:layout_marginBottom="@dimen/activity_margin"
+        android:alpha="0.85"
+        android:ellipsize="end"
+        android:maxLines="2"
+        android:textColor="@color/white"
+        android:textSize="@dimen/text_medium"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        tools:text="We would like to know how you feel about our work from home policies" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/app/src/main/res/navigation/nav_graph.xml b/app/src/main/res/navigation/nav_graph.xml
index 0c94e3f..10261a7 100644
--- a/app/src/main/res/navigation/nav_graph.xml
+++ b/app/src/main/res/navigation/nav_graph.xml
@@ -18,7 +18,7 @@
         android:id="@+id/surveyListFragment"
         android:name="com.example.nimblesurveys.survey.SurveyListFragment"
         android:label="SurveyListFragment"
-        tools:layout="@layout/fragment_survey" >
+        tools:layout="@layout/fragment_survey_list" >
         <action
             android:id="@+id/action_surveyList_to_details"
             app:destination="@id/surveyDetailsFragment"
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 3916b95..e61c1c1 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -9,4 +9,5 @@
     <color name="white">#FFFFFFFF</color>
     <color name="transparent">#00000000</color>
     <color name="image_background_tint">#55000000</color>
+    <color name="white_tint">#55FFFFFF</color>
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index 840e11e..8c321f9 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -13,6 +13,31 @@
         <item name="android:statusBarColor" tools:targetApi="l">@color/black</item>
         <!-- Customize your theme here. -->
         <item name="android:windowBackground">@color/black</item>
+
+        <item name="shapeAppearanceSmallComponent">
+            @style/ShapeAppearance.NimbleSurveys.SmallComponent
+        </item>
+        <item name="shapeAppearanceMediumComponent">
+            @style/ShapeAppearance.NimbleSurveys.MediumComponent
+        </item>
+        <item name="shapeAppearanceLargeComponent">
+            @style/ShapeAppearance.NimbleSurveys.LargeComponent
+        </item>
+    </style>
+
+    <style name="ShapeAppearance.NimbleSurveys.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
+        <item name="cornerFamily">rounded</item>
+        <item name="cornerSize">12dp</item>
+    </style>
+
+    <style name="ShapeAppearance.NimbleSurveys.MediumComponent" parent="ShapeAppearance.MaterialComponents.MediumComponent">
+        <item name="cornerFamily">rounded</item>
+        <item name="cornerSize">12dp</item>
+    </style>
+
+    <style name="ShapeAppearance.NimbleSurveys.LargeComponent" parent="ShapeAppearance.MaterialComponents.LargeComponent">
+        <item name="cornerFamily">rounded</item>
+        <item name="cornerSize">12dp</item>
     </style>
 
     <style name="Theme.NimbleSurveys.NoActionBar">
@@ -24,7 +49,14 @@
 
     <style name="Theme.NimbleSurveys.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
 
-    <style name="Button" parent="Widget.AppCompat.Button">
+    <style name="TextField" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
+        <item name="shapeAppearance">@style/ShapeAppearance.NimbleSurveys.MediumComponent</item>
+        <item name="boxBackgroundColor">#88DDDDDD</item>
+        <item name="boxStrokeWidth">0dp</item>
+        <item name="boxStrokeWidthFocused">0dp</item>
+    </style>
+
+    <style name="Button" parent="Widget.MaterialComponents.Button">
         <item name="backgroundTint">@color/white</item>
         <item name="android:textColor">@color/black</item>
         <item name="android:textSize">16sp</item>
@@ -34,4 +66,13 @@
     <style name="FloatingActionButton" parent="Widget.Design.FloatingActionButton">
         <item name="backgroundTint">@color/white</item>
     </style>
+
+    <!-- Tabs -->
+    <style name="TabLayoutDots" parent="Widget.MaterialComponents.TabLayout">
+        <item name="tabBackground">@drawable/tab_dot_selector</item>
+        <item name="tabGravity">start</item>
+        <item name="tabIndicatorHeight">0dp</item>
+        <item name="tabMaxWidth">16dp</item>
+    </style>
+
 </resources>
\ No newline at end of file