diff --git a/css/ignite-redesign.css b/css/ignite-redesign.css
index 9711795..37964df 100644
--- a/css/ignite-redesign.css
+++ b/css/ignite-redesign.css
@@ -7401,22 +7401,30 @@
 strong {
   font-weight: 600; }
 
+.sticky-top {
+  box-shadow: 0px 4px 8px 0px #E5E2E5;
+  background-color: #ffffff; }
+
 /** start header */
 #header #nav {
   padding: 0.5rem 0;
   margin-bottom: 0 !important; }
   #header #nav .navbar-brand img {
-    width: 12rem; }
+    width: 12rem;
+    transition: all 0.5s ease; }
   #header #nav .navbar-nav {
     position: absolute;
     right: 0; }
     #header #nav .navbar-nav > li.nav-item {
-      font-size: 16px; }
+      font-size: 16px;
+      transition: width 0.2 ease, font-size 0.5s ease;
+      width: 130px; }
     #header #nav .navbar-nav li.nav-item a {
       display: inline-block;
       padding-right: 1.3em;
       padding-left: 1.3em;
-      cursor: pointer; }
+      cursor: pointer;
+      transition: padding 0.5s ease; }
     #header #nav .navbar-nav li.nav-item .dropdown-toggle:after {
       display: none; }
     #header #nav .navbar-nav li.nav-item ul.dropdown-menu {
@@ -7445,9 +7453,17 @@
         padding-bottom: 1em;
         margin-bottom: -5px; }
     #header #nav .navbar-nav li.nav-item.show > a.dropdown-toggle {
-      font-weight: 700;
-      padding-right: 1.15em;
-      padding-left: 1.15em; }
+      font-weight: 700; }
+
+#header.shrink #nav .navbar-nav > li.nav-item {
+  font-size: 15px !important;
+  width: 120px; }
+
+#header.shrink .btn-secondary {
+  padding: 0.3rem 1.2rem 0.4rem !important; }
+
+#header.shrink img {
+  width: 8rem !important; }
 
 #footer {
   box-shadow: inset 0px 15px 8px -10px #e5e5e5, inset 0px -15px 8px -10px #e5e5e5; }
@@ -7480,13 +7496,13 @@
   box-shadow: inset 0px 15px 8px -10px #e5e5e5, inset 0px -15px 8px -10px #e5e5e5; }
   #main-banner .wrapper {
     background: #187ccc;
-    background: -moz-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%);
-    background: -webkit-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%);
-    background: linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#f2f2f2",GradientType=1);
+    background: -moz-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 80%, #0a5a9a 80%, #187ccc 100%);
+    background: -webkit-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 80%, #0a5a9a 80%, #187ccc 100%);
+    background: linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 80%, #0a5a9a 80%, #187ccc 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#187ccc",GradientType=1);
     padding: 3em 0; }
   #main-banner h1 {
-    font-weight: 400;
+    font-weight: 300;
     font-size: 30px;
     line-height: 1.4em;
     margin-bottom: 1.5em; }
@@ -7528,58 +7544,55 @@
   padding: 4rem 0;
   background-color: #ffffff;
   box-shadow: inset 0px 15px 8px -10px #e5e5e5; }
-  #home-use-cases h2 {
-    margin-bottom: 4.5rem; }
-  #home-use-cases #use-cases-tabs {
-    display: flex;
-    justify-content: space-between;
-    width: 62%;
-    margin: 0 auto; }
-    #home-use-cases #use-cases-tabs li {
-      width: 45%; }
-    #home-use-cases #use-cases-tabs .btn {
+  #home-use-cases #intro-text {
+    margin-bottom: 50px; }
+    #home-use-cases #intro-text p {
       background-color: #f2f2f2;
+      border-radius: 5px;
+      padding: 40px 90px;
       font-size: 18px;
