diff --git a/package.json b/package.json
index 28c2a1f..8a2317d 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "vue-analytics": "^5.22.1",
     "vue-backtotop": "^1.6.1",
     "vue-clipboard2": "^0.3.1",
+    "vue-meta": "^2.4.0",
     "vue-router": "^3.3.2"
   },
   "devDependencies": {
diff --git a/public/index.html b/public/index.html
index 80f9a68..cd1b503 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>Meraki UI</title>
+    <title>Meraki UI Tailwindcss Components</title>
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index 01b903c..2012f63 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,67 +1,120 @@
 <template>
-    <div class="bg-white font-roboto" id="app">
-        <Header></Header>
+  <div class="bg-white font-roboto" id="app">
+    <Header></Header>
 
-        <main class="container mx-auto px-6" id="main">
-            <div class="mt-16 text-center">
-                <h1 class="text-xl md:text-3xl text-gray-800 font-medium">Discover new components. Build amazing things 🔥</h1>
-            </div>
+    <main class="container mx-auto px-6" id="main">
+      <div class="mt-16 text-center">
+        <h1 class="text-xl md:text-3xl text-gray-800 font-medium">
+          Discover new components. Build amazing things 🔥
+        </h1>
+      </div>
 
-            <div class="max-w-2xl mx-auto mt-4">
-                <div class="flex flex-wrap items-center justify-center">
-                    <span class="ml-2" v-for="route in routes" :key="route.path">
-                        <span v-if="route.path != '/'">
-                            <router-link class="inline-block mt-2 px-3 py-1 rounded text-sm  cursor-pointer hover:bg-gray-700 hover:text-gray-200" :class="currentPage == route.path ? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'" :to="route.path">
-                                {{ route.name }}
-                            </router-link>
-                        </span>
-                    </span>
-                </div>
+      <div class="max-w-2xl mx-auto mt-4">
+        <div class="flex flex-wrap items-center justify-center">
+          <span class="ml-2" v-for="route in routes" :key="route.path">
+            <span v-if="route.path != '/'">
+              <router-link class="inline-block mt-2 px-3 py-1 rounded text-sm cursor-pointer hover:bg-gray-700 hover:text-gray-200"
+                :class="
+                  currentPage == route.path
+                    ? 'bg-gray-700 text-gray-200'
+                    : 'bg-gray-200 text-gray-700'
+                "
+                :to="route.path"
+              >
+                {{ route.name }}
+              </router-link>
+            </span>
+          </span>
+        </div>
 
-                <p class="mt-8 text-gray-700 text-center">Headers components require simple <span class="font-semibold">- don't panic please 😎 -</span> <a href="https://gist.github.com/Miaababikir/052e31b345781c0f73180b80a285781b" target="_blank" class="text-blue-600 hover:underline">configuration</a></p>
-            </div>
+        <p class="mt-8 text-gray-700 text-center">
+          Headers components require simple
+          <span class="font-semibold">- don't panic please 😎 -</span>
+          <a
+            href="https://gist.github.com/Miaababikir/052e31b345781c0f73180b80a285781b"
+            target="_blank"
+            class="text-blue-600 hover:underline"
+            >configuration</a
+          >
+        </p>
+      </div>
 
-            <div class="mt-16">
-                <router-view></router-view>
-            </div>
-        </main>
+      <div class="mt-16">
+        <router-view></router-view>
+      </div>
+    </main>
 
-        <back-to-top visibleoffset="800">
-            <button class="bg-gray-800 text-white fixed bottom-0 right-0 my-10 mx-10 p-2 rounded-md focus:outline-none" aria-label="Back to top">
-                <svg class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
-                    <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"/>
-                </svg>
-            </button>
-        </back-to-top>
-    </div>
+    <back-to-top visibleoffset="800">
+      <button
+        class="bg-gray-800 text-white fixed bottom-0 right-0 my-10 mx-10 p-2 rounded-md focus:outline-none"
+        aria-label="Back to top"
+      >
+        <svg class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
+          <path
+            fill-rule="evenodd"
+            d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </button>
+    </back-to-top>
+  </div>
 </template>
 
 <script>
 import Header from "./components/Header";
-import BackToTop from 'vue-backtotop';
+import BackToTop from "vue-backtotop";
 
 export default {
-    components: {
-        Header,
-        BackToTop
-    },
+  components: {
+    Header,
+    BackToTop,
+  },
 
-    computed: {
-        currentPage() {
-            return this.$route.path;
-        }
+  computed: {
+    currentPage() {
+      return this.$route.path;
     },
+  },
 
-    data() {
-        return {
-            routes: this.$router.options.routes,
-        };
-    },
-    
-    mounted() {
-        this.$ga.page('/');
-    }
-}
+  data() {
+    return {
+      routes: this.$router.options.routes,
+      og: "https://merakiui.com" + require("./assets/merakiui-og.png"),
+    };
+  },
+
+  metaInfo() {
+    return {
+      meta: [
+        // Twitter Card
+        { name: "twitter:card", content: "summary_large_image" },
+        { name: "twitter:title", content: "Meraki UI Tailwindcss Components" },
+        {
+          name: "twitter:description",
+          content:
+            "Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid.",
+        },
+        // image must be an absolute path
+        { name: "twitter:image", content: this.og },
+        // Facebook OpenGraph
+        { property: "og:title", content: "Meraki UI Tailwindcss Components" },
+        { property: "og:site_name", content: "Meraki UI" },
+        { property: "og:type", content: "website" },
+        { property: "og:image", content: this.og },
+        {
+          property: "og:description",
+          content:
+            "Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid.",
+        },
+      ],
+    };
+  },
+
+  mounted() {
+    this.$ga.page("/");
+  },
+};
 </script>
 
 <style src="./assets/css/app.css"></style>
diff --git a/src/assets/merakiui-og.png b/src/assets/merakiui-og.png
new file mode 100644
index 0000000..9579006
Binary files /dev/null and b/src/assets/merakiui-og.png differ
diff --git a/src/main.js b/src/main.js
index 8324abf..e946eb5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,19 +1,22 @@
-import Vue from 'vue';
-import VueRouter from 'vue-router';
-import App from './App.vue';
+import Vue from "vue";
+import VueRouter from "vue-router";
+import App from "./App.vue";
 import router from "./router";
-import VueClipboard from 'vue-clipboard2';
-import VueAnalytics from 'vue-analytics';
-import ViewComponent from './components/utilities/ViewComponent';
+import Meta from "vue-meta";
+import VueClipboard from "vue-clipboard2";
+import VueAnalytics from "vue-analytics";
+import ViewComponent from "./components/utilities/ViewComponent";
+
+Vue.use(Meta);
 
 Vue.use(VueRouter);
 
-Vue.component('view-component', ViewComponent);
+Vue.component("view-component", ViewComponent);
 
 Vue.config.productionTip = false;
 
 Vue.use(VueClipboard);
 
-Vue.use(VueAnalytics, { id: 'UA-167213766-1' });
+Vue.use(VueAnalytics, { id: "UA-167213766-1" });
 
-new Vue({ render: h => h(App), router }).$mount('#app');
+new Vue({ render: (h) => h(App), router }).$mount("#app");
