diff --git a/color-check-baseline.xml b/color-check-baseline.xml
index 312e5c92503..83c0d53e7c6 100644
--- a/color-check-baseline.xml
+++ b/color-check-baseline.xml
@@ -2493,7 +2493,7 @@
         errorLine2="                                           ^">
         <location
             file="res/values/styles.xml"
-            line="422"
+            line="425"
             column="44"/>
     </issue>
 
@@ -2509,7 +2509,7 @@
         errorLine2="                                           ^">
         <location
             file="res/values/styles.xml"
-            line="428"
+            line="431"
             column="44"/>
     </issue>
 
@@ -2525,7 +2525,7 @@
         errorLine2="                                           ^">
         <location
             file="res/values/styles.xml"
-            line="429"
+            line="432"
             column="44"/>
     </issue>
 
@@ -2541,7 +2541,23 @@
         errorLine2="                                 ^">
         <location
             file="res/values/styles.xml"
-            line="464"
+            line="467"
+            column="34"/>
+    </issue>
+
+    <issue
+        id="HardCodedColor"
+        severity="Error"
+        message="Avoid using hardcoded color"
+        category="Correctness"
+        priority="4"
+        summary="Using hardcoded color"
+        explanation="Hardcoded color values are bad because theme changes cannot be uniformly applied.Instead use the theme specific colors such as `?android:attr/textColorPrimary` in attributes.&#xA;This ensures that a theme change from a light to a dark theme can be uniformlyapplied across the app."
+        errorLine1="        &lt;item name=&quot;strokeColor&quot;>@color/homepage_card_stroke_color&lt;/item>"
+        errorLine2="                                 ^">
+        <location
+            file="res/values/styles.xml"
+            line="474"
             column="34"/>
     </issue>
 
diff --git a/res/layout/search_bar.xml b/res/layout/search_bar.xml
index 9135ebf8f1a..be8aa3b8819 100644
--- a/res/layout/search_bar.xml
+++ b/res/layout/search_bar.xml
@@ -15,42 +15,33 @@
      limitations under the License.
 -->
 
-<FrameLayout
+<com.google.android.material.card.MaterialCardView
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:id="@+id/search_bar_container"
+    android:id="@+id/search_bar"
+    style="@style/SearchBarStyle"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:background="?android:attr/colorBackground"
-    android:theme="@style/ThemeOverlay.Settings.SearchBar"
     app:layout_scrollFlags="scroll|enterAlways">
-    <androidx.cardview.widget.CardView
-        android:id="@+id/search_bar"
+    <Toolbar
+        android:id="@+id/search_action_bar"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_margin="@dimen/search_bar_margin"
-        app:cardCornerRadius="@dimen/search_bar_corner_radius"
-        app:cardElevation="@dimen/search_bar_card_elevation">
-        <Toolbar
-            android:id="@+id/search_action_bar"
-            android:layout_width="match_parent"
-            android:layout_height="@dimen/search_bar_height"
-            android:background="?android:attr/selectableItemBackground"
-            android:contentInsetStartWithNavigation="@dimen/search_bar_content_inset"
-            android:navigationIcon="@drawable/ic_search_24dp">
-            <TextView
-                android:id="@+id/search_action_bar_title"
-                style="@style/TextAppearance.SearchBar"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="@string/search_menu"/>
-        </Toolbar>
-        <ImageView
-            android:id="@+id/account_avatar"
-            android:layout_marginStart="@dimen/search_bar_avatar_start_margin"
-            android:layout_marginEnd="@dimen/search_bar_avatar_end_margin"
-            android:layout_width="@dimen/search_bar_avatar_size"
-            android:layout_height="@dimen/search_bar_avatar_size"
-            android:layout_gravity="end|center_vertical"/>
-    </androidx.cardview.widget.CardView>
-</FrameLayout>
\ No newline at end of file
+        android:layout_height="@dimen/search_bar_height"
+        android:background="?android:attr/selectableItemBackground"
+        android:contentInsetStartWithNavigation="@dimen/search_bar_content_inset"
+        android:navigationIcon="@drawable/ic_search_24dp">
+        <TextView
+            android:id="@+id/search_action_bar_title"
+            style="@style/TextAppearance.SearchBar"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="@string/search_menu"/>
+    </Toolbar>
+    <ImageView
+        android:id="@+id/account_avatar"
+        android:layout_marginStart="@dimen/search_bar_avatar_start_margin"
+        android:layout_marginEnd="@dimen/search_bar_avatar_end_margin"
+        android:layout_width="@dimen/search_bar_avatar_size"
+        android:layout_height="@dimen/search_bar_avatar_size"
+        android:layout_gravity="end|center_vertical"/>
+</com.google.android.material.card.MaterialCardView>
diff --git a/res/layout/settings_homepage_container.xml b/res/layout/settings_homepage_container.xml
index 02235738731..8d81e824642 100644
--- a/res/layout/settings_homepage_container.xml
+++ b/res/layout/settings_homepage_container.xml
@@ -23,11 +23,12 @@
 
     <com.google.android.material.appbar.AppBarLayout
         android:layout_width="match_parent"