-      width: 100%;
-      padding: 1em 0.8em; }
-    #home-use-cases #use-cases-tabs .btn.active {
-      color: #b02032;
-      font-weight: 600; }
-    #home-use-cases #use-cases-tabs .active:after {
-      content: "";
-      width: 0;
-      height: 0;
-      border-left: 15px solid transparent;
-      border-right: 15px solid transparent;
-      display: block;
-      border-top: 15px solid #b02032;
-      left: calc(34% - 15px);
-      top: 3.2em;
-      position: absolute; }
-    #home-use-cases #use-cases-tabs li:last-child .active:after {
-      left: calc(67% - 15px); }
-    #home-use-cases #use-cases-tabs .btn:focus, #home-use-cases #use-cases-tabs .btn:active {
-      outline: none !important;
-      box-shadow: none !important; }
-  #home-use-cases #tabsContent {
+      line-height: 2em; }
+  #home-use-cases #intro-text:after {
+    content: "";
+    width: 25vw;
+    height: 6px;
+    background-color: #f2f2f2;
+    display: block;
+    margin: 40px auto 50px;
+    border-radius: 5px; }
+  #home-use-cases .container .row {
+    margin-bottom: 25px; }
+  #home-use-cases .container h2 {
+    margin-bottom: 4.5rem; }
+  #home-use-cases .container a.simplified-img-a {
+    cursor: zoom-in; }
+  #home-use-cases .container img {
+    max-width: 100%;
+    margin: 30px auto;
+    display: block;
+    max-height: 300px; }
+  #home-use-cases .container .txt-wrapper {
+    display: block;
     padding: 30px; }
-    #home-use-cases #tabsContent img {
-      max-width: 45rem;
-      margin: 0 auto;
-      display: block; }
-    #home-use-cases #tabsContent .txt-wrapper {
-      background-color: #f2f2f2;
-      width: 45vw;
-      display: block;
-      margin: 20px auto 0;
-      text-align: center;
-      padding: 30px; }
-      #home-use-cases #tabsContent .txt-wrapper p {
-        font-size: 15px;
-        line-height: 2em;
-        margin-bottom: 20px; }
-      #home-use-cases #tabsContent .txt-wrapper .btn {
-        padding: 8px 15px; }
+    #home-use-cases .container .txt-wrapper h3 {
+      font-size: 20px;
+      margin-bottom: 15px;
+      font-weight: 600; }
+    #home-use-cases .container .txt-wrapper p {
+      font-size: 16px;
+      line-height: 2em;
+      margin-bottom: 20px; }
+    #home-use-cases .container .txt-wrapper .btn {
+      padding: 8px 15px; }
+  #home-use-cases #diagramModal .modal-dialog {
+    max-width: 90vw !important; }
+    #home-use-cases #diagramModal .modal-dialog .modal-content button.close {
+      width: 40px;
+      position: absolute;
+      right: 10px;
+      top: 10px; }
+    #home-use-cases #diagramModal .modal-dialog .modal-content img {
+      height: 90vh; }
 
 section.section-block h2 {
   text-align: center;
@@ -7662,7 +7675,7 @@
           font-weight: 600; }
       #home-extras #home-links ul li a:hover {
         background-color: #f2f2f2 !important;
-        border-radius: 10px;
+        border-radius: 5px;
         text-decoration: none; }
         #home-extras #home-links ul li a:hover svg {
           background-color: #055799; }
@@ -7735,6 +7748,11 @@
       display: none; }
 
 @media (max-width: 1199.98px) {
+  #main-banner .wrapper {
+    background: -moz-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 90%, #0a5a9a 90%, #187ccc 100%);
+    background: -webkit-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 90%, #0a5a9a 90%, #187ccc 100%);
+    background: linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 90%, #0a5a9a 90%, #187ccc 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#187ccc",GradientType=1); }
   #home-use-cases #use-cases-tabs {
     width: 85%; }
     #home-use-cases #use-cases-tabs .active:after {
