diff --git a/src/components/ErrorBanner.tsx b/src/components/ErrorBanner.tsx
new file mode 100644
index 0000000..e4588ad
--- /dev/null
+++ b/src/components/ErrorBanner.tsx
@@ -0,0 +1,49 @@
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { colors, spacing } from "../theme";
+
+interface ErrorBannerProps {
+  message: string;
+  onRetry: () => void;
+}
+
+export function ErrorBanner({ message, onRetry }: ErrorBannerProps) {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.message}>{message}</Text>
+      <Pressable onPress={onRetry} style={styles.retryButton}>
+        <Text style={styles.retryText}>Retry</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "#fecaca",
+    backgroundColor: "#fef2f2",
+    padding: spacing.md,
+    gap: spacing.sm,
+  },
+  message: {
+    color: colors.danger,
+    fontSize: 14,
+  },
+  retryButton: {
+    alignSelf: "flex-start",
+    borderRadius: 8,
+    backgroundColor: colors.danger,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    minHeight: 44,
+    minWidth: 44,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  retryText: {
+    color: "#ffffff",
+    fontWeight: "600",
+    fontSize: 13,
+  },
+});
diff --git a/src/screens/CatalogScreen.tsx b/src/screens/CatalogScreen.tsx
index 74c5534..c972fad 100644
--- a/src/screens/CatalogScreen.tsx
+++ b/src/screens/CatalogScreen.tsx
@@ -13,6 +13,7 @@ import { StatusBar } from "expo-status-bar";
 import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
 
 import { fetchCatalog, fetchRegistryStatus, getApiBaseUrl } from "../api/resources";
+import { ErrorBanner } from "../components/ErrorBanner";
 import { ResourceCard } from "../components/ResourceCard";
 import { SkeletonCard } from "../components/SkeletonCard";
 import type { RootStackParamList } from "../navigation";
@@ -128,12 +129,7 @@ export function CatalogScreen({ navigation }: CatalogScreenProps) {
             <Text style={styles.apiHint}>API: {getApiBaseUrl()}</Text>
 
             {error ? (
-              <View style={styles.errorBanner}>
-                <Text style={styles.errorText}>{error}</Text>
-                <Pressable onPress={() => void loadData()} style={styles.retryButton}>
-                  <Text style={styles.retryText}>Retry</Text>
-                </Pressable>
-              </View>
+              <ErrorBanner message={error} onRetry={() => void loadData()} />
             ) : null}
 
             {loading ? (
@@ -198,30 +194,6 @@ const styles = StyleSheet.create({
     fontSize: 11,
     color: colors.textSubtle,
   },
-  errorBanner: {
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: "#fecaca",
-    backgroundColor: "#fef2f2",
-    padding: spacing.md,
-    gap: spacing.sm,
-  },
-  errorText: {
-    color: colors.danger,
-    fontSize: 14,
-  },
-  retryButton: {
-    alignSelf: "flex-start",
-    borderRadius: 8,
-    backgroundColor: colors.danger,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-  },
-  retryText: {
-    color: "#ffffff",
-    fontWeight: "600",
-    fontSize: 13,
-  },
   skeletons: {
     gap: 12,
   },