diff --git a/src/app/service-unavailable/service-unavailable.component.css b/src/app/service-unavailable/service-unavailable.component.css
index 0e1cb58f25937e6781cd02dcad8a9dc342c40b24..2834642a3bc863ecee6caa8c8eecd95656984225 100644
--- a/src/app/service-unavailable/service-unavailable.component.css
+++ b/src/app/service-unavailable/service-unavailable.component.css
@@ -33,3 +33,19 @@
     right: 0;
     left: auto;
 }
+.position{
+    flex-direction: column;
+    width: 90%;
+}
+.size{
+    width: 100%;
+}
+@media (min-width: 700px){
+    .position{
+        flex-direction: row;
+        width: 60%;
+    }
+    .size{
+        width: 50%;
+    }
+}
diff --git a/src/app/service-unavailable/service-unavailable.component.html b/src/app/service-unavailable/service-unavailable.component.html
index ae8f1cc0a0c84a03c5a491f67cb31bef4517ccef..e491fa18040e8e81faf3a3b618e4abc3ee141e8d 100644
--- a/src/app/service-unavailable/service-unavailable.component.html
+++ b/src/app/service-unavailable/service-unavailable.component.html
@@ -1,32 +1,41 @@
 <div>
-  <div id="service-denied" class="col-md-offset-4 col-sm-offset-3 col-xs-offset-1 col-md-4 col-sm-6 col-xs-10">
-    <div class="border-denied col-xs-12" style="width: 100%; height: 100%;">
-      <div class="col-xs-9"><h1 class="text-danger">Ooops!</h1></div>
-      <div class="col-xs-3">
-        <div class="dropdown">
-          <a style="display: inline-block" class="dropdown-toggle dropdown-lang" aria-expanded="false" aria-haspopup="true"
-             data-toggle="dropdown" href="#" role="button">
-            <img alt="language" class="lang-circle-icon" src="{{[getPathToCurrent()]}}"/>
-          </a>
-          <ul class="dropdown-menu pull-right-drop">
-            <li *ngFor="let lang of languages" [ngClass]="{'active': getCurrent() == lang}">
-              <a (click)="useLanguage(lang)">
-                <img alt="lang flag" class="lang-circle-icon"
-                     src="assets/images/country/{{lang}}_circle.png"/>
-                <span>{{lang.toUpperCase()}}</span>
+  <div>
+    <div id="service-denied" style="display: flex; justify-content: center">
+      <div class="position" style=" height: 100%; display: flex; justify-content: center">
+        <div class="size">
+          <img src="assets/images/error/500.gif" width="60%">
+        </div>
+        <div class="size">
+          <div class="col-xs-9"><h1 class="text-danger">Ooops!</h1></div>
+          <div class="col-xs-3">
+            <div class="dropdown">
+              <a style="display: inline-block" class="dropdown-toggle dropdown-lang" aria-expanded="false" aria-haspopup="true"
+                 data-toggle="dropdown" href="#" role="button">
+                <img alt="language" class="lang-circle-icon" src="{{[getPathToCurrent()]}}"/>
               </a>
-            </li>
-          </ul>
+              <ul class="dropdown-menu pull-right-drop">
+                <li *ngFor="let lang of languages" [ngClass]="{'active': getCurrent() == lang}">
+                  <a (click)="useLanguage(lang)">
+                    <img alt="lang flag" class="lang-circle-icon"
+                         src="assets/images/country/{{lang}}_circle.png"/>
+                    <span>{{lang.toUpperCase()}}</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="col-xs-12">
+            <h2>{{ "SERVICE_UNAVAILABLE.HEADER" | translate }}</h2>
+            <p>
+              {{ "SERVICE_UNAVAILABLE.TEXT_FIRST_PART" | translate }}
+              <br>
+              {{ "SERVICE_UNAVAILABLE.TEXT_SECOND_PART" | translate }}
+            </p>
+          </div>
         </div>
-      </div>
-      <div class="col-xs-12">
-        <h2>{{ "SERVICE_UNAVAILABLE.HEADER" | translate }}</h2>
-        <p>
-          {{ "SERVICE_UNAVAILABLE.TEXT_FIRST_PART" | translate }}
-          <br>
-          {{ "SERVICE_UNAVAILABLE.TEXT_SECOND_PART" | translate }}
-        </p>
+
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+
+</div>
diff --git a/src/app/shared/page-not-found/page-not-found.component.css b/src/app/shared/page-not-found/page-not-found.component.css
index 4b95259c1d5ed91b207078afdcffa3a2bd3c9224..81255a0b4ffd0b6f3f6e72de771581796a4648da 100644
--- a/src/app/shared/page-not-found/page-not-found.component.css
+++ b/src/app/shared/page-not-found/page-not-found.component.css
@@ -1,8 +1,15 @@
 .container-fluid {
     min-height: 100vh;
+    padding: 25px;
     background-repeat: no-repeat;
     background-color: rgb(255, 255, 255);
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-direction: column;
+}
+@media (min-width: 700px){
+    .container-fluid{
+        flex-direction: row;
+    }
 }
diff --git a/src/app/shared/page-not-found/page-not-found.component.html b/src/app/shared/page-not-found/page-not-found.component.html
index 750a137980ea08e1d838a24feabbebf5cd9ef8bc..64b11d2695c7b7e0c9db9c59d82fe8b5b026bc11 100644
--- a/src/app/shared/page-not-found/page-not-found.component.html
+++ b/src/app/shared/page-not-found/page-not-found.component.html
@@ -1,7 +1,10 @@
 <div class="container-fluid">
+  <div>
+    <img src="assets/images/error/404.gif" width="60%">
+  </div>
   <div class="row">
-    <h1>Page not found</h1>
-    <p>The page you requested was not found. Click button below to go back to previous page.</p>
+    <h1>Oops! Something went wrong.</h1>
+    <p>Our robot couldn't find this page. Try a different link or head back to the homepage.</p>
     <button class="btn btn-primary" type="button" (click)="redirect()">Go back</button>
   </div>
 </div>
diff --git a/src/assets/images/error/404.gif b/src/assets/images/error/404.gif
new file mode 100644
index 0000000000000000000000000000000000000000..735645ca42011910dbdbe352acd506c32c78fb4b
Binary files /dev/null and b/src/assets/images/error/404.gif differ
diff --git a/src/assets/images/error/500.gif b/src/assets/images/error/500.gif
new file mode 100644
index 0000000000000000000000000000000000000000..97436222cfeb880ec883389a582ef6349858cb0a
Binary files /dev/null and b/src/assets/images/error/500.gif differ