diff --git a/ui/components/Shared/SharedToggleItem.tsx b/ui/components/Shared/SharedToggleItem.tsx
index 0d44195ee..5e83ce776 100644
--- a/ui/components/Shared/SharedToggleItem.tsx
+++ b/ui/components/Shared/SharedToggleItem.tsx
@@ -4,6 +4,7 @@ import {
 } from "@tallyho/tally-background/lib/utils"
 import React, { ReactElement } from "react"
 import SharedToggleButton from "./SharedToggleButton"
+import SharedAvatar from "./SharedAvatar"
 
 export const STARS_GREY_URL = "./images/stars_grey.svg"
 
@@ -23,7 +24,12 @@ export default function SharedToggleItem({
   return (
     <div className="content" data-testid="toggle_item">
       <div className="text_wrap">
-        <div className="thumbnail" role="img" />
+        <SharedAvatar
+          avatarURL={thumbnailURL}
+          backupAvatar="STARS_GREY_URL"
+          width="32px"
+          borderRadius="4px"
+        />
         <label className="label ellipsis">
           {isProbablyEVMAddress(label) ? truncateAddress(label) : label}
         </label>
@@ -44,14 +50,6 @@ export default function SharedToggleItem({
           gap: 8px;
           width: 85%;
         }
-        .thumbnail {
-          background: url("${thumbnailURL || STARS_GREY_URL}") center no-repeat;
-          background-size: cover;
-          width: 32px;
-          height: 32px;
-          border-radius: 4px;
-          flex-shrink: 0;
-        }
         .label {
           margin-top: 0;
           font-weight: 500;