diff --git a/src/components/KeployCloud.js b/src/components/KeployCloud.js
index 1650346c8..a8b7651db 100644
--- a/src/components/KeployCloud.js
+++ b/src/components/KeployCloud.js
@@ -1,31 +1,40 @@
 import React from "react";
+import Link from "@docusaurus/Link";
 
 export const KeployCloud = () => {
   return (
-    <section
-      id="cloud"
-      className="mb-8 mt-12 flex max-w-7xl items-center space-x-6 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 shadow-md"
-    >
-      <div className="prose prose-orange max-w-3xl text-left">
-        <h1 className="text-left">Questions? 🤔💭</h1>
-        <p className="my-3 block text-left">
-          For any support please{" "}
-          <a
-            href="https://join.slack.com/t/keploy/shared_invite/zt-357qqm9b5-PbZRVu3Yt2rJIa6ofrwWNg"
-            className="text-orange-500 underline hover:text-orange-400"
-          >
-            join keploy slack community
-          </a>{" "}
-          to get help from fellow users, or{" "}
-          <a
-            href="https://calendar.app.google/cXVaj6hbMUjvmrnt9"
-            className="text-orange-500 underline hover:text-orange-400"
-          >
-            book a demo
-          </a>{" "}
-          if you're exploring enterprise use cases.
-        </p>
-      </div>
-    </section>
+    <div className="max-w-5xl mx-auto">
+    {/* Questions Card */}
+    <div className="questions-card">
+    <h2 className="questions-title">
+      Questions <span className="text-orange-500">?</span>
+    </h2>
+
+    <div className="questions-row">
+      <p className="questions-text">
+        Stuck with a question? Our Slack community is here to help.
+      </p>
+
+      <a href="https://slack.com">
+        <button className="questions-btn">
+         Join Slack
+        </button>
+      </a>
+    </div>
+
+    <div className="questions-row">
+      <p className="questions-text">
+        Exploring enterprise use cases? Book a demo with us.
+      </p>
+
+      <a href="https://calendar.app.google/cXVaj6hbMUjvmrnt9">
+        <button className="questions-btn">
+        Book Demo
+        </button>
+      </a>
+    </div>
+    </div>
+  </div>
+
   );
 };
diff --git a/src/components/WhatIsKeploy.js b/src/components/WhatIsKeploy.js
index ce6034143..d04f0ef5d 100644
--- a/src/components/WhatIsKeploy.js
+++ b/src/components/WhatIsKeploy.js
@@ -44,7 +44,7 @@ const cards = [
     id: "comparison",
     title: "Keploy vs traditional testing tools",
     description: "Where record–replay and AI-generated flows fit vs Postman, contract testing, and mocking libraries.",
-    link: "/docs/keploy-explained/why-keploy/",
+    link: "/keploy-explained/why-keploy/",
     tone: "secondary",
     icon: (
       <svg viewBox="0 0 24 24" fill="none" className="h-6 w-6">
diff --git a/src/css/custom.css b/src/css/custom.css
index a719f5d91..f2477c6ae 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -2598,4 +2598,46 @@ html[data-theme="dark"] div[class^="sidebar_"] > nav > ul > li > .menu__list-ite
   }
 }
 
+/* Card */
+.questions-card {
+  @apply w-full rounded-2xl p-10 mt-8
+         bg-gray-50 dark:bg-[rgb(19,19,19)]
+         shadow-lg transition-colors;
+}
+
+/* Title */
+.questions-title {
+  @apply text-3xl font-bold text-center mb-10
+         text-black dark:text-white;
+}
+
+/* Rows */
+.questions-row {
+  @apply flex flex-col
+         gap-4
+         lg:flex-row
+         lg:items-center
+         lg:justify-between
+         mb-6;
+}
+
+.questions-row a {
+  @apply self-center lg:self-auto;
+}
+
+/* Text */
+.questions-text {
+  @apply text-lg font-medium
+         text-gray-900 dark:text-gray-200;
+}
 
+/* Buttons */
+.questions-btn {
+  @apply bg-orange-500 hover:bg-orange-600
+         text-white font-semibold
+         py-2 px-6 rounded-full
+         shadow-md transition
+         cursor-pointer
+         active:scale-95
+         lg:hover:scale-105;
+}
\ No newline at end of file
diff --git a/src/theme/DocPaginator/index.js b/src/theme/DocPaginator/index.js
new file mode 100644
index 000000000..a282edf1e
--- /dev/null
+++ b/src/theme/DocPaginator/index.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import Translate, {translate} from '@docusaurus/Translate';
+
+function PaginatorNavLink({permalink, title, subLabel, isNext}) {
+  return (
+    <Link
+      className={`
+        flex flex-1 flex-col rounded-lg border border-orange-200 p-3 transition-all hover:border-orange-500 hover:bg-gray-50 hover:no-underline dark:border-orange-200 dark:hover:border-orange-500 dark:hover:bg-neutral-900
+        ${isNext ? 'items-end text-right' : 'items-start text-left'}
+      `}
+      to={permalink}
+    >
+      {subLabel && (
+        <div className="mb-0.5 text-xs font-bold uppercase tracking-wide text-orange-500 dark:text-orange-500">
+          {subLabel}
+        </div>
+      )}
+      <div className="text-sm font-semibold text-neutral-900 dark:text-white">
+        {title}
+      </div>
+    </Link>
+  );
+}
+
+export default function DocPaginator(props) {
+  const {previous, next} = props;
+  if (!previous && !next) {
+    return null;
+  }
+  return (
+    <nav
+      className="mt-6 flex flex-col gap-3 sm:flex-row"
+      aria-label={translate({
+        id: 'theme.docs.paginator.navAriaLabel',
+        message: 'Docs pages navigation',
+        description: 'The ARIA label',
+      })}>
+      {previous && (
+        <PaginatorNavLink
+          {...previous}
+          subLabel={
+            <Translate
+              id="theme.docs.paginator.previous"
+              description="Used for the previous link">
+              Previous
+            </Translate>
+          }
+        />
+      )}
+      {/* Used for last navigation page*/}
+      {!previous && next && <div className="flex-1" />}
+      
+      {next && (
+        <PaginatorNavLink
+          {...next}
+          subLabel={
+            <Translate
+              id="theme.docs.paginator.next"
+              description="Used for the next link">
+              Next
+            </Translate>
+          }
+          isNext
+        />
+      )}
+    </nav>
+  );
+}
\ No newline at end of file