diff --git a/src/main/resources/static/css/error.css b/src/main/resources/static/css/error.css
index 5cc37b61..40ff7669 100644
--- a/src/main/resources/static/css/error.css
+++ b/src/main/resources/static/css/error.css
@@ -1,17 +1,8 @@
-h1 {
-  text-align: center;
-  margin-top: 10%;
-}
-
 p {
   text-align: center;
   margin-top: 2em;
 }
 
-.button:hover {
-  background-color: #005b7f;
-}
-
 .features-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(21rem, 3fr));
@@ -31,58 +22,21 @@ p {
   flex: 1;
 }
 
-#support-section {
-  background-color: #f9f9f9;
-  padding: 4rem;
-  margin-top: 1rem;
-  text-align: center;
-}
-
-#support-section h1 {
-  margin-top: 0;
-}
-
-#support-section p {
-  margin-top: 0;
-}
-
 #button-group {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
 }
 
+#home-button,
 #github-button,
 #discord-button {
   display: inline-block;
   padding: 1rem 2rem;
   margin: 1rem;
-  background-color: #008cba;
-  color: #fff;
   font-size: 1.2rem;
   text-align: center;
   text-decoration: none;
   border-radius: 3rem;
   transition: all 0.3s ease-in-out;
-}
-
-#github-button:hover,
-#discord-button:hover,
-.home-button:hover {
-  background-color: #005b7f;
-}
-
-.home-button {
-  display: block;
-  width: 200px;
-  height: 50px;
-  margin: 2em auto;
-  background-color: #008cba;
-  color: white;
-  text-align: center;
-  line-height: 50px;
-  text-decoration: none;
-  font-weight: bold;
-  border-radius: 25px;
-  transition: all 0.3s ease-in-out;
-}
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/errorBanner.css b/src/main/resources/static/css/errorBanner.css
index 75618731..adeb3dfa 100644
--- a/src/main/resources/static/css/errorBanner.css
+++ b/src/main/resources/static/css/errorBanner.css
@@ -1,5 +1,6 @@
 #errorContainer {
-  margin: 20px; /* adjust this value as needed */
+  margin: 1rem 0rem 2rem;
+  border-radius: 3rem;
 }
 
 #helpModalDialog {
@@ -18,7 +19,7 @@
 }
 
 #helpModal .button:hover {
-  background-color: #005b7f;
+  background-color: var(--md-sys-color-primary);
 }
 
 #helpModal .features-container {
@@ -40,58 +41,21 @@
   flex: 1;
 }
 
-#support-section {
-  background-color: #f9f9f9;
-  padding: 4rem;
-  margin-top: 1rem;
-  text-align: center;
-}
-
-#support-section h1 {
-  margin-top: 0;
-}
-
-#support-section p {
-  margin-top: 0;
-}
-
 #button-group {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
 }
 
+#home-button,
 #github-button,
 #discord-button {
   display: inline-block;
   padding: 1rem 2rem;
   margin: 1rem;
-  background-color: #008cba;
-  color: #fff;
   font-size: 1.2rem;
   text-align: center;
   text-decoration: none;
   border-radius: 3rem;
   transition: all 0.3s ease-in-out;
