diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 71c9844..036a096 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -23,7 +23,7 @@ const config = {
   // to replace "en" with "zh-Hans".
   i18n: {
     defaultLocale: "en",
-    locales: ["en"],
+    locales: ["en"]
   },
 
   presets: [
@@ -32,21 +32,13 @@ const config = {
       /** @type {import('@docusaurus/preset-classic').Options} */
       ({
         docs: {
-          sidebarPath: require.resolve("./sidebars.js"),
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
+          sidebarPath: require.resolve("./sidebars.js")
         },
         blog: {
-          showReadingTime: true,
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
-          editUrl: "https://github.com/antstackio/hover-design/issues/new",
-        },
-        theme: {
-          customCss: require.resolve("./src/css/custom.css"),
-        },
-      }),
-    ],
+          showReadingTime: true
+        }
+      })
+    ]
   ],
 
   themeConfig:
@@ -56,28 +48,28 @@ const config = {
         title: "Hover Design",
         logo: {
           alt: "My Site Logo",
-          src: "img/logo.svg",
+          src: "img/logo.svg"
         },
         items: [
           {
             type: "doc",
             docId: "intro",
             position: "left",
-            label: "Documentation",
+            label: "Documentation"
           },
           {
             type: "doc",
             docId: "wiki/home",
             position: "left",
             sidebarId: "wiki",
-            label: "Wiki",
+            label: "Wiki"
           },
           {
             href: "https://github.com/antstackio/hover-design",
             label: "GitHub",
-            position: "right",
-          },
-        ],
+            position: "right"
+          }
+        ]
       },
       footer: {
         style: "dark",
@@ -87,13 +79,13 @@ const config = {
             items: [
               {
                 label: "Tutorial",
-                to: "/docs/intro",
+                to: "/docs/intro"
               },
               {
                 label: "Wiki",
-                to: "/docs/wiki/home",
-              },
-            ],
+                to: "/docs/wiki/home"
+              }
+            ]
           },
 
           {
@@ -101,19 +93,19 @@ const config = {
             items: [
               {
                 label: "GitHub",
-                href: "https://github.com/antstackio/hover-design",
-              },
-            ],
-          },
-        ],
+                href: "https://github.com/antstackio/hover-design"
+              }
+            ]
+          }
+        ]
         // copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
       },
       prism: {
         theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
-      },
+        darkTheme: darkCodeTheme
+      }
     }),
-  plugins: ["docusaurus-plugin-vanilla-extract"],
+  plugins: ["docusaurus-plugin-vanilla-extract"]
 };
 
 module.exports = config;
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
deleted file mode 100644
index 8d7ec0e..0000000
--- a/docs/src/css/custom.css
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
- */
-
-/* You can override the default Infima variables here. */
-:root {
-  --ifm-color-primary: #dc4d60;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
-  --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-}
-
-/* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme="dark"] {
-  --ifm-color-primary: #dc4d60;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-}
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
index f25ca5d..dce1069 100644
--- a/docs/src/pages/index.tsx
+++ b/docs/src/pages/index.tsx
@@ -1,53 +1,9 @@
 import React from "react";
-import clsx from "clsx";
-import Layout from "@theme/Layout";
-import Link from "@docusaurus/Link";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import styles from "./index.module.css";
-import HomepageFeatures from "@site/src/components/HomepageFeatures";
-function HomepageHeader() {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <header className={clsx("hero hero--primary", styles.heroBanner)}>
-      <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttonFlex}>
-          <div className={styles.buttons}>
-            <Link
-              className="button button--secondary button--lg"
-              to="/docs/intro"
-            >
-              Quick Start
-            </Link>
-          </div>
-          <div className={styles.buttons}>
-            <a
-              className="button button--secondary button--lg"
-              href="https://github.com/antstackio/hover-design"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Github
-            </a>
-          </div>
-        </div>
-      </div>
-    </header>
-  );
-}
 
-export default function Home(): JSX.Element {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <Layout
-      title={`${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />"
-    >
-      <HomepageHeader />
-      <main>
-        <HomepageFeatures />
-      </main>
-    </Layout>
-  );
-}
+type Props = {};
+
+const HomePage = (props: Props) => {
+  return <div>HomePage</div>;
+};
+
+export default HomePage;
diff --git a/packages/lib/src/components/HoverProvider/HoverProvider.tsx b/packages/lib/src/components/HoverProvider/HoverProvider.tsx
new file mode 100644
index 0000000..b180fae
--- /dev/null
+++ b/packages/lib/src/components/HoverProvider/HoverProvider.tsx
@@ -0,0 +1,20 @@
+import { createContext, useContext } from "react";
+import { IHoverProviderProps, IHoverThemeContext } from "./HoverProvider.types";
+
+export const HoverContext = createContext<
+  IHoverThemeContext<unknown | undefined>
+>({ theme: undefined });
+
+export const HoverProvider = <T,>({
+  value,
+  children
+}: IHoverProviderProps<T>) => {
+  return (
+    <HoverContext.Provider value={value}>{children}</HoverContext.Provider>
+  );
+};
+
+export const useHoverTheme = <T,>(): IHoverThemeContext<T> => {
+  const { theme } = useContext(HoverContext);
+  return { theme } as IHoverThemeContext<T>;
+};
diff --git a/packages/lib/src/components/HoverProvider/HoverProvider.types.ts b/packages/lib/src/components/HoverProvider/HoverProvider.types.ts
new file mode 100644
index 0000000..e08e0be
--- /dev/null
+++ b/packages/lib/src/components/HoverProvider/HoverProvider.types.ts
@@ -0,0 +1,8 @@
+export interface IHoverThemeContext<T> {
+  theme: T | undefined;
+}
+
+export interface IHoverProviderProps<T> {
+  value: IHoverThemeContext<T>;
+  children: React.ReactNode;
+}
diff --git a/packages/lib/src/components/HoverProvider/index.ts b/packages/lib/src/components/HoverProvider/index.ts
new file mode 100644
index 0000000..f33b788
--- /dev/null
+++ b/packages/lib/src/components/HoverProvider/index.ts
@@ -0,0 +1,2 @@
+export * from "./HoverProvider";
+export * from "./HoverProvider.types";
diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts
index f9112b4..26241d5 100644
--- a/packages/lib/src/index.ts
+++ b/packages/lib/src/index.ts
@@ -15,6 +15,7 @@ export * from "./components/Dialog";
 export * from "./components/Divider";
 export * from "./components/Flex";
 export * from "./components/Grid";
+export * from "./components/HoverProvider";
 export * from "./components/Icon";
 export * from "./components/Input";
 export * from "./components/Label";