diff --git a/app/build.gradle b/app/build.gradle
index ad79842d8..0aab34e4e 100644
--- a/app/build.gradle
+++ b/app/build.gradle
@@ -470,6 +470,7 @@ dependencies {
     implementation Deps.mozilla_ui_colors
     implementation Deps.mozilla_ui_icons
     implementation Deps.mozilla_ui_publicsuffixlist
+    implementation Deps.mozilla_ui_widgets
 
     implementation Deps.mozilla_lib_crash
     implementation Deps.mozilla_lib_push_firebase
diff --git a/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/topsites/TopSiteItemViewHolder.kt b/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/topsites/TopSiteItemViewHolder.kt
index 4812197db..4f5ee6e1e 100644
--- a/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/topsites/TopSiteItemViewHolder.kt
+++ b/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/topsites/TopSiteItemViewHolder.kt
@@ -11,7 +11,6 @@ import android.view.View
 import android.widget.PopupWindow
 import androidx.appcompat.content.res.AppCompatResources.getDrawable
 import kotlinx.android.synthetic.main.top_site_item.*
-import kotlinx.android.synthetic.main.top_site_item.view.*
 import mozilla.components.browser.menu.BrowserMenuBuilder
 import mozilla.components.browser.menu.item.SimpleBrowserMenuItem
 import mozilla.components.feature.top.sites.TopSite
@@ -44,7 +43,7 @@ class TopSiteItemViewHolder(
         }
 
         top_site_item.setOnLongClickListener {
-            val menu = topSiteMenu.menuBuilder.build(view.context).show(anchor = it.top_site_title)
+            val menu = topSiteMenu.menuBuilder.build(view.context).show(anchor = it)
             it.setOnTouchListener @SuppressLint("ClickableViewAccessibility") { v, event ->
                 onTouchEvent(v, event, menu)
             }
diff --git a/app/src/main/java/org/mozilla/fenix/settings/logins/view/LoginsListViewHolder.kt b/app/src/main/java/org/mozilla/fenix/settings/logins/view/LoginsListViewHolder.kt
index b5cd79943..223139995 100644
--- a/app/src/main/java/org/mozilla/fenix/settings/logins/view/LoginsListViewHolder.kt
+++ b/app/src/main/java/org/mozilla/fenix/settings/logins/view/LoginsListViewHolder.kt
@@ -5,21 +5,18 @@
 package org.mozilla.fenix.settings.logins.view
 
 import android.view.View
-import androidx.recyclerview.widget.RecyclerView
-import kotlinx.android.synthetic.main.logins_item.view.*
+import kotlinx.android.synthetic.main.logins_item.*
 import org.mozilla.fenix.ext.components
 import org.mozilla.fenix.ext.loadIntoView
 import org.mozilla.fenix.settings.logins.SavedLogin
 import org.mozilla.fenix.settings.logins.interactor.SavedLoginsInteractor
+import org.mozilla.fenix.utils.view.ViewHolder
 
 class LoginsListViewHolder(
-    private val view: View,
+    view: View,
     private val interactor: SavedLoginsInteractor
-) : RecyclerView.ViewHolder(view) {
+) : ViewHolder(view) {
 
-    private val favicon = view.favicon_image
-    private val url = view.webAddressView
-    private val username = view.usernameView
     private var loginItem: SavedLogin? = null
 
     fun bind(item: SavedLogin) {
@@ -30,17 +27,17 @@ class LoginsListViewHolder(
             username = item.username,
             timeLastUsed = item.timeLastUsed
         )
-        url.text = item.origin
-        username.text = item.username
+        webAddressView.text = item.origin
+        usernameView.text = item.username
 
         updateFavIcon(item.origin)
 
-        view.setOnClickListener {
+        itemView.setOnClickListener {
             interactor.onItemClicked(item)
         }
     }
 
     private fun updateFavIcon(url: String) {
-        favicon.context.components.core.icons.loadIntoView(favicon, url)
+        itemView.context.components.core.icons.loadIntoView(favicon_image, url)
     }
 }
diff --git a/app/src/main/res/drawable/notification_indicator.xml b/app/src/main/res/drawable/notification_indicator.xml
index 8090acf6d..e0641aac3 100644
--- a/app/src/main/res/drawable/notification_indicator.xml
+++ b/app/src/main/res/drawable/notification_indicator.xml
@@ -9,5 +9,5 @@
         android:width="14dp"
         android:height="14dp" />
     <solid android:color="?accentBright" />
-    <stroke android:color="@color/light_grey_05"/>
+    <stroke android:color="@color/photonLightGrey05"/>
 </shape>
diff --git a/app/src/main/res/drawable/quick_action_icon_close.xml b/app/src/main/res/drawable/quick_action_icon_close.xml
deleted file mode 100644
index 6ac688814..000000000
--- a/app/src/main/res/drawable/quick_action_icon_close.xml
+++ /dev/null
@@ -1,29 +0,0 @@
-<?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/. -->
-<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-<item>
-  <shape android:shape="oval">
-    <size
-        android:width="40dp"
-        android:height="40dp"/>
-    <solid android:color="@color/quick_action_reader_close_icon_background"/>
-  </shape>
-</item>
-<item
-    android:bottom="8dp"
-    android:left="8dp"
-    android:right="8dp"
-    android:top="8dp">
-  <vector
-          android:width="24dp"
-          android:height="24dp"
-          android:viewportWidth="24"
-          android:viewportHeight="24">
-    <path
-        android:pathData="M13.36 11.98l4.38-4.38a0.95 0.95 0 0 0-1.34-1.34l-4.38 4.38-4.38-4.38A0.95 0.95 0 0 0 6.3 7.6l4.38 4.38-4.38 4.38a0.95 0.95 0 1 0 1.34 1.34l4.38-4.38 4.38 4.38a0.95 0.95 0 0 0 1.34-1.34l-4.38-4.38z"
-        android:fillColor="@color/quick_action_reader_close_icon"/>
-  </vector>
-</item>
-</layer-list>
diff --git a/app/src/main/res/drawable/quick_action_icon_read_with_notification.xml b/app/src/main/res/drawable/quick_action_icon_read_with_notification.xml
deleted file mode 100644
index 09560761b..000000000
--- a/app/src/main/res/drawable/quick_action_icon_read_with_notification.xml
+++ /dev/null
@@ -1,21 +0,0 @@
-<?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/. -->
-<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:drawable="@drawable/quick_action_icon_read" />
-    <item
-            android:left="32dp"
-            android:bottom="32dp">
-        <shape
-                android:shape="oval">
-            <stroke
-                    android:width="1dp"
-                    android:color="@color/light_grey_05" />
-            <solid android:color="?accentBright" />
-            <size
-                    android:width="14dp"
-                    android:height="14dp"/>
-        </shape>
-    </item>
-</layer-list>
diff --git a/app/src/main/res/drawable/reader_two_state.xml b/app/src/main/res/drawable/reader_two_state.xml
deleted file mode 100644
index 046ac7c9a..000000000
--- a/app/src/main/res/drawable/reader_two_state.xml
+++ /dev/null
@@ -1,10 +0,0 @@
-<?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/. -->
-<selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:state_selected="false"
-        android:drawable="@drawable/quick_action_icon_read" />
-    <item android:state_selected="true"
-        android:drawable="@drawable/quick_action_icon_close" />
-</selector>
diff --git a/app/src/main/res/drawable/reader_two_state_with_notification.xml b/app/src/main/res/drawable/reader_two_state_with_notification.xml
deleted file mode 100644
index c25045f32..000000000
--- a/app/src/main/res/drawable/reader_two_state_with_notification.xml
+++ /dev/null
@@ -1,10 +0,0 @@
-<?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/. -->
-<selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:state_selected="false"
-          android:drawable="@drawable/quick_action_icon_read_with_notification" />
-    <item android:state_selected="true"
-          android:drawable="@drawable/quick_action_icon_close" />
-</selector>
diff --git a/app/src/main/res/drawable/top_sites_background.xml b/app/src/main/res/drawable/top_sites_background.xml
deleted file mode 100644
index 018b61714..000000000
--- a/app/src/main/res/drawable/top_sites_background.xml
+++ /dev/null
@@ -1,10 +0,0 @@
-<?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/. -->
-
-<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
-    <corners android:radius="4dp" />
-    <solid android:color="@color/top_site_background" />
-    <stroke android:width="1dp" android:color="@color/top_site_border" />
-</shape>
\ No newline at end of file
diff --git a/app/src/main/res/layout/logins_item.xml b/app/src/main/res/layout/logins_item.xml
index 08ed87f9f..cd64c9efe 100644
--- a/app/src/main/res/layout/logins_item.xml
+++ b/app/src/main/res/layout/logins_item.xml
@@ -12,27 +12,14 @@
     android:focusable="true"
     android:minHeight="?android:attr/listPreferredItemHeight">
 
-    <FrameLayout
-        android:id="@+id/favicon_wrapper"
-        android:layout_width="@dimen/history_favicon_width_height"
-        android:layout_height="@dimen/history_favicon_width_height"
-        android:padding="@dimen/saved_logins_item_padding"
-        android:layout_marginStart="@dimen/saved_logins_item_margin_start"
-        android:background="@drawable/top_sites_background"
-        android:layout_gravity="center"
-        android:importantForAccessibility="noHideDescendants"
+    <ImageView
+        android:id="@+id/favicon_image"
+        style="@style/Mozac.Widgets.Favicon"
+        android:layout_marginStart="16dp"
+        android:importantForAccessibility="no"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintBottom_toBottomOf="parent">
-        <ImageView
-            android:id="@+id/favicon_image"
-            android:layout_width="@dimen/preference_icon_drawable_size"
-            android:layout_height="@dimen/preference_icon_drawable_size"
-            android:layout_gravity="center"
-            android:adjustViewBounds="true"
-            android:importantForAccessibility="no"
-            android:scaleType="fitCenter" />
-    </FrameLayout>
+        app:layout_constraintBottom_toBottomOf="parent" />
 
     <TextView
         android:id="@+id/webAddressView"
@@ -46,7 +33,7 @@
         android:textColor="?primaryText"
         app:layout_constraintBottom_toTopOf="@id/usernameView"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toEndOf="@id/favicon_wrapper"
+        app:layout_constraintStart_toEndOf="@+id/favicon_image"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintVertical_chainStyle="packed"
         tools:text="mozilla.org" />
@@ -62,7 +49,7 @@
         android:textColor="?secondaryText"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toEndOf="@id/favicon_wrapper"
+        app:layout_constraintStart_toEndOf="@+id/favicon_image"
         app:layout_constraintTop_toBottomOf="@id/webAddressView"
         app:layout_constraintVertical_chainStyle="packed"
         tools:text="mozilla.org" />
diff --git a/app/src/main/res/layout/top_site_item.xml b/app/src/main/res/layout/top_site_item.xml
index 2267ce9d1..80303aa69 100644
--- a/app/src/main/res/layout/top_site_item.xml
+++ b/app/src/main/res/layout/top_site_item.xml
@@ -4,30 +4,17 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/top_site_item"
     android:layout_width="64dp"
     android:layout_height="wrap_content"
     android:padding="8dp"
     android:orientation="vertical">
 
-    <FrameLayout
-        android:id="@+id/favicon_wrapper"
-        android:layout_width="40dp"
-        android:layout_height="40dp"
-        android:padding="4dp"
-        android:background="@drawable/top_sites_background"
+    <ImageView
+        android:id="@+id/favicon_image"
+        style="@style/Mozac.Widgets.Favicon"
         android:layout_gravity="center"
-       >
-        <ImageView
-            android:id="@+id/favicon_image"
-            android:layout_width="24dp"
-            android:layout_height="24dp"
-            android:layout_gravity="center"
-            android:adjustViewBounds="true"
-            android:importantForAccessibility="no"
-            android:scaleType="fitCenter" />
-    </FrameLayout>
+        android:importantForAccessibility="no" />
 
     <TextView
         android:id="@+id/top_site_title"
diff --git a/app/src/main/res/values-night/colors.xml b/app/src/main/res/values-night/colors.xml
index 8fc545e42..5ff68a52a 100644
--- a/app/src/main/res/values-night/colors.xml
+++ b/app/src/main/res/values-night/colors.xml
@@ -50,6 +50,9 @@
     <color name="search_suggestion_indicator_icon_color_normal_theme">@color/search_suggestion_indicator_icon_color_dark_theme</color>
     <color name="search_suggestion_indicator_icon_bookmark_color_normal_theme">@color/search_suggestion_indicator_icon_bookmark_color_dark_theme</color>
 
+    <color name="mozac_widget_favicon_background_normal_theme">@color/mozac_widget_favicon_background_dark_theme</color>
+    <color name="mozac_widget_favicon_border_normal_theme">@color/mozac_widget_favicon_border_dark_theme</color>
+
     <!-- Tab tray -->
     <color name="tab_tray_item_text_normal_theme">@color/tab_tray_item_text_dark_theme</color>
     <color name="tab_tray_item_url_normal_theme">@color/tab_tray_item_url_dark_theme</color>
@@ -65,8 +68,6 @@
     <color name="tab_tray_selected_mask_normal_theme">@color/tab_tray_selected_mask_dark_theme</color>
 
     <!--Top site colors -->
-    <color name="top_site_background">@color/top_site_background_dark_theme</color>
-    <color name="top_site_border">@color/top_site_border_dark_theme</color>
     <color name="top_site_title_text">@color/top_site_title_text_dark_theme</color>
 
     <!-- Synced tabs colors-->
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 9a22639e5..4e7101f93 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -4,21 +4,8 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <resources xmlns:tools="http://schemas.android.com/tools">
     <!-- Photon colors -->
-    <color name="dark_grey_05">#5B5B66</color>
-    <color name="dark_grey_10">#52525E</color>
-    <color name="dark_grey_50">#32313C</color>
-    <color name="dark_grey_80">#1C1B22</color>
     <color name="ink_20">#312A65</color>
     <color name="ink_20_48a">#7A312A65</color>
-    <color name="ink_50">#291D4F</color>
-    <color name="ink_80">#20123A</color>
-    <color name="ink_90">#1D1133</color>
-    <color name="light_grey_05">#FBFBFE</color>
-    <color name="light_grey_10">#F9F9FB</color>
-    <color name="light_grey_30">#E0E0E6</color>
-    <color name="light_grey_60">#AFAFBB</color>
-    <color name="light_grey_80">#8F8F9D</color>
-    <color name="light_grey_90">#80808E</color>
     <color name="violet_50">#9059FF</color>
     <color name="violet_50_32a">#529059FF</color>
     <color name="violet_50_48a">#7A9059FF</color>
@@ -45,10 +32,8 @@
     <color name="scrimEnd_light_theme">#F542414D</color>
     <color name="dark_grey_90_gradient_start">#FF15141A</color>
     <color name="dark_grey_90_gradient_end">#0015141A</color>
-    <color name="top_site_background_light_theme">@android:color/white</color>
-    <color name="top_site_border_light_theme">@color/light_grey_30</color>
-    <color name="synced_tabs_separator_light_theme">@color/light_grey_30</color>
-    <color name="top_site_title_text_light_theme">@color/light_grey_80</color>
+    <color name="synced_tabs_separator_light_theme">@color/photonLightGrey30</color>
+    <color name="top_site_title_text_light_theme">@color/photonLightGrey80</color>
     <color name="collection_icon_color_violet_light_theme">#7542E5</color>
     <color name="collection_icon_color_blue_light_theme">#0250BB</color>
     <color name="collection_icon_color_pink_light_theme">#E31587</color>
@@ -74,19 +59,22 @@
     <color name="search_suggestion_indicator_icon_color_light_theme">#008787</color>
     <color name="search_suggestion_indicator_icon_bookmark_color_light_theme">#0060df</color>
 
+    <color name="mozac_widget_favicon_background_light_theme">@color/photonWhite</color>
+    <color name="mozac_widget_favicon_border_light_theme">@color/photonLightGrey30</color>
+
     <!-- Tab Tray -->
-    <color name="tab_tray_item_text_light_theme">@color/ink_80</color>
-    <color name="tab_tray_item_url_light_theme">@color/dark_grey_05</color>
-    <color name="tab_tray_item_background_light_theme">@color/light_grey_10</color>
+    <color name="tab_tray_item_text_light_theme">@color/photonInk80</color>
+    <color name="tab_tray_item_url_light_theme">@color/photonDarkGrey05</color>
+    <color name="tab_tray_item_background_light_theme">@color/photonLightGrey10</color>
     <color name="tab_tray_item_selected_background_light_theme">#E5DFF4</color>
-    <color name="tab_tray_toolbar_background_light_theme">@color/light_grey_10</color>
-    <color name="tab_tray_item_divider_light_theme">@color/light_grey_30</color>
+    <color name="tab_tray_toolbar_background_light_theme">@color/photonLightGrey10</color>
+    <color name="tab_tray_item_divider_light_theme">@color/photonLightGrey30</color>
     <color name="tab_tray_item_media_stroke">#ffffff</color>
     <color name="tab_tray_item_media_background_light_theme">#312A65</color>
     <color name="tab_tray_heading_icon_light_theme">@color/ink_20</color>
     <color name="tab_tray_heading_icon_inactive_light_theme">@color/ink_20_48a</color>
-    <color name="tab_tray_item_thumbnail_background_light_theme">@color/light_grey_10</color>
-    <color name="tab_tray_item_thumbnail_icon_light_theme">@color/light_grey_60</color>
+    <color name="tab_tray_item_thumbnail_background_light_theme">@color/photonLightGrey10</color>
+    <color name="tab_tray_item_thumbnail_icon_light_theme">@color/photonLightGrey60</color>
     <color name="tab_tray_selected_mask_light_theme">@color/violet_70_12a</color>
 
     <!-- Dark theme color palette -->
@@ -108,10 +96,8 @@
     <color name="disabled_dark_theme">#66FBFBFE</color>
     <color name="scrimStart_dark_theme">#F520123A</color>
     <color name="scrimEnd_dark_theme">#F515141A</color>
-    <color name="top_site_background_dark_theme">@color/dark_grey_50</color>
-    <color name="top_site_border_dark_theme">@color/dark_grey_10</color>
-    <color name="synced_tabs_separator_dark_theme">@color/dark_grey_10</color>
-    <color name="top_site_title_text_dark_theme">@color/light_grey_90</color>
+    <color name="synced_tabs_separator_dark_theme">@color/photonDarkGrey10</color>
+    <color name="top_site_title_text_dark_theme">@color/photonLightGrey90</color>
     <color name="collection_icon_color_violet_dark_theme">#AB71FF</color>
     <color name="collection_icon_color_blue_dark_theme">#00B3F4</color>
     <color name="collection_icon_color_pink_dark_theme">#FF6BBA</color>
@@ -137,18 +123,21 @@
     <color name="search_suggestion_indicator_icon_color_dark_theme">#2ac3a2</color>
     <color name="search_suggestion_indicator_icon_bookmark_color_dark_theme">#0090ed</color>
 
+    <color name="mozac_widget_favicon_background_dark_theme">@color/photonDarkGrey50</color>
+    <color name="mozac_widget_favicon_border_dark_theme">@color/photonDarkGrey10</color>
+
     <!-- Tab Tray -->
-    <color name="tab_tray_item_text_dark_theme">@color/light_grey_05</color>
-    <color name="tab_tray_item_url_dark_theme">@color/light_grey_60</color>
-    <color name="tab_tray_item_background_dark_theme">@color/dark_grey_80</color>
+    <color name="tab_tray_item_text_dark_theme">@color/photonLightGrey05</color>
+    <color name="tab_tray_item_url_dark_theme">@color/photonLightGrey60</color>
+    <color name="tab_tray_item_background_dark_theme">@color/photonDarkGrey80</color>
     <color name="tab_tray_item_selected_background_dark_theme">#412E69</color>
-    <color name="tab_tray_toolbar_background_dark_theme">@color/dark_grey_50</color>
-    <color name="tab_tray_item_divider_dark_theme">@color/dark_grey_10</color>
+    <color name="tab_tray_toolbar_background_dark_theme">@color/photonDarkGrey50</color>
+    <color name="tab_tray_item_divider_dark_theme">@color/photonDarkGrey10</color>
     <color name="tab_tray_item_media_background_dark_theme">#9059FF</color>
     <color name="tab_tray_heading_icon_dark_theme">@color/violet_50</color>
     <color name="tab_tray_heading_icon_inactive_dark_theme">@color/violet_50_48a</color>
-    <color name="tab_tray_item_thumbnail_background_dark_theme">@color/dark_grey_50</color>
-    <color name="tab_tray_item_thumbnail_icon_dark_theme">@color/dark_grey_05</color>
+    <color name="tab_tray_item_thumbnail_background_dark_theme">@color/photonDarkGrey50</color>
+    <color name="tab_tray_item_thumbnail_icon_dark_theme">@color/photonDarkGrey05</color>
     <color name="tab_tray_selected_mask_dark_theme">@color/violet_50_32a</color>
 
     <!-- Private theme color palette -->
@@ -156,8 +145,8 @@
     <color name="secondary_text_private_theme">#A7A2B7</color>
     <color name="contrast_text_private_theme">@color/primary_text_private_theme</color>
     <color name="foundation_private_theme">#261E4B</color>
-    <color name="inset_private_theme">#291D4F</color>
-    <color name="above_private_theme">#291D4F</color>
+    <color name="inset_private_theme">@color/photonInk50</color>
+    <color name="above_private_theme">@color/photonInk50</color>
     <color name="accent_private_theme">#9059FF</color>
     <color name="accent_bright_private_theme">#592ACB</color>
     <color name="about_link_private_theme">#AB71FF</color>
@@ -192,13 +181,16 @@
     <color name="add_on_private_browsing_interior_icon_background_private_theme">#FFFFFF</color>
     <color name="prompt_login_edit_text_cursor_color_private_theme">#9059ff</color>
 
+    <color name="mozac_widget_favicon_background_private_theme">@color/photonInk50</color>
+    <color name="mozac_widget_favicon_border_private_theme">@color/photonInk50</color>
+
     <!-- Tab Tray -->
-    <color name="tab_tray_item_text_private_theme">@color/light_grey_05</color>
-    <color name="tab_tray_item_url_private_theme">@color/light_grey_60</color>
-    <color name="tab_tray_item_background_private_theme">@color/ink_90</color>
+    <color name="tab_tray_item_text_private_theme">@color/photonLightGrey05</color>
+    <color name="tab_tray_item_url_private_theme">@color/photonLightGrey60</color>
+    <color name="tab_tray_item_background_private_theme">@color/photonInk90</color>
     <color name="tab_tray_item_selected_background_private_theme">#422875</color>
-    <color name="tab_tray_toolbar_background_private_theme">@color/ink_50</color>
-    <color name="tab_tray_item_divider_private_theme">@color/dark_grey_10</color>
+    <color name="tab_tray_toolbar_background_private_theme">@color/photonInk50</color>
+    <color name="tab_tray_item_divider_private_theme">@color/photonDarkGrey10</color>
     <color name="tab_tray_item_media_background_private_theme">#9059FF</color>
     <color name="tab_tray_heading_icon_private_theme">@color/violet_50</color>
     <color name="tab_tray_heading_icon_inactive_private_theme">@color/violet_50_48a</color>
@@ -245,6 +237,9 @@
     <color name="search_suggestion_indicator_icon_color_normal_theme">@color/search_suggestion_indicator_icon_color_light_theme</color>
     <color name="search_suggestion_indicator_icon_bookmark_color_normal_theme">@color/search_suggestion_indicator_icon_bookmark_color_light_theme</color>
 
+    <color name="mozac_widget_favicon_background_normal_theme">@color/mozac_widget_favicon_background_light_theme</color>
+    <color name="mozac_widget_favicon_border_normal_theme">@color/mozac_widget_favicon_border_light_theme</color>
+
     <!-- Tab tray -->
     <color name="tab_tray_item_text_normal_theme">@color/tab_tray_item_text_light_theme</color>
     <color name="tab_tray_item_url_normal_theme">@color/tab_tray_item_url_light_theme</color>
@@ -263,8 +258,6 @@
     <color name="bookmark_favicon_background">#DFDFE3</color>
 
     <!-- Top site colors -->
-    <color name="top_site_background">@color/top_site_background_light_theme</color>
-    <color name="top_site_border">@color/top_site_border_light_theme</color>
     <color name="top_site_title_text">@color/top_site_title_text_light_theme</color>
 
     <!-- Synced tabs colors-->
@@ -330,8 +323,8 @@
     <!-- Toggle Colors -->
     <color name="toggle_off_knob_light_theme">@color/photonGrey10</color>
     <color name="toggle_off_track_light_theme">@color/dark_grey_90</color>
-    <color name="toggle_off_knob_dark_theme">@color/light_grey_05</color>
-    <color name="toggle_off_track_dark_theme">@color/light_grey_05</color>
+    <color name="toggle_off_knob_dark_theme">@color/photonLightGrey05</color>
+    <color name="toggle_off_track_dark_theme">@color/photonLightGrey05</color>
     <color name="toggle_off_knob_normal_theme">@color/toggle_off_knob_light_theme</color>
     <color name="toggle_off_track_normal_theme">@color/toggle_off_track_light_theme</color>
 
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index a11de8c72..b67e9349e 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -80,6 +80,10 @@
         <item name="awesomeBarIndicatorColor">@color/search_suggestion_indicator_icon_color_normal_theme</item>
         <item name="awesomeBarIndicatorBookmarkColor">@color/search_suggestion_indicator_icon_bookmark_color_normal_theme</item>
 
+        <!-- Shared widget colors -->
+        <item name="mozac_widget_favicon_background_color">@color/mozac_widget_favicon_background_normal_theme</item>
+        <item name="mozac_widget_favicon_border_color">@color/mozac_widget_favicon_border_normal_theme</item>
+
         <item name="tabTrayItemBackground">@color/tab_tray_item_background_normal_theme</item>
         <item name="tabTrayItemSelectedBackground">@color/tab_tray_item_selected_background_normal_theme</item>
         <item name="tabTrayToolbarBackground">@color/tab_tray_toolbar_background_normal_theme</item>
@@ -213,6 +217,10 @@
         <item name="awesomeBarIndicatorColor">@color/search_suggestion_indicator_icon_color_dark_theme</item>
         <item name="awesomeBarIndicatorBookmarkColor">@color/search_suggestion_indicator_icon_bookmark_color_dark_theme</item>
 
+        <!-- Shared widget colors -->
+        <item name="mozac_widget_favicon_background_color">@color/mozac_widget_favicon_background_private_theme</item>
+        <item name="mozac_widget_favicon_border_color">@color/mozac_widget_favicon_border_private_theme</item>
+
         <!-- Tab Tray -->
         <item name="tabTrayItemBackground">@color/tab_tray_item_background_normal_theme</item>
         <item name="tabTrayItemSelectedBackground">@color/tab_tray_item_selected_background_private_theme</item>
diff --git a/buildSrc/src/main/java/Dependencies.kt b/buildSrc/src/main/java/Dependencies.kt
index 043375927..b6540a220 100644
--- a/buildSrc/src/main/java/Dependencies.kt
+++ b/buildSrc/src/main/java/Dependencies.kt
@@ -132,6 +132,7 @@ object Deps {
 
     const val mozilla_ui_colors = "org.mozilla.components:ui-colors:${Versions.mozilla_android_components}"
     const val mozilla_ui_icons = "org.mozilla.components:ui-icons:${Versions.mozilla_android_components}"
+    const val mozilla_ui_widgets = "org.mozilla.components:ui-widgets:${Versions.mozilla_android_components}"
 
     const val mozilla_lib_crash = "org.mozilla.components:lib-crash:${Versions.mozilla_android_components}"
     const val mozilla_lib_push_firebase = "org.mozilla.components:lib-push-firebase:${Versions.mozilla_android_components}"