diff --git a/src/renderer/components/extension-manager/extension-card.component.tsx b/src/renderer/components/extension-manager/extension-card.component.tsx
index 6b66a1c6b7..7f3993df2b 100644
--- a/src/renderer/components/extension-manager/extension-card.component.tsx
+++ b/src/renderer/components/extension-manager/extension-card.component.tsx
@@ -14,9 +14,9 @@ export type ExtensionCardProps = PropsWithChildren<{
   extensionDescription: string;
 
   /**
-   * Optional flag to set if you want an icon (Avatar) to appear for the extension
+   * File path to the icon
    */
-  hasIcon?: boolean;
+  iconFilePath?: string;
 
   /**
    * Content to provide for a header action that appears in the top right of the Card
@@ -32,14 +32,17 @@ export type ExtensionCardProps = PropsWithChildren<{
 export default function ExtensionCard({
   extensionName,
   extensionDescription,
-  hasIcon,
+  iconFilePath,
   headerAction,
   className,
   children,
 }: ExtensionCardProps) {
   const avatar = useMemo(
-    () => (hasIcon ? <Avatar variant="square">{extensionName[0]}</Avatar> : null),
-    [extensionName, hasIcon],
+    () =>
+      iconFilePath ? (
+        <Avatar variant="square" src={iconFilePath} alt={extensionDescription} />
+      ) : null,
+    [extensionDescription, iconFilePath],
   );
 
   const isGallery = useMemo(() => className && className === 'square', [className]);
diff --git a/src/renderer/components/extension-manager/extension-list.component.tsx b/src/renderer/components/extension-manager/extension-list.component.tsx
index 695da5e878..5e8314f774 100644
--- a/src/renderer/components/extension-manager/extension-list.component.tsx
+++ b/src/renderer/components/extension-manager/extension-list.component.tsx
@@ -24,6 +24,11 @@ export type Extension = {
    * Set if the extension is currently installed
    */
   isInstalled: boolean;
+
+  /**
+   * File path to the extensions icon
+   */
+  filePath?: string;
 };
 
 type ExtensionListProps = Omit<ExtensionToggleProps, 'extensionName' | 'extensionDescription'> &
@@ -42,6 +47,11 @@ type ExtensionListProps = Omit<ExtensionToggleProps, 'extensionName' | 'extensio
      * Optional flag to set the list as a gallery, square cards instead of wide cards
      */
     isGallery?: boolean;
+
+    /**
+     * Optional flag to set if you want an icon (Avatar) to appear for all the extensions in the list that have filePath set
+     */
+    hasIcons?: boolean;
   }>;
 
 /**
@@ -52,9 +62,10 @@ type ExtensionListProps = Omit<ExtensionToggleProps, 'extensionName' | 'extensio
 export default function ExtensionList({
   extensions,
   toggledExtensionNames,
+  headerAction,
   handleExtensionToggle,
   label,
-  hasIcon,
+  hasIcons,
   isGallery,
   children,
 }: ExtensionListProps) {
@@ -70,11 +81,12 @@ export default function ExtensionList({
           <ExtensionToggle
             className={extensionToggleClassName}
             key={ext.name}
-            hasIcon={hasIcon}
+            iconFilePath={hasIcons ? ext.filePath : undefined}
             extensionName={ext.name}
             extensionDescription={ext.description}
             toggledExtensionNames={toggledExtensionNames}
             handleExtensionToggle={handleExtensionToggle}
+            headerAction={headerAction}
           >
             {isGallery ? (
               <div className="action-buttons">
diff --git a/src/renderer/components/extension-manager/extension-manager-tab.component.tsx b/src/renderer/components/extension-manager/extension-manager-tab.component.tsx
index 6e5d50e75d..925c270eba 100644
--- a/src/renderer/components/extension-manager/extension-manager-tab.component.tsx
+++ b/src/renderer/components/extension-manager/extension-manager-tab.component.tsx
@@ -15,42 +15,49 @@ export function fetchExtensions(): Extension[] {
       description: 'Edit Scripture Text',
       hasUpdateAvailable: false,
       isInstalled: true,
+      filePath: undefined,
     } as Extension,
     {
       name: 'Resource Viewer',
       description: 'View Scripture resources',
       hasUpdateAvailable: false,
       isInstalled: true,
+      filePath: undefined,
     } as Extension,
     {
       name: 'Parallel Passages',
       description: 'Compare parallel passages of Scripture',
       hasUpdateAvailable: true,
       isInstalled: true,
+      filePath: undefined,
     } as Extension,
     {
       name: 'Psalms layer-by-layer',
       description: 'Provide resources on the Psalms from Cambridge Digital Bible Research',
       hasUpdateAvailable: true,
       isInstalled: true,
+      filePath: undefined,
     } as Extension,
     {
       name: 'Hello World',
       description: 'Example Bundled Extension',
       hasUpdateAvailable: false,
       isInstalled: true,
+      filePath: undefined,
     } as Extension,
     {
       name: 'Hello Someone',
       description: 'Example Bundled Extension',
       hasUpdateAvailable: true,
       isInstalled: false,
+      filePath: undefined,
     } as Extension,
     {
       name: 'Quick Verse',
       description: 'Example Bundled Extension',
       hasUpdateAvailable: false,
       isInstalled: false,
+      filePath: 'papi-extension://quick-verse/assets/letter-q.png',
     } as Extension,
   ];
 }
@@ -89,7 +96,8 @@ export default function ExtensionManagerTab() {
           handleExtensionToggle={handleExtensionToggle}
           label="Installed Extensions Gallery Example"
           isGallery
-          hasIcon
+          hasIcons
+          headerAction={<Button className="primary">Add</Button>}
         />
       </div>
       <div className="extension-manager-actions">
diff --git a/src/renderer/components/extension-manager/extension-toggle.component.tsx b/src/renderer/components/extension-manager/extension-toggle.component.tsx
index 0fccbdb25c..42ebcd5ff4 100644
--- a/src/renderer/components/extension-manager/extension-toggle.component.tsx
+++ b/src/renderer/components/extension-manager/extension-toggle.component.tsx
@@ -22,18 +22,20 @@ export type ExtensionToggleProps = ExtensionCardProps &
 export default function ExtensionToggle({
   toggledExtensionNames,
   handleExtensionToggle,
+  headerAction,
   extensionName,
   extensionDescription,
-  hasIcon,
+  iconFilePath,
   className,
   children,
 }: ExtensionToggleProps) {
   return (
     <ExtensionCard
       className={className}
-      hasIcon={hasIcon}
+      iconFilePath={iconFilePath}
       extensionName={extensionName}
       extensionDescription={extensionDescription}
+      headerAction={headerAction}
     >
       {children}
       <div className="switch-container">