diff --git a/components/Demo/Demo.tsx b/components/Demo/Demo.tsx
index 42febfe..0d8066c 100644
--- a/components/Demo/Demo.tsx
+++ b/components/Demo/Demo.tsx
@@ -1,8 +1,5 @@
-import Link from 'next/link';
-
-import { FaBolt } from 'react-icons/fa';
-
-import { Button } from 'components';
+import { FiTwitter } from 'react-icons/fi';
+import { IconButton } from 'components';
 
 /**
  *
@@ -15,57 +12,113 @@ export interface DemoProps {
 
 function Demo({ data }: DemoProps) {
   return (
-    <article
+    <div
       className="
-        tw-flex
+      card-group
+      tw-flex
         tw-flex-col
-        tw-items-center
-        tw-py-6
-        tw-px-6
-        tw-text-center
-        tw-border
-        tw-border-solid
-        tw-border-gray-200
-        tw-rounded-lg
-        tw-bg-white
+      tw-h-card
+      tw-bg-base
+      tw-rounded-2xl
+      tw-border-white
+      tw-border-8
+      tw-shadow-sm
+      hover:tw-transform hover:tw-scale-105
+      tw-transition-all
+       tw-cursor-pointer
+       tw-overflow-hidden
       "
     >
       <div
         className="
-          tw-text-4xl
-          tw-mb-4
-        "
+       tw-h-48
+       tw-m-full
+       tw-bg-red-700
+       tw-rounded-header
+       tw-grid
+       tw-bg-header
+       tw-bg-gradient-to-bl
+       tw-from-bgstart
+       tw-to-bgend
+       card-group-hover:tw-h-0
+      "
       >
-        {data.emoji}
+        <div
+          className="
+          tw-text-7xl
+          tw-text-white
+          tw-flex
+          tw-justify-center
+          tw-items-center
+        "
+        >
+          {data.icon}
+          {/* {data.emoji} */}
+        </div>
       </div>
-
-      <h1
+      <div
         className="
-          tw-mb-2
-          tw-text-xl
-          tw-font-bold
-        "
+        tw-flex
+        tw-flex-col
+        tw-flex-1
+        tw-items-center
+        tw-mx-auto
+        tw-my-4
+      "
       >
-        {data.title}
-      </h1>
-
-      <p
-        className="
-          tw-mb-8
-          tw-text-sm
+        <div
+          className="
+        tw-text-center
+        tw-text-lg
+        tw-mb-8
+        "
+        >
+          {data.title}
+        </div>
+        <div
+          className="
+        tw-text-center
+        tw-text-md
+        tw-mb-8
+        tw-text-sm
           tw-text-gray-600
           tw-line-clamp-3
         "
+        >
+          {data.desc}
+        </div>
+      </div>
+      <div
+        className="
+      tw-flex
+      tw-h-12
+      tw-border-t-2	
+      "
       >
-        {data.desc}
-      </p>
+        <div>
+          <IconButton
+            as="a"
+            href={`https://twitter.com/${data.creator.twitter}`}
+            rel="noopener noreferrer"
+            target="_blank"
+            ariaLabel="Share on twitter"
+            className="tw-flex-1 tw-font-thin"
+            icon={<>{data.creator.name}</>}
+          />
+        </div>
 
-      <Link href={`/demos/${data.path}`} passHref>
-        <Button as="a" leftIcon={<FaBolt />}>
-          Try it
-        </Button>
-      </Link>
-    </article>
+        <div>
+          <IconButton
+            as="a"
+            href={`https://twitter.com/${data.creator.twitter}`}
+            rel="noopener noreferrer"
+            target="_blank"
+            ariaLabel="Share on twitter"
+            icon={<FiTwitter />}
+          />
+        </div>
+      </div>
+    </div>
   );
 }
 
