diff --git a/index.html b/index.html
index 9de6ee6..21cd38a 100644
--- a/index.html
+++ b/index.html
@@ -15,26 +15,64 @@
     });
   </script>
   <script>
-  $(document).ready(function(){
-    $("#searchfield-global").focus(function(){
-      $( ".search-filter-quick" ).slideDown( "slow", function() {});
+    $(document).ready(function(){
+      $("#searchfield-global").focus(function(){
+        $( ".search-filter-quick" ).slideDown( "slow", function() {});
+      });
     });
+  </script>
+  <script>
+    $(function() {
+      //caches a jQuery object containing the header element
+      var header = $(".scroll");
+      $(window).scroll(function() {
+          var scroll = $(window).scrollTop();
+
+          if (scroll >= 2280) {
+              header.removeClass('scroll').addClass("fixed");
+          } else {
+              header.removeClass("fixed").addClass('scroll');
+          }
+      });
   });
   </script>
   <script>
-  $(function() {
-    //caches a jQuery object containing the header element
-    var header = $(".scroll");
-    $(window).scroll(function() {
-        var scroll = $(window).scrollTop();
+  $(function(){
+    jQuery('img.svg').each(function(){
+        var $img = jQuery(this);
+        var imgID = $img.attr('id');
+        var imgClass = $img.attr('class');
+        var imgURL = $img.attr('src');
+
+        jQuery.get(imgURL, function(data) {
+            // Get the SVG tag, ignore the rest
+            var $svg = jQuery(data).find('svg');
+
+            // Add replaced image's ID to the new SVG
+            if(typeof imgID !== 'undefined') {
+                $svg = $svg.attr('id', imgID);
+            }
+            // Add replaced image's classes to the new SVG
+            if(typeof imgClass !== 'undefined') {
+                $svg = $svg.attr('class', imgClass+' replaced-svg');
+            }
+
+            // Remove any invalid XML tags as per http://validator.w3.org
+            $svg = $svg.removeAttr('xmlns:a');
+
+            // Check if the viewport is set, else we gonna set it if we can.
+            if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
+                $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
+            }
+
+            // Replace image with new SVG
+            $img.replaceWith($svg);
+
+        }, 'xml');
 
-        if (scroll >= 2280) {
-            header.removeClass('scroll').addClass("fixed");
-        } else {
-            header.removeClass("fixed").addClass('scroll');
-        }
     });
 });
+
   </script>
 </head>
 <body>
@@ -139,10 +177,10 @@
                 </div>
               </div>
               <ul>
-                <li><i class="fas fa-language"></i> DE,EN</li>
-                <li><img src="img/OSH_logo.svg" width="16" /></li>
-                <li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
-                <li><i class="fas fa-book-open"></i></li>
+                <li class="lang"><i class="fas fa-language"></i> DE,EN</li>
+                <li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
+                <li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
+                <li class="doc"><i class="fas fa-book-open"></i></li>
               </ul>
               <div class="clearer">&nbsp;</div>
               <div class="search-results-variante3-item-meta-date">
@@ -176,10 +214,10 @@
                 </div>
               </div>
               <ul>
-                <li><i class="fas fa-language"></i> DE,EN</li>
-                <li><img src="img/OSH_logo.svg" width="16" /></li>
-                <li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
-                <li><i class="fas fa-book-open"></i></li>
+                <li class="lang"><i class="fas fa-language"></i> DE,EN</li>
+                <li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
+                <li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
+                <li class="doc"><i class="fas fa-book-open"></i></li>
               </ul>
               <div class="clearer">&nbsp;</div>
               <div class="search-results-variante3-item-meta-date">
@@ -213,10 +251,10 @@
                 </div>
               </div>
               <ul>
-                <li><i class="fas fa-language"></i> DE,EN</li>
-                <li><img src="img/OSH_logo.svg" width="16" /></li>
-                <li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
-                <li><i class="fas fa-book-open"></i></li>
+                <li class="lang"><i class="fas fa-language"></i> DE,EN</li>
+                <li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
+                <li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
+                <li class="doc"><i class="fas fa-book-open"></i></li>
               </ul>
               <div class="clearer">&nbsp;</div>
               <div class="search-results-variante3-item-meta-date">
@@ -250,10 +288,10 @@
                 </div>
               </div>
               <ul>
-                <li><i class="fas fa-language"></i> DE,EN</li>
-                <li><img src="img/OSH_logo.svg" width="16" /></li>
-                <li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
-                <li><i class="fas fa-book-open"></i></li>
+                <li class="lang"><i class="fas fa-language"></i> DE,EN</li>
+                <li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
+                <li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
+                <li class="doc"><i class="fas fa-book-open"></i></li>
               </ul>
               <div class="clearer">&nbsp;</div>
               <div class="search-results-variante3-item-meta-date">
@@ -287,10 +325,10 @@
                 </div>
               </div>
               <ul>
-                <li><i class="fas fa-language"></i> DE,EN</li>
-                <li><img src="img/OSH_logo.svg" width="16" /></li>
-                <li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
-                <li><i class="fas fa-book-open"></i></li>
+                <li class="lang"><i class="fas fa-language"></i> DE,EN</li>
+                <li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
+                <li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
+                <li class="doc"><i class="fas fa-book-open"></i></li>
               </ul>
               <div class="clearer">&nbsp;</div>
               <div class="search-results-variante3-item-meta-date">
@@ -324,10 +362,47 @@
                 </div>
               </div>
               <ul>
-                <li><i class="fas fa-language"></i> DE,EN</li>
-                <li><img src="img/OSH_logo.svg" width="16" /></li>
-                <li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
-                <li><i class="fas fa-book-open"></i></li>
+                <li class="lang"><i class="fas fa-language"></i> DE,EN</li>
+                <li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
+                <li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
+                <li class="doc"><i class="fas fa-book-open"></i></li>
+              </ul>
+              <div class="clearer">&nbsp;</div>
+              <div class="search-results-variante3-item-meta-date">
+                <span class="updated">Updated: 03/27/19</span>
+                <span class="released">Released: 04/12/15</span>
+              </div>
+              <div class="clearer">&nbsp;</div>
+            </div>
+          </div>
+        </div>
+        <div class="col-1-4-fixed">
+          <div class="search-results-variante3-item">
+            <div class="search-results-variante3-item-img">
+              <a href="detail.html"><img src="img/thumb07.jpg" /></a>
+            </div>
+            <div class="search-results-variante3-item-info">
+              <h2><span>Aserradero portatil Bolport Rm100</span></h2>
+              <p class="search-results-variante3-item-description">Lorem ipsum dolor sit amet, consetetur saidispscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore a magna aliquyam ...</p>
+            </div>
+            <div class="search-results-variante3-item-meta">
+              <div class="search-results-variante3-item-meta-status">
+                <p>Status</p>
+                <svg height="30" width="30">
+                  <circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
+                </svg>
+              </div>
+              <div class="search-results-variante3-item-meta-compl">
+                <p>Completeness</p>
+                <div class="search-results-variante3-item-meta-compl-bar">
+                  <span style="width:25%"></span>
+                </div>
+              </div>
+              <ul>
+                <li class="lang"><i class="fas fa-language"></i> DE,EN</li>
+                <li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
+                <li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
+                <li class="doc"><i class="fas fa-book-open"></i></li>
               </ul>
               <div class="clearer">&nbsp;</div>
               <div class="search-results-variante3-item-meta-date">
diff --git a/style.css b/style.css
index 5bb43b0..41d0344 100644
--- a/style.css
+++ b/style.css
@@ -55,9 +55,9 @@ a:hover {
   position: relative;
   min-width: 777px;
   background: -moz-linear-gradient(top, rgba(254,240,228,1) 0%, rgba(255,255,255,0) 25%);
-background: -webkit-linear-gradient(top, rgba(254,240,228,1) 0%,rgba(255,255,255,0) 25%);
-background: linear-gradient(to bottom, rgba(254,240,228,1) 0%,rgba(255,255,255,0) 25%);
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef0e4', endColorstr='#00ffffff',GradientType=0 );
+  background: -webkit-linear-gradient(top, rgba(254,240,228,1) 0%,rgba(255,255,255,0) 25%);
+  background: linear-gradient(to bottom, rgba(254,240,228,1) 0%,rgba(255,255,255,0) 25%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef0e4', endColorstr='#00ffffff',GradientType=0 );
 }
 .product-detail .row.content {
   margin-top:118px;
@@ -669,9 +669,15 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef0e4', end
 }
 .search-results-variante3-item .search-results-variante3-item-meta li {
 }
-.search-results-variante3-item .search-results-variante3-item-meta li svg {
-  background-color: red;
-  fill: currentColor;
+.search-results-variante3-item .search-results-variante3-item-meta li.cert svg {
+  width: 16px;
+}
+.search-results-variante3-item .search-results-variante3-item-meta li.din svg {
+  margin-top:-2px;
+  width: 20px;
+}
+.search-results-variante3-item .search-results-variante3-item-meta li svg path {
+  fill: #296178 !important;
 }
 .search-results-variante3-item:hover .search-results-variante3-item-meta li {
   padding:2px 11px;
@@ -725,7 +731,7 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef0e4', end
 .search-results-variante3-item .search-results-variante3-item-meta .search-results-variante3-item-meta-date .released {
   float:right;
 }
-.search-results-variante3 svg {
+.search-results-variante3 .search-results-variante3-item-meta-status svg {
   transform: rotate(-90deg);
   stroke-dasharray: 251; /* (2PI * 40px) */
   stroke-dashoffset: 251;