@@ -7785,6 +7803,11 @@
 @media (max-width: 767.98px) {
   .twitter-follow {
     display: none; }
+  #main-banner .wrapper {
+    background: -moz-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 95%, #0a5a9a 95%, #187ccc 100%);
+    background: -webkit-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 95%, #0a5a9a 95%, #187ccc 100%);
+    background: linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 95%, #0a5a9a 95%, #187ccc 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#187ccc",GradientType=1); }
   #home-use-cases #tabsContent {
     padding: 0; }
     #home-use-cases #tabsContent .txt-wrapper {
diff --git a/includes/footer.html b/includes/footer.html
index 28ae1e2..5df54ac 100644
--- a/includes/footer.html
+++ b/includes/footer.html
@@ -9,6 +9,7 @@
                     <li><a href="/docs-and-apis.html">Documentation</a></li>
                     <li><a href="/community/resources.html">Ask Question</a></li>
                     <li><a href="/download.cgi">Download</a></li>
+                    <li><a href="/community/resources.html">Contact Info</a></li>
                 </ul>
 
                 <ul class="social-networks list-unstyled">
diff --git a/includes/header.html b/includes/header.html
index 5ab812b..f52c0a6 100644
--- a/includes/header.html
+++ b/includes/header.html
@@ -1,8 +1,8 @@
 <!-- REMEMBER TO COPY ALL CHANGES TO download.html -->
 
-    <header id="header" class="affix header" data-spy="affix" data-offset-top="0">
+    <header id="header" class="affix header sticky-top " data-spy="affix" data-offset-top="0">
             <div class="container">
-                <nav id="nav" class="navbar navbar-expand-lg d-flex bd-highlight mb-3" role="navigation">
+                <nav id="nav" class=" navbar navbar-expand-lg d-flex bd-highlight mb-3" role="navigation">
                     <a href="/" class="mr-auto p-2 bd-highlight navbar-brand" aria-label="Ignite Homepage"><img src="/images/ignite_logo_full.svg" alt="Apache Ignite Logo"></a>
 
                     
@@ -127,7 +127,7 @@
                                         <li class="dropdown-item"><a href="/docs-and-apis.html#docs">Technical Docs</a></li>
                                         
                                         <li class="dropdown-subtitle" role="presentation">Learning Ignite</li>
-                                        <li class="dropdown-item"><a href="/screencasts.html">Videos</a></li>
+                                        <li class="dropdown-item"><a href="/screencasts.html">Video Tutorials</a></li>
                                         <li class="dropdown-item"><a href="https://github.com/apache/ignite/tree/master/examples" target="_blank" rel="noopener">
                                             Examples <i class="fa fa-external-link" style="padding-left:5px;"></i></a></li>
                                         <li class="dropdown-item"><a href="/events.html">Upcoming Events</a></li>
diff --git a/includes/scripts.html b/includes/scripts.html
index 9dde7cb..9f7a056 100644
--- a/includes/scripts.html
+++ b/includes/scripts.html
@@ -23,6 +23,17 @@
         );
         document.querySelector('head').appendChild(msViewportStyle)
     }
+    
+    const onScroll = function(){
+        if(jQuery(document).scrollTop() > 110) {
+            jQuery('#header').addClass('shrink');
+        }else {
+            jQuery('#header').removeClass('shrink');
+        }
+    };
+
+    jQuery(window).scroll(onScroll);
+    jQuery(document).ready(onScroll);
 </script>
 
 
diff --git a/index.html b/index.html
index c6a585a..bd7f1f7 100644
--- a/index.html
+++ b/index.html
@@ -195,71 +195,87 @@
     </section>
 
     <section id="home-use-cases" class="section-block">
+
+        <div id="intro-text" class="container">
+
+            <p>Apache Ignite® is an in-memory computing platform for transactional, analytical, and streaming workloads
+delivering in-memory speeds at petabyte scale. Can be deployed as an in-memory data grid or an
+in-memory database for transactional, analytical, hybrid transactional/analytical, and streaming workloads.</p>
+
+        </div>
+
+
         <h2>Apache Ignite <strong>Use Cases</strong></h2>
 
         <div class="container">
 
             <div class="row">
 
