diff --git a/src/css/is-this-helpful.css b/src/css/is-this-helpful.css
new file mode 100644
index 0000000..fab89de
--- /dev/null
+++ b/src/css/is-this-helpful.css
@@ -0,0 +1,103 @@
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700&display=swap');
+
+.is-this-helpful-box * { font-family: 'Source Sans Pro', sans-serif; }
+
+.is-this-helpful-box {
+  display: inline-block;
+  width: 100%;
+  padding-bottom: 25px;
+  border-top: 1px solid #ccc;
+  padding-top: 25px;
+  font-family: 'Source Sans Pro', sans-serif;
+}
+
+.is-this-helpful-box .btn-row {
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+  margin: 15px 0;
+}
+
+.is-this-helpful-box .btn-row .helpfull-btn {
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+}
+
+.is-this-helpful-box .btn-row .helpfull-btn:hover,
+.is-this-helpful-box .btn-row .helpfull-btn.active {
+  color: var(--color-brand-blue);
+}
+
+.is-this-helpful-box .btn-row .like-btn { margin-right: 15px; }
+
+.is-this-helpful-box .input-control {
+  width: 100%;
+  display: inline-block;
+  padding: 8px 12px;
+  border-radius: 5px;
+  border: 1px solid var(--color-brand-gray5);
+  resize: vertical;
+  font-size: 1rem;
+  color: var(--color-brand-gray4);
+  font-family: 'Source Sans Pro', sans-serif;
+}
+
+.dialog-box { display: none; }
+
+.dialog-box .blue-btn {
+  background-color: var(--color-brand-blue);
+  color: var(--color-brand-white);
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+  border: 2px solid var(--color-brand-blue);
+  display: inline-block;
+  border-radius: 5px;
+  font-weight: 500;
+  height: 30px;
+  width: 65px;
+  margin: 0 10px;
+}
+
+.dialog-box .disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.dialog-box .blue-btn.like-btn { opacity: 1; }
+
+.is-this-helpful-box h4 {
+  font-weight: var(--weight-semibold);
+  margin: 0 0 10px;
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+  color: var(--color-brand-gray4);
+}
+
+.is-this-helpful-box .action-btn-row {
+  text-align: right;
+  margin-top: 10px;
+  padding: 0 10px;
+}
+
+.is-this-helpful-box .action-btn-row .skip-btn {
+  display: inline-block;
+  font-weight: var(--weight-semibold);
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+  color: var(--color-brand-blue);
+}
+
+.is-this-helpful-box .action-btn-row .info-btn {
+  font-size: 0.75rem;
+  line-height: 0.75rem;
+  color: var(--color-brand-gray4);
+  display: inline-block;
+}
+
+.is-this-helpful-box .text-msg p {
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+  color: var(--color-brand-gray3);
+}
+
+.is-this-helpful-box .leave-addtional-box { display: none; }
diff --git a/src/css/site.css b/src/css/site.css
index 1df4b82..17a3166 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -1,3 +1,4 @@
+
 @import "typeface-gotham.css";
 @import "typeface-roboto-mono.css";
 @import "vars.css";
@@ -17,3 +18,4 @@
 @import "optanon.css";
 @import "highlight.css";
 @import "feedback.css";
+@import "is-this-helpful.css";
diff --git a/src/css/toc.css b/src/css/toc.css
index 8bb3e55..0b09343 100644
--- a/src/css/toc.css
+++ b/src/css/toc.css
@@ -9,7 +9,7 @@
   margin-bottom: 1.5rem;
 }
 
