diff --git a/public/css/style.css b/public/css/style.css
index 8f44337..b4d3226 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -497,7 +497,6 @@ section.normal {
 }
 
 /* Work items */
-
 .work-items {
   list-style: none;
   width: 100%;
@@ -506,7 +505,7 @@ section.normal {
 .work-items li {
   position: relative;
   overflow: hidden;
-  height: 360px;
+  height: 310px;
 
   /* important because we need to overwrite the default skeleton */
   margin: 0!important;
@@ -528,41 +527,46 @@ section.normal {
 }
 
 /* Work detail */
-.work-detail {
+.work-back {
   position: absolute;
   top: 0; bottom: 0; left: 0; right: 0;
-
-  opacity: 0;
-  background: rgba(0,0,0,.75);
+  opacity: 0;  
+  background-color: #777;
   color: white;
-
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -ms-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
+  border-radius: 3px;
 }
-.work-detail h3 {
-  font-size: 16px;
-  letter-spacing: .05em;
-}
-.work-detail p {
-  font-size: 15px;
+.work-back p {
+  font-size: 14px;
   /* text-transform: capitalize; */
   padding-left: 20px;
   padding-right: 20px;
 }
-
+.work-back p a {
+  color: #6aa3d5;
+  cursor: pointer;
+  text-decoration: none;
+}
+.work-back p a:hover {
+  color: #1EAEDB;  
+}
 .work-front {
   position: absolute;
   top: 0; bottom: 0; left: 0; right: 0;
-
   /* opacity: 0; */
   background: #F5F5F5;
   color: black;
-  box-shadow: inset 0 0 0 10px grey;
+  border-radius: 3px;
 }
-.work-front p {  font-size: 15px;
+.work-front h3 {  
+  margin-top: 15px;
+}
+.work-front p {  
+  font-size: 15px;
   color: black;
   padding-left: 20px;
   padding-right: 20px;
@@ -570,12 +574,12 @@ section.normal {
 .work-front .icon {
   line-height: 1;
   font-size: 40px;
-  color: #00bfffcc;
+  color: #6aa3d5;
 }
 
-.work-items li:hover .work-detail{
+.work-items li:hover .work-back{
   opacity: 1;
-  box-shadow: inset 0 0 0 10px #222;
+  /* box-shadow: inset 0 0 0 10px #222; */
 }
 .work-items li:hover .work-front{
   opacity: 0;
diff --git a/resources/views/frontend/home/index.blade.php b/resources/views/frontend/home/index.blade.php
index e693348..29f98bf 100644
--- a/resources/views/frontend/home/index.blade.php
+++ b/resources/views/frontend/home/index.blade.php
@@ -78,10 +78,10 @@
                             <h3>Datenarchvierung</h3>
                         </div>
                     </div>
-                    <div class="work-detail">
+                    <div class="work-back">
                         <div class="vertical-centered">
-                            <p class="separator orange">Datenarchvierung</p>
-                            <p class="paragraph-justify">
+                            {{-- <p class="separator orange">Datenarchvierung</p> --}}
+                            <p>
                                 Tethys RDR publiziert und archiviert nach den FAIR Prinzipien*
                                 nachhaltig so wie sicher geowissenschaftliche Datensätze in offenen, frei lesbaren
                                 Formaten.
@@ -99,10 +99,10 @@
                             <h3>Datenpublikation</h3>
                         </div>
                     </div>
-                    <div class="work-detail">
+                    <div class="work-back">
                         <div class="vertical-centered">
-                            <p class="separator orange">Datenpublikation</p>
-                            <p class="paragraph-justify">
+                            {{-- <p class="separator orange">Datenpublikation</p> --}}
+                            <p>
                                 Die Datensätze werden mit standardisierten Metadatenschemen publiziert
                                 und sind somit nicht nur auffindbar, wiederverwendbar und auch maschinenlesbar,
                                 sondern können dadurch auch einfach zitiert werden.
@@ -118,10 +118,10 @@
                             <h3>Begutachtung</h3>
                         </div>
                     </div>
-                    <div class="work-detail">
+                    <div class="work-back">
                         <div class="vertical-centered">
-                            <p class="separator orange">Begutachtung</p>
-                            <p class="paragraph-justify">
+                            {{-- <p class="separator orange">Begutachtung</p> --}}
+                            <p>
                                 Alle im Tethys RDR publizierten Datensätze werden auf technische sowie inhaltliche
                                 Vollständigkeit geprüft
                                 und werden bei Bedarf auch einer fachlichen Begutachtung unterworfen.
diff --git a/resources/views/frontend/home/services.blade.php b/resources/views/frontend/home/services.blade.php
index 4eaf04c..50201ee 100644
--- a/resources/views/frontend/home/services.blade.php
+++ b/resources/views/frontend/home/services.blade.php
@@ -23,10 +23,10 @@
                             <h3>Datenarchvierung</h3>
                         </div>
                     </div>
-                    <div class="work-detail">
+                    <div class="work-back">
                         <div class="vertical-centered">
-                            <p class="separator orange">Datenarchvierung</p>
-                                <p class="paragraph-justify">
+                            {{-- <p class="orange">Datenarchvierung</p> --}}
+                                <p>
                                     Tethys RDR publiziert und archiviert nach den FAIR Prinzipien*
                                     nachhaltig so wie sicher geowissenschaftliche Datensätze in offenen, frei lesbaren
                                     Formaten.
@@ -44,10 +44,10 @@
                             <h3>Datenpublikation</h3>
                         </div>
                     </div>
-                    <div class="work-detail">
+                    <div class="work-back">
                         <div class="vertical-centered">
-                            <p class="separator orange">Datenpublikation</p>
-                            <p  class="paragraph-justify">
+                            {{-- <p class="orange">Datenpublikation</p> --}}
+                            <p>
                                 Die Datensätze werden mit standardisierten Metadatenschemen publiziert 
                                 und sind somit nicht nur auffindbar, wiederverwendbar und auch maschinenlesbar, 
                                 sondern können dadurch auch einfach zitiert werden.
@@ -63,10 +63,10 @@
                             <h3>Begutachtung</h3>
                         </div>
                     </div>
-                    <div class="work-detail">
+                    <div class="work-back">
                         <div class="vertical-centered">
-                            <p class="separator orange">Begutachtung</p>
-                            <p class="paragraph-justify">
+                            {{-- <p class="orange">Begutachtung</p> --}}
+                            <p>
                                 Alle im Tethys RDR publizierten Datensätze werden auf technische sowie inhaltliche Vollständigkeit geprüft 
                                 und werden bei Bedarf auch einer fachlichen Begutachtung unterworfen. 
                                 Ein klassischer Peer Review-Prozess ist in Vorbereitung.