diff --git a/ground/src/main/java/com/google/android/ground/ui/offlineareas/OfflineAreaListAdapter.kt b/ground/src/main/java/com/google/android/ground/ui/offlineareas/OfflineAreaListAdapter.kt
index 66f5849185..7365e79a26 100644
--- a/ground/src/main/java/com/google/android/ground/ui/offlineareas/OfflineAreaListAdapter.kt
+++ b/ground/src/main/java/com/google/android/ground/ui/offlineareas/OfflineAreaListAdapter.kt
@@ -15,51 +15,33 @@
  */
 package com.google.android.ground.ui.offlineareas
 
+import android.annotation.SuppressLint
 import android.view.LayoutInflater
-import android.view.View
 import android.view.ViewGroup
 import androidx.recyclerview.widget.RecyclerView
 import com.google.android.ground.databinding.OfflineAreasListItemBinding
-import com.google.android.ground.model.imagery.OfflineArea
-import com.google.android.ground.ui.common.Navigator
 
-internal class OfflineAreaListAdapter(private val navigator: Navigator) :
-  RecyclerView.Adapter<OfflineAreaListAdapter.ViewHolder>() {
+internal class OfflineAreaListAdapter : RecyclerView.Adapter<OfflineAreaListAdapter.ViewHolder>() {
 
-  private var offlineAreas: List<OfflineArea> = listOf()
+  private var offlineAreas: List<OfflineAreaListItemViewModel> = listOf()
 
-  class ViewHolder
-  internal constructor(
-    var binding: OfflineAreasListItemBinding,
-    var areas: List<OfflineArea>,
-    private val navigator: Navigator
-  ) : RecyclerView.ViewHolder(binding.root), View.OnClickListener {
-    init {
-      binding.offlineAreaName.setOnClickListener(this)
-    }
-
-    override fun onClick(v: View) {
-      if (areas.isNotEmpty()) {
-        val id = areas[adapterPosition].id
-        navigator.navigate(OfflineAreasFragmentDirections.viewOfflineArea(id))
-      }
-    }
-  }
+  class ViewHolder internal constructor(var binding: OfflineAreasListItemBinding) :
+    RecyclerView.ViewHolder(binding.root)
 
   override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
     val offlineAreasListItemBinding =
       OfflineAreasListItemBinding.inflate(LayoutInflater.from(parent.context), parent, false)
-    return ViewHolder(offlineAreasListItemBinding, offlineAreas, navigator)
+    return ViewHolder(offlineAreasListItemBinding)
   }
 
   override fun onBindViewHolder(viewHolder: ViewHolder, position: Int) {
-    viewHolder.areas = offlineAreas
-    viewHolder.binding.offlineAreaName.text = offlineAreas[position].name
+    viewHolder.binding.viewModel = offlineAreas[position]
   }
 
   override fun getItemCount(): Int = offlineAreas.size
 
-  fun update(offlineAreas: List<OfflineArea>) {
+  @SuppressLint("NotifyDataSetChanged")
+  fun update(offlineAreas: List<OfflineAreaListItemViewModel>) {
     this.offlineAreas = offlineAreas
     notifyDataSetChanged()
   }
diff --git a/ground/src/main/java/com/google/android/ground/ui/offlineareas/OfflineAreaListItemViewModel.kt b/ground/src/main/java/com/google/android/ground/ui/offlineareas/OfflineAreaListItemViewModel.kt
new file mode 100644
index 0000000000..f6f94616e7
--- /dev/null
+++ b/ground/src/main/java/com/google/android/ground/ui/offlineareas/OfflineAreaListItemViewModel.kt
@@ -0,0 +1,32 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.google.android.ground.ui.offlineareas
+
+import com.google.android.ground.model.imagery.OfflineArea
+import com.google.android.ground.ui.common.Navigator
+
+class OfflineAreaListItemViewModel(
+  private val navigator: Navigator,
+  val area: OfflineArea,
+  val sizeOnDisk: String
+) {
+  val areaName = area.name
+
+  fun onClick() {
+    navigator.navigate(OfflineAreasFragmentDirections.viewOfflineArea(area.id))
+  }
+}
diff --git a/ground/src/main/java/com/google/android/ground/ui/offlineareas/OfflineAreasFragment.kt b/ground/src/main/java/com/google/android/ground/ui/offlineareas/OfflineAreasFragment.kt
index 8064b19bca..bdad68e720 100644
--- a/ground/src/main/java/com/google/android/ground/ui/offlineareas/OfflineAreasFragment.kt
+++ b/ground/src/main/java/com/google/android/ground/ui/offlineareas/OfflineAreasFragment.kt
@@ -20,7 +20,6 @@ import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import androidx.recyclerview.widget.LinearLayoutManager
-import com.google.android.ground.MainActivity
 import com.google.android.ground.databinding.OfflineAreasFragBinding
 import com.google.android.ground.ui.common.AbstractFragment
 import com.google.android.ground.ui.common.Navigator
@@ -43,7 +42,7 @@ class OfflineAreasFragment : Hilt_OfflineAreasFragment() {
   override fun onCreate(savedInstanceState: Bundle?) {
     super.onCreate(savedInstanceState)
     viewModel = getViewModel(OfflineAreasViewModel::class.java)
-    offlineAreaListAdapter = OfflineAreaListAdapter(navigator)
+    offlineAreaListAdapter = OfflineAreaListAdapter()
     viewModel.offlineAreas.observe(this) { offlineAreaListAdapter.update(it) }
   }
 
@@ -57,7 +56,8 @@ class OfflineAreasFragment : Hilt_OfflineAreasFragment() {
     binding.viewModel = viewModel
     binding.lifecycleOwner = this
 
-    (requireActivity() as MainActivity).setActionBar(binding.offlineAreasToolbar, true)
+    val toolbar = binding.offlineAreasToolbar
+    toolbar.setNavigationOnClickListener { navigator.navigateUp() }
 
     val recyclerView = binding.offlineAreasList
     recyclerView.setHasFixedSize(true)
diff --git a/ground/src/main/java/com/google/android/ground/ui/offlineareas/OfflineAreasViewModel.kt b/ground/src/main/java/com/google/android/ground/ui/offlineareas/OfflineAreasViewModel.kt
index 9ad951ec0f..444c1855b8 100644
--- a/ground/src/main/java/com/google/android/ground/ui/offlineareas/OfflineAreasViewModel.kt
+++ b/ground/src/main/java/com/google/android/ground/ui/offlineareas/OfflineAreasViewModel.kt
@@ -15,14 +15,16 @@
  */
 package com.google.android.ground.ui.offlineareas
 
-import android.view.View
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.toLiveData
 import com.google.android.ground.model.imagery.OfflineArea
 import com.google.android.ground.repository.OfflineAreaRepository
 import com.google.android.ground.ui.common.AbstractViewModel
 import com.google.android.ground.ui.common.Navigator
+import com.google.android.ground.util.toMb
+import com.google.android.ground.util.toMbString
 import javax.inject.Inject
+import kotlinx.coroutines.rx2.rxSingle
 import timber.log.Timber
 
 /**
@@ -32,7 +34,7 @@ class OfflineAreasViewModel
 @Inject
 internal constructor(
   private val navigator: Navigator,
-  offlineAreaRepository: OfflineAreaRepository
+  private val offlineAreaRepository: OfflineAreaRepository
 ) : AbstractViewModel() {
 
   /**
@@ -40,26 +42,37 @@ internal constructor(
    * unexpected error accessing the local store is encountered, emits an empty list, circumventing
    * the error.
    */
-  val offlineAreas: LiveData<List<OfflineArea>>
+  val offlineAreas: LiveData<List<OfflineAreaListItemViewModel>>
 
-  /**
-   * Returns the visibility of the "no area" message based on the current number of available
-   * offline areas.
-   */
-  val noAreasMessageVisibility: LiveData<Int>
+  val showList: LiveData<Boolean>
+  val showNoAreasMessage: LiveData<Boolean>
+  val showProgressSpinner: LiveData<Boolean>
 
   init {
     val offlineAreas =
       offlineAreaRepository
         .offlineAreasOnceAndStream()
+        .switchMapSingle { rxSingle { toViewModel(it) } }
         .doOnError { Timber.e(it, "Unexpected error loading offline areas from the local db") }
         .onErrorReturnItem(listOf())
 
     this.offlineAreas = offlineAreas.toLiveData()
-    noAreasMessageVisibility =
-      offlineAreas.map { if (it.isEmpty()) View.VISIBLE else View.GONE }.toLiveData()
+    showProgressSpinner = offlineAreas.map { false }.startWith(true).toLiveData()
+    showNoAreasMessage = offlineAreas.map { it.isEmpty() }.startWith(false).toLiveData()
+    showList = offlineAreas.map { it.isNotEmpty() }.startWith(false).toLiveData()
   }
 
+  private suspend fun toViewModel(
+    offlineAreas: List<OfflineArea>
+  ): List<OfflineAreaListItemViewModel> = offlineAreas.map { toViewModel(it) }
+
+  private suspend fun toViewModel(offlineArea: OfflineArea) =
+    OfflineAreaListItemViewModel(
+      navigator,
+      offlineArea,
+      offlineAreaRepository.sizeOnDevice(offlineArea).toMb().toMbString()
+    )
+
   /** Navigate to the area selector for offline map imagery. */
   fun showOfflineAreaSelector() {
     navigator.navigate(OfflineAreasFragmentDirections.showOfflineAreaSelector())
diff --git a/ground/src/main/res/drawable-anydpi/ic_offline_pin.xml b/ground/src/main/res/drawable-anydpi/ic_arrow_back.xml
similarity index 82%
rename from ground/src/main/res/drawable-anydpi/ic_offline_pin.xml
rename to ground/src/main/res/drawable-anydpi/ic_arrow_back.xml
index c6b42577ad..5a46179638 100644
--- a/ground/src/main/res/drawable-anydpi/ic_offline_pin.xml
+++ b/ground/src/main/res/drawable-anydpi/ic_arrow_back.xml
@@ -22,8 +22,9 @@
     android:viewportWidth="24"
     android:viewportHeight="24"
     android:tint="#333333"
-    android:alpha="0.6">
+    android:alpha="1.0"
+    android:autoMirrored="true">
   <path
       android:fillColor="@android:color/white"
-      android:pathData="M12,2C6.5,2 2,6.5 2,12s4.5,10 10,10s10,-4.5 10,-10S17.5,2 12,2zM17,18H7v-2h10V18zM10.3,14L7,10.7l1.4,-1.4l1.9,1.9l5.3,-5.3L17,7.3L10.3,14z"/>
+      android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
 </vector>
diff --git a/ground/src/main/res/drawable-anydpi/ic_edit_black.xml b/ground/src/main/res/drawable-anydpi/ic_edit_black.xml
deleted file mode 100644
index 79307eb0a9..0000000000
--- a/ground/src/main/res/drawable-anydpi/ic_edit_black.xml
+++ /dev/null
@@ -1,29 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<!--
-  ~ Copyright 2020 Google LLC
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~     https://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
-
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24"
-    android:tint="#333333"
-    android:alpha="0.6">
-  <path
-      android:fillColor="@android:color/white"
-      android:pathData="M3,17.25V21h3.75L17.81,9.94l-3.75,-3.75L3,17.25zM20.71,7.04c0.39,-0.39 0.39,-1.02 0,-1.41l-2.34,-2.34c-0.39,-0.39 -1.02,-0.39 -1.41,0l-1.83,1.83 3.75,3.75 1.83,-1.83z"/>
-</vector>
diff --git a/ground/src/main/res/drawable/ic_maps_ar.xml b/ground/src/main/res/drawable/ic_maps_ar.xml
new file mode 100644
index 0000000000..11f6bde20d
--- /dev/null
+++ b/ground/src/main/res/drawable/ic_maps_ar.xml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+  ~ Copyright 2023 Google LLC
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     https://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="22dp"
+    android:height="22dp"
+    android:viewportWidth="22"
+    android:viewportHeight="22">
+  <path
+      android:pathData="M0,5V3C0,2.167 0.292,1.458 0.875,0.875C1.458,0.292 2.167,-0 3,-0H5V2H3C2.717,2 2.475,2.1 2.275,2.3C2.092,2.483 2,2.717 2,3V5H0ZM3,22C2.167,22 1.458,21.708 0.875,21.125C0.292,20.542 0,19.833 0,19V17H2V19C2,19.283 2.092,19.525 2.275,19.725C2.475,19.908 2.717,20 3,20H5V22H3ZM17,22V20H19C19.283,20 19.517,19.908 19.7,19.725C19.9,19.525 20,19.283 20,19V17H22V19C22,19.833 21.708,20.542 21.125,21.125C20.542,21.708 19.833,22 19,22H17ZM20,5V3C20,2.717 19.9,2.483 19.7,2.3C19.517,2.1 19.283,2 19,2H17V-0H19C19.833,-0 20.542,0.292 21.125,0.875C21.708,1.458 22,2.167 22,3V5H20ZM11,15.3C11.283,14.817 11.567,14.375 11.85,13.975C12.15,13.575 12.442,13.183 12.725,12.8C13.292,12.05 13.742,11.383 14.075,10.8C14.425,10.217 14.6,9.483 14.6,8.6C14.6,7.6 14.25,6.75 13.55,6.05C12.85,5.35 12,5 11,5C10,5 9.15,5.35 8.45,6.05C7.75,6.75 7.4,7.6 7.4,8.6C7.4,9.483 7.567,10.217 7.9,10.8C8.25,11.383 8.708,12.05 9.275,12.8C9.558,13.183 9.842,13.575 10.125,13.975C10.425,14.375 10.717,14.817 11,15.3ZM11,19C10.817,19 10.65,18.95 10.5,18.85C10.367,18.733 10.275,18.592 10.225,18.425C9.858,17.325 9.4,16.4 8.85,15.65C8.3,14.883 7.767,14.158 7.25,13.475C6.75,12.775 6.317,12.058 5.95,11.325C5.583,10.575 5.4,9.667 5.4,8.6C5.4,7.033 5.942,5.708 7.025,4.625C8.108,3.542 9.433,3 11,3C12.567,3 13.892,3.542 14.975,4.625C16.058,5.708 16.6,7.033 16.6,8.6C16.6,9.667 16.417,10.575 16.05,11.325C15.683,12.058 15.242,12.775 14.725,13.475C14.225,14.158 13.7,14.883 13.15,15.65C12.6,16.4 12.142,17.325 11.775,18.425C11.725,18.592 11.625,18.733 11.475,18.85C11.342,18.95 11.183,19 11,19ZM11,10.6C11.55,10.6 12.017,10.408 12.4,10.025C12.8,9.625 13,9.15 13,8.6C13,8.05 12.8,7.583 12.4,7.2C12.017,6.8 11.55,6.6 11,6.6C10.45,6.6 9.975,6.8 9.575,7.2C9.192,7.583 9,8.05 9,8.6C9,9.15 9.192,9.625 9.575,10.025C9.975,10.408 10.45,10.6 11,10.6Z"
+      android:fillColor="#002108"/>
+</vector>
diff --git a/ground/src/main/res/drawable/baseline_offline_pin_24.xml b/ground/src/main/res/drawable/ic_offline_pin.xml
similarity index 100%
rename from ground/src/main/res/drawable/baseline_offline_pin_24.xml
rename to ground/src/main/res/drawable/ic_offline_pin.xml
diff --git a/ground/src/main/res/layout/offline_area_selector_frag.xml b/ground/src/main/res/layout/offline_area_selector_frag.xml
index 11ea47bf57..f75adc47d5 100644
--- a/ground/src/main/res/layout/offline_area_selector_frag.xml
+++ b/ground/src/main/res/layout/offline_area_selector_frag.xml
@@ -42,6 +42,7 @@
         android:layout_height="wrap_content"
         android:elevation="@dimen/toolbar_elevation"
         android:minHeight="?attr/actionBarSize"
+        android:background="?attr/colorSurfaceContainer"
         app:layout_constraintTop_toTopOf="parent">
 
         <TextView
@@ -156,7 +157,7 @@
         android:id="@+id/button_buttons"
         android:layout_width="match_parent"
         android:layout_height="90dp"
-        android:background="@color/md_theme_background"
+        android:background="?attr/colorSurfaceContainer"
         android:gravity="top"
         android:orientation="horizontal"
         app:layout_constraintBottom_toBottomOf="parent">
diff --git a/ground/src/main/res/layout/offline_area_viewer_frag.xml b/ground/src/main/res/layout/offline_area_viewer_frag.xml
index 55d4b63234..b3ad2cd407 100644
--- a/ground/src/main/res/layout/offline_area_viewer_frag.xml
+++ b/ground/src/main/res/layout/offline_area_viewer_frag.xml
@@ -85,7 +85,7 @@
           tools:text="Area name, Country" />
         <TextView
           android:id="@+id/offline_area_size_on_device"
-          style="@style/TextAppearance.App.BodyMedium.OnSurface"
+          style="@style/TextAppearance.App.BodyMedium"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginTop="12dp"
diff --git a/ground/src/main/res/layout/offline_areas_frag.xml b/ground/src/main/res/layout/offline_areas_frag.xml
index 465a45bf5b..4aeeed2d80 100644
--- a/ground/src/main/res/layout/offline_areas_frag.xml
+++ b/ground/src/main/res/layout/offline_areas_frag.xml
@@ -28,55 +28,92 @@
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent"
+    android:background="?attr/colorSurfaceContainer"
     android:fitsSystemWindows="true">
 
-    <com.google.android.ground.ui.common.TwoLineToolbar
+    <com.google.android.material.appbar.MaterialToolbar
       android:id="@+id/offline_areas_toolbar"
-      android:layout_width="0dp"
+      android:layout_width="match_parent"
       android:layout_height="wrap_content"
-      android:elevation="@dimen/toolbar_elevation"
-      android:theme="@style/PrimaryToolbarTheme"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
+      app:navigationIcon="@drawable/ic_arrow_back"
       app:title="@string/offline_map_imagery" />
+    <LinearLayout
+      android:id="@+id/offline_area_list_heading"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:layout_marginStart="16dp"
+      android:layout_marginTop="16dp"
+      android:layout_marginEnd="24dp"
+      android:layout_marginBottom="8dp"
+      android:orientation="vertical"
+      app:layout_constraintLeft_toLeftOf="parent"
+      app:layout_constraintTop_toBottomOf="@id/offline_areas_toolbar"
+      app:visible="@{viewModel.showList}">
+      <TextView
+        android:id="@+id/offline_areas_list_title"
+        style="@style/TextAppearance.App.TitleMedium"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/offline_downloaded_areas" />
+      <TextView
+        android:id="@+id/offline_areas_list_tip"
+        style="@style/TextAppearance.App.BodySmall"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/offline_area_list_tip"
+        android:textColor="?attr/colorOnSurfaceVariant" />
+    </LinearLayout>
 
     <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/offline_areas_list"
       android:layout_width="0dp"
       android:layout_height="0dp"
+      android:layout_marginTop="16dp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
-      app:layout_constraintTop_toBottomOf="@+id/offline_areas_toolbar" />
+      app:layout_constraintTop_toBottomOf="@+id/offline_area_list_heading"
+      app:visible="@{viewModel.showList}" />
 
-    <Button
+    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
       android:id="@+id/floatingActionButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
-      android:layout_marginEnd="@dimen/chip_button_margin_right"
       android:layout_marginBottom="@dimen/map_btn_margin_bottom"
       android:clickable="true"
       android:contentDescription="@string/offline_area_selector_prompt"
       android:focusable="true"
       android:onClick="@{() -> viewModel.showOfflineAreaSelector()}"
       android:text="@string/offline_area_selector_select"
+      app:icon="@drawable/ic_maps_ar"
+      app:iconTint="?attr/colorOnPrimaryContainer"
       app:layout_constraintBottom_toBottomOf="parent"
-      app:layout_constraintEnd_toEndOf="parent" />
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent" />
     <TextView
       android:id="@+id/no_areas_downloaded_message"
+      style="@style/TextAppearance.App.BodyMedium"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
-      android:padding="16dp"
-      android:textAlignment="center"
-      style="@style/TextAppearance.App.BodyMedium.OnSurface"
       android:contentDescription="@string/offline_area_selector_prompt"
+      android:padding="48dp"
       android:text="@string/no_basemaps_downloaded"
-      android:visibility="@{viewModel.noAreasMessageVisibility}"
+      android:textAlignment="center"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
-      app:layout_constraintTop_toTopOf="parent" />
-
+      app:layout_constraintTop_toTopOf="parent"
+      app:visible="@{viewModel.showNoAreasMessage}" />
+    <ProgressBar
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      app:layout_constraintBottom_toBottomOf="parent"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toTopOf="parent"
+      app:visible="@{viewModel.showProgressSpinner}" />
   </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>
diff --git a/ground/src/main/res/layout/offline_areas_list_item.xml b/ground/src/main/res/layout/offline_areas_list_item.xml
index 348794adaf..995778f669 100644
--- a/ground/src/main/res/layout/offline_areas_list_item.xml
+++ b/ground/src/main/res/layout/offline_areas_list_item.xml
@@ -15,27 +15,62 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
-
-<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<layout 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">
+  xmlns:tools="http://schemas.android.com/tools">
+  <data>
+    <variable
+      name="viewModel"
+      type="com.google.android.ground.ui.offlineareas.OfflineAreaListItemViewModel" />
+  </data>
 
-  <TextView
-    android:id="@+id/offline_area_name"
-    android:layout_width="wrap_content"
-    android:layout_height="wrap_content"
-    android:layout_margin="@dimen/fab_margin"
-    android:drawablePadding="16dp"
-    android:textColor="?attr/colorOnSurface"
-    android:textSize="16sp"
-    app:drawableLeftCompat="@drawable/ic_edit_black"
-    app:drawableStartCompat="@android:drawable/ic_menu_mapmode"
-    app:drawableTint="?attr/colorOnSurfaceVariant" />
-  <View
-    android:id="@+id/divider"
+  <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
-    android:layout_height="1dp"
-    android:background="?android:attr/listDivider" />
+    android:layout_height="wrap_content"
+    android:layout_marginStart="16dp"
+    android:layout_marginTop="8dp"
+    android:layout_marginEnd="16dp"
+    android:layout_marginBottom="8dp"
+    android:clickable="true"
+    android:focusable="true"
+    android:onClick="@{() -> viewModel.onClick()}">
+
+    <ImageView
+      android:id="@+id/offline_area_list_item_icon"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:alpha="1.0"
+      app:alpha="1.0"
+      app:layout_constraintBottom_toBottomOf="parent"
+      app:layout_constraintLeft_toLeftOf="parent"
+      app:layout_constraintTop_toTopOf="parent"
+      android:contentDescription="@string/offline_area_list_item_icon"
+      android:src="@drawable/ic_offline_pin"
+      app:srcCompat="@drawable/ic_offline_pin"
+      app:tint="?attr/colorPrimary" />
+
+    <TextView
+      android:id="@+id/offline_area_list_item_name"
+      style="@style/TextAppearance.App.BodyLarge"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:layout_marginStart="16dp"
+      android:layout_marginEnd="16dp"
+      android:text="@{viewModel.areaName}"
+      app:layout_constraintTop_toTopOf="parent"
+      app:layout_constraintLeft_toRightOf="@id/offline_area_list_item_icon"
+      tools:text="Region name, Country" />
+    <TextView
+      android:id="@+id/offline_area_list_item_size"
+      style="@style/TextAppearance.App.BodyMedium"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:layout_marginTop="4dp"
+      android:text="@{@string/offline_area_list_item_size_on_disk_mb(viewModel.sizeOnDisk)}"
+      android:textColor="?attr/colorOnSurfaceVariant"
+      app:layout_constraintLeft_toLeftOf="@id/offline_area_list_item_name"
+      app:layout_constraintTop_toBottomOf="@id/offline_area_list_item_name"
+      tools:text="12 MB" />
 
-</FrameLayout>
+  </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>
diff --git a/ground/src/main/res/layout/survey_card_item.xml b/ground/src/main/res/layout/survey_card_item.xml
index d499816004..a3e2f87fb9 100644
--- a/ground/src/main/res/layout/survey_card_item.xml
+++ b/ground/src/main/res/layout/survey_card_item.xml
@@ -52,7 +52,7 @@
       android:orientation="vertical">
       <TextView
         android:id="@+id/title"
-        style="@style/TextAppearance.App.TitleMedium.OnSurface"
+        style="@style/TextAppearance.App.TitleMedium"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_marginStart="16dp"
@@ -66,7 +66,7 @@
 
       <TextView
         android:id="@+id/description"
-        style="@style/TextAppearance.App.BodyMedium.OnSurface"
+        style="@style/TextAppearance.App.BodyMedium"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="center"
@@ -99,7 +99,7 @@
           app:layout_constraintBottom_toBottomOf="@id/overflowMenu"
           app:layout_constraintEnd_toStartOf="@+id/overflowMenu"
           app:layout_constraintTop_toTopOf="@id/overflowMenu"
-          app:srcCompat="@drawable/baseline_offline_pin_24"
+          app:srcCompat="@drawable/ic_offline_pin"
           app:visible="@{item.isAvailableOffline}" />
 
         <!-- Overflow menu "..." affordance. -->
diff --git a/ground/src/main/res/values-es/strings.xml b/ground/src/main/res/values-es/strings.xml
index a516d64d6e..fc7361c77c 100644
--- a/ground/src/main/res/values-es/strings.xml
+++ b/ground/src/main/res/values-es/strings.xml
@@ -92,7 +92,7 @@
   <string name="unnamed_area">Área sin nombre</string>
   <string name="added_by">Añadido por %s</string>
   <!-- Label of button used enter the offline area selector. -->
-  <string name="offline_area_selector_select">Seleccionar y descargar</string>
+  <string name="offline_area_selector_select">Seleccionar área</string>
   <string name="no_basemaps_downloaded">No se descargaron mapas base.</string>
   <string name="signing_in">Iniciando sesión</string>
   <!-- Precedes the build number shown in the side menu of debug builds. -->
diff --git a/ground/src/main/res/values-pt/strings.xml b/ground/src/main/res/values-pt/strings.xml
index 50c2ce3303..56ec872f34 100644
--- a/ground/src/main/res/values-pt/strings.xml
+++ b/ground/src/main/res/values-pt/strings.xml
@@ -91,7 +91,7 @@
   <string name="unnamed_area">Area sem nome</string>
   <string name="added_by">Adicionado por %s</string>
   <!-- Label of button used enter the offline area selector. -->
-  <string name="offline_area_selector_select">Selecionar e download</string>
+  <string name="offline_area_selector_select">Selecionar área</string>
   <string name="no_basemaps_downloaded">Nenhum mapa carregado.</string>
   <string name="signing_in">Entrar</string>
   <!-- Precedes the build number shown in the side menu of debug builds. -->
diff --git a/ground/src/main/res/values/dimens.xml b/ground/src/main/res/values/dimens.xml
index 42750b2fc9..b4cd21a734 100644
--- a/ground/src/main/res/values/dimens.xml
+++ b/ground/src/main/res/values/dimens.xml
@@ -31,7 +31,7 @@
   <dimen name="task_bottom_padding">0dp</dimen>
 
   <!-- Task selection tabs -->
-  <dimen name="map_btn_margin_bottom">8dp</dimen>
+  <dimen name="map_btn_margin_bottom">48dp</dimen>
   <dimen name="toolbar_button_margin_top">8dp</dimen>
   <dimen name="toolbar_button_margin_right">12dp</dimen>
   <dimen name="chip_button_margin_bottom">16dp</dimen>
diff --git a/ground/src/main/res/values/strings.xml b/ground/src/main/res/values/strings.xml
index cb5f97a14b..5f046b1189 100644
--- a/ground/src/main/res/values/strings.xml
+++ b/ground/src/main/res/values/strings.xml
@@ -95,7 +95,7 @@
   <string name="offline_area_viewer_remove_button">Remove from device</string>
   <string name="added_by">Added by %s</string>
   <!-- Label of button used enter the offline area selector. -->
-  <string name="offline_area_selector_select">Select and download</string>
+  <string name="offline_area_selector_select">Select area</string>
   <string name="no_basemaps_downloaded">No imagery downloaded for offline use. Tap “Select and download” to get started.</string>
   <string name="signing_in">Signing in</string>
   <!-- Precedes the build number shown in the side menu of debug builds. -->
@@ -172,4 +172,8 @@
   <string name="unnamed_point">Unnamed point</string>
   <string name="unnamed_area">Unnamed area</string>
   <string name="offline_area_size_on_disk_mb">%s\u00A0MB on disk</string>
+  <string name="offline_area_list_item_size_on_disk_mb">%s\u00A0MB</string>
+  <string name="offline_downloaded_areas">Downloaded areas</string>
+  <string name="offline_area_list_tip">Available for offline viewing</string>
+  <string name="offline_area_list_item_icon">Offline area list item icon</string>
 </resources>
diff --git a/ground/src/main/res/values/styles.xml b/ground/src/main/res/values/styles.xml
index f2793c0719..d3ff464c7c 100644
--- a/ground/src/main/res/values/styles.xml
+++ b/ground/src/main/res/values/styles.xml
@@ -27,6 +27,8 @@
     <item name="android:windowTranslucentStatus">true</item>
     <item name="android:windowTranslucentNavigation">true</item>
     <item name="fontFamily">@font/text_500</item>
+    <item name="toolbarStyle">@style/Widget.App.Toolbar</item>
+    <item name="toolbarNavigationButtonStyle">@style/Widget.App.Toolbar.Button.Navigation</item>
   </style>
 
   <style name="AppTheme.Launcher">
@@ -79,6 +81,7 @@
   <style name="ToolbarTitle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
     <item name="android:textColor">?attr/colorOnSurface</item>
     <item name="fontFamily">@font/display_700</item>
+    <item name="android:layout_gravity">center</item>
     <item name="android:textSize">22sp</item>
   </style>
 
@@ -219,16 +222,13 @@
 
   <style name="TextAppearance.App.TitleMedium" parent="TextAppearance.Material3.TitleMedium">
     <item name="fontFamily">@font/text_700</item>
+    <item name="android:textColor">?attr/colorOnSurface</item>
   </style>
 
   <style name="TextAppearance.App.TitleMedium.OnSurfaceContainer">
     <item name="android:textColor">?attr/colorOnSurfaceVariant</item>
   </style>
 
-  <style name="TextAppearance.App.TitleMedium.OnSurface">
-    <item name="android:textColor">?attr/colorOnSurface</item>
-  </style>
-
   <style name="TextAppearance.App.TitleLarge" parent="TextAppearance.Material3.TitleLarge">
     <item name="fontFamily">@font/text_700</item>
   </style>
@@ -247,12 +247,24 @@
 
   <style name="TextAppearance.App.BodyMedium" parent="TextAppearance.Material3.BodyMedium">
     <item name="fontFamily">@font/text_500</item>
+    <item name="android:textColor">?attr/colorOnSurface</item>
   </style>
 
-  <style name="TextAppearance.App.BodyMedium.OnSurface">
+  <style name="TextAppearance.App.BodyLarge" parent="TextAppearance.Material3.BodyLarge">
+    <item name="fontFamily">@font/text_500</item>
     <item name="android:textColor">?attr/colorOnSurface</item>
   </style>
 
+  <style name="Widget.App.Toolbar" parent="Widget.Material3.Toolbar">
+    <item name="background">?attr/colorSurfaceContainer</item>
+    <item name="android:elevation">@dimen/toolbar_elevation</item>
+    <item name="titleCentered">true</item>
+  </style>
+
+  <style name="Widget.App.Toolbar.Button.Navigation" parent="Widget.AppCompat.Toolbar.Button.Navigation">
+    <item name="tint">?attr/colorOnSurface</item>
+  </style>
+
   <style name="Widget.App.Button.IconButton" parent="Widget.Material3.Button.IconButton">
     <item name="iconSize">24sp</item>
     <item name="iconTint">?attr/colorOnSurface</item>