diff --git a/zimui/src/components/ErrorDisplay.vue b/zimui/src/components/ErrorDisplay.vue
new file mode 100644
index 0000000..57d8337
--- /dev/null
+++ b/zimui/src/components/ErrorDisplay.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useMainStore } from '../stores/main';
+import errimageData from '../assets/Error.jpg'
+
+const main = useMainStore()
+const errimage = ref(errimageData)
+</script>
+
+<template>
+  <div class="error-container">
+    <img :src="errimage" class="error-image" />
+    <p class="error-text">{{ main.errorMessage }}</p>
+  </div>
+</template>
+
+<style scoped>
+.error-container {
+  text-align: center;
+  padding: 20px;
+}
+
+.error-image {
+  width: 300px;
+  margin-bottom: 20px; 
+}
+
+.error-text {
+  color: black;
+  font-size: 16px;
+}
+</style>
diff --git a/zimui/src/components/TopicHome.vue b/zimui/src/components/TopicHome.vue
index 343f776..89d226c 100644
--- a/zimui/src/components/TopicHome.vue
+++ b/zimui/src/components/TopicHome.vue
@@ -8,9 +8,8 @@ import TopicSectionType from '@/types/TopicSection'
 import { transformTopicSectionOrSubSectionToCardData } from '@/types/TopicCardData'
 import ToolBar from '../components/ToolBar.vue'
 import { useLoading } from 'vue-loading-overlay'
-import errimageData from '../assets/Error.jpg'
+import ErrorDisplay from './ErrorDisplay.vue'
 
-const errimage = ref(errimageData)
 const main = useMainStore()
 
 const props = defineProps({
@@ -24,7 +23,6 @@ const topic = ref<Topic>()
 const dataLoaded = ref(false)
 const $loading = useLoading()
 
-
 /** Retrieve topic data */
 const fetchData = async function () {
   const loader = $loading.show({
@@ -93,9 +91,8 @@ const goToPreviousPage = () => {
 </script>
 
 <template>
-  <div v-if="main.errorMessage" class="error-container">
-    <img :src="errimage" class="error-image" />
-    <p class="error-text">{{ main.errorMessage }}</p>
+  <div v-if="main.errorMessage">
+    <ErrorDisplay/>
   </div>
   <div v-else-if="topic" class="content">
     <nav
@@ -281,21 +278,4 @@ const goToPreviousPage = () => {
 footer {
   text-align: center;
 }
-
-.error-container {
-  text-align: center;
-  padding: 20px;
-}
-
-.error-image {
-  width: 300px;
-  margin-bottom: 20px; 
-}
-
-.error-text {
-  color: black; /* Black text color */
-  font-size: 16px;
-}
-
-
 </style>
diff --git a/zimui/src/pages/HomePage.vue b/zimui/src/pages/HomePage.vue
index 859ca53..d15db8f 100644
--- a/zimui/src/pages/HomePage.vue
+++ b/zimui/src/pages/HomePage.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import { onMounted, toRef, Ref, ref, watch} from 'vue'
+import { onMounted, toRef, Ref, ref, watch } from 'vue'
 import { RouteParams, useRoute } from 'vue-router'
-import errimageData from '../assets/Error.jpg'
-
-const errimage = ref(errimageData)
 
 import { useMainStore } from '../stores/main'
 const main = useMainStore()
@@ -33,12 +30,12 @@ onMounted(async () => {
 })
 
 import TopicHome from '../components/TopicHome.vue'
+import ErrorDisplay from '@/components/ErrorDisplay.vue'
 </script>
 
 <template>
-  <div v-if="main.errorMessage" class="error-container">
-    <img :src="errimage" class="error-image" />
-    <p class="error-text">{{ main.errorMessage }}</p>
+  <div v-if="main.errorMessage">
+    <ErrorDisplay />
   </div>
   <div v-else class="d-flex flex-column h-100">
     <div class="flex-fill flex-shrink-0">
@@ -47,19 +44,4 @@ import TopicHome from '../components/TopicHome.vue'
   </div>
 </template>
 
-<style scoped>
-.error-container {
-  text-align: center;
-  padding: 20px;
-}
-
-.error-image {
-  width: 300px;
-  margin-bottom: 20px; 
-}
-
-.error-text {
-  color: black; /* Black text color */
-  font-size: 16px;
-}
-</style>
+<style scoped></style>