-}
-
-#github-button:hover,
-#discord-button:hover,
-.home-button:hover {
-  background-color: #005b7f;
-}
-
-.home-button {
-  display: block;
-  width: 200px;
-  height: 50px;
-  margin: 2em auto;
-  background-color: #008cba;
-  color: white;
-  text-align: center;
-  line-height: 50px;
-  text-decoration: none;
-  font-weight: bold;
-  border-radius: 25px;
-  transition: all 0.3s ease-in-out;
-}
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/theme/componentes.css b/src/main/resources/static/css/theme/componentes.css
index 5ea175d4..3f297895 100644
--- a/src/main/resources/static/css/theme/componentes.css
+++ b/src/main/resources/static/css/theme/componentes.css
@@ -879,4 +879,31 @@ textarea.form-control {
 
 .list-group-item .btn {
   padding: .375rem .5rem;
+}
+
+/*Alert */
+.alert-container {
+  padding: 2rem 3rem;
+  border-radius: 3rem;
+  margin: 1rem 0rem 2rem;
+}
+
+.alert-header {
+  display: flex !important;
+  justify-content: space-between;
+}
+
+.alert-heading {
+  font-size: calc(1.275rem + .3vw);
+}
+
+.alert-dismissible .btn-close {
+  position: relative;
+  padding: 0;
+}
+
+.alert-danger {
+  color: var(--md-sys-color-on-error-container);
+  background-color: var(--md-sys-color-error-container);
+  border-color: transparent;
 }
\ No newline at end of file
diff --git a/src/main/resources/templates/error.html b/src/main/resources/templates/error.html
index d896ecbc..61c69c24 100644
--- a/src/main/resources/templates/error.html
+++ b/src/main/resources/templates/error.html
@@ -8,9 +8,9 @@
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <div th:insert="~{fragments/errorBanner.html :: errorBanner}"></div>
         <div class="container">
-          <div id="support-section">
+          <div th:insert="~{fragments/errorBanner.html :: errorBanner}"></div>
+          <div id="bg-card" class="text-center">
             <h1 class="display-2" th:text="#{oops}"></h1>
             <p class="lead" th:if="${param.status == '404'}" th:text="#{error.404.1}"></p>
             <p class="lead" th:unless="${param.status == '404'}" th:text="#{error.404.2}"></p>
@@ -18,10 +18,10 @@
             <h2 th:text="#{error.needHelp}"></h2>
             <p th:text="#{error.contactTip}"></p>
             <div id="button-group">
-              <a href="https://github.com/Stirling-Tools/Stirling-PDF/issues" id="github-button" target="_blank" th:text="#{error.github}"></a>
-              <a href="https://discord.gg/Cn8pWhQRxZ" id="discord-button" target="_blank" th:text="#{joinDiscord}"></a>
+              <a href="https://github.com/Stirling-Tools/Stirling-PDF/issues" id="github-button" class="btn btn-primary" target="_blank" th:text="#{error.github}"></a>
+              <a href="https://discord.gg/Cn8pWhQRxZ" id="discord-button" class="btn btn-primary" target="_blank" th:text="#{joinDiscord}"></a>
             </div>
-            <a href="/" class="home-button"  th:text="#{goHomepage}"></a>
+            <a href="/" id="home-button" class="home-button btn btn-primary"  th:text="#{goHomepage}"></a>
           </div>
         </div>
       </div>
diff --git a/src/main/resources/templates/fragments/errorBanner.html b/src/main/resources/templates/fragments/errorBanner.html
index a5070422..66908390 100644
--- a/src/main/resources/templates/fragments/errorBanner.html
+++ b/src/main/resources/templates/fragments/errorBanner.html
@@ -1,12 +1,18 @@
 <th:block th:fragment="errorBanner">
 
-  <br  th:if="${message}">
-  <div id="errorContainer" th:if="${message}" class="alert alert-danger alert-dismissible fade show" role="alert">
-    <h4 class="alert-heading" th:text="'Error:  ' + ${status} + '  ' + ${error}"></h4>
+  <br th:if="${message}">
+  <div id="errorContainer" th:if="${message}" class="alert alert-danger alert-dismissible alert-container fade show" role="alert">
+    <div class="alert-header d-flex">
+      <span class="alert-heading" th:text="'Error:  ' + ${status} + '  ' + ${error}"></span>
+      <button type="button" class="btn btn-danger" th:if="${trace}" onclick="toggletrace()" th:text="#{error.showStack}"></button>
+      <button type="button" class="btn btn-secondary" th:if="${trace}" onclick="copytrace()" th:text="#{error.copyStack}"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" onclick="dismissError()">
+        <span class="material-symbols-rounded">
+          close
+        </span>
+      </button>
+    </div>
     <p th:text="${message} + ' for path: ' + ${path}"></p>
-    <button type="button" class="btn btn-danger" th:if="${trace}" onclick="toggletrace()" th:text="#{error.showStack}"></button>
-    <button type="button" class="btn btn-secondary" th:if="${trace}" onclick="copytrace()" th:text="#{error.copyStack}"></button>
-    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" onclick="dismissError()"></button>
     <!-- Stack trace section -->
     <div id="trace" th:if="${trace}" style="max-height: 0; overflow: hidden;">
       <div style="background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 3px; padding: 10px; margin-top: 5px;">
@@ -34,7 +40,7 @@
 
     function copytrace() {
       var flip = false
-      if(!traceVisible) {
+      if (!traceVisible) {
         toggletrace()
         flip = true
       }
@@ -45,7 +51,7 @@
       window.getSelection().addRange(range);
       document.execCommand("copy");
       window.getSelection().removeAllRanges();
-      if(flip){
+      if (flip) {
         toggletrace()
       }
     }
@@ -53,7 +59,7 @@
     function dismissError() {
       var errorContainer = document.getElementById("errorContainer");
       errorContainer.style.display = "none";
-      errorContainer.style.height ="0";
+      errorContainer.style.height = "0";
     }
 
     function adjustContainerHeight() {
@@ -66,4 +72,4 @@
       }
     }
   </script>
-</th:block>
+</th:block>
\ No newline at end of file