diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..1a62086
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false
\ No newline at end of file
diff --git a/src/components/member-card.astro b/src/components/member-card.astro
new file mode 100644
index 0000000..70d0157
--- /dev/null
+++ b/src/components/member-card.astro
@@ -0,0 +1,32 @@
+---
+import type { HonorableMember } from "../constants/honorable-members";
+
+interface Props {
+  data: HonorableMember;
+}
+
+const { data } = Astro.props;
+---
+
+<div class="flex items-center gap-2 md:last:border-b border-border-dark">
+  <img
+    class="size-14 border-r border-border-dark"
+    src={data.avatarSrc}
+    alt={`${data.name} avatar`}
+  />
+  <div class="flex flex-col">
+    <span class="text-lg font-semibold text-foreground-heading">
+      {data.name}
+    </span>
+    <span class="text-sm text-foreground-body">{data.title}</span>
+  </div>
+  <div class="flex gap-2 ml-auto pr-4">
+    {
+      data.links.map(({ Icon, url }) => (
+        <a href={url} target="_blank" rel="noopener noreferrer">
+          <Icon />
+        </a>
+      ))
+    }
+  </div>
+</div>
diff --git a/src/constants/honorable-members.ts b/src/constants/honorable-members.ts
new file mode 100644
index 0000000..f335c28
--- /dev/null
+++ b/src/constants/honorable-members.ts
@@ -0,0 +1,46 @@
+import type { JSX } from "astro/jsx-runtime"
+import IconBrandGithub from "~icons/tabler/brand-github";
+import IconBrandX from "~icons/tabler/brand-x";
+
+export interface HonorableMember {
+  name: string,
+  avatarSrc: string,
+  title: string,
+  links: {
+    Icon: JSX.Element,
+    url: string,
+  }[]
+
+}
+
+const honorableMembers: HonorableMember[] = [
+  {
+    name: 'dominos',
+    avatarSrc: 'https://github.com/dominosaurs.png',
+    title: 'Inisiator',
+    links: [
+      {
+        Icon: IconBrandGithub,
+        url: 'https://github.com/dominosaurs',
+      }, {
+        Icon: IconBrandX,
+        url: 'https://x.com/dominosaurs_',
+      }
+    ]
+  }, {
+    name: 'pow',
+    avatarSrc: 'https://github.com/kimmyxpow.png',
+    title: 'Insinyur Desain',
+    links: [
+      {
+        Icon: IconBrandGithub,
+        url: 'http://github.com/kimmyxpow',
+      }, {
+        Icon: IconBrandX,
+        url: 'https://x.com/kimmyxpow',
+      }
+    ]
+  }
+]
+
+export default honorableMembers
diff --git a/src/pages/index.astro b/src/pages/index.astro
index fa8bb99..4f85fbb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,9 +1,9 @@
 ---
 import Layout from "~/layouts/app.astro";
 import IconArrowUpRight from "~icons/tabler/arrow-up-right";
-import IconBrandGithub from "~icons/tabler/brand-github";
-import IconBrandX from "~icons/tabler/brand-x";
 import HeroSection from "~/sections/home/hero.astro";
+import honorableMembers from "~/constants/honorable-members";
+import MemberCard from "~/components/member-card.astro";
 ---
 
 <Layout>
@@ -208,69 +208,7 @@ import HeroSection from "~/sections/home/hero.astro";
           class="border-x w-full border-t border-border-dark flex flex-col relative bg-background"
         >
           <div class="flex flex-col divide-y divide-border-dark">
-            <div
-              class="flex items-center gap-2 md:last:border-b border-border-dark"
-            >
-              <img
-                class="size-14 border-r border-border-dark"
-                src="https://github.com/dominosaurs.png"
-                alt=""
-              />
-              <div class="flex flex-col">
-                <span class="text-lg font-semibold text-foreground-heading"
-                  >Adam Akbar</span
-                >
-                <span class="text-sm text-foreground-body">Inisiator</span>
-              </div>
-              <div class="flex gap-2 ml-auto pr-4">
-                <a
-                  href="https://github.com/dominosaurs"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <IconBrandGithub />
-                </a>
-                <a
-                  href="https://x.com/dominosaurs"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <IconBrandX />
-                </a>
-              </div>
-            </div>
-            <div
-              class="flex items-center gap-2 md:last:border-b border-border-dark"
-            >
-              <img
-                class="size-14 border-r border-border-dark"
-                src="https://github.com/kimmyxpow.png"
-                alt=""
-              />
-              <div class="flex flex-col">
-                <span class="text-lg font-semibold text-foreground-heading"
-                  >pow</span
-                >
-                <span class="text-sm text-foreground-body">Insinyur Desain</span
-                >
-              </div>
-              <div class="flex gap-2 ml-auto pr-4">
-                <a
-                  href="http://github.com/kimmyxpow"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <IconBrandGithub />
-                </a>
-                <a
-                  href="https://x.com/kimmyxpow"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <IconBrandX />
-                </a>
-              </div>
-            </div>
+            {honorableMembers.map((member) => <MemberCard data={member} />)}
           </div>
         </div>
       </div>