-.toc.sidebar .toc-menu {
+.sidebar-box {
   position: fixed; /* for IE */
   width: inherit; /* for position: fixed */
   position: sticky; /* stylelint-disable-line declaration-block-no-duplicate-properties */
@@ -19,13 +19,9 @@
   -ms-overflow-style: none;
 }
 
-.toc.embedded .toc-menu {
-  margin-top: 1rem;
-}
+.toc.embedded .toc-menu { margin-top: 1rem; }
 
-.toc-menu::-webkit-scrollbar {
-  width: 0;
-}
+.toc-menu::-webkit-scrollbar { width: 0; }
 
 .toc .toc-menu h3 {
   font-size: inherit;
@@ -46,9 +42,7 @@
   margin-left: 0.75rem;
 }
 
-.toc .toc-menu li {
-  margin: 0.5rem 0 0;
-}
+.toc .toc-menu li { margin: 0.5rem 0 0; }
 
 .toc a {
   color: inherit;
@@ -56,9 +50,7 @@
   text-decoration: none;
 }
 
-.toc a:hover {
-  color: var(--color-link);
-}
+.toc a:hover { color: var(--color-link); }
 
 .toc a.is-active {
   font-weight: var(--weight-medium);
@@ -70,6 +62,4 @@
   color: inherit;
 }
 
-.toc code {
-  line-height: 1.125;
-}
+.toc code { line-height: 1.125; }
diff --git a/src/css/vars.css b/src/css/vars.css
index 9582a44..e8808f6 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -6,6 +6,8 @@
   --color-brand-red-tint: #fcdedf;
   --color-brand-white: #fff;
   /* secondary */
+  --color-brand-blue: #57a0ff;
+  --color-blue-rgb: 87, 160, 255;
   --color-brand-light-blue: #00ace0;
   --color-brand-light-blue-tint: #d9f3fb;
   --color-brand-pink: #eb4971;
@@ -13,10 +15,16 @@
   --color-brand-purple: #b36cdb;
   --color-brand-purple-tint: #f4e9fa;
   /* tertiary */
-  --color-brand-gray: #666;
+  --color-brand-gray1: #292b36;
+  --color-brand-gray2: #3d4151;
+  --color-brand-gray3: #52566c;
+  --color-brand-gray4: #73768a;
+  --color-brand-gray5: #c8cbdf;
+  --color-brand-gray6: #eaebf1;
+  --color-brand-gray7: #f9f9f9;
   /* --color-brand-silver: #ccc; */
   --color-brand-silver: #c1c1c1;
-  --color-brand-blue: #0074e0;
+  /* --color-brand-blue: #0074e0; */
   --color-brand-blue-tint: #d9eafb;
   --color-brand-orange: #fc9c0c;
   --color-brand-orange-tint: #fff0da;
@@ -32,9 +40,9 @@
   --color-navbar-text: var(--color-brand-white);
   --color-footer-bg: var(--color-brand-black);
   --color-footer-text: var(--color-brand-white);
-  --height-spacer: 1.5rem;
+  --height-spacer: 1.3rem;
   /* --height-navbar: 4rem; */
-  --height-navbar: 4.875rem;
+  --height-navbar: 6.09rem;
   --height-to-body: calc(var(--height-navbar) + var(--height-spacer));
   --height-min-body: calc(100vh - var(--height-to-body));
   --height-nav: calc(var(--height-min-body) - var(--height-spacer));
@@ -43,12 +51,14 @@
   /* --width-main-gutter: 1.5rem; */
   --width-main-gutter: 2.5rem;
   --width-container: 90rem;
+  --width-container-fluid: 100%;
   --width-container-gutter: 1.25rem;
-  --width-nav: 16rem;
+  --width-nav: 20rem;
   --width-toc: 12rem;
   --weight-light: 300;
   --weight-normal: 400;
   --weight-medium: 500;
+  --weight-semibold: 600;
   --weight-bold: 700;
   --z-index-feedback: 7;
   --z-index-nav-mobile: 6;
@@ -57,4 +67,7 @@
   --z-index-navbar: 3;
   --z-index-footer: 2;
   --z-index-nav: 1;
+
+  /* Color brand tabsets */
+  --color-active-tabset: #57a1ff;
 }
