diff --git a/src/css/base.css b/src/css/base.css
index b33545a3..859c449a 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -198,11 +198,217 @@ label::after {
   outline-width: 0;
 }
 
+/* Common margin padding css class */
+/* margin-top */
+.mt-0 {
+  margin-top: 0 !important;
+}
+
+.mt-1 {
+  margin-top: var(--base-extra-small-space) !important;  /* 8px */
+}
+
+.mt-2 {
+  margin-top: var(--base-small-space) !important;        /* 12px */
+}
+
+.mt-3 {
+  margin-top: var(--base-space) !important;             /* 16px */
+}
+
+.mt-4 {
+  margin-top: var(--base-medium-space) !important;    /* 24px */
+}
+
+.mt-5 {
+  margin-top: var(--base-large-space) !important;     /* 32px */
+}
+
+/* margin-bottom */
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.mb-1 {
+  margin-bottom: var(--base-extra-small-space) !important;   /* 8px */
+}
+
+.mb-2 {
+  margin-bottom: var(--base-small-space) !important;     /* 12px */
+}
+
+.mb-3 {
+  margin-bottom: var(--base-space) !important;         /* 16px */
+}
+
+.mb-4 {
+  margin-bottom: var(--base-medium-space) !important;   /* 24px */
+}
+
+.mb-5 {
+  margin-bottom: var(--base-large-space) !important;   /* 32px */
+}
+
 /* Responsive css */
-@media screen and (min-width: 1024px) {
+/* For tablet,ipad Portrait view mode 1024px screen */
+@media screen and (min-width: 740px) {
+  /* Spacing media query */
+  .mt-sm-0 {
+    margin-top: 0 !important;
+  }
+
+  .mt-sm-1 {
+    margin-top: var(--base-extra-small-space) !important;  /* 8px */
+  }
+
+  .mt-sm-2 {
+    margin-top: var(--base-small-space) !important;        /* 12px */
+  }
+
+  .mt-sm-3 {
+    margin-top: var(--base-space) !important;             /* 16px */
+  }
+
+  .mt-sm-4 {
+    margin-top: var(--base-medium-space) !important;    /* 24px */
+  }
+
+  .mt-sm-5 {
+    margin-top: var(--base-large-space) !important;     /* 32px */
+  }
+
+  /* margin-bottom */
+  .mb-sm-0 {
+    margin-bottom: 0 !important;
+  }
+
+  .mb-sm-1 {
+    margin-bottom: var(--base-extra-small-space) !important;   /* 8px */
+  }
+
+  .mb-sm-2 {
+    margin-bottom: var(--base-small-space) !important;     /* 12px */
+  }
+
+  .mb-sm-3 {
+    margin-bottom: var(--base-space) !important;         /* 16px */
+  }
+
+  .mb-sm-4 {
+    margin-bottom: var(--base-medium-space) !important;   /* 24px */
+  }
+
+  .mb-sm-5 {
+    margin-bottom: var(--base-large-space) !important;   /* 32px */
+  }
+}
+/* For tablet,ipad landscape mode 1024px screen */
+@media screen and (min-width: 993px) {
   .container-fluid {
     max-width: var(--width-container-fluid);
     padding: 0;
     margin: 0 auto;
   }
+
+  /* Spacing media query */
+  .mt-md-0 {
+    margin-top: 0 !important;
+  }
+
+  .mt-md-1 {
+    margin-top: var(--base-extra-small-space) !important;  /* 8px */
+  }
+
+  .mt-md-2 {
+    margin-top: var(--base-small-space) !important;        /* 12px */
+  }
+
+  .mt-md-3 {
+    margin-top: var(--base-space) !important;             /* 16px */
+  }
+
+  .mt-md-4 {
+    margin-top: var(--base-medium-space) !important;    /* 24px */
+  }
+
+  .mt-md-5 {
+    margin-top: var(--base-large-space) !important;     /* 32px */
+  }
+
+  /* margin-bottom */
+  .mb-md-0 {
+    margin-bottom: 0 !important;
+  }
+
+  .mb-md-1 {
+    margin-bottom: var(--base-extra-small-space) !important;   /* 8px */
+  }
+
+  .mb-md-2 {
+    margin-bottom: var(--base-small-space) !important;     /* 12px */
+  }
+
+  .mb-md-3 {
+    margin-bottom: var(--base-space) !important;         /* 16px */
+  }
+
+  .mb-md-4 {
+    margin-bottom: var(--base-medium-space) !important;   /* 24px */
+  }
+
+  .mb-md-5 {
+    margin-bottom: var(--base-large-space) !important;   /* 32px */
+  }
+}
+/* For large desktop to small desktop screen */
+@media screen and (min-width: 1200px) {
+  /* Spacing media query */
+  .mt-lg-0 {
+    margin-top: 0 !important;
+  }
+
+  .mt-lg-1 {
+    margin-top: var(--base-extra-small-space) !important;  /* 8px */
+  }
+
+  .mt-lg-2 {
+    margin-top: var(--base-small-space) !important;        /* 12px */
+  }
+
+  .mt-lg-3 {
+    margin-top: var(--base-space) !important;             /* 16px */
+  }
+
+  .mt-lg-4 {
+    margin-top: var(--base-medium-space) !important;    /* 24px */
+  }
+
+  .mt-lg-5 {
+    margin-top: var(--base-large-space) !important;     /* 32px */
+  }
+
+  /* margin-bottom */
+  .mb-lg-0 {
+    margin-bottom: 0 !important;
+  }
+
+  .mb-lg-1 {
+    margin-bottom: var(--base-extra-small-space) !important;   /* 8px */
+  }
+
+  .mb-lg-2 {
+    margin-bottom: var(--base-small-space) !important;     /* 12px */
+  }
+
+  .mb-lg-3 {
+    margin-bottom: var(--base-space) !important;         /* 16px */
+  }
+
+  .mb-lg-4 {
+    margin-bottom: var(--base-medium-space) !important;   /* 24px */
+  }
+
+  .mb-lg-5 {
+    margin-bottom: var(--base-large-space) !important;   /* 32px */
+  }
 }
diff --git a/src/css/doc.css b/src/css/doc.css
index f2b0c48c..1dc6a2ed 100644
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -15,7 +15,7 @@
   font-weight: var(--weight-semibold);
   letter-spacing: -0.025rem;
   line-height: var(--line-height-heading);
-  margin: 1.5rem 0 1rem;
+  margin-bottom: 0;
 }
 
 .doc h1 {
@@ -45,8 +45,9 @@
 
 .doc h2 {
   font-size: var(--heading-h2);
-  max-width: fit-content;
+  /* max-width: fit-content; */
   width: 100%;
+  margin-top: var(--base-extra-large-space);
   /* NOTE used to restrict width of key line */
 }
 
@@ -61,14 +62,17 @@
 
 .doc h3 {
   font-size: var(--heading-h3);
+  margin-top: var(--base-extra-large-space);
 }
 
 .doc h4 {
   font-size: var(--heading-h4);
+  margin-top: var(--base-extra-large-space);
 }
 
 .doc h5 {
   font-size: var(--heading-h5);
+  margin-top: var(--base-extra-large-space);
 }
 
 .doc h1 > a.anchor,
@@ -126,10 +130,20 @@
   word-spacing: inherit;
 }
 
