diff --git a/.talismanrc b/.talismanrc
index c121e691e5..71719052cd 100644
--- a/.talismanrc
+++ b/.talismanrc
@@ -42,8 +42,7 @@ fileignoreconfig:
 - filename: shared/storage.ts
   checksum: c8d874aa373bdf526bf59192139822f56915e702ef673bac4e0d7549b0fea3d0
 - filename: screens/Issuers/IssuersScreen.tsx
-  checksum: bc12c43ccc27ac04e5763fa6a6ed3cee63e4362ba5666c160b5e53269de924ab
-  checksum: 9a61cd59a3718adf1f14faf3024fec66a3295ef373878a878a28e5cb1287afaa
+  checksum: 9c53e3770dbefe26e0de67ee4b7d5cc9c52d9823cbb136a1a5104dcb0a101071
 - filename: ios/Podfile.lock
   checksum: edad9c2d11b0b3ed819cb0dcbfaf0515d31adb8116223c07f7b7b79e6689fe96
 - filename: screens/Home/IntroSlidersScreen.tsx
diff --git a/components/openId4VCI/Issuer.tsx b/components/openId4VCI/Issuer.tsx
index 5a6a6aa482..08b9852292 100644
--- a/components/openId4VCI/Issuer.tsx
+++ b/components/openId4VCI/Issuer.tsx
@@ -1,15 +1,13 @@
 import React from 'react';
 import {Image, Pressable} from 'react-native';
 import {Theme} from '../ui/styleUtils';
-import {useTranslation} from 'react-i18next';
 import testIDProps from '../../shared/commonUtil';
 import {Text} from '../ui';
+import {displayType} from '../../machines/issuersMachine';
 
 export const Issuer: React.FC<IssuerProps> = (props: IssuerProps) => {
-  const {t} = useTranslation('IssuersScreen');
-
   function getIssuerLogo() {
-    return {uri: props.logoUrl};
+    return {uri: props.displayDetails.logo.url};
   }
 
   return (
@@ -30,26 +28,25 @@ export const Issuer: React.FC<IssuerProps> = (props: IssuerProps) => {
       <Image
         {...testIDProps(`issuerIcon-${props.testID}`)}
         style={Theme.IssuersScreenStyles.issuerIcon}
+        alt={props.displayDetails.logo.alt_text}
         source={getIssuerLogo()}
       />
       <Text
         testID={`issuerHeading-${props.testID}`}
         style={Theme.IssuersScreenStyles.issuerHeading}>
-        {t('itemHeading', {issuer: props.displayName})}
+        {props.displayDetails.title}
       </Text>
       <Text
         testID={`issuerDescription-${props.testID}`}
         style={Theme.IssuersScreenStyles.issuerDescription}>
-        {t('itemSubHeading')}
+        {props.displayDetails.description}
       </Text>
     </Pressable>
   );
 };
 
 interface IssuerProps {
-  id: string;
-  displayName: string;
-  logoUrl: string;
+  displayDetails: displayType;
   onPress: () => void;
   testID: string;
 }
diff --git a/components/ui/SearchBar.tsx b/components/ui/SearchBar.tsx
new file mode 100644
index 0000000000..bf28b7dd03
--- /dev/null
+++ b/components/ui/SearchBar.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import {TextInput} from 'react-native';
+import {Icon} from 'react-native-elements';
+import {Row} from './Layout';
+import {Theme} from './styleUtils';
+
+export const SearchBar = (props: SearchBarProps) => {
+  return (
+    <Row margin="3">
+      <Icon
+        testID={props.searchIconTestID}
+        name="search"
+        color={Theme.Colors.GrayIcon}
+        size={27}
+        style={Theme.SearchBarStyles.searchIcon}
+      />
+      <TextInput
+        testID={props.searchBarTestID}
+        style={Theme.SearchBarStyles.searchBar}
+        placeholder={props.placeholder}
+        value={props.search}
+        onChangeText={searchText => props.onChangeText(searchText)}
+        onLayout={props.onLayout}
+      />
+    </Row>
+  );
+};
+
+interface SearchBarProps {
+  searchIconTestID: string;
+  searchBarTestID: string;
+  search: string;
+  placeholder: string;
+  onChangeText: (searchText: string) => void;
+  onLayout: () => void;
+}
diff --git a/components/ui/themes/DefaultTheme.ts b/components/ui/themes/DefaultTheme.ts
index 6f32240505..8075f02a22 100644
--- a/components/ui/themes/DefaultTheme.ts
+++ b/components/ui/themes/DefaultTheme.ts
@@ -774,6 +774,30 @@ export const DefaultTheme = {
       flexDirection: 'column',
     },
   }),