diff --git a/package.json b/package.json
index f1e12a7..48b89d7 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,8 @@
   },
   "dependencies": {
     "@bradgarropy/next-seo": "^1.0.0",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.16",
     "filter-react-props": "^0.0.4",
     "framer-motion": "^4.1.17",
     "next": "11.1.2",
@@ -28,7 +30,7 @@
     "nextjs-progressbar": "^0.0.11",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-icons": "^4.2.0"
+    "react-icons": "^4.3.1"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.3.4",
diff --git a/pages/index.tsx b/pages/index.tsx
index b203e06..5bf0d3c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -22,7 +22,7 @@ export default function Home() {
   return (
     <>
       <InputSearch
-        placeholder="Search by API names"
+        placeholder="Search by API or contributor name"
         value={searchText}
         onClear={handleClear}
         onChange={handleChange}
@@ -38,10 +38,10 @@ export default function Home() {
             md:tw-mt-8
             tw-grid
             tw-grid-cols-1
-            tw-gap-4
+            tw-gap-10
             md:tw-grid-cols-2
-            lg:tw-grid-cols-3
-            xl:tw-grid-cols-4
+            lg:tw-grid-cols-4
+            xl:tw-grid-cols-5
           "
         >
           {demos.map((demo, index) => (
diff --git a/styles/globals.css b/styles/globals.css
index 13a84e1..047295d 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -2,12 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
+
 html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family: 'Roboto', sans-serif;
+  background: #eef2f3;
 }
 
 * {
diff --git a/tailwind.config.js b/tailwind.config.js
index 9df167a..f83ff7e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -19,6 +19,7 @@ module.exports = {
       '30px': '30px',
       ...defaultTheme.fontSize,
     },
+
     borderWidth: {
       none: '0',
       1: '1px',
@@ -37,9 +38,22 @@ module.exports = {
       '5px': '5px',
       '10px': '10px',
       '30px': '30px',
+      header: '100% 0% 100% 0% / 0% 50% 50% 100%',
       half: '50%',
       ...defaultTheme.borderRadius,
     },
+    boxShadow: {
+      sm: 'rgba(0, 0, 0, 0.19) 0px 10px 20px,rgba(0, 0, 0, 0.23) 0px 6px 6px',
+      none: 'none',
+    },
+    left: {
+      logo: '-100',
+      dp: '-100',
+    },
+    top: {
+      logo: '-100',
+      dp: '-100',
+    },
     extend: {
       colors: {
         prod: '#00ebff',
@@ -48,7 +62,17 @@ module.exports = {
         payments: '#ebebeb',
         demo: '#f4f4f4',
         link: '#551A8B',
+        bgstart: '#3f2b96',
+        bgend: '#a8c0ff',
+      },
+      height: {
+        card: '30rem',
+      },
+      backgroundColor: {
+        card: '#64B5F6',
+        base: '#FFF',
       },
+      boxShadow: ['active'],
       spacing: {
         '300px': '300px',
         '100px': '100px',
diff --git a/utils/data/demos.js b/utils/data/demos.js
index 201edc4..50be0d2 100644
--- a/utils/data/demos.js
+++ b/utils/data/demos.js
@@ -1,8 +1,17 @@
+import {
+  FaFileAlt,
+  FaDesktop,
+  FaRegClipboard,
+  FaBroadcastTower,
+  FaWifi,
+} from 'react-icons/fa';
+
 const data = [
   {
     id: '_file_system_api_',
     title: 'File System API',
     emoji: '📂',
+    icon: <FaFileAlt />,
     desc: "Only for Chromium-based web browsers. The File System Access API makes it easy and simple to read and write the user's files and access the file system.",
     path: 'filesystem-api',
     canIUseURL: 'https://caniuse.com/mdn-api_window_showopenfilepicker',
@@ -15,6 +24,7 @@ const data = [
     id: '_fullscreen_api_',
     title: 'FullScreen API',
     emoji: '📺',
+    icon: <FaDesktop />,
     desc: 'The Fullscreen API adds methods to present a specific Element (and its descendants) in full-screen mode, and to exit full-screen mode once it is no longer needed.',
     path: 'fullscreen',
     canIUseURL: 'https://caniuse.com/fullscreen',
@@ -28,6 +38,7 @@ const data = [
     id: '_clipboard_api_',
     title: 'Clipboard API',
     emoji: '📋',
+    icon: <FaRegClipboard />,
     desc: 'The Clipboard API provides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the system clipboard.',
     path: 'clipboard',
     canIUseURL: 'https://caniuse.com/async-clipboard',
@@ -41,6 +52,7 @@ const data = [
     id: '_broadcast_api_',
     title: 'Broadcast',
     emoji: '📡',
+    icon: <FaBroadcastTower />,
     desc: 'The BroadcastChannel is a named channel that allows communication between different documents (in different windows, tabs, frames or iframes) of the same origin.',
     path: 'broadcast-channel',
     canIUseURL: 'https://caniuse.com/broadcastchannel',
@@ -54,6 +66,7 @@ const data = [
     id: '_network_info_api_',
     title: 'Network Info',
     emoji: '📶',
+    icon: <FaWifi />,
     desc: "The Network Information API provides information about the system's connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.).",
     path: 'network-information',
     canIUseURL: 'https://caniuse.com/netinfo',
diff --git a/yarn.lock b/yarn.lock
index 746fd65..513dbef 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -956,6 +956,25 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fortawesome/fontawesome-common-types@^0.2.36":
+  version "0.2.36"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
+  integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
+
+"@fortawesome/free-solid-svg-icons@^5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz#2a68f3fc3ddda12e52645654142b9e4e8fbb6cc5"
+  integrity sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/react-fontawesome@^0.1.16":
+  version "0.1.16"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.16.tgz#ce7665490214e20f929368d6b65f68884a99276a"
+  integrity sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==
+  dependencies:
+    prop-types "^15.7.2"
+
 "@hapi/accept@5.0.2":
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/@hapi/accept/-/accept-5.0.2.tgz#ab7043b037e68b722f93f376afb05e85c0699523"
@@ -5552,10 +5571,10 @@ react-dom@17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
-react-icons@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
-  integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
+react-icons@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
+  integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
 
 react-is@17.0.2:
   version "17.0.2"