diff --git a/website/package.json b/website/package.json
index a478b06..8bf0cd8 100644
--- a/website/package.json
+++ b/website/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "framer-motion": "^4.1.17",
     "next": "11.0.1",
+    "next-seo": "^4.26.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
diff --git a/website/pages/[package]/[function].tsx b/website/pages/[package]/[function].tsx
index c3c6129..72cd9dc 100644
--- a/website/pages/[package]/[function].tsx
+++ b/website/pages/[package]/[function].tsx
@@ -1,5 +1,6 @@
 import { getMDXComponent } from 'mdx-bundler/client'
 import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
+import { NextSeo } from 'next-seo'
 import { useMemo } from 'react'
 import { mdxComponents } from 'ui/docs/mdxComponents'
 import { getAllFunctionsMeta, getFunction } from 'utils/loadMDX'
@@ -29,5 +30,19 @@ type Props = InferGetStaticPropsType<typeof getStaticProps>
 
 export default function Functions({ meta, code }: Props) {
   const Component = useMemo(() => getMDXComponent(code), [code])
-  return <Component components={mdxComponents as any} />
+  return (
+    <>
+      <NextSeo
+        title={`${meta.name} — React Hooks Library`}
+        description={meta.description}
+        canonical={`https://react-hooks-library.vercel.app/${meta.name}`}
+        openGraph={{
+          url: `https://react-hooks-library.vercel.app/${meta.name}`,
+          title: `${meta.name} — React Hooks Library`,
+          description: meta.description
+        }}
+      />
+      <Component components={mdxComponents as any} />
+    </>
+  )
 }
diff --git a/website/pages/_app.tsx b/website/pages/_app.tsx
index ff230a2..5f983dc 100644
--- a/website/pages/_app.tsx
+++ b/website/pages/_app.tsx
@@ -4,12 +4,14 @@ import 'public/styles/prism.css'
 import { AnimatePresence, motion } from 'framer-motion'
 import { AppProps } from 'next/app'
 import { Header } from 'ui/Header'
