diff --git a/components/Footer.module.scss b/components/Footer.module.scss
index 3ead9f3..64acaa1 100644
--- a/components/Footer.module.scss
+++ b/components/Footer.module.scss
@@ -22,8 +22,9 @@
         outline: none;
         border-bottom: solid 2px transparent;
 
-        &:hover, &:focus     {
+        &:hover,
+        &:focus {
             border-bottom-color: $yellow;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/components/SearchBox.module.scss b/components/SearchBox.module.scss
index 2664839..f25355a 100644
--- a/components/SearchBox.module.scss
+++ b/components/SearchBox.module.scss
@@ -11,6 +11,7 @@
     text-align: center;
     // grid-column: 1 / span 3;
     flex-grow: 3;
+    max-width: 100%;
 
     &:focus {
         outline-color: $yellow;
@@ -19,5 +20,6 @@
     &::placeholder {
         font-weight: 400;
         font-style: italic;
+        color: $pink;
     }
 }
\ No newline at end of file
diff --git a/pages/index.js b/pages/index.js
index 7eb5bbf..3d36e3c 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -32,6 +32,22 @@ export default function Home(props) {
         <>
             <Head>
                 <title>Twemoji Cheatsheet</title>
+                <meta
+                    name="description"
+                    content="🥪 A super simple cheatsheet to browse Twemojis! Filter by catgeroy (and, or) version and find the emoji you want. Easily grab the unicode, hexcode, download SVG or PNG and get some info about that emoji."
+                />
+                <meta name="robots" content="index, follow" />
+                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+                <meta property="og:title" content="Twemoji Cheatsheet" />
+                <meta
+                    property="og:description"
+                    content="🥪 A super simple cheatsheet to browse Twemojis! Filter by catgeroy (and, or) version and find the emoji you want. Easily grab the unicode, hexcode, download SVG or PNG and get some info about that emoji."
+                />
+                <meta
+                    property="og:image"
+                    content="https://user-images.githubusercontent.com/31452340/159780805-2e2b146d-5c50-4245-ba6b-9cc7dcdd9a18.png"
+                />
             </Head>
 
             <main>
@@ -56,8 +72,6 @@ export default function Home(props) {
                     }
                 />
 
-                {/* <SearchBox setAvailabeEmojis={setAvailabeEmojis} emojis={emojis}/> */}
-
                 <Grid>
                     {availableEmojis
                         .filter(
