diff --git a/Components/Profile/Profile.js b/Components/Profile/Profile.js
new file mode 100644
index 00000000..8398f978
--- /dev/null
+++ b/Components/Profile/Profile.js
@@ -0,0 +1,16 @@
+import { Card } from "primereact/card";
+
+function Profile({ profile }) {
+  return (
+    <Card
+      className="p-mr-4 p-mb-4"
+      key={profile.name}
+      header={<img src={profile.image} alt={profile.name} />}
+      title={profile.name}
+      subTitle={profile.username}
+      style={{ width: "200px" }}
+    ></Card>
+  );
+}
+
+export default Profile;
diff --git a/package-lock.json b/package-lock.json
index a5bcf263..27c38926 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,7 @@
     "": {
       "dependencies": {
         "next": "12.0.7",
+        "primeflex": "^2.0.0",
         "primeicons": "^5.0.0",
         "primereact": "^7.0.1",
         "react": "17.0.2",
@@ -4481,6 +4482,11 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/primeflex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/primeflex/-/primeflex-2.0.0.tgz",
+      "integrity": "sha512-t6AG3iRI1rh04uI+9nC4JSlbKfA8PnpRDFtjyqi3rDSLRgdfOuhIiunJbjVQ4alnnCfuQAAbVyde1AKN9QxT/w=="
+    },
     "node_modules/primeicons": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-5.0.0.tgz",
@@ -8783,6 +8789,11 @@
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true
     },
+    "primeflex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/primeflex/-/primeflex-2.0.0.tgz",
+      "integrity": "sha512-t6AG3iRI1rh04uI+9nC4JSlbKfA8PnpRDFtjyqi3rDSLRgdfOuhIiunJbjVQ4alnnCfuQAAbVyde1AKN9QxT/w=="
+    },
     "primeicons": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-5.0.0.tgz",
diff --git a/package.json b/package.json
index 5f912e11..f1411333 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "next": "12.0.7",
+    "primeflex": "^2.0.0",
     "primeicons": "^5.0.0",
     "primereact": "^7.0.1",
     "react": "17.0.2",
diff --git a/pages/_app.js b/pages/_app.js
index 92ddc2f3..d4163d48 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -3,6 +3,7 @@ import "../styles/globals.css";
 import "primereact/resources/themes/lara-light-indigo/theme.css";
 import "primereact/resources/primereact.min.css";
 import "primeicons/primeicons.css";
+import "primeflex/primeflex.css";
 
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />;
diff --git a/pages/index.js b/pages/index.js
index d61a6715..adc775dc 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,22 +1,35 @@
 import Head from "next/head";
 
-import { Card } from "primereact/card";
+import { useState } from "react";
+
+import { Menubar } from "primereact/menubar";
+import { InputText } from "primereact/inputtext";
+
+import Profile from "../Components/Profile/Profile";
 
 export async function getStaticProps() {
   const res = await fetch("http://localhost:3000/api/profiles");
-  const data = await res.json();
+  const profiles = await res.json();
 
   return {
-    props: { data },
+    props: {
+      profiles,
+    },
   };
 }
 
-export default function Home({ data }) {
-  const card = (profile) => (
-    <Card header={<img src={profile.image} alt={profile.name} />}>
-      {profile.name}
-    </Card>
-  );
+export default function Home({ profiles }) {
+  const [list, setList] = useState(profiles);
+  const items = [];
+
+  const search = (e) =>
+    setList(
+      profiles.filter(
+        (profile) =>
+          profile.name.includes(e.target.value) ||
+          profile.username.includes(e.target.value)
+      )
+    );
 
   return (
     <div>
@@ -26,9 +39,33 @@ export default function Home({ data }) {
       </Head>
 
       <main>
-        <h1>Awesome GitHub Profiles</h1>
+        <Menubar
+          className="p-mb-6"
+          model={items}
+          start={
+            <span>
+              <InputText placeholder="Search" type="text" onKeyUp={search} />{" "}
+              Awesome GitHub Profiles ({list.length})
+            </span>
+          }
+          end={
+            <a
+              href="https://github.com/EddieHubCommunity/awesome-github-profiles"
+              target="_blank"
+            >
+              <i className="pi pi-github"></i>
+            </a>
+          }
+        />
 
-        {data && data.map((profile) => card(profile))}
+        <div className="p-d-flex p-flex-wrap p-m-4">
+          {profiles &&
+            list
+              // .slice(0, 9)
+              .map((profile) => (
+                <Profile key={profile.username} profile={profile} />
+              ))}
+        </div>
       </main>
 
       <footer>