diff --git a/public/scripts/developerTools.js b/public/scripts/developerTools.js
new file mode 100644
index 0000000..6b23d58
--- /dev/null
+++ b/public/scripts/developerTools.js
@@ -0,0 +1,25 @@
+function ready(fn) {
+  if (document.readyState != "loading") {
+    fn();
+  } else {
+    document.addEventListener("DOMContentLoaded", fn);
+  }
+}
+ready(main);
+
+function main() {
+  function handleIntersection(entries, observer) {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add("visible");
+      }
+    });
+  }
+
+  const observer = new IntersectionObserver(handleIntersection);
+
+  const cards = document.querySelectorAll(".developer-tools-card");
+  cards.forEach((card) => {
+    observer.observe(card);
+  });
+}
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 4773457..fe2d840 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -81,6 +81,7 @@ const {
       src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-plugin-recent-searches"
     ></script>
     <script type="text/javascript" src="/scripts/main.js"></script>
+    <script type="text/javascript" src="/scripts/developerTools.js"></script>
     <!-- ${ self.javascript() } -->
 
     <!-- freight sans pro font -->
diff --git a/src/pages/developerTools.astro b/src/pages/developerTools.astro
index 9528093..c76fb97 100644
--- a/src/pages/developerTools.astro
+++ b/src/pages/developerTools.astro
@@ -1,5 +1,6 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
+import "/src/styles/developer-tools.css";
 ---
 
 <BaseLayout>
@@ -8,38 +9,60 @@ import BaseLayout from "../layouts/BaseLayout.astro";
     name="description"
     content="MockuPhone, ShotBot and MakeAppIcon are Oursky Developer Series. It speeds up the process of app development for developers, designers and project managers."
   />
-  <div class="static-page static-text-page">
-    <h1 class="title">Oursky Developer Suite</h1>
-    <div class="content row-fluid">
-      <div class="span10">
-        <p>
-          <a href="http://makeappicon.com">
-            <img src="/Images/makeappicon-logo.png" />
+  <div class="static-page static-text-page developer-tools-page">
+    <div class="container">
+      <div class="row">
+        <div class="col-12">
+          <h1 class="title">Developer Tools</h1>
+        </div>
+        <div class="col-12 col-md-6 col-lg-4">
+          <a href="#">
+            <div class="developer-tools-card formxai-card">
+              <img src="Images/formxai-logo.svg" />
+              <h2>FormX.ai</h2>
+              <p>
+                Empower Your Team with AI: Eliminate Manual Work, Embrace
+                Seamless Automation!
+              </p>
+              <div class="learn-more">
+                Learn more
+                <img src="Images/arrow-forward.svg" />
+              </div>
+            </div>
           </a>
-        </p>
-        <p>
-          <a href="http://makeappicon.com">MakeAppIcon</a> is an icon creator
-          that resizes all iOS icons and Android icons required by App Store and
-          Google Play. With our icon resizer, you can import app icons to
-          Android Studio and Xcode in 3s.
-        </p>
-        <p>Support iOS icons:</p>
-        <ul>
-          <li>iPhone app icons</li>
-          <li>iPad app icons</li>
-          <li>iMessage Sticker app icons</li>
-          <li>WatchOS icons</li>
-        </ul>
-        <p>Support Android icons:</p>
-        <ul>
-          <li>Play Store icon</li>
-          <li>ldpi</li>
-          <li>mdpi</li>
-          <li>hdpi</li>
-          <li>xhdpi</li>
-          <li>xxhdpi</li>
-          <li>xxxhdpi</li>
-        </ul>
+        </div>
+        <div class="col-12 col-md-6 col-lg-4">
+          <a href="#">
+            <div class="developer-tools-card authgear-card">
+              <img src="Images/authgear-logo.svg" />
+              <h2>Authgear</h2>
+              <p>
+                Activate Security with Auth, Simple and Scalable for Your
+                Business.
+              </p>
+              <div class="learn-more">
+                Learn more
+                <img src="Images/arrow-forward.svg" />
+              </div>
+            </div>
+          </a>
+        </div>
+        <div class="col-12 col-md-6 col-lg-4">
+          <a href="#">
+            <div class="developer-tools-card makeappicon-card">
+              <img src="Images/makeappicon-logo.svg" />
+              <h2>MakeAppIcon</h2>
+              <p>
+                An icon creator that resizes all iOS icons and Android icons
+                required by App Store and Google Play.
+              </p>
+              <div class="learn-more">
+                Learn more
+                <img src="Images/arrow-forward.svg" />
+              </div>
+            </div>
+          </a>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/styles/developer-tools.css b/src/styles/developer-tools.css
new file mode 100644
index 0000000..2c1c302
--- /dev/null
+++ b/src/styles/developer-tools.css
@@ -0,0 +1,116 @@
+@keyframes slideInFromBottom {
+  0% {
+    transform: translateY(10%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@-moz-keyframes slideInFromBottom {
+  0% {
+    transform: translateY(10%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes slideInFromBottom {
+  0% {
+    transform: translateY(10%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.developer-tools-page {
+  .title {
+    font-size: 32px;
+    font-weight: bold;
+    margin-bottom: 4px;
+  }
+
+  .col-12 {
+    padding: 16px !important;
+  }
+}
+
+.developer-tools-card {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  background-color: white;
+  padding: 20px;
+  height: 100%;
+  font-family: "Red Hat Display";
+  display: flex;
+  flex-direction: column;
+  opacity: 0;
+  transition: box-shadow 0.3s ease-in-out;
+
+  img {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+
+  h2 {
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 16px;
+    color: black;
+  }
+
+  p {
+    font-size: 16px;
+    color: #838c9b;
+    margin-bottom: 16px;
+    text-align: left;
+  }
+
+  .learn-more {
+    display: flex;
+    flex-direction: row;
+    color: #004be0;
+    margin-top: auto;
+    gap: 8px;
+
+    img {
+      width: 24px;
+      height: 24px;
+      margin-bottom: 0;
+    }
+  }
+}
+
+.developer-tools-card:hover {
+  cursor: pointer;
+  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.16);
+}
+
+.developer-tools-card.visible {
+  animation: slideInFromBottom 0.3s forwards;
+  -moz-animation: slideInFromBottom 0.3s forwards;
+  -webkit-animation: slideInFromBottom 0.3s forwards;
+}
+
+.developer-tools-card.authgear-card.visible {
+  animation-delay: 0.2s;
+}
+
+.developer-tools-card.makeappicon-card.visible {
+  animation-delay: 0.4s;
+}
+
+@media (max-width: 768px) {
+  .developer-tools-card.visible.authgear-card,
+  .developer-tools-card.visible.makeappicon-card {
+    animation-delay: 0s;
+  }
+}