-                <div class="col-12">
-                    <ul id="use-cases-tabs" class="nav">
-                        <li class="">
-                            <a href="#tab-datagrid" data-toggle="tab" role="tab" aria-controls="datagrid"
-                               aria-selected="true" id="datagrid-tab" class="btn active">In-Memory Data Grid and
-                                Cache</a>
-                        </li>
+                <div class="col-md-6">
+                    
+                    
+                    <div class="txt-wrapper">
+                        <h3>In-Memory Data Grid and Cache</h3>
 
-                        <li class="">
-                            <a href="#tab-database"
-                               data-toggle="tab" role="tab" aria-controls="database"
-                               aria-selected="true" class="btn ">In-Memory Database</a>
-                        </li>
+                        <p>
+                            Accelerate existing services and databases with Apache Ignite&reg; deployed as an
+                            in-memory data grid or cache that keeps your underlying stores in sync and supports
+                            ANSI SQL, ACID transactions, co-located computations with machine learning.
+                        </p>
 
-                    </ul>
-
-                    <div id="tabsContent" class="tab-content">
-                        <div id="tab-datagrid" class="tab-pane fade  active show" role="tabpanel"
-                             aria-labelledby="datagrid-tab">
-                            <img src="/images/svg-diagrams/in-memory-data-grid.svg"/>
-
-                            <div class="txt-wrapper">
-                                <p>
-                                    Accelerate existing services and databases with Apache Ignite&reg; deployed as an
-                                    in-memory data grid or cache that keeps your underlying stores in sync and supports
-                                    ANSI SQL, ACID transactions, co-located computations with machine learning.
-                                </p>
-
-                                <a href="/use-cases/datagrid.html" class="btn btn-primary"
-                                   onclick="ga('send', 'event', 'apache_ignite_use_cases', 'homepage_click', 'data_grid');">
-                                    Learn About In-Memory Data Grid</a>
-                            </div>
-                        </div>
-                        <div id="tab-database" class="tab-pane fade" role="tabpanel" aria-labelledby="database-tab">
-
-                            <img src="/images/svg-diagrams/in-memory-database.svg"/>
-                            <div class="txt-wrapper">
-                                <p>
-                                    Combine advantages of in-memory and disk-based systems deploying Apache Ignite&reg;
-                                    as an in-memory database that treats disk as an active storage layer. Cache a
-                                    subset of the data in memory, execute advanced queries including SQL over both
-                                    in-memory and disk-only records, and skip time-consuming memory warm-ups on
-                                    startup.
-                                </p>
-
-                                <a href="/use-cases/in-memory-database.html" class="btn btn-primary"
-                                   onclick="ga('send', 'event', 'apache_ignite_use_cases', 'homepage_click', 'database');">
-                                    Learn About In-Memory Database</a>
-                            </div>
-                        </div>
-
+                        <a href="/use-cases/datagrid.html" class="btn btn-primary"
+                            onclick="ga('send', 'event', 'apache_ignite_use_cases', 'homepage_click', 'data_grid');">
+                            Learn About In-Memory Data Grid</a>
                     </div>
+                </div>
+                <div class="col-md-6">
+                    <a href="#"  class="simplified-img-a" data-target="#diagramModal" data-toggle="modal" data-diagram="data-grid"><img src="/images/svg-diagrams/in-memory-data-grid--simplified.svg"/></a>
+                </div>
+                        
+            </div>
 
