diff --git a/clayui.com/content/docs/components/data-provider.mdx b/clayui.com/content/docs/components/data-provider.mdx
index 66a8d27419..f3db92480b 100644
--- a/clayui.com/content/docs/components/data-provider.mdx
+++ b/clayui.com/content/docs/components/data-provider.mdx
@@ -22,7 +22,7 @@ import {
     -   [useResource hook](#useresource-hook)
 -   [Features](#features)
     -   [Retry](#retry)
-    -   [Network Status](#network-Status)
+    -   [Network Status](#network-status)
     -   [Variables change](#variables-change)
     -   [Caching data](#caching-data)
 -   [Advanced](#advanced)
diff --git a/clayui.com/src/styles/site/_content-site.scss b/clayui.com/src/styles/site/_content-site.scss
index fb7bcf8605..c4549a973e 100644
--- a/clayui.com/src/styles/site/_content-site.scss
+++ b/clayui.com/src/styles/site/_content-site.scss
@@ -20,6 +20,16 @@
 				margin-bottom: $base-size;
 				margin-top: $base-size;
 			}
+
+			&[id] {
+				margin-top: calc(-81px + #{$base-size});
+				padding-top: 81px;
+
+				@media (min-width: $grid-float-breakpoint) {
+					margin-top: calc(-66px + #{$base-size});
+					padding-top: 66px;
+				}
+			}
 		}
 	}
 
diff --git a/clayui.com/src/styles/site/_site.scss b/clayui.com/src/styles/site/_site.scss
index 7f4b1383a5..9bbc73cdad 100644
--- a/clayui.com/src/styles/site/_site.scss
+++ b/clayui.com/src/styles/site/_site.scss
@@ -1,3 +1,7 @@
+html {
+	scroll-behavior: smooth;
+}
+
 body {
 	background-color: $bg-color;
 	font-size: 1rem;
diff --git a/clayui.com/src/templates/docs.js b/clayui.com/src/templates/docs.js
index 778067e1a5..dbfa421d45 100644
--- a/clayui.com/src/templates/docs.js
+++ b/clayui.com/src/templates/docs.js
@@ -109,8 +109,8 @@ export default props => {
 															aria-expanded="true"
 															className="active nav-link"
 															data-toggle="tab"
-															href="#advanced"
-															id="advancedTab"
+															href="#advancedTab"
+															id="advancedTabs"
 															role="tab"
 														>
 															{'React Component'}
@@ -140,9 +140,9 @@ export default props => {
 									<div className="col-12">
 										<div className="tab-content">
 											<div
-												aria-labelledby="advancedTab"
+												aria-labelledby="advancedTabs"
 												className="active fade show tab-pane"
-												id="advanced"
+												id="advancedTab"
 												role="tabpanel"
 											>
 												{fields &&