diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 3115c9b1476..4034e5a3f51 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -252,6 +252,12 @@ const config = {
               description: 'Join our WeChat community',
               icon: '/assets/menu/wechat.svg',
             },
+            {
+              label: 'Office Hours',
+              to: '/office-hours',
+              description: 'Book a session with our developer advocates',
+              icon: '/assets/menu/event.png',
+            }
           ],
         },
         {
diff --git a/website/src/components/UI/Card/Card.module.scss b/website/src/components/UI/Card/Card.module.scss
index c2f884c6ec6..5b1672cfd3b 100644
--- a/website/src/components/UI/Card/Card.module.scss
+++ b/website/src/components/UI/Card/Card.module.scss
@@ -1,5 +1,5 @@
 .card {
-  padding: var(--space-3) var(--space-1) var(--space-1);
+  padding: var(--space-1);
   border-radius: var(--radius-card);
   border: var(--border-card);
   background: var(--color-bg-surface);
@@ -233,8 +233,8 @@
   // Title element
   &__title {
     margin: var(--space-1) 0 var(--space-3) 0;
-    font-size: var(--text-xl);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--text-md);
+    font-weight: var(--font-weight-bold);
     line-height: var(--leading-tight);
   }
 
@@ -243,7 +243,7 @@
     flex-grow: 1;
     margin: 0;
     line-height: var(--leading-relaxed);
-    font-size: var(--text-base);
+    font-size: var(--text-md);
   }
 
   // Content element
diff --git a/website/src/pages/office-hours.jsx b/website/src/pages/office-hours.jsx
new file mode 100644
index 00000000000..d52ece9f8f3
--- /dev/null
+++ b/website/src/pages/office-hours.jsx
@@ -0,0 +1,60 @@
+import Layout from '@theme/Layout'
+import Card from '@site/src/components/UI/Card'
+
+
+// Are you a developer building on NEAR? Do you have questions about the NEAR protocol, tools, or best practices? Join our weekly office hours to connect with technical experts and get your questions answered.
+// Building a Shade Agent? Using chain signatures? Book a session with Owen: https://calendly.com/owen-proximity/office-hours
+// Building a Smart Contract? A general question about the NEAR protocol? Book a session with Guille: https://calendar.app.google/6q2ssGUmvFcMoJk97
+
+
+export default function OfficeHours() {
+
+  return <>
+    <Layout title="Office Hours" description="Book a session with our developer advocates">
+      <main className="container--lg margin-vert--xl">
+        <div className="row">
+          <div className="col col--6 col--offset-3">
+            <h1>Office Hours</h1>
+            <p>Are you a developer building on NEAR? Do you have questions about the NEAR protocol, tools, or best practices? Join our weekly office hours to connect with technical experts and get your questions answered.</p>
+            <br />
+            <h2 className="text--center padding-bottom--md"> What are you Building? </h2>
+            <div className="row">
+              <div className="col col--4 text--center">
+                <Card title="Multi-chain">
+                  <a href="https://calendly.com/owen-proximity/office-hours" className="button button--primary margin-bottom--sm">Book Support</a>
+                </Card>
+              </div>
+              <div className="col col--4 text--center">
+                <Card title="Shade Agent">
+                  <a href="https://calendly.com/owen-proximity/office-hours" className="button button--primary margin-bottom--sm">Book Support</a>
+                </Card>
+              </div>
+              <div className="col col--4 text--center">
+                <Card title="Smart Contracts">
+                  <a href="https://calendar.app.google/6q2ssGUmvFcMoJk97" className="button button--primary margin-bottom--sm">Book Support</a>
+                </Card>
+              </div>
+            </div>
+            <div className="row margin-top--lg">
+              <div className="col col--4 text--center">
+                <Card title="Web3 App">
+                  <a href="https://calendar.app.google/6q2ssGUmvFcMoJk97" className="button button--primary margin-bottom--sm">Book Support</a>
+                </Card>
+              </div>
+              <div className="col col--4 text--center">
+                <Card title="Data Infra">
+                  <a href="https://calendar.app.google/6q2ssGUmvFcMoJk97" className="button button--primary margin-bottom--sm">Book Support</a>
+                </Card>
+              </div>
+              <div className="col col--4 text--center">
+                <Card title="Tooling">
+                  <a href="https://calendar.app.google/6q2ssGUmvFcMoJk97" className="button button--primary margin-bottom--sm">Book Support</a>
+                </Card>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </Layout>
+  </>
+}
\ No newline at end of file
diff --git a/website/src/pages/office-hours.module.scss b/website/src/pages/office-hours.module.scss
new file mode 100644
index 00000000000..d88c23ebd53
--- /dev/null
+++ b/website/src/pages/office-hours.module.scss
@@ -0,0 +1,63 @@
+.page {
+  padding: var(--space-8) 0;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--space-6);
+}
+
+.header {
+  max-width: 860px;
+  margin-bottom: var(--space-8);
+}
+
+.title {
+  margin: 0 0 var(--space-4) 0;
+  font-size: var(--text-4xl);
+  line-height: var(--leading-tight);
+  color: var(--color-text-primary);
+}
+
+.paragraph {
+  margin: 0 0 var(--space-4) 0;
+  font-size: var(--text-lg);
+  line-height: var(--leading-relaxed);
+  color: var(--color-text-secondary);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.columns {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-6);
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.cardTitle {
+  margin: 0;
+  font-size: var(--text-xl);
+  line-height: var(--leading-snug);
+  color: var(--color-text-primary);
+}
+
+.cardText {
+  margin: 0;
+  color: var(--color-text-secondary);
+  line-height: var(--leading-relaxed);
+}
+
+@media (max-width: 996px) {
+  .columns {
+    grid-template-columns: 1fr;
+  }
+}
\ No newline at end of file