+  SearchBarStyles: StyleSheet.create({
+    searchIcon: {
+      justifyContent: 'center',
+      paddingLeft: 15,
+      height: Dimensions.get('window').height * 0.055,
+      width: Dimensions.get('window').width * 0.1,
+      borderColor: Colors.Gray50,
+      borderTopWidth: 1,
+      borderBottomWidth: 1,
+      borderLeftWidth: 1,
+      borderTopLeftRadius: 9,
+      borderBottomLeftRadius: 9,
+    },
+    searchBar: {
+      borderWidth: 1,
+      borderColor: Colors.Gray50,
+      height: Dimensions.get('window').height * 0.055,
+      width: Dimensions.get('window').width * 0.84,
+      paddingLeft: 12,
+      borderLeftWidth: 0,
+      borderTopRightRadius: 9,
+      borderBottomRightRadius: 9,
+    },
+  }),
   ButtonStyles: StyleSheet.create({
     fill: {
       flex: 1,
@@ -1184,28 +1208,6 @@ export const DefaultTheme = {
     },
   }),
   IssuersScreenStyles: StyleSheet.create({
-    issuersSearchBar: {
-      borderWidth: 1,
-      borderColor: Colors.Gray50,
-      height: Dimensions.get('window').height * 0.055,
-      width: Dimensions.get('window').width * 0.84,
-      paddingLeft: 12,
-      borderLeftWidth: 0,
-      borderTopRightRadius: 9,
-      borderBottomRightRadius: 9,
-    },
-    searchIcon: {
-      justifyContent: 'center',
-      paddingLeft: 15,
-      height: Dimensions.get('window').height * 0.055,
-      width: Dimensions.get('window').width * 0.1,
-      borderColor: Colors.Gray50,
-      borderTopWidth: 1,
-      borderBottomWidth: 1,
-      borderLeftWidth: 1,
-      borderTopLeftRadius: 9,
-      borderBottomLeftRadius: 9,
-    },
     issuerListOuterContainer: {
       padding: 10,
       flex: 1,
diff --git a/components/ui/themes/PurpleTheme.ts b/components/ui/themes/PurpleTheme.ts
index 0975c478e9..55edf73ec6 100644
--- a/components/ui/themes/PurpleTheme.ts
+++ b/components/ui/themes/PurpleTheme.ts
@@ -778,6 +778,30 @@ export const PurpleTheme = {
       flexDirection: 'column',
     },
   }),
+  SearchBarStyles: StyleSheet.create({
+    searchIcon: {
+      justifyContent: 'center',
+      backgroundColor: Colors.Gray50,
+      height: Dimensions.get('window').height * 0.055,
+      width: Dimensions.get('window').width * 0.1,
+      borderColor: Colors.Gray50,
+      borderTopWidth: 1,
+      borderBottomWidth: 1,
+      borderLeftWidth: 1,
+      borderTopLeftRadius: 9,
+      borderBottomLeftRadius: 9,
+    },
+    searchBar: {
+      borderWidth: 1,
+      borderColor: Colors.Gray50,
+      height: Dimensions.get('window').height * 0.055,
+      width: Dimensions.get('window').width * 0.84,
+      paddingLeft: 12,
+      borderLeftWidth: 0,
+      borderTopRightRadius: 9,
+      borderBottomRightRadius: 9,
+    },
+  }),
   ButtonStyles: StyleSheet.create({
     fill: {
       flex: 1,
@@ -1188,28 +1212,6 @@ export const PurpleTheme = {
     },
   }),
   IssuersScreenStyles: StyleSheet.create({
-    issuersSearchBar: {
-      borderWidth: 1,
-      borderColor: Colors.Gray50,
-      height: Dimensions.get('window').height * 0.055,
-      width: Dimensions.get('window').width * 0.84,
-      paddingLeft: 12,
-      borderLeftWidth: 0,
-      borderTopRightRadius: 9,
-      borderBottomRightRadius: 9,
-    },
-    searchIcon: {
-      justifyContent: 'center',
-      backgroundColor: Colors.Gray50,
-      height: Dimensions.get('window').height * 0.055,
-      width: Dimensions.get('window').width * 0.1,
-      borderColor: Colors.Gray50,
-      borderTopWidth: 1,
-      borderBottomWidth: 1,
-      borderLeftWidth: 1,
-      borderTopLeftRadius: 9,
-      borderBottomLeftRadius: 9,
-    },
     issuerListOuterContainer: {
       padding: 10,
       flex: 1,
diff --git a/machines/issuersMachine.ts b/machines/issuersMachine.ts
index d08572664a..9544543b7d 100644
--- a/machines/issuersMachine.ts
+++ b/machines/issuersMachine.ts
@@ -710,6 +710,8 @@ export interface displayType {
   name: string;
   logo: logoType;
   language: string;
+  title: string;
+  description: string;
 }
 export interface issuerType {
   credential_issuer: string;
diff --git a/screens/Issuers/IssuersScreen.tsx b/screens/Issuers/IssuersScreen.tsx
index 33a51d7147..606a7d73b8 100644
--- a/screens/Issuers/IssuersScreen.tsx
+++ b/screens/Issuers/IssuersScreen.tsx
@@ -1,6 +1,6 @@
 import React, {useLayoutEffect, useState} from 'react';
 import {useTranslation} from 'react-i18next';
-import {FlatList, Image, TextInput, View} from 'react-native';
+import {FlatList, Image, View} from 'react-native';
 import {Issuer} from '../../components/openId4VCI/Issuer';
 import {Error} from '../../components/ui/Error';
 import {Header} from '../../components/ui/Header';
@@ -23,8 +23,8 @@ import {
   sendStartEvent,
 } from '../../shared/telemetry/TelemetryUtils';
 import {TelemetryConstants} from '../../shared/telemetry/TelemetryConstants';
-import {Icon} from 'react-native-elements';
 import {MessageOverlay} from '../../components/MessageOverlay';
+import {SearchBar} from '../../components/ui/SearchBar';
 
 export const IssuersScreen: React.FC<
   HomeRouteProps | RootRouteProps
@@ -190,23 +190,14 @@ export const IssuersScreen: React.FC<
             }}>
             {t('description')}
           </Text>
-          <Row margin="3">
-            <Icon
-              testID="searchIssuerIcon"
-              name="search"
-              color={Theme.Colors.GrayIcon}
-              size={27}
-              style={Theme.IssuersScreenStyles.searchIcon}
-            />
-            <TextInput
-              testID="issuerSearchBar"
-              style={Theme.IssuersScreenStyles.issuersSearchBar}
-              placeholder={t('searchByIssuersName')}
-              value={search}
-              onChangeText={searchText => filterIssuers(searchText)}
-              onLayout={() => filterIssuers('')}
-            />
-          </Row>
+          <SearchBar
+            searchIconTestID="searchIssuerIcon"
+            searchBarTestID="issuerSearchBar"
+            search={search}
+            placeholder={t('searchByIssuersName')}
+            onChangeText={filterIssuers}
+            onLayout={() => filterIssuers('')}
+          />
 
           <View style={Theme.IssuersScreenStyles.issuersContainer}>
             {controller.issuers.length > 0 && (
@@ -216,14 +207,9 @@ export const IssuersScreen: React.FC<
                   <Issuer
                     testID={removeWhiteSpace(item.credential_issuer)}
                     key={item.credential_issuer}
-                    id={item.credential_issuer}
-                    displayName={
-                      getDisplayObjectForCurrentLanguage(item.display)?.name
-                    }
-                    logoUrl={
-                      getDisplayObjectForCurrentLanguage(item.display)?.logo
-                        ?.url
-                    }
+                    displayDetails={getDisplayObjectForCurrentLanguage(
+                      item.display,
+                    )}
                     onPress={() =>
                       onPressHandler(item.credential_issuer, item.protocol)
                     }
@@ -231,7 +217,7 @@ export const IssuersScreen: React.FC<
                   />
                 )}
                 numColumns={2}
-                keyExtractor={item => item.id}
+                keyExtractor={item => item.credential_issuer}
               />
             )}
           </View>