diff --git a/src/js/06-page-rating.js b/src/js/06-page-rating.js
new file mode 100644
index 0000000..8063984
--- /dev/null
+++ b/src/js/06-page-rating.js
@@ -0,0 +1,53 @@
+;(function () {
+  'use strict'
+
+  var dialogBox = document.getElementById('dialogBox')
+  var helpYesBtn = document.getElementById('yesBtn')
+  var helpNoBtn = document.getElementById('noBtn')
+  var skipBtnMsg = document.getElementById('skipBtnMsg')
+  var feedBackFormBox = document.getElementById('additionalFeedbackBox')
+  var leaveAddtinalBox = document.getElementById('leaveAddtinalBox')
+  var skipLeaveBtn = document.getElementById('skipLeaveBtn')
+  var feedBackMsg = document.querySelector('.feed-back-msg')
+  var submitBtn = document.querySelector('.submit-btn')
+  var leaveYesBtn = document.querySelector('.yes-btn')
+  // for config
+  var yesBtnData = helpYesBtn.dataset
+  var noBtnData = helpNoBtn.dataset
+
+  helpYesBtn.addEventListener('click', function (e) {
+    dialogBox.style.display = 'block'
+    this.classList.add('active')
+    helpNoBtn.classList.remove('active')
+    console.log(yesBtnData, 16)
+  })
+  helpNoBtn.addEventListener('click', function (e) {
+    dialogBox.style.display = 'block'
+    this.classList.add('active')
+    helpYesBtn.classList.remove('active')
+    console.log(noBtnData, 27)
+  })
+
+  skipBtnMsg.addEventListener('click', function (e) {
+    feedBackFormBox.style.display = 'none'
+    leaveAddtinalBox.style.display = 'block'
+  })
+
+  skipLeaveBtn.addEventListener('click', function (e) {
+    leaveAddtinalBox.style.display = 'none'
+    feedBackFormBox.style.display = 'block'
+  })
+
+  feedBackMsg.addEventListener('keyup', function (e) {
+    var textareaValue = this.value
+
+    if (textareaValue !== '') {
+      submitBtn.classList.remove('disabled')
+    } else {
+      submitBtn.classList.add('disabled')
+    }
+  })
+  leaveYesBtn.addEventListener('click', function (e) {
+    leaveAddtinalBox.style.display = 'none'
+  })
+})()
diff --git a/src/js/vendor/feedback.js b/src/js/vendor/feedback.js
index 62e03df..2f7d0f5 100644
--- a/src/js/vendor/feedback.js
+++ b/src/js/vendor/feedback.js
@@ -1,10 +1,11 @@
 ;(function () {
   'use strict'
 
-  if (Math.max(window.screen.availHeight, window.screen.availWidth) < 769) return
+  if (Math.max(window.screen.availHeight, window.screen.availWidth) > 769) return
 
   window.addEventListener('load', function () {
     var config = document.getElementById('feedback-script').dataset
+    console.log(config, 8)
     var script = document.createElement('script')
     // eslint-disable-next-line max-len
     script.src = 'https://issues.couchbase.com/s/66cd330397e6b28e6a44bd3d603733a8-T/j9sjl8/802003/be0e2f3d0946caa44cd62a35c9de2f18/3.0.7/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector-embededjs/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector-embededjs.js?locale=en-US&collectorId=' + config.collectorId // prettier-ignore
diff --git a/src/partials/head-last.hbs b/src/partials/head-last.hbs
index dc7fb0d..1ebe749 100644
--- a/src/partials/head-last.hbs
+++ b/src/partials/head-last.hbs
@@ -1,4 +1,6 @@
     <link rel="stylesheet" href="{{uiRootPath}}/css/site.css">
+   {{!-- include fontAwesome CDN --}}
+   <script src="https://kit.fontawesome.com/4a5569d39d.js" crossorigin="anonymous"></script>
     {{#if env.OPTANON_SCRIPT_URL}}
     <script src="{{uiRootPath}}/js/vendor/jquery.js"></script>
     <script src="{{env.OPTANON_SCRIPT_URL}}"></script>
diff --git a/src/partials/toc.hbs b/src/partials/toc.hbs
index 142e791..2d56274 100644
--- a/src/partials/toc.hbs
+++ b/src/partials/toc.hbs
@@ -1,3 +1,44 @@
 <aside class="toc sidebar">
-  <div class="toc-menu"></div>
+  <div class="sidebar-box">
+      <div class="toc-menu"></div>
+        <div class="is-this-helpful-box">
+          <h4> Is this page helpful ?</h4>
+            <div class="btn-row">
+              <a href="#" class="like-btn helpfull-btn" id="yesBtn" data-page-rating="like" >
+                     <i class="far fa-thumbs-up"></i>
+                 Yes
+
+                 </a>
+              <a href="#" class="dislike-btn helpfull-btn" id="noBtn"  data-page-rating="dislike"> <i class="far fa-thumbs-down"></i> No</a>
+            </div>
+            <div class="dialog-box" id="dialogBox">
+              <form>
+                  <div class="form-group " id="additionalFeedbackBox"> 
+                    <textarea class="input-control feed-back-msg" rows="8" placeholder="Any Additonal Feedback?"></textarea>
+                    
+                    <div class="action-btn-row ">
+                      <a href="#" class="skip-btn" id="skipBtnMsg">Skip</a>
+                       <button class="submit-btn btn blue-btn disabled" > Submit  </button>
+                       <a href="#" class="info-btn"><i class="fas fa-info-circle"></i></a>
+                    </div>
+               
+
+                  </div>
+
+                  <div class="leave-addtional-box" id="leaveAddtinalBox">
+                    <div class="text-msg"> <p>Leave Additional Feedback?</p> </div>
+                         <div class="action-btn-row leave-feedback-btn-row">
+                            <a href="#" class="skip-btn" id="skipLeaveBtn">Skip</a>
+                            <button class="yes-btn btn blue-btn"> Yes  </button>
+                            
+                      </div>
+                  </div>
+              </form>
+
+            </div>
+      </div>
+   </div>
+
 </aside>
+
+{{!-- <script src="https://kit.fontawesome.com/4a5569d39d.js" crossorigin="anonymous"></script> --}}
\ No newline at end of file