diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7104eb8..d71b7d3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Enhance contribution guidelines: Refactored shell scripts, added additional steps. (#91)
 
+### Changed
+- Updated the error display to a modern UI. (#131)
+
 ## [1.2.1] - 2024-02-29
 
 ### Changed
diff --git a/zimui/src/components/ErrorDisplay.vue b/zimui/src/components/ErrorDisplay.vue
index 84fdcee..1981a03 100644
--- a/zimui/src/components/ErrorDisplay.vue
+++ b/zimui/src/components/ErrorDisplay.vue
@@ -8,25 +8,77 @@ const errimage = ref(errimageData)
 </script>
 
 <template>
-  <div class="error-container">
-    <img :src="errimage" class="error-image" />
-    <p class="error-text">{{ main.errorMessage }}</p>
-    <p class="error-text">{{ main.errorDetails }}</p>
+  <div class="error-page">
+    <div class="error-container">
+      <div class="error-content">
+        <p class="error-text">{{ main.errorMessage }}</p>
+        <p class="error-text">{{ main.errorDetails }}</p>
+      </div>
+      <div class="error-image-container">
+        <img :src="errimage" class="error-image" alt="error image" />
+      </div>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.error-container {
+
+.error-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px;
   text-align: center;
-  padding: 20px;
 }
 
-.error-image {
-  width: 300px;
-  margin-bottom: 20px;
+.error-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 40px;
+  margin: 60px 0;
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  padding: 40px;
+}
+
+.error-content {
+  flex: 1;
+  text-align: left;
 }
 
 .error-text {
-  font-size: 16px;
+  color: #222;
+  margin: 10px 0;
+  max-width: 500px;
+  line-height: 1.6;
+  font-size: 18px;
+}
+
+.error-image-container {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.error-image {
+  width: 400px;
+  height: auto;
+}
+
+@media (max-width: 768px) {
+  .error-container {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .error-text {
+    margin: 20px auto;
+    font-size: 16px;
+  }
+  
+  .error-image {
+    width: 300px;
+  }
 }
-</style>
+</style>
\ No newline at end of file