diff --git a/website/src/app/layout.tsx b/website/src/app/layout.tsx
index 5edc46c..ce8bf8d 100644
--- a/website/src/app/layout.tsx
+++ b/website/src/app/layout.tsx
@@ -1,4 +1,15 @@
 import { BaseLayout } from '@/components/layout'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Splashy',
+  description: 'Get predominant colors for any image.',
+  authors: [{ name: 'Microlink HQ', url: 'https://microlink.io' }],
+  other: {
+    ['twitter:label1']: 'Node.js',
+    ['twitter:data1']: 'npm install splashy'
+  }
+}
 
 export default function Layout ({ children }: { children: React.ReactNode }) {
   return <BaseLayout>{children}</BaseLayout>
diff --git a/website/src/app/opengraph-image.png b/website/src/app/opengraph-image.png
new file mode 100644
index 0000000..4f02098
Binary files /dev/null and b/website/src/app/opengraph-image.png differ
diff --git a/website/src/components/layout/index.tsx b/website/src/components/layout/index.tsx
index d76ce40..6c2dd70 100644
--- a/website/src/components/layout/index.tsx
+++ b/website/src/components/layout/index.tsx
@@ -3,16 +3,14 @@
 import './globals.css'
 
 import { ClassAttributes, ImgHTMLAttributes, JSX } from 'react'
+import { Toaster } from '@/components/ui/toaster'
+import { Footer } from '@/components/footer'
 import { Link } from '@/components/ui/link'
 import { Inter } from 'next/font/google'
 import NextLink from 'next/link'
-import { Toaster } from '@/components/ui/toaster'
-import { Footer } from '@/components/footer'
 
 const inter = Inter({ subsets: ['latin'] })
 
-import * as React from 'react'
-
 const SplashyLogo = (props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>) => (
   <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 922 312' {...props}>
     <g fill='none'>
@@ -112,7 +110,6 @@ export const ContainerLayout = ({ children }: { children: React.ReactNode }) =>
         </header>
         <main className='pt-8 pb-24'>{children}</main>
       </div>
-
       <Toaster />
       <Footer />
     </div>