-        android:layout_height="wrap_content">
+        android:layout_height="wrap_content"
+        android:background="@android:color/transparent"
+        app:elevation="0dp">
         <include layout="@layout/search_bar"/>
     </com.google.android.material.appbar.AppBarLayout>
 
-
     <androidx.core.widget.NestedScrollView
         android:id="@+id/main_content_scrollable_container"
         android:layout_width="match_parent"
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index f55ef10b08b..83848af419b 100755
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -95,11 +95,7 @@
     <dimen name="switchbar_subsettings_margin_start">72dp</dimen>
     <dimen name="switchbar_subsettings_margin_end">16dp</dimen>
 
-    <!-- The following two margins need to match, with the caveat that
-         the second should be negative. The second one ensures that the icons and text
-         align despite the additional padding caused by the search bar's card background. -->
     <dimen name="search_bar_margin">16dp</dimen>
-    <dimen name="search_bar_negative_margin">-16dp</dimen>
 
     <dimen name="search_bar_height">48dp</dimen>
     <dimen name="search_bar_corner_radius">2dp</dimen>
diff --git a/res/values/styles.xml b/res/values/styles.xml
index 1b311aabafa..8a92eaaf2f4 100644
--- a/res/values/styles.xml
+++ b/res/values/styles.xml
@@ -17,7 +17,7 @@
 <resources>
 
     <style name="Widget.ActionBar.Base"
-            parent="@android:style/Widget.DeviceDefault.Light.ActionBar.Solid"/>
+           parent="@android:style/Widget.DeviceDefault.Light.ActionBar.Solid"/>
 
     <style name="Widget.ActionBar"
            parent="Widget.ActionBar.Base">
@@ -259,7 +259,8 @@
 
     <style name="TextAppearance.Medium" parent="@android:style/TextAppearance.Material.Medium"/>
     <style name="TextAppearance.Small" parent="@android:style/TextAppearance.Material.Small"/>
-    <style name="TextAppearance.Switch" parent="@android:style/TextAppearance.DeviceDefault.Widget.ActionBar.Title">
+    <style name="TextAppearance.Switch"
+           parent="@android:style/TextAppearance.DeviceDefault.Widget.ActionBar.Title">
         <item name="android:textSize">16sp</item>
     </style>
 
@@ -400,9 +401,11 @@
 
     <style name="ActionSecondaryButton" parent="android:Widget.DeviceDefault.Button"/>
 
-    <style name="SettingsActionButton" parent="android:Widget.DeviceDefault.Button.Borderless.Colored">
+    <style name="SettingsActionButton"
+           parent="android:Widget.DeviceDefault.Button.Borderless.Colored">
         <item name="android:drawablePadding">4dp</item>
-        <item name="android:drawableTint">@*android:color/btn_colored_borderless_text_material</item>
+        <item name="android:drawableTint">@*android:color/btn_colored_borderless_text_material
+        </item>
         <item name="android:layout_marginEnd">8dp</item>
         <item name="android:paddingTop">20dp</item>
         <item name="android:paddingBottom">20dp</item>
@@ -465,6 +468,13 @@
         <item name="strokeWidth">1dp</item>
     </style>
 
+    <style name="SearchBarStyle">
+        <item name="android:layout_margin">@dimen/search_bar_margin</item>
+        <item name="cardCornerRadius">8dp</item>
+        <item name="strokeColor">@color/homepage_card_stroke_color</item>
+        <item name="strokeWidth">1dp</item>
+    </style>
+
     <style name="ConditionCardBorderlessButton"
            parent="android:Widget.DeviceDefault.Button.Borderless">
         <item name="android:textColor">?android:attr/colorAccent</item>
diff --git a/res/values/themes.xml b/res/values/themes.xml
index 873216d5ae9..00ffe0133b4 100644
--- a/res/values/themes.xml
+++ b/res/values/themes.xml
@@ -195,11 +195,6 @@
         <item name="android:windowLightNavigationBar">true</item>
     </style>
 
-    <style name="ThemeOverlay.Settings.SearchBar" parent="Theme.Settings">
-        <item name="android:colorBackground">?android:attr/colorPrimary</item>
-        <item name="cardBackgroundColor">?android:attr/colorBackground</item>
-    </style>
-
     <style name="Theme.BottomDialog" parent="@*android:style/Theme.DeviceDefault.Settings.Dialog">
         <item name="android:windowBackground">@drawable/settings_panel_background</item>
     </style>