diff --git a/packages/site/gatsby-ssr.tsx b/packages/site/gatsby-ssr.tsx
index 6800e44..16537ce 100644
--- a/packages/site/gatsby-ssr.tsx
+++ b/packages/site/gatsby-ssr.tsx
@@ -2,3 +2,11 @@
 import LayoutComponent from './wrapPageElement';
 
 export const wrapPageElement = LayoutComponent;
+
+const HtmlAttributes = {
+  lang: 'en',
+};
+
+export const onRenderBody = ({ setHtmlAttributes }) => {
+  setHtmlAttributes(HtmlAttributes);
+};
diff --git a/packages/site/src/components/AppLayout/index.tsx b/packages/site/src/components/AppLayout/index.tsx
index a8494d3..3369539 100644
--- a/packages/site/src/components/AppLayout/index.tsx
+++ b/packages/site/src/components/AppLayout/index.tsx
@@ -26,7 +26,10 @@ const AppLayout = ({ children }: { children: ReactNode }) => {
         >
           {/* overlay */}
           {open && (
-            <div onClick={onOpen} className="absolute lg:hidden inset-0 h-full min-h-screen bg-white/70 z-[1000]"></div>
+            <div
+              onClick={onOpen}
+              className="absolute lg:hidden inset-0 h-full min-h-screen bg-white/70 dark:bg-dark/90 z-[1000]"
+            ></div>
           )}
           <section className="px-4 md:px-6 xl:px-19">
             <AppHeader onOpen={onOpen} />
diff --git a/packages/site/src/components/AppTabs/index.tsx b/packages/site/src/components/AppTabs/index.tsx
index 75fb170..dc5b185 100644
--- a/packages/site/src/components/AppTabs/index.tsx
+++ b/packages/site/src/components/AppTabs/index.tsx
@@ -1,4 +1,4 @@
-import React, { Children, JSXElementConstructor, ReactElement, ReactNode, useState } from 'react';
+import React, { Children, FunctionComponentElement, ReactNode, useState } from 'react';
 
 type AppTabProps = {
   isActive?: boolean;
@@ -9,7 +9,7 @@ type AppTabProps = {
 };
 
 type Props = {
-  children: Array<ReactElement<AppTabProps, JSXElementConstructor<unknown>>>;
+  children: Array<FunctionComponentElement<AppTabProps>>;
 };
 
 export const AppTab = ({ isActive, position, ariaLabelledby, children }: AppTabProps) => {
@@ -26,12 +26,15 @@ export const AppTab = ({ isActive, position, ariaLabelledby, children }: AppTabP
   );
 };
 
+AppTab.displayName = 'AppTab';
+
 const AppTabs = ({ children }: Props) => {
   const [activeIndex, setActiveIndex] = useState(0);
 
   const nodes = Children.map(children, (node) => {
-    if (node.type.name !== 'AppTab') {
-      throw new Error('Use AppTab within AppTabs');
+    console.log(node.type.name);
+    if (node.type.displayName !== 'AppTab') {
+      console.warn('Use AppTab within AppTabs');
     }
     return node;
   });
diff --git a/packages/site/src/docs/demo.mdx b/packages/site/src/docs/demo.mdx
index d288cb0..9d0c0a7 100644
--- a/packages/site/src/docs/demo.mdx
+++ b/packages/site/src/docs/demo.mdx
@@ -1,6 +1,6 @@
 ---
 title: Gatsby Source
-tail: Hubspot Node Plugin v1.0.1
+tail: Hubspot Node  Demo
 slug: demo
 date: 2019-01-29
 tableOfContentsDepth: 2
@@ -12,7 +12,7 @@ import AppCardWithPhoto from '@components/AppCard/AppCardWithPhoto';
 import AppCardWithContact from '@components/AppCard/AppCardWithContact';
 
 Examples using Github repo data
-<AppCard className="p-4 mb-10 bg-white dark:bg-gray-80 shadow">
+<AppCard className="p-4 mb-10 bg-white dark:bg-gray-80 shadow-inner lg:shadow">
   <ul className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 place-content-between md:place-items-center bg-brand-dgray dark:bg-dark shadow-sm rounded-md px-6 py-4 gap-4">
     <li className="flex justify-center md:justify-normal basis-full md:basis-auto">
       <div className="text-center">
diff --git a/packages/site/src/docs/development.mdx b/packages/site/src/docs/development.mdx
index 80ccbd2..cec370b 100644
--- a/packages/site/src/docs/development.mdx
+++ b/packages/site/src/docs/development.mdx
@@ -65,7 +65,7 @@ The rest of this part of the Tutorial walks you through how to install the follo
 
 Follow the installation instructions below, based on your computer's operating system. (Click the header to expand the section.)
 
-<iframe
+{/* <iframe
   width="100%"
   height="415"
   src="https://codesandbox.io/p/sandbox/quirky-fire-x8h7j6?file=%2Fsrc%2Findex.js"
@@ -73,7 +73,7 @@ Follow the installation instructions below, based on your computer's operating s
   frameBorder="0"
   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
   allowFullScreen
-></iframe>
+></iframe> */}
 {/* <Collapsible
   summary={<h4>Mac instructions</h4>}
 >
diff --git a/packages/site/src/pages/demo.tsx b/packages/site/src/pages/demo.tsx
index 6dfc01a..88883a1 100644
--- a/packages/site/src/pages/demo.tsx
+++ b/packages/site/src/pages/demo.tsx
@@ -27,7 +27,7 @@ export default DashboardPage;
 export const Head: HeadFC = () => (
   <>
     <html lang="en" />
-    <title>Dashboard Page</title>
+    <title>Demo Page</title>
     <meta name="author" content="Samson Iyanda"></meta>
     <meta name="description" content="site for gatsby source hubspot plugin documentation"></meta>
     <meta name="keywords" content="gatsby, gatsby plugin, reactjs, hubspot"></meta>
diff --git a/packages/site/src/pages/index.tsx b/packages/site/src/pages/index.tsx
index d8dc122..f5b49cd 100644
--- a/packages/site/src/pages/index.tsx
+++ b/packages/site/src/pages/index.tsx
@@ -36,6 +36,9 @@ export const query = graphql`
 export const Head: HeadFC<Queries.IndexPageQuery> = ({ data }) => (
   <>
     <title>{data.mdx.frontmatter.title}</title>
+    <meta name="author" content="Samson Iyanda"></meta>
+    <meta name="description" content="site for gatsby source hubspot plugin documentation"></meta>
+    <meta name="keywords" content="gatsby, gatsby plugin, reactjs, hubspot"></meta>
   </>
 );
 
diff --git a/packages/site/src/templates/docs.tsx b/packages/site/src/templates/docs.tsx
index 86ec6c2..637391e 100644
--- a/packages/site/src/templates/docs.tsx
+++ b/packages/site/src/templates/docs.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type { PageProps } from 'gatsby';
+import type { HeadFC, PageProps } from 'gatsby';
 
 import { Props as TableContentProps } from '@components/AppTableOfContents';
 import ContentMarkUp from '@components/ContentMarkUp';
@@ -19,4 +19,17 @@ const DocMarkUp: React.FC<PageProps<unknown, Queries.GetAllDocumentsQuery['allMd
   );
 };
 
+export const Head: HeadFC<unknown, Queries.GetAllDocumentsQuery['allMdx']['nodes'][0]> = (data) => {
+  const { title, tail, summary } = data.pageContext.frontmatter;
+  return (
+    <>
+      <title>
+        {title} {tail ? tail : ''}
+      </title>
+      <meta name="author" content="Samson Iyanda"></meta>
+      <meta name="description" content={summary}></meta>
+    </>
+  );
+};
+
 export default DocMarkUp;