+            <div class="row">
+                <div class="col-md-6 order-last order-md-first">
+                    <a href="#" class="simplified-img-a" data-target="#diagramModal" data-toggle="modal" data-diagram="database"><img src="/images/svg-diagrams/in-memory-database--simplified.svg"/></a>
+                </div>
+                <div class="col-md-6 order-first order-md-last">
+                    
+                    <div class="txt-wrapper">
+                        <h3>In-Memory Database</h3>
+
+                        <p>
+                            Combine advantages of in-memory and disk-based systems deploying Apache Ignite&reg;
+                            as an in-memory database that treats disk as an active storage layer. Cache a
+                            subset of the data in memory, execute advanced queries including SQL over both
+                            in-memory and disk-only records, and skip time-consuming memory warm-ups on
+                            startup.
+                        </p>
+
+                        <a href="/use-cases/in-memory-database.html" class="btn btn-primary"
+                            onclick="ga('send', 'event', 'apache_ignite_use_cases', 'homepage_click', 'database');">
+                            Learn About In-Memory Database</a>
+                    </div>
                 </div>
 
             </div>
 
         </div>
 
+
+        <div class="modal fade" id="diagramModal" tabindex="-1" role="dialog" aria-labelledby="diagramModal" aria-hidden="true">
+            <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                
+                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                  </button>
+                
+                  <img src="" />
+                
+              </div>
+            </div>
+          </div>
+
     </section>
 
     <section id="home-features" class="section-block bg-gray-shadow">
@@ -267,7 +283,7 @@
             <div class="container">
                 <h2>Apache Ignite <strong>Features</strong></h2>
                 <div class="row">
-                    <div class="col-md-4 feature">
+                    <div class="col-sm-6 col-md-4 feature">
                         <a href="/arch/multi-tier-storage.html"
                            onclick="ga('send', 'event', 'apache_ignite_features', 'homepage_click', 'multi-tier-storage');"
                            title="Apache Ignite Multi-Tier Storage"
@@ -368,7 +384,7 @@
 
         <div class="container">
             <div class="row">
-                <section id="home-links" class="col-sm-6">
+                <section id="home-links" class="col-sm-8">
                     <h2>Quick <strong>Links</strong></h2>
                     <ul>
                         <li><a href="/docs-and-apis.html#docs">
@@ -381,24 +397,24 @@
                             <svg>
                                 <use xlink:href="#index-icons--API"></use>
                             </svg>
-                            <span>API<br/>References</span>
+                            <span>API References</span>
                         </a></li>
                         <li><a href="/events.html">
                             <svg>
                                 <use xlink:href="#index-icons--Community"></use>
                             </svg>
-                            <span>Community<br/>Events</span>
+                            <span>Community Events</span>
                         </a></li>
                         <li><a href="/use-cases/provenusecases.html">
                             <svg>
                                 <use xlink:href="#index-icons--Company"></use>
                             </svg>
-                            <span>Companies<br/>Using Ignite</span>
+                            <span>Companies Using Ignite</span>
                         </a></li>
                     </ul>
                 </section>
 
-                <section id="home-twitter" class="col-sm-6">
+                <section id="home-twitter" class="col-sm-4">
                     <!--Ignite events -->
                     <h2>Latest <strong>Tweets</strong></h2>
 
@@ -420,5 +436,11 @@
 
 <!--#include virtual="/includes/scripts.html" -->
 
+<script type="text/javascript">
+    jQuery('#diagramModal').on('show.bs.modal', function(event){
+        const diagram = jQuery(event.relatedTarget).data('diagram');
+        jQuery(this).find('img').attr('src', '/images/svg-diagrams/in-memory-'+diagram+'.svg');
+    });
+</script>
 </body>
 </html>
diff --git a/scss/ignite-redesign.scss b/scss/ignite-redesign.scss
index 6ddc679..4c95fc2 100644
--- a/scss/ignite-redesign.scss
+++ b/scss/ignite-redesign.scss
@@ -51,6 +51,12 @@
 
 
 
+.sticky-top {
+    box-shadow: 0px 4px 8px 0px #E5E2E5;
+    background-color: #ffffff;
+}
+
+
 /** start header */
 #header {
     
