diff --git a/src/res/images/AllenadultmousebrainreferenceatlasV3BrainAtlas.png b/src/res/images/AllenadultmousebrainreferenceatlasV3BrainAtlas.png
new file mode 100644
index 0000000000000000000000000000000000000000..897168863448a2efce76cd5496cd4154cc48545e
Binary files /dev/null and b/src/res/images/AllenadultmousebrainreferenceatlasV3BrainAtlas.png differ
diff --git a/src/res/images/BigBrainHistology.png b/src/res/images/BigBrainHistology.png
new file mode 100644
index 0000000000000000000000000000000000000000..94cc67bd8cae7c3701d9c3c6c15f2dc9be8400b6
Binary files /dev/null and b/src/res/images/BigBrainHistology.png differ
diff --git a/src/res/images/MNI152.png b/src/res/images/MNI152.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5d2276eff480aefe8ab7116c500d82b1201fbfa
Binary files /dev/null and b/src/res/images/MNI152.png differ
diff --git a/src/res/images/MNIColin27.png b/src/res/images/MNIColin27.png
new file mode 100644
index 0000000000000000000000000000000000000000..6993e50d6ef7484530a7df17b8ca5bee7bdac249
Binary files /dev/null and b/src/res/images/MNIColin27.png differ
diff --git a/src/res/images/WaxholmSpaceratbrainatlasv20.png b/src/res/images/WaxholmSpaceratbrainatlasv20.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a2b6cef1d493cad67ab3850d0bdd1969e7a6e21
Binary files /dev/null and b/src/res/images/WaxholmSpaceratbrainatlasv20.png differ
diff --git a/src/ui/nehubaContainer/splashScreen/splashScreen.component.ts b/src/ui/nehubaContainer/splashScreen/splashScreen.component.ts
index f1178af037d26f65036bc8c02d54d6218f00a567..b7b5d8e97d4c30cd00c4cf7cfc8982a74f21c64f 100644
--- a/src/ui/nehubaContainer/splashScreen/splashScreen.component.ts
+++ b/src/ui/nehubaContainer/splashScreen/splashScreen.component.ts
@@ -36,4 +36,8 @@ export class SplashScreen{
   get totalTemplates(){
     return this.constanceService.templateUrls.length
   }
+
+  correctString(name){
+    return name.replace(/[|&;$%@()+,\s./]/g, '')
+  }
 }
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/splashScreen/splashScreen.style.css b/src/ui/nehubaContainer/splashScreen/splashScreen.style.css
index d08929f3d9aaa5df9529eaf14714e71c60d7ca2a..ed0992419448722757d645a53b6926f7ba435d0b 100644
--- a/src/ui/nehubaContainer/splashScreen/splashScreen.style.css
+++ b/src/ui/nehubaContainer/splashScreen/splashScreen.style.css
@@ -1,8 +1,118 @@
 div[splashScreenContainer]
 {
+
   height:100%;
+  display:flex;
+  /* flex-direction: column; */
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  overflow-y:auto;
+}
+
+div[splashScreenHeader] {
+  min-height: 100px;
+  width: 100%;
+  background-color: #EF5450;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #FFFFFF;
+}
+
+
+span[splashScreenHeaderTitle] {
+  font-size: 45px;
+}
+
+div[splashScreenTemplate] {
+
+  width: 100%;
+  margin: 20px 20px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+}
+
+div[splashScreenTemplateItem] {
+  max-width: 600px;
+  width: 400px;
+  background-color: blue;
+  margin: 20px 20px;
+  display: flex;
+  flex-direction: row;
+  /* flex-direction: row; */
+  flex-wrap: wrap;
+  justify-content: center;
+
+}
+
+div[splashScreenTemplateHeader] {
+  align-self: center;
+  text-align: center;
+  font-size: 30px;
+  font-size: 2vw;
+  /* font-size: 30px; */
+  margin: 0 0 20px 0;
+
+}
+
+div[splashScreenTemplateBody] {
+  display: flex;
+  flex-direction: column;
+}
+
+div[splashScreenTemplateBodyDescription] {
+  flex: 1;
+  text-align: justify;
+  margin: 0 10px 10px 10px;
+}
+div[splashScreenTemplateBodyImage] {
+  flex: 1;
+}
+
+.template-image {
+  width: 100%;
+  height: auto;
+}
+
+.template-card {
+  width: 100%;
+  cursor: pointer;
+  background: #fff;
+  border-radius: 2px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+}
+
+.template-card:hover {
+  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);
+}
+
+/* @media screen and (max-width: 1500px) {
+  div[splashScreenTemplateBody] {
+    flex-direction: column;
+  }
+  .template-card {
+    width: 40%;
+  }
+} */
+
+@media screen and (max-width: 670px) {
+  span[splashScreenHeaderTitle] {
+    visibility: hidden;
+  }
+  div[splashScreenTemplate] {
+    margin: 20px 20px;
+  }
+  div[splashScreenTemplateBody] {
+    flex-direction: column;
+  }
 }
 
+/*
 div[templateCardContainer]
 {
   height:100%;
@@ -33,4 +143,4 @@ div[templateCard]
 div[templateCard]:hover
 {
   background-color:rgba(242,242,242,0.8);
-}
\ No newline at end of file
+} */
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/splashScreen/splashScreen.template.html b/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
index 5ccf9fcc70d27efb6d52b2f8da7dc415691fa8b2..35aa89121f99269c7bc2012d5b4dd5ce9aaf17f5 100644
--- a/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
+++ b/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
@@ -1,14 +1,43 @@
+<div splashScreenContainer>
+  <div splashScreenHeader>
+    <span splashScreenHeaderTitle media="screen and (min-width: 670px)">Iteractive Atlas Viewer</span>
+  </div>
+  <div splashScreenTemplate>
+    <div *ngFor="let template of loadedTemplate$ | async | filterNull" splashScreenTemplateItem>
+      <div class="template-card" (click) = "selectTemplate(template)">
+
+        <div splashScreenTemplateHeader>
+          {{template.properties.name}}
+        </div>
+        <div splashScreenTemplateBody>
+          <div splashScreenTemplateBodyImage>
+            <img class="template-image" [src]="'./res/image/' + correctString(template.properties.name) + '.png'">
+          </div>
+          <div splashScreenTemplateBodyDescription>
+            {{template.properties.description.substring(0, 500)}}
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+  </div>
+</div>
+
+
+
+<!--
 <div class = "container-fluid" splashScreenContainer>
-  <div 
-    class = "row" 
+  <div
+    class = "row"
     templateCardContainer>
-    
+
     <div
-      *ngFor = "let template of loadedTemplate$ | async | filterNull" 
+      *ngFor = "let template of loadedTemplate$ | async | filterNull"
       (click) = "selectTemplate(template)"
       templateCard
       hoverable>
-      
+
       <h2>{{ template.properties.name }}</h2>
       <readmore-component>
         <small>{{ template.properties.description }}</small>
@@ -25,4 +54,4 @@
       </h1>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div> -->
\ No newline at end of file