diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 5347369..6da38e9 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -9,33 +9,21 @@ export const meta: MetaFunction = () => {
 
 export default function Index() {
   return (
-    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
-      <h1>Welcome to Remix</h1>
-      <ul>
-        <li>
-          <a
-            target="_blank"
-            href="https://remix.run/tutorials/blog"
-            rel="noreferrer"
-          >
-            15m Quickstart Blog Tutorial
-          </a>
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://remix.run/tutorials/jokes"
-            rel="noreferrer"
-          >
-            Deep Dive Jokes App Tutorial
-          </a>
-        </li>
-        <li>
-          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
-            Remix Docs
-          </a>
-        </li>
-      </ul>
+    <div className="flex justify-center items-center border h-screen">
+      <div className="flex items-center p-96 h-96 bg-gradient-to-r from-cyan-100 to-blue-500  text-4xl font-extrabold lg:text-5xl border rounded-xl italic antialiased tracking-wide">
+        <h1 className="text-white">
+          {'Teknum\'s Open Collective'}
+        </h1>
+
+        <p className="text-sm">
+          Being an open source community that hosts out own stuff (like <a href="https://github.com/teknologi-umum/pesto">Pesto</a>, <a href="https://github.com/teknologi-umum/pesto">Graphene</a>, and <a href="https://github.com/teknologi-umum/bot">some</a> <a href="https://github.com/teknologi-umum/botnet">Telegram</a> <a href="https://github.com/teknologi-umum/captcha">bots</a>) and someone {'else\'s'} stuff (like Verdaccio, Bagetter, Libreddit) definitely cost some money, since {'we\'ll'} need to rent some servers, and most of the time, one server is not enough. Not just that, we also hosts a yearly community meetup called <a href="https://conference.teknologiumum.com">TeknumConf</a>, which also cost some money and {'it\'s'} a lot expensive compared to just renting servers. To make everything runs on the day to day basis where people can access our service for free and attend to TeknumConf event with minimum entrance fee, we setup a few places where people can donate their money to us. We ended up having <a href="https://github.com/sponsors/teknologi-umum">GitHub Sponsor</a> and <a href="https://saweria.co/teknologiumum">Saweria</a> page.
+
+          On the internet, where most people are donating with USD, they use a platform called <a href="https://opencollective.com/">OpenCollective</a> where you can do money management publicly. Using OpenCollective also means that {'we\'ll'} have to shutdown any other donation funnels and just use OpenCollective alone. Sadly, that {'doesn\'t'} work with us. People that interact with the community only able to donate with IDR, which on OpenCollective, {'there\'s'} no actual fiscal host that would be compatible to us.
+
+          We are an open source community, we want to uphold our value of openness and we want to guarantee that the donations being made is used properly.
+        </p>
+        
+      </div>
     </div>
   );
 }