diff --git a/docs/assets/scss/common/_custom.scss b/docs/assets/scss/common/_custom.scss
index 6c06de5..a54c963 100644
--- a/docs/assets/scss/common/_custom.scss
+++ b/docs/assets/scss/common/_custom.scss
@@ -18,24 +18,27 @@
   font-size: $font-size-base;
 }
 
-body {
-  font-size: 1.105rem;
-}
-
 li {
   padding: 4px 0;
 }
 
-.videowrapper {
-  float: none;
-  clear: both;
-  text-align: center;
-  width: 700px;
+.video-media-youtube-inner {
+  display: flex;
+}
+
+.video-media-youtube-inner-vi01 {
+  flex: 1;
+  overflow: hidden;
   position: relative;
-  padding-bottom: 52.25%;
-  padding-top: 25px;
+  padding-bottom: 56.25%;
   height: 0;
-  margin: 0 auto;
-  margin-bottom: 10px;
-  max-width: 100%;
+  margin-bottom: 20px;
+}
+
+.video-media-youtube-inner-vi01 iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
diff --git a/docs/assets/scss/common/_vars.scss b/docs/assets/scss/common/_vars.scss
index 1ff4c8e..86cf3af 100644
--- a/docs/assets/scss/common/_vars.scss
+++ b/docs/assets/scss/common/_vars.scss
@@ -1,4 +1,5 @@
 $font-size-sm: $font-size-base * 0.8;
+$font-size-md: $font-size-base * 1;
 
 $purple-100: rgb(83, 111, 227);
 $pink-500: red;
@@ -14,7 +15,7 @@ $h2-font-size: calc(1.2rem + 0.6vw);
 $h3-font-size: calc(1.1rem + 0.3vw);
 $headings-font-weight: 500;
 
-$font-family-sans-serif: "Jost", "Helvetica Neue", -apple-system,
+$font-family-sans-serif: "system-ui", "Jost", "Helvetica Neue", -apple-system,
   blinkmacsystemfont, "Segoe UI", roboto, arial, "Noto Sans", sans-serif,
   "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 $font-family-base: $font-family-sans-serif;
diff --git a/docs/content/_index.md b/docs/content/_index.md
index 8e35679..d72a920 100644
--- a/docs/content/_index.md
+++ b/docs/content/_index.md
@@ -8,10 +8,16 @@ draft: false
 images: []
 ---
 
-<div style="font-style: italic; padding:5px 5px; margin-bottom: 20px; margin-top: 20px; font-weight:500"><i>Take notes for web pages and access them with a single click whenever you
-visit those web pages again.</i><br><small class="text-muted">(Syncs to Google Drive)</small></div>
-
-<div class="videowrapper "><iframe width="560" height="315" src="https://www.youtube.com/embed/ND8yNxlUfqc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
+<div style="font-style: italic; padding:5px 5px; margin-bottom: 20px; margin-top: 20px; font-weight:500">Take notes for web pages and access them with a single click whenever you visit those web pages again.<br><small class="text-muted">(Syncs to Google Drive)</small></div>
+
+<div class="video-media-youtube">
+  <div class="video-media-youtube-inner">
+    <div class="video-media-youtube-inner-vi01">
+      <iframe width="560" height="315" src="https://www.youtube.com/embed/ND8yNxlUfqc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+    </div>
+  </div>
+</div>
+<!-- <div class="videowrapper "><iframe width="560" height="315" src="https://www.youtube.com/embed/ND8yNxlUfqc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div> -->
 
 Ever needed to note down something about a webpage e.g. login id, frequent flyer
 number, membership number, tracking id etc. Something that you want to remember