@@ -61,6 +67,7 @@
         .navbar-brand {
             img {
                 width: 12rem;
+                transition: all 0.5s ease;
             }
         }
         .navbar-nav {
@@ -69,6 +76,10 @@
 
             > li.nav-item {
                 font-size: 16px;
+                transition: width 0.2 ease, font-size 0.5s ease;
+                width:130px;
+                
+
             }
             
 
@@ -80,6 +91,7 @@
                     padding-right: 1.3em;
                     padding-left: 1.3em;
                     cursor: pointer;
+                    transition: padding 0.5s ease;
                     
                 }
                 .dropdown-toggle:after {
@@ -129,13 +141,26 @@
             li.nav-item.show {
                 > a.dropdown-toggle {
                     font-weight: 700;
-                    padding-right: 1.15em;
-                    padding-left: 1.15em;
+                    
                 }
             }
         }
     }
 }
+#header.shrink {
+
+    #nav .navbar-nav > li.nav-item {
+        font-size: 15px !important;
+        width: 120px;
+    }
+    .btn-secondary {
+        padding: 0.3rem 1.2rem 0.4rem !important;
+    }
+
+    img {
+        width: 8rem !important;   
+    }
+}
 
 #footer {
     
@@ -206,18 +231,25 @@
         inset 0px -15px 8px -10px #e5e5e5;
 
     .wrapper {
+
         background: rgb(24,124,204);
-        background: -moz-linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%);
-        background: -webkit-linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%);
-        background: linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%);
-        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#f2f2f2",GradientType=1);
+        background: -moz-linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%, rgba(242,242,242,0) 80%, rgba(10,90,154,1) 80%, rgba(24,124,204,1) 100%);
+        background: -webkit-linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%, rgba(242,242,242,0) 80%, rgba(10,90,154,1) 80%, rgba(24,124,204,1) 100%);
+        background: linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%, rgba(242,242,242,0) 80%, rgba(10,90,154,1) 80%, rgba(24,124,204,1) 100%);
+        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#187ccc",GradientType=1);
+
+        // background: rgb(24,124,204);
+        // background: -moz-linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%);
+        // background: -webkit-linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%);
+        // background: linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%);
+        // filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#f2f2f2",GradientType=1);
 
         padding: 3em 0;
     }
 
 
     h1 {
-        font-weight: 400;
+        font-weight: 300;
         font-size: 30px;
         line-height: 1.4em;
         margin-bottom: 1.5em;
@@ -283,75 +315,63 @@
 #home-use-cases {
     padding: 4rem 0;
     background-color: #ffffff;
-    box-shadow: 
-        inset 0px 15px 8px -10px #e5e5e5;
+    box-shadow: inset 0px 15px 8px -10px #e5e5e5;
 
-    h2 {
-        margin-bottom: 4.5rem;
+    #intro-text {
+        
+        margin-bottom: 50px;
+        
+        p {
+            background-color: theme-color('gray');
+            border-radius: 5px;
+            padding: 40px 90px;
+            font-size: 18px;
+            line-height: 2em;
+        }
+    }
+    #intro-text:after {
+        content: "";
+        width: 25vw;
+        height: 6px;
+        background-color: theme-color('gray');
+        display: block;
+        margin: 40px auto 50px;
+        border-radius: 5px;;
     }
 