-.doc .paragraph,
+.doc .paragraph {
+  margin-top: var(--base-space);
+}
+
+.doc .paragraph + .paragraph {
+  margin-top: var(--base-medium-space);
+}
+
+.doc .admonitionblock {
+  margin-top: var(--base-large-space);
+}
+
 .doc .olist,
 .doc .ulist,
-.doc .admonitionblock,
 .doc .exampleblock,
 .doc .imageblock,
 .doc .listingblock,
@@ -138,7 +152,7 @@
 .doc .swagger-container,
 .doc .verseblock,
 .doc .videoblock {
-  margin-top: 1rem;
+  margin-top: var(--base-medium-space);
 }
 
 .doc .paragraph .title,
@@ -149,11 +163,11 @@
 .doc .literalblock .title,
 .doc .openblock .title,
 .doc caption {
-  font-size: 1rem;
+  font-size: var(--font-base);
   font-weight: var(--weight-semibold);
   /* letter-spacing: -0.025em; */
   line-height: 1.2;
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--base-space);
   color: var(--color-brand-gray3);
 }
 
@@ -430,14 +444,22 @@ ul ul ul {
   width: auto;
 }
 
+.doc .quoteblock {
+  margin-top: var(--base-medium-space);
+}
+
 .doc .abstract blockquote {
   font-size: 0.9375rem;
-  margin: 1rem 0 1.5625rem 0;
+  margin: 0;
   font-weight: var(--weight-light);
   border-left: 2px solid var(--color-brand-gray5);
   padding-left: 1.125rem;
 }
 
+.doc .quoteblock + .paragraph {
+  margin-top: var(--base-extra-large-space);
+}
+
 .doc .abstract blockquote * {
   font-weight: inherit;
 }