+import { SEO } from 'ui/SEO'
 import { SideBar } from 'ui/SideBar'
 import { ThemeProvider } from 'ui/ThemeProvider'
 
 const App: React.FC<AppProps> = ({ Component, pageProps, router }) => {
   return (
     <>
+      <SEO />
       <ThemeProvider>
         <Header />
         <SideBar />
diff --git a/website/pages/design.tsx b/website/pages/design.tsx
index 0471e32..84483c2 100644
--- a/website/pages/design.tsx
+++ b/website/pages/design.tsx
@@ -1,5 +1,6 @@
 import { getMDXComponent } from 'mdx-bundler/client'
 import { InferGetStaticPropsType } from 'next'
+import { NextSeo } from 'next-seo'
 import React, { useMemo } from 'react'
 import { Color } from 'ui/Color'
 import { loadMdx } from 'utils/loadMDX'
@@ -57,144 +58,156 @@ export default function Design({ code }: Props) {
   const CodeComponent = useMemo(() => getMDXComponent(code), [code])
 
   return (
-    <div className="flex flex-col w-full h-full gap-8 mx-auto md:max-w-screen-md 2xl:max-w-screen-2xl">
-      <h1>Design System</h1>
-      <section className="flex flex-col gap-8">
-        <h2>Colors</h2>
-        <div>
-          <h3>Brand</h3>
-          <Color className="bg-brand" varName="--brand" />
-        </div>
-        <div>
-          <h3>Background</h3>
-          <div className="flex flex-col gap-4">
-            <Color className="bg-bg-1" varName="--bg-1" />
-            <Color className="bg-bg-2" varName="--bg-2" />
+    <>
+      <NextSeo
+        title="Design — React Hooks Library"
+        description="Design system for react hooks library docs website"
+        canonical="https://react-hooks-library.vercel.app/design"
+        openGraph={{
+          url: 'https://react-hooks-library.vercel.app/design',
+          title: 'Design — React Hooks Library',
+          description: 'Design system for react hooks library docs website'
+        }}
+      />
+      <div className="flex flex-col w-full h-full gap-8 mx-auto md:max-w-screen-md 2xl:max-w-screen-2xl">
+        <h1>Design System</h1>
+        <section className="flex flex-col gap-8">
+          <h2>Colors</h2>
+          <div>
+            <h3>Brand</h3>
+            <Color className="bg-brand" varName="--brand" />
           </div>
-        </div>
-
-        <div>
-          <h3>Foreground</h3>
-          <Color className="bg-fg-1" varName="--fg-1" />
-        </div>
-
-        <div>
-          <h3>Typography</h3>
-          <div className="flex flex-col gap-4">
-            <Color className="bg-txt-1" varName="--txt-1" />
-            <Color className="bg-txt-2" varName="--txt-2" />
+          <div>
+            <h3>Background</h3>
+            <div className="flex flex-col gap-4">
+              <Color className="bg-bg-1" varName="--bg-1" />
+              <Color className="bg-bg-2" varName="--bg-2" />
+            </div>
+          </div>
+
+          <div>
+            <h3>Foreground</h3>
+            <Color className="bg-fg-1" varName="--fg-1" />
           </div>
-        </div>
-      </section>
-
-      <section>
-        <h2>Pill</h2>
-        <div className="flex gap-3">
-          <div className="pill active">active</div>
-          <div className="pill info">info</div>
-          <div className="pill danger">danger</div>
-          <div className="pill warning">warning</div>
-          <div className="pill success">success</div>
-        </div>
-      </section>
-
-      <section>
-        <h2>Typography</h2>
-        <p className="mt-6">h1</p>
-        <h1>Sphinx of black quartz, judge my vow</h1>
-
-        <p className="mt-6">h2</p>
-        <h2>Sphinx of black quartz, judge my vow</h2>
-
-        <p className="mt-6">h3</p>
-        <h2>Sphinx of black quartz, judge my vow</h2>
-
-        <p className="mt-6">h4</p>
-        <h4>Sphinx of black quartz, judge my vow</h4>
-
-        <p className="mt-6">p</p>
-        <p>Sphinx of black quartz, judge my vow</p>
-
-        <p className="mt-6">p (bold)</p>
-        <p className="font-bold">Sphinx of black quartz, judge my vow</p>
-
-        <p className="mt-6">strong</p>
-        <strong>Sphinx of black quartz, judge my vow</strong>
-
-        <p className="mt-6">p (italic)</p>
-        <p className="italic">Sphinx of black quartz, judge my vow</p>
-
-        <p className="mt-6">i</p>
-        <i>Sphinx of black quartz, judge my vow</i>
-      </section>
-
-      <section>
-        <h2>Buttons</h2>
-        <button className="mr-5">Submit</button>
-        <button disabled>Disabled</button>
-      </section>
-
-      <section>
-        <h2>Link</h2>
-        <a href="/">Home</a>
-      </section>
-
-      <section>
-        <h2>Lists</h2>
-        <ul className="mb-6">
-          <li>Charmander</li>
-          <li>Squirtle</li>
-          <li>Bulbasaur</li>
-          <li>Pikachu</li>
-        </ul>
-        <ol>
-          <li>Charmander</li>
-          <li>Squirtle</li>
-          <li>Bulbasaur</li>
-          <li>Pikachu</li>
-        </ol>
-      </section>
-
-      <section>
-        <h2>Forms</h2>
-        <div>
-          <h3>Input</h3>
-          <div className="flex flex-col gap-2">
-            <input type="text" placeholder="enter text" />
-            <div className="flex items-center gap-3">
-              <input id="ds-checkbox" type="checkbox" />
-              <label htmlFor="ds-checkbox">Checkbox</label>
+
+          <div>
+            <h3>Typography</h3>
+            <div className="flex flex-col gap-4">
+              <Color className="bg-txt-1" varName="--txt-1" />
+              <Color className="bg-txt-2" varName="--txt-2" />
             </div>
-            <div>
-              <div className="flex gap-3">
-                <input
-                  type="radio"
-                  id="ds-radio-1"
-                  name="ds-radio"
-                  value="Radio 1"
-                  defaultChecked
-                />
-                <label htmlFor="ds-radio-1">Radio 1</label>
+          </div>
+        </section>
+
+        <section>
+          <h2>Pill</h2>
+          <div className="flex gap-3">
+            <div className="pill active">active</div>
+            <div className="pill info">info</div>
+            <div className="pill danger">danger</div>
+            <div className="pill warning">warning</div>
+            <div className="pill success">success</div>
+          </div>
+        </section>
+
+        <section>
+          <h2>Typography</h2>
+          <p className="mt-6">h1</p>
+          <h1>Sphinx of black quartz, judge my vow</h1>
+
+          <p className="mt-6">h2</p>
+          <h2>Sphinx of black quartz, judge my vow</h2>
+
+          <p className="mt-6">h3</p>
+          <h2>Sphinx of black quartz, judge my vow</h2>
+
+          <p className="mt-6">h4</p>
+          <h4>Sphinx of black quartz, judge my vow</h4>
+
+          <p className="mt-6">p</p>
+          <p>Sphinx of black quartz, judge my vow</p>
+
+          <p className="mt-6">p (bold)</p>
+          <p className="font-bold">Sphinx of black quartz, judge my vow</p>
+
+          <p className="mt-6">strong</p>
+          <strong>Sphinx of black quartz, judge my vow</strong>
+
+          <p className="mt-6">p (italic)</p>
+          <p className="italic">Sphinx of black quartz, judge my vow</p>
+
+          <p className="mt-6">i</p>
+          <i>Sphinx of black quartz, judge my vow</i>
+        </section>
+
+        <section>
+          <h2>Buttons</h2>
+          <button className="mr-5">Submit</button>
+          <button disabled>Disabled</button>
+        </section>
+
+        <section>
+          <h2>Link</h2>
+          <a href="/">Home</a>
+        </section>
+
+        <section>
+          <h2>Lists</h2>
+          <ul className="mb-6">
+            <li>Charmander</li>
+            <li>Squirtle</li>
+            <li>Bulbasaur</li>
+            <li>Pikachu</li>
+          </ul>
+          <ol>
+            <li>Charmander</li>
+            <li>Squirtle</li>
+            <li>Bulbasaur</li>
+            <li>Pikachu</li>
+          </ol>
+        </section>
+
+        <section>
+          <h2>Forms</h2>
+          <div>
+            <h3>Input</h3>
+            <div className="flex flex-col gap-2">
+              <input type="text" placeholder="enter text" />
+              <div className="flex items-center gap-3">
+                <input id="ds-checkbox" type="checkbox" />
+                <label htmlFor="ds-checkbox">Checkbox</label>
               </div>
-              <div className="flex gap-3">
-                <input
-                  type="radio"
-                  id="ds-radio-2"
-                  name="ds-radio"
-                  value="Radio 2"
-                  defaultChecked
-                />
-                <label htmlFor="ds-radio-2">Radio 2</label>
+              <div>
+                <div className="flex gap-3">
+                  <input
+                    type="radio"
+                    id="ds-radio-1"
+                    name="ds-radio"
+                    value="Radio 1"
+                    defaultChecked
+                  />
+                  <label htmlFor="ds-radio-1">Radio 1</label>
+                </div>
+                <div className="flex gap-3">
+                  <input
+                    type="radio"
+                    id="ds-radio-2"
+                    name="ds-radio"
+                    value="Radio 2"
+                    defaultChecked
+                  />
+                  <label htmlFor="ds-radio-2">Radio 2</label>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </section>
-
-      <section>
-        <h2>Code Block</h2>
-        <CodeComponent />
-      </section>
-    </div>
+        </section>
+
+        <section>
+          <h2>Code Block</h2>
+          <CodeComponent />
+        </section>
+      </div>
+    </>
   )
 }
diff --git a/website/ui/SEO.tsx b/website/ui/SEO.tsx
new file mode 100644
index 0000000..15cd0f6
--- /dev/null
+++ b/website/ui/SEO.tsx
@@ -0,0 +1,38 @@
+import { DefaultSeo } from 'next-seo'
+
+export const SEO: React.FC = () => {
+  return (
+    <DefaultSeo
+      title="React Hooks Library"
+      description="A collection of hooks and utilities for React"
+      canonical="https://react-hooks-library.vercel.app"
+      openGraph={{
+        url: 'https://react-hooks-library.vercel.app',
+        title: 'React Hooks Library',
+        description: 'A collection of hooks and utilities for React',
+        site_name: 'React Hooks Library'
+        // images: [
+        //   {
+        //     url: 'https://www.example.ie/og-image-01.jpg',
+        //     width: 800,
+        //     height: 600,
+        //     alt: 'Og Image Alt'
+        //   },
+        //   {
+        //     url: 'https://www.example.ie/og-image-02.jpg',
+        //     width: 900,
+        //     height: 800,
+        //     alt: 'Og Image Alt Second'
+        //   },
+        //   { url: 'https://www.example.ie/og-image-03.jpg' },
+        //   { url: 'https://www.example.ie/og-image-04.jpg' }
+        // ]
+      }}
+      //   twitter={{
+      //     handle: '',
+      //     site: '',
+      //     cardType: 'summary_large_image'
+      //   }}
+    />
+  )
+}
diff --git a/yarn.lock b/yarn.lock
index bfd5045..83d597d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5820,6 +5820,11 @@ next-pwa@^5.3.1:
     workbox-webpack-plugin "^6.2.4"
     workbox-window "^6.2.4"
 
+next-seo@^4.26.0:
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-4.26.0.tgz#4218cfae5651fdc2e330dcdf1cc1b34ce199d41c"
+  integrity sha512-5TqywQ3XAwqdmEU1AyNZjR7WdDKFTkDD8aBtgQelPvzBUEy8i0mTjtiw+09jhiHFNik6FqS8uPKCaYcY6jRgSQ==
+
 next@11.0.1:
   version "11.0.1"
   resolved "https://registry.yarnpkg.com/next/-/next-11.0.1.tgz#b8e3914d153aaf7143cb98c09bcd3c8230eeb17a"