-    #use-cases-tabs {
-        display: flex;
-        justify-content: space-between;
-        width: 62%;
-        margin: 0 auto;
+    .container {
+        .row {
+            margin-bottom: 25px;
+        }
 
-        li {
-            width: 45%;
+        h2 {
+            margin-bottom: 4.5rem;
+        }
+
+        a.simplified-img-a {
+            cursor: zoom-in;
         }
         
-        .btn {
-            background-color: theme-color('gray');
-            font-size: 18px;
-            width: 100%;
-            padding: 1em 0.8em;
-        }
-        .btn.active {
-            color: theme-color('secondary');
-            font-weight: 600;
-        }
-        .active:after {
-            content: "";
-            width: 0;
-            height: 0;
-            border-left: 15px solid transparent;
-            border-right: 15px solid transparent;
-            display: block;
-            border-top: 15px solid theme-color('secondary');
-            left: calc(34% - 15px);
-            top: 3.2em;
-            position: absolute;
-        }
-        li:last-child {
-            .active:after {
-                left: calc(67% - 15px);
-            }
-        }
-        .btn:focus,.btn:active {
-            outline: none !important;
-            box-shadow: none !important;
-        }
-    }
-    #tabsContent {
-        padding: 30px;
+        
         img {
-            max-width: 45rem;
-            margin: 0 auto;
+            max-width: 100%;
+            margin: 30px auto;
             display: block;
-
+            max-height: 300px;
         }
 
         .txt-wrapper {
-            background-color: theme-color('gray');
-            width: 45vw;   
+            h3 {
+                font-size: 20px;
+                margin-bottom: 15px;
+                font-weight: 600;
+            }
             display: block;
-            margin: 20px auto 0;
-            text-align: center;
             padding: 30px;
 
 
             p {
-                font-size: 15px;
+                font-size: 16px;
                 line-height: 2em;
                 margin-bottom: 20px;
             }
@@ -359,9 +379,26 @@
                 padding: 8px 15px;
             }
         }
-    } 
+    }
 
-    
+    #diagramModal {
+        .modal-dialog {
+            max-width: 90vw !important;
+
+            .modal-content {
+                button.close {
+                    width: 40px;
+                    position: absolute;
+                    right: 10px;
+                    top: 10px;
+                }
+
+                img {
+                    height: 90vh;
+                }
+            }
+        }
+    }
 
         
 
@@ -489,7 +526,7 @@
                 }
                 a:hover {
                     background-color: theme-color('gray') !important;
-                    border-radius: 10px;
+                    border-radius: 5px;
                     text-decoration: none;
 
                     svg {
@@ -604,6 +641,18 @@
 // Large devices (desktops, less than 1200px)
 // @media (max-width: 1199.98px) { ... }
 @include media-breakpoint-down(lg) {
+    #main-banner {
+    
+
+        .wrapper {
+    
+            background: -moz-linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%, rgba(242,242,242,0) 90%, rgba(10,90,154,1) 90%, rgba(24,124,204,1) 100%);
+            background: -webkit-linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%, rgba(242,242,242,0) 90%, rgba(10,90,154,1) 90%, rgba(24,124,204,1) 100%);
+            background: linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%, rgba(242,242,242,0) 90%, rgba(10,90,154,1) 90%, rgba(24,124,204,1) 100%);
+            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#187ccc",GradientType=1);
+        }
+    }
+
     #home-use-cases {
         #use-cases-tabs {
             width: 85%;
@@ -646,6 +695,7 @@
             .navbar-nav {
                 position: relative;
                 li.nav-item {
+                    
                     a.btn {
                         margin-left: 1.3em;
                     }
@@ -724,6 +774,14 @@
     .twitter-follow {
         display: none;
     }
+    #main-banner {
+        .wrapper {
+            background: -moz-linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%, rgba(242,242,242,0) 95%, rgba(10,90,154,1) 95%, rgba(24,124,204,1) 100%);
+            background: -webkit-linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%, rgba(242,242,242,0) 95%, rgba(10,90,154,1) 95%, rgba(24,124,204,1) 100%);
+            background: linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%, rgba(242,242,242,0) 95%, rgba(10,90,154,1) 95%, rgba(24,124,204,1) 100%);
+            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#187ccc",GradientType=1);
+        }
+    }
     #home-use-cases {
         #tabsContent {
             padding: 0;
@@ -795,6 +853,7 @@
         h1 {
             font-size: 26px;
             text-align: center;
+            
         }
         .buttons {
             text-align: center;