diff --git a/_data/main.yml b/_data/main.yml
index 4a951ca..84a037a 100644
--- a/_data/main.yml
+++ b/_data/main.yml
@@ -1,7 +1,10 @@
 mainTitle1: Open data, models and code
 mainTitle2: for brain research
-brief: Open Source Brain is a resource for sharing data and analysis techniques in neuroscience and collaboratively developing computational models of neural systems
+desc: Open Source Brain is a resource for sharing data and analysis techniques in neuroscience and collaboratively developing computational models of neural systems
 getStarted: Get started
 getStartedLink: https://v2.opensourcebrain.org
 guidedTour: Guided tour
 guidedTourLink: https://docs.opensourcebrain.org/OSBv2/Guided_tour.html
+osbExplainerVideoLink: https://github.com/OpenSourceBrain/OSB_homepage/assets/46561561/a5d738a3-e495-4c67-8608-3b3d42077c54
+guidedTourTitle: COLLABORATIVE NEUROSCIENCE
+guidedTourBrief: Share and collaborate.
diff --git a/_includes/css/osb.css b/_includes/css/osb.css
index 6999f33..cf501b3 100644
--- a/_includes/css/osb.css
+++ b/_includes/css/osb.css
@@ -1,13 +1,13 @@
-body{
+body {
     font-family: 'Hanken Grotesk', 'Roboto', sans-serif;
     background-color: #0a101e;
 }
 
 * {
-    margin:0;
-    padding:0;
-    border:none;
-    outline:none;
+    margin: 0;
+    padding: 0;
+    border: none;
+    outline: none;
 }
 
 p {
@@ -35,6 +35,7 @@ p.large {
 .mb-70 {
     margin-bottom: 70px;
 }
+
 :root {
     /* colors */
     --clr-white: #FFFFFF;
@@ -44,8 +45,8 @@ p.large {
     --clr-grey-800: #B1C5D5;
     --clr-black: #000;
     --clr-black-400: rgba(0, 0, 0, 0.6);
-    --clr-black-blue:  #0A101E;
-    --clr-black-blue-400:#171C28;
+    --clr-black-blue: #0A101E;
+    --clr-black-blue-400: #171C28;
     --clr-black-blue-600: rgba(64, 71, 88, 0.1);
     --clr-multi-fancy: linear-gradient(90.05deg, #88AA00 0.01%, #00BCD4 99.94%);
     /* font weight */
@@ -67,6 +68,7 @@ p.large {
     font-size: var(--fs-500);
     color: var(--clr-grey-800);
 }
+
 .body2 {
     font-weight: var(--fw-sm);
     font-size: var(--fs-400);
@@ -82,6 +84,7 @@ p.large {
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
+
 .subtitle {
     font-weight: var(--fw-regular);
     font-size: var(--fs-400);
@@ -113,14 +116,15 @@ p.large {
     text-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.4);
     text-decoration: none;
     background: linear-gradient(90.05deg, #88AA00 0.01%, #00BCD4 99.94%),
-    linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
+        linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
     box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.15), 0px 8px 8px -4px rgba(0, 0, 0, 0.1), 0px 12px 12px -4px rgba(0, 0, 0, 0.1), inset 0px -2px 2px rgba(0, 0, 0, 0.15);
 }
 
-.highlighted-btn:hover, .highlighted-btn:active {
+.highlighted-btn:hover,
+.highlighted-btn:active {
     background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
-    linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%),
-    linear-gradient(90.05deg, #88AA00 0.01%, #00BCD4 99.94%);
+        linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%),
+        linear-gradient(90.05deg, #88AA00 0.01%, #00BCD4 99.94%);
     box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.1), inset 0px 1px 2px rgba(0, 0, 0, 0.15), inset 0px 8px 8px -4px rgba(0, 0, 0, 0.1), inset 0px 12px 12px -4px rgba(0, 0, 0, 0.1), inset 0px -2px 2px rgba(0, 0, 0, 0.15);
 }
 
@@ -148,11 +152,13 @@ p.large {
     height: calc(100% + 20px);
     top: -20%;
 }
+
 .highlighted-btn>span:nth-child(2) {
     width: calc(100% + 40px);
     height: calc(100% + 40px);
     top: -40%
 }
+
 .highlighted-btn>span:nth-child(3) {
     width: calc(100% + 60px);
     height: calc(100% + 60px);
@@ -170,13 +176,14 @@ p.large {
     display: inline-block;
     white-space: nowrap;
     background: radial-gradient(61.62% 75% at 49.37% 0%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%),
-    linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
+        linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
     text-decoration: none;
     height: fit-content;
     width: fit-content;
 }
 
-.nav-link:focus, .nav-link:hover {
+.nav-link:focus,
+.nav-link:hover {
     opacity: 0.9;
 
 }
@@ -185,7 +192,7 @@ p.large {
     color: #fff;
     cursor: pointer;
     background: radial-gradient(61.62% 75% at 49.37% 0%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
-    linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
+        linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
 }
 
 /* start theme */
@@ -224,7 +231,7 @@ p.large {
     padding: 4px 12px;
 }
 
-.navbar  .navbar-menu>li>a{
+.navbar .navbar-menu>li>a {
     color: rgba(255, 255, 255, 0.8);
     font-weight: 500;
     font-size: 16px;
@@ -241,6 +248,7 @@ p.large {
     padding: 0;
     align-items: center;
 }
+
 .navbar-right li {
     list-style: none;
 }
@@ -284,6 +292,7 @@ p.large {
     line-height: 20px;
     margin: 0;
 }
+
 .navbar-top p a {
     color: #fff;
 }
@@ -295,6 +304,7 @@ p.large {
         padding: 24px
     }
 }
+
 @media(min-width:767px) {
     .navbar-default {
         padding: 0;
@@ -303,27 +313,33 @@ p.large {
         -moz-transition: padding .3s;
         transition: padding .3s;
     }
+
     .navbar-right a {
         margin: 0;
     }
+
     .navbar-right {
         display: flex;
         padding: 19px 0;
     }
+
     .navbar-right li {
         list-style: none;
         padding: 0 0 0 20px;
     }
+
     .navbar-collapse.collapse {
         display: flex !important;
         align-items: center;
     }
+
     .navbar-default .navbar-brand {
         font-size: 2em;
         -webkit-transition: all .3s;
         -moz-transition: all .3s;
         transition: all .3s;
     }
+
     .navbar-default .navbar-nav>.active>a {
         border-radius: 3px;
     }
@@ -343,7 +359,7 @@ header .container {
 }
 
 @media(min-width:768px) {
-    header .container  {
+    header .container {
         padding-top: 100px;
         padding-bottom: 50px;
     }
@@ -360,7 +376,7 @@ header .container {
     background-repeat: no-repeat;
     background-position: top;
     background-size: cover;
-    -webkit-mask-image: -webkit-gradient(linear, left 92%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
+    -webkit-mask-image: -webkit-gradient(linear, left 92%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
     -moz-box-shadow: inset 0 -54px 0px 0px #0b111e;
     box-shadow: inset 0 -54px 0px 0px #0b111e;
 
@@ -368,14 +384,121 @@ header .container {
 
 .workspaces-list-container {
     position: relative;
+}
 
+.guided-tour-container img {
+    border-radius: 8px;
 }
 
-.workspaces-list-container img {
+.guided-tour-container .guided-tour-title {
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 20px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    background: linear-gradient(90.05deg, #88AA00 0.01%, #00BCD4 99.94%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.guided-tour-container .guided-tour-brief {
+    font-weight: 700;
+    font-size: 32px;
+    background: linear-gradient(91.78deg, #77809D 0%, #FFFFFF 40.22%, #77809D 79.28%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.guided-tour-container .guided-tour-desc {
+    color: rgba(255, 255, 255, 0.80);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0.16px;
+}
+
+.image-container {
+    position: relative;
+    overflow: hidden;
+}
+  
+.image-container img {
+    display: block;
     width: 100%;
+    height: auto;
+    transition: opacity 0.5s ease;
+    opacity: 0.6;
+}
+  
+.image-container::before {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 60%;
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #0A101E);
+    z-index: 1;
+}
+
+.video-js {
+    width: 100%;
+}
+
+.video-js,
+.vjs-modal-dialog {
+    border-radius: 16.424px;
+    box-shadow: 205.303px 136.869px 342.172px 0px rgba(0, 188, 212, 0.50), -205.303px 136.869px 342.172px 0px rgba(136, 170, 0, 0.30), 0px 2.737px 2.737px 0px rgba(0, 0, 0, 0.03), 0px 5.475px 5.475px 0px rgba(0, 0, 0, 0.04), 0px 13.687px 10.949px 0px rgba(0, 0, 0, 0.05), 0px 41.061px 41.061px 0px rgba(0, 0, 0, 0.07), 0px 0px 0px 1.369px #000, 0px 1.369px 1.369px 0px rgba(255, 255, 255, 0.10) inset, 0px -5.36px 26.798px 0px #0A101E;
+    backdrop-filter: blur(2.679780960083008px);
+    border:  1px solid transparent;
+    background: linear-gradient(245deg, transparent 20%, rgba(255, 255, 255, 0.50) 100%);
+}
+
+.vjs-tech, .vjs-poster img {
+    border-radius: 16.424px;
+}
+
+.vjs-control-bar {
+    background-color: transparent !important;
+}
+
+.video-action-buttons {
+    display: flex;
+    position: absolute;
+    gap: 16px;
+    top: 0;
+    left: 0;
+    margin: 28px;
+}
+
+.video-action-buttons button {
+    display: flex;
+    padding: 8px 20px 8px 24px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border-radius: 12px;
+    background-color: rgba(0, 0, 0, 0.20);
+    backdrop-filter: blur(2px);
+    border: 1px solid #8A0;
+    font-size: 16px;
+    color: var(--clr-grey-600);
+    font-weight: 700;
+}
+
+.video-action-buttons button:hover {
+    background-color: rgba(0, 0, 0, 0.40);
+    backdrop-filter: blur(2px);
+}
+
+.fullscreen-video {
+    border: none;
+    border-radius: 0;
+    background: transparent;
 }
 
-.workspaces-list-container:after {
+/* .workspaces-list-container:after {
     content: "";
     position: absolute;
     width: 100%;
@@ -384,7 +507,7 @@ header .container {
     box-shadow: 0 0 60px 55px #0b111e;
     left: 0;
     bottom: 0;
-}
+} */
 
 .page-title {
     font-weight: 700;
@@ -423,7 +546,7 @@ footer .subtitle {
     color: var(--clr-black);
 }
 
-footer .body2{
+footer .body2 {
     color: var(--clr-black-400);
 }
 
@@ -451,7 +574,7 @@ footer .powered-by {
 
 /*OVERVIEW*/
 
-h6.overview-section-text{
+h6.overview-section-text {
     font-weight: 700;
     font-size: 14px;
     line-height: 20px;
@@ -502,7 +625,7 @@ h1.overview-section-title {
     height: auto;
 }
 
-.card .card-title{
+.card .card-title {
     font-weight: 500;
     font-size: 16px;
     line-height: 24px;
@@ -511,7 +634,7 @@ h1.overview-section-title {
     color: #FFFFFF;
 }
 
-.card .card-text{
+.card .card-text {
     font-weight: 400;
     font-size: 16px;
     line-height: 24px;
@@ -526,17 +649,17 @@ h1.overview-section-title {
 /*CLOUD-BASE*/
 
 
-.divider{
+.divider {
     height: 1px;
     content: '';
     width: 100%;
-    background: rgba(255,255,255,0);
-    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
-    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
-    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
-    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
-    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#FFFFFF', GradientType=1 );
+    background: rgba(255, 255, 255, 0);
+    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
+    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
+    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
+    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
+    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF', GradientType=1);
 }
 
 .cloud-base-section .cloud-base-title {
@@ -568,7 +691,7 @@ h1.overview-section-title {
     -webkit-text-fill-color: transparent;
 }
 
-.feature-card>p{
+.feature-card>p {
     font-weight: 500;
     font-size: 16px;
     letter-spacing: 0.01em;
@@ -576,15 +699,15 @@ h1.overview-section-title {
     color: #FFFFFF;
 }
 
-.feature-card>p>span:last-child{
-   color: rgba(255,255,255, .8);
+.feature-card>p>span:last-child {
+    color: rgba(255, 255, 255, .8);
 }
 
 /*CLOUD-BASE*/
 
 /*FEATURES*/
 
-.layout-bottom{
+.layout-bottom {
     background-image: url(img/bottom-bg.png);
     background-repeat: no-repeat;
     background-size: cover;
@@ -600,7 +723,8 @@ h1.overview-section-title {
     background-position: center;
     background-size: 100%;
     background-position-y: -110px;
-    background-position-x: 5px;    /* */
+    background-position-x: 5px;
+    /* */
     padding-top: 60px;
     width: 120%;
     margin-left: -10%;
@@ -609,12 +733,12 @@ h1.overview-section-title {
 
 }
 
-.tabs-container .nav-tabs{
+.tabs-container .nav-tabs {
     border-bottom: 0;
     margin-bottom: 30px;
 }
 
-.tabs-container .nav-tabs .nav-link{
+.tabs-container .nav-tabs .nav-link {
     font-weight: 500;
     font-size: 16px;
     line-height: 20px;
@@ -625,7 +749,8 @@ h1.overview-section-title {
 
 }
 
-.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
+.nav-tabs .nav-item.show .nav-link,
+.nav-tabs .nav-link.active {
     background: rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     border: 0;
@@ -633,13 +758,14 @@ h1.overview-section-title {
     color: rgba(255, 255, 255, 0.8);
 }
 
-.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
+.nav-tabs .nav-link:focus,
+.nav-tabs .nav-link:hover {
     border: none;
     color: rgba(255, 255, 255, 0.8);
 
 }
 
-.tabs-container .nav{
+.tabs-container .nav {
     justify-content: center;
 }
 
@@ -654,27 +780,29 @@ h1.overview-section-title {
     color: #FFFFFF;
     position: static;
 }
-.features-section .carousel-caption p{
+
+.features-section .carousel-caption p {
     font-size: 16px;
     font-weight: 400;
     color: #FFFFFF;
 
 }
 
-.features-section .carousel-caption p>span:last-child{
+.features-section .carousel-caption p>span:last-child {
     color: rgba(255, 255, 255, 0.8);
 }
+
 .features-section .carousel-caption .transparent-btn {
-   margin: 0;
+    margin: 0;
 }
 
 
-.features-section .carousel-caption p{
+.features-section .carousel-caption p {
     margin: 0 10px;
 }
 
 
-.features-section .carousel-item .carousel-item-content{
+.features-section .carousel-item .carousel-item-content {
     background: rgba(64, 71, 88, 0.4);
     box-shadow: 0px -4px 20px #0A101E;
     backdrop-filter: blur(6px);
@@ -684,8 +812,7 @@ h1.overview-section-title {
     border: 1px solid;
     width: fit-content;
     padding: 48px 80px 0 80px;
-    -webkit-mask-image: -webkit-gradient(linear, left 60%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
-
+    -webkit-mask-image: -webkit-gradient(linear, left 60%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)))
 }
 
 .carousel-inner {
@@ -693,7 +820,7 @@ h1.overview-section-title {
     overflow: visible;
 }
 
-.carousel-item-inner{
+.carousel-item-inner {
     margin: 0 22%;
     position: relative;
 
@@ -706,7 +833,8 @@ h1.overview-section-title {
     height: 240px;
     overflow: hidden;
 }
-.carousel-item img{
+
+.carousel-item img {
     width: 100%;
     opacity: 0.7;
 
@@ -715,12 +843,13 @@ h1.overview-section-title {
 
 
 .features-section .carousel-control-prev {
-   left: 7%;
+    left: 7%;
 }
 
 .features-section .carousel-control-next {
     right: 7%;
 }
+
 /*FEATURES*/
 
 /*GET STARTED*/
@@ -730,9 +859,10 @@ h1.overview-section-title {
     justify-content: center;
     align-items: flex-end;
 }
+
 .build-future {
     padding-top: 40px;
-    padding-bottom:80px ;
+    padding-bottom: 80px;
 }
 
 .build-future .build-future-get-started {
@@ -758,7 +888,13 @@ h1.overview-section-title {
 /* end theme */
 
 @media (min-width: 1400px) {
-    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
+
+    .container,
+    .container-lg,
+    .container-md,
+    .container-sm,
+    .container-xl,
+    .container-xxl {
         max-width: 1100px;
     }
 }
@@ -767,5 +903,4 @@ h1.overview-section-title {
     .main-section {
         -webkit-mask-image: none;
     }
-}
-
+}
\ No newline at end of file
diff --git a/_includes/head.html b/_includes/head.html
index 0ea5ec6..b8289ef 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -12,6 +12,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="{{ "/style.css" | prepend: site.baseurl }}">
+    <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>
diff --git a/_includes/main.html b/_includes/main.html
index 3235130..d5b4e08 100644
--- a/_includes/main.html
+++ b/_includes/main.html
@@ -5,19 +5,50 @@
             <div class="col-xs-12">
                 <h1 class="display-5 mb-5 page-title">{{site.data.main.mainTitle1}} <br> <span>{{site.data.main.mainTitle2}}</span> </h1>
             </div>
-            <div class="col-xs-12 col-md-6 text-center">
-                <p class="lead fw-normal mb-5 brief">{{site.data.main.brief}}</p>
-            </div>
-            <div class="col-xs-12">
-                <div class='highlighted-btn-container mb-70'>
-                    <a class="highlighted-btn" href="{{site.data.main.guidedTourLink}}" target="_blank">{{site.data.main.guidedTour}}</a>
-                </div>
-            </div>
-            <div class="col-xs-12">
+            <div class="col-xs-12 mb-5">
                 <div class="workspaces-list-container">
-                    <a href="{{site.data.main.getStartedLink}}"><img src="img/workspacesList.png"></a>
+                    <video id="my-video" class="video-js" controls preload="auto" data-setup="{}" poster="../img/osb-video-poster.png">
+                        <source src="{{site.data.main.osbExplainerVideoLink}}" type="video/mp4">
+                    </video>
+                    <div class="video-action-buttons">
+                        <button class="play-sound-button">
+                            Play with sound
+                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+                                <path d="M13.3334 22L21.3334 16L13.3334 9.99996V22ZM16 2.66663C8.64002 2.66663 2.66669 8.63996 2.66669 16C2.66669 23.36 8.64002 29.3333 16 29.3333C23.36 29.3333 29.3334 23.36 29.3334 16C29.3334 8.63996 23.36 2.66663 16 2.66663ZM16 26.6666C10.12 26.6666 5.33335 21.88 5.33335 16C5.33335 10.12 10.12 5.33329 16 5.33329C21.88 5.33329 26.6667 10.12 26.6667 16C26.6667 21.88 21.88 26.6666 16 26.6666Z" fill="white" fill-opacity="0.8"/>
+                            </svg>
+                        </button>
+                        <button class="open-full-screen-button">
+                            Open in full screen
+                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+                                <path d="M16 5.33332C21.88 5.33332 26.6667 10.12 26.6667 16C26.6667 21.88 21.88 26.6667 16 26.6667C10.12 26.6667 5.33334 21.88 5.33334 16C5.33334 10.12 10.12 5.33332 16 5.33332ZM16 2.66666C8.64001 2.66666 2.66667 8.63999 2.66667 16C2.66667 23.36 8.64001 29.3333 16 29.3333C23.36 29.3333 29.3333 23.36 29.3333 16C29.3333 8.63999 23.36 2.66666 16 2.66666ZM18.5067 15.3867L11.8933 22L10.0133 20.12L16.6267 13.5067L13.7867 10.6667L21.32 10.68L21.3333 18.2133L18.5067 15.3867Z" fill="white" fill-opacity="0.8"/>
+                            </svg>
+                        </button>
+                    </div>
                 </div>
             </div>
+            <div class="row gy-5 overflow-hidden py-3 justify-content-between guided-tour-container">
+                <div class="col-xs-0 col-md-6 col-lg-8">
+                    <div class="image-container">
+                        <img width="100%" src="img/workspacesList.png">
+                    </div>
+                </div>
+                <div class="col-xs-10 col-md-6 col-lg-4">
+                    <div class="row overflow-hidden p-3 text-start">
+                        <div class="col-xs-12">
+                            <h6 class="mb-4 guided-tour-title">{{site.data.main.guidedTourTitle}}</h6>
+                        </div>
+                        <div class="col-xs-12">
+                            <h6 class="display-5 mb-4 guided-tour-brief">{{site.data.main.guidedTourBrief}}</h6>
+                        </div>
+                        <div class="col-xs-12 mb-5">
+                            <span class="lead fw-normal mb-5 guided-tour-desc">{{site.data.main.desc}}</span>
+                        </div>
+                        <div class="col-xs-12">
+                            <a class="highlighted-btn" href="{{site.data.main.guidedTourLink}}" target="_blank">{{site.data.main.guidedTour}}</a>
+                        </div>
+                    </div>
+                </div>
             </div>
+        </div>
     </div>
 </header>
diff --git a/_layouts/default.html b/_layouts/default.html
index 266425b..37ce380 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,31 +1,74 @@
 <!DOCTYPE html>
-<html lang="{{ site.lang | default: "en-US" }}">
-  {% include head.html %}
-
-    <body id="page-top" class="index">
-    {% include header.html %}
-    {% include main.html %}
-    {% include overview.html %}
-    {% include cloudBase.html %}
-    <div class="layout-bottom">
-      {% include features.html %}
-      {% include getStarted.html %}
-    </div>
-
-    {% include footer.html %}
-    {% include js.html %}
-
-     {% if site.googleAnalytics %}
-      <!-- Global site tag (gtag.js) - Google Analytics -->
-      <script async src="https://www.googletagmanager.com/gtag/js?id={{site.googleAnalytics}}"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', '{{site.googleAnalytics}}');
-      </script>
-
-     {% endif %}
-    </body>
-</html>
+<html lang="{{ site.lang | default: " en-US" }}">
+{% include head.html %}
+
+<body id="page-top" class="index">
+  {% include header.html %}
+  {% include main.html %}
+  {% include overview.html %}
+  {% include cloudBase.html %}
+  <div class="layout-bottom">
+    {% include features.html %}
+    {% include getStarted.html %}
+  </div>
+
+  {% include footer.html %}
+  {% include js.html %}
+
+  {% if site.googleAnalytics %}
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id={{site.googleAnalytics}}"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+
+    gtag('config', '{{site.googleAnalytics}}');
+  </script>
+  <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
+  <script>
+    var player = videojs('my-video', {
+      autoplay: 'true',
+      loop: 'true',
+      muted: 'true',
+      fluid: 'true'
+    }).player();
+    const controlBar = player.getChild('ControlBar');
+    controlBar.addClass('vjs-hidden')
+
+    const playSoundButton = document.querySelector('.play-sound-button')
+    const openFullScreenButton = document.querySelector('.open-full-screen-button')
+
+    function hideButtonsAndShowControlBar() {
+        player.currentTime(0)
+        playSoundButton.style.display = "none";
+        openFullScreenButton.style.display = "none";
+        controlBar.removeClass('vjs-hidden');
+    }
+
+    playSoundButton.addEventListener("click", () => {
+      player.muted(false)
+      hideButtonsAndShowControlBar()
+    });
+
+    openFullScreenButton.addEventListener("click", () => {
+      player.requestFullscreen()
+      hideButtonsAndShowControlBar()
+    });
+
+    player.on('fullscreenchange', function () {
+      const video = document.getElementById('my-video');
+
+      if (document.fullscreenElement === video || document.webkitFullscreenElement === video || document.mozFullScreenElement === video) {
+        video.classList.add('fullscreen-video');
+      } else {
+        video.classList.remove('fullscreen-video');
+      }
+    });
+
+
+  </script>
+  {% endif %}
+</body>
+
+</html>
\ No newline at end of file
diff --git a/img/osb-video-poster.png b/img/osb-video-poster.png
new file mode 100644
index 0000000..cfcbd63
Binary files /dev/null and b/img/osb-video-poster.png differ
diff --git a/img/workspacePage.png b/img/workspacePage.png
new file mode 100644
index 0000000..b0cab81
Binary files /dev/null and b/img/workspacePage.png differ