@@ -599,7 +621,7 @@ table.tableblock pre code.language-bash.hljs {
 }
 
 .doc .dlist {
-  margin: 1.5rem 0;
+  margin: 1.5rem 0 0;
 }
 
 .doc .dlist dl {
@@ -607,24 +629,28 @@ table.tableblock pre code.language-bash.hljs {
 }
 
 .doc .dlist dt {
-  font-weight: var(--weight-medium);
+  font-weight: var(--weight-semibold);
 }
 
 .doc .dlist dd + dt {
   margin-top: 1.5rem;
 }
 
+.doc .dlist dt + dt {
+  margin-top: var(--base-extra-small-space);
+}
+
 .doc .dlist dd {
   margin-left: 1.5rem;
 }
 
 .doc .dlist dt + dd {
-  margin-top: 0.125rem;
+  margin-top: var(--base-small-space);
 }
 
-.doc .dlist dd > .openblock > .content > :first-child {
+/* .doc .dlist dd > .openblock > .content > :first-child {
   margin-top: 0;
-}
+} */
 
 .doc .sidebarblock > .content {
   border: 1px solid var(--color-border);
@@ -778,7 +804,7 @@ table.tableblock pre code.language-bash.hljs {
   padding: var(--base-space);
   border-radius: 8px;
   border: 1px solid var(--color-brand-gray8);
-  margin-top: var(--base-space);
+  margin-top: var(--base-extra-large-space);
 }
 
 .doc .tabs.ulist {
diff --git a/src/css/header.css b/src/css/header.css
index 9477475f..46315159 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -49,6 +49,7 @@
 .header-bottom-row {
   background: var(--color-brand-blue-secondary);
   display: none;
+  transition: all 0.3s;
 }
 
 .navbar-new-bottom .nav-item {
@@ -300,7 +301,7 @@
     color: var(--color-brand-blue);
   }
 
-  .navbar-new-bottom.is-active {
+  .header-bottom-row.is-active {
     display: block;
     position: absolute;
     width: 100%;
diff --git a/src/css/nav.css b/src/css/nav.css
index 0eabab88..a18ccf9b 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -8,6 +8,7 @@
   scrollbar-color: var(--color-border) transparent;
   height: 100%;
   z-index: var(--z-index-nav);
+  transition: all 0.1s;
 }
 
 .nav-menu::-webkit-scrollbar {
@@ -560,7 +561,7 @@ a.collapse-menu span {
   }
 }
 
-@media screen and (min-width: 767px) {
+@media screen and (max-width: 767px) {
   nav.nav a.menu-expand-toggle {
     right: -3.8rem;
     top: 60px;
diff --git a/src/css/vars.css b/src/css/vars.css
index c0ce8f34..d0852ac6 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -125,6 +125,7 @@
   --base-extra-small-space: 0.5rem; /* ~ 8px */
   --base-medium-space: 1.5rem; /* ~ 24px */
   --base-large-space: 2rem; /* ~ 32px */
+  --base-extra-large-space: 2.5rem; /* ~ 40px */
   --column-space: 2.5rem; /* ~ 40px */
   --admonition-icon-space: 1rem; /* ~ 16px */
   --admonition-content-space: 1rem; /* ~ 16px */
diff --git a/src/js/04-mobile-navbar.js b/src/js/04-mobile-navbar.js
index 494c37c2..07b47f4f 100644
--- a/src/js/04-mobile-navbar.js
+++ b/src/js/04-mobile-navbar.js
@@ -9,6 +9,7 @@
       navbarToggle.classList.toggle('is-active')
       document.getElementById(navbarToggle.dataset.target).classList.toggle('is-active')
       document.documentElement.classList.toggle('is-clipped--navbar')
+      document.querySelector('nav.collapse-menu').classList.remove('collapse-menu')
     })
   })
 })()
diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs
index e5fa82e0..6554bc3c 100644
--- a/src/partials/header-content.hbs
+++ b/src/partials/header-content.hbs
@@ -18,9 +18,9 @@
   </div>
   {{! End primary header }}
   {{! Start secondary header }}
-  <div class="header-bottom-row">
+  <div class="header-bottom-row" id="topbar-menu">
     <div class="container">
-        <nav id="topbar-menu" class="navbar navbar-new-bottom">
+        <nav  class="navbar navbar-new-bottom">
 
               <div class="navbar-collapse collapse" id="navbar2">
                 <ul class="navbar-nav w-100 justify-content-start">