diff --git a/website/package.json b/website/package.json
index 0d7481d326c..a5367ec75c6 100644
--- a/website/package.json
+++ b/website/package.json
@@ -66,6 +66,7 @@
     "react-monaco-editor": "^0.59.0",
     "react-syntax-highlighter": "^16",
     "react-toastify": "^11.0.5",
+    "remark-gfm": "^4.0.1",
     "sass": "^1.89.2",
     "stream-browserify": "^3.0.0",
     "styled-components": "^6.1.19",
diff --git a/website/src/pages/hackathons.jsx b/website/src/pages/hackathons.jsx
new file mode 100644
index 00000000000..453472caa17
--- /dev/null
+++ b/website/src/pages/hackathons.jsx
@@ -0,0 +1,174 @@
+import Layout from '@theme/Layout';
+import { useState, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import Card from '@site/src/components/UI/Card';
+import Button from '@site/src/components/UI/Button';
+import styles from './hackathons.module.scss';
+
+const AWESOME_NEAR_URL = 'https://raw.githubusercontent.com/near/awesome-near/master/README.md';
+
+const fetcher = (url) => fetch(url).then((res) => res.text());
+
+function processMarkdownLinks(markdown) {
+  if (!markdown) return '';
+  
+  let processed = markdown;
+  
+  processed = processed.replace(
+    /\[([^\]]+)\]\(https:\/\/docs\.near\.org\/([^)]+)\)/g,
+    '[$1](/$2)'
+  );
+  
+  processed = processed.replace(
+    /\[([^\]]+)\]\(https:\/\/docs\.near\.org\)/g,
+    '[$1](/)'
+  );
+  
+  const footerIndex = processed.indexOf('*To add a tool');
+  if (footerIndex > -1) {
+    processed = processed.substring(0, footerIndex);
+  }
+  
+  return processed;
+}
+
+const Hackathons = () => {
+  const [awesomeNearContent, setAwesomeNearContent] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchContent = async () => {
+      try {
+        const markdown = await fetcher(AWESOME_NEAR_URL);
+        setAwesomeNearContent(markdown);
+        setLoading(false);
+      } catch (err) {
+        console.error('Failed to fetch awesome-near:', err);
+        setError('Failed to load Awesome NEAR content');
+        setLoading(false);
+      }
+    };
+
+    fetchContent();
+  }, []);
+
+  const processedContent = processMarkdownLinks(awesomeNearContent);
+
+  if (loading) {
+    return (
+      <Layout title="Building on NEAR" description="Helpful resource directory to get started">
+        <div className={styles.loadingContainer}>
+          <h1>Loading Resources...</h1>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout title="Building on NEAR" description="Helpful resource directory to get started">
+      <div className={styles.hackathonsPage}>
+        <div className={styles.container}>
+          <header className={styles.header}>
+            <h1 className={styles.title}>Building on NEAR</h1>
+            <p className={styles.subtitle}>
+              Helpful resource directory to get started
+            </p>
+          </header>
+
+          <section className={styles.mainContent}>
+            <h2>Getting Started</h2>
+            
+            <div className={styles.topGrid}>
+              <Card className={styles.topCard} variant="icon" icon={<span className={styles.emoji}>🌿</span>}>
+                <h3>What is NEAR?</h3>
+                <ul>
+                  <li><a href="/protocol/basics">NEAR Protocol Basics</a></li>
+                  <li><a href="https://docs.near.ai/" target="_blank" rel="noopener noreferrer">NEAR AI Documentation</a></li>
+                  <li><a href="https://docs.near-intents.org/near-intents" target="_blank" rel="noopener noreferrer">NEAR Intents</a></li>
+                  <li><a href="/tutorials/auction/introduction">Mastering NEAR Tutorial</a></li>
+                </ul>
+              </Card>
+
+              <Card className={styles.topCard} variant="icon" icon={<span className={styles.emoji}>💬</span>}>
+                <h3>Developer Support</h3>
+                <p>
+                  <a href="https://near.dev/telegram-chats" target="_blank" rel="noopener noreferrer">
+                    Join the Telegram Developer Chats
+                  </a>
+                </p>
+              </Card>
+              
+              <Card className={styles.topCard} variant="icon" icon={<span className={styles.emoji}>🧑‍💻</span>}>
+                <h3>Need NEAR AI Credits?</h3>
+                <p>
+                  <a href="https://www.notion.so/Requesting-NEAR-AI-Cloud-Credits-2deda22d7b6481aea8e1e30282efcb5e" target="_blank" rel="noopener noreferrer">
+                    Request NEAR AI Cloud Credits
+                  </a>
+                </p>
+              </Card>
+            </div>
+          </section>
+
+          <section className={styles.awesomeNearSection}>
+            <h2 className={styles.sectionTitle}>Awesome NEAR</h2>
+            {error ? (
+              <Card className={styles.errorCard}>
+                <p>{error}</p>
+                <Button href="https://github.com/near/awesome-near" target="_blank">
+                  View on GitHub
+                </Button>
+              </Card>
+            ) : (
+              <>
+                <div className={styles.awesomeNearContent}>
+                  <ReactMarkdown
+                    remarkPlugins={[remarkGfm]}
+                    components={{
+                      h1: ({ children }) => null,
+                      h2: ({ children }) => <h2 className={styles.mdH2}>{children}</h2>,
+                      h3: ({ children }) => <h3 className={styles.mdH3}>{children}</h3>,
+                      table: ({ children }) => <table className={styles.mdTable}>{children}</table>,
+                      thead: ({ children }) => <thead className={styles.mdThead}>{children}</thead>,
+                      tbody: ({ children }) => <tbody className={styles.mdTbody}>{children}</tbody>,
+                      tr: ({ children }) => <tr className={styles.mdTr}>{children}</tr>,
+                      td: ({ children }) => <td className={styles.mdTd}>{children}</td>,
+                      a: ({ href, children }) => {
+                        const isExternal = href && (href.startsWith('http://') || href.startsWith('https://'));
+                        return (
+                          <a 
+                            href={href} 
+                            target={isExternal ? '_blank' : undefined}
+                            rel={isExternal ? 'noopener noreferrer' : undefined}
+                            className={styles.mdLink}
+                          >
+                            {children}
+                          </a>
+                        );
+                      },
+                      ul: ({ children }) => <ul className={styles.mdUl}>{children}</ul>,
+                      li: ({ children }) => <li className={styles.mdLi}>{children}</li>,
+                      code: ({ children }) => <code className={styles.mdCode}>{children}</code>,
+                      hr: () => <hr className={styles.mdHr} />,
+                      p: ({ children }) => <p className={styles.mdP}>{children}</p>,
+                    }}
+                  >
+                    {processedContent}
+                  </ReactMarkdown>
+                </div>
+                <div className={styles.awesomeNearFooter}>
+                  <a href="https://github.com/near/awesome-near" target="_blank" rel="noopener noreferrer">
+                    View and contribute to Awesome NEAR on GitHub →
+                  </a>
+                </div>
+              </>
+            )}
+          </section>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default Hackathons;
diff --git a/website/src/pages/hackathons.module.scss b/website/src/pages/hackathons.module.scss
new file mode 100644
index 00000000000..7eeaa877395
--- /dev/null
+++ b/website/src/pages/hackathons.module.scss
@@ -0,0 +1,447 @@
+.loadingContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background: var(--color-bg-primary);
+  color: var(--color-text-primary);
+}
+
+.hackathonsPage {
+  background: var(--color-bg-primary);
+  min-height: 100vh;
+  padding: var(--space-8) 0 var(--space-12);
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--space-6);
+}
+
+.header {
+  text-align: center;
+  margin-bottom: var(--space-12);
+  padding: var(--space-8) 0;
+}
+
+.title {
+  font-size: 3rem;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-4);
+}
+
+.subtitle {
+  font-size: var(--text-xl);
+  color: var(--color-text-secondary);
+  max-width: 700px;
+  margin: 0 auto;
+}
+
+.mainContent {
+  margin-bottom: var(--space-12);
+  
+  h2 {
+    font-size: 2rem;
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-primary);
+    margin-bottom: var(--space-10);
+    padding-bottom: var(--space-4);
+    border-bottom: var(--border-1) solid var(--color-border-primary);
+  }
+}
+
+.topGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-8);
+  
+  @media (max-width: 1024px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  @media (max-width: 640px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.topCard {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: var(--space-8);
+  
+  :global(.card__icon) {
+    width: var(--space-20);
+    height: var(--space-20);
+    margin-bottom: var(--space-6);
+  }
+  
+  :global(.card__iconSvg) {
+    width: var(--space-12);
+    height: var(--space-12);
+  }
+  
+  :global(.card__body) {
+    padding: 0;
+  }
+  
+  h3 {
+    font-size: 1.25rem;
+    font-weight: var(--font-weight-semibold);
+    margin-bottom: var(--space-5);
+    color: var(--color-text-primary);
+  }
+  
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    
+    li {
+      margin-bottom: var(--space-3);
+      color: var(--color-text-secondary);
+      font-size: var(--text-base);
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  
+  p {
+    margin: 0;
+    color: var(--color-text-secondary);
+    font-size: var(--text-base);
+  }
+  
+  a {
+    color: var(--near-brand-primary);
+    text-decoration: none;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.emoji {
+  font-size: 2.5rem;
+  display: block;
+  line-height: 1;
+}
+
+.awesomeNearSection {
+  margin-top: var(--space-16);
+  padding-top: var(--space-12);
+  border-top: var(--border-1) solid var(--color-border-primary);
+}
+
+.sectionTitle {
+  font-size: 2rem;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-10);
+}
+
+.awesomeNearContent {
+  color: var(--color-text-primary);
+  line-height: var(--leading-relaxed);
+}
+
+.awesomeNearFooter {
+  margin-top: var(--space-12);
+  padding-top: var(--space-8);
+  border-top: var(--border-1) solid var(--color-border-primary);
+  text-align: center;
+  
+  a {
+    display: inline-block;
+    padding: var(--space-4) var(--space-8);
+    background: var(--near-brand-primary);
+    color: white;
+    text-decoration: none;
+    border-radius: var(--radius-md);
+    font-weight: var(--font-weight-semibold);
+    font-size: var(--text-lg);
+    transition: var(--transition-all);
+    
+    &:hover {
+      background: var(--near-brand-primary-600);
+      transform: translateY(-2px);
+    }
+  }
+}
+
+.mdH2 {
+  font-size: 1.5rem;
+  font-weight: var(--font-weight-semibold);
+  margin: var(--space-10) 0 var(--space-6);
+  color: var(--color-text-primary);
+  padding-top: var(--space-6);
+  
+  &:first-of-type {
+    padding-top: 0;
+    margin-top: 0;
+  }
+}
+
+.mdH3 {
+  font-size: 1.25rem;
+  font-weight: var(--font-weight-semibold);
+  margin: var(--space-8) 0 var(--space-4);
+  color: var(--color-text-primary);
+}
+
+.mdP {
+  margin: var(--space-4) 0;
+  color: var(--color-text-secondary);
+  line-height: var(--leading-relaxed);
+  font-size: var(--text-base);
+}
+
+.mdLink {
+  color: var(--near-brand-primary);
+  text-decoration: none;
+  font-size: var(--text-base);
+  
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.mdUl {
+  list-style: none;
+  padding: 0;
+  margin: var(--space-4) 0;
+}
+
+.mdLi {
+  padding: var(--space-3) 0 var(--space-3) var(--space-6);
+  position: relative;
+  color: var(--color-text-secondary);
+  font-size: var(--text-base);
+  
+  &::before {
+    content: '•';
+    position: absolute;
+    left: 0;
+    color: var(--near-brand-primary);
+    font-size: var(--text-lg);
+  }
+}
+
+.mdTable {
+  width: 100%;
+  border-collapse: collapse;
+  margin: var(--space-8) 0;
+  background: var(--color-bg-surface);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  border: var(--border-1) solid var(--color-border-primary);
+  display: block;
+  overflow-x: auto;
+  
+  @media (min-width: 768px) {
+    display: table;
+    overflow-x: visible;
+  }
+}
+
+.mdThead {
+  background: var(--color-bg-subtle);
+  
+  td {
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-primary);
+  }
+}
+
+.mdTbody {
+  tr {
+    border-top: var(--border-1) solid var(--color-border-primary);
+    
+    &:hover {
+      background: var(--color-bg-subtle);
+    }
+  }
+}
+
+.mdTr {
+  display: flex;
+  flex-direction: column;
+  
+  @media (min-width: 768px) {
+    display: table-row;
+  }
+}
+
+.mdTd {
+  padding: var(--space-4) var(--space-5);
+  color: var(--color-text-secondary);
+  display: block;
+  font-size: var(--text-base);
+  
+  @media (min-width: 768px) {
+    display: table-cell;
+  }
+  
+  &:first-child {
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text-primary);
+    
+    a {
+      font-weight: var(--font-weight-semibold);
+    }
+  }
+  
+  a {
+    color: var(--near-brand-primary);
+    text-decoration: none;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.mdCode {
+  background: var(--color-bg-subtle);
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
+  font-family: var(--font-mono);
+}
+
+.mdHr {
+  display: none;
+}
+
+.errorCard {
+  text-align: center;
+  padding: var(--space-8);
+  
+  p {
+    margin-bottom: var(--space-4);
+    color: var(--color-text-secondary);
+  }
+}
+
+@media (max-width: 768px) {
+  .hackathonsPage {
+    padding: var(--space-6) 0;
+  }
+  
+  .loadingContainer h1 {
+    font-size: var(--text-lg);
+  }
+  
+  .container {
+    padding: 0 var(--space-4);
+  }
+  
+  .header {
+    margin-bottom: var(--space-8);
+    padding: var(--space-4) 0;
+  }
+  
+  .title {
+    font-size: 2.25rem;
+  }
+  
+  .subtitle {
+    font-size: var(--text-lg);
+  }
+  
+  .emoji {
+    font-size: 2rem;
+  }
+  
+  .sectionTitle {
+    font-size: 1.5rem;
+  }
+  
+  .mainContent {
+    margin-bottom: var(--space-8);
+    
+    h2 {
+      font-size: 1.5rem;
+      margin-bottom: var(--space-6);
+    }
+  }
+  
+  .topGrid {
+    gap: var(--space-6);
+  }
+  
+  .awesomeNearSection {
+    margin-top: var(--space-10);
+    padding-top: var(--space-8);
+  }
+  
+  .awesomeNearContent {
+    font-size: var(--text-sm);
+  }
+  
+  .mdH2 {
+    font-size: 1.25rem;
+  }
+  
+  .mdH3 {
+    font-size: 1.1rem;
+  }
+  
+  .mdP {
+    font-size: var(--text-sm);
+  }
+  
+  .mdLink {
+    font-size: var(--text-sm);
+  }
+  
+  .mdCode {
+    font-size: var(--text-xs);
+  }
+  
+  .mdTable {
+    margin: var(--space-6) 0;
+  }
+  
+  .mdTd {
+    padding: var(--space-3) var(--space-4);
+  }
+  
+  .mdLi {
+    padding: var(--space-2) 0 var(--space-2) var(--space-5);
+  }
+  
+  .topCard {
+    padding: var(--space-6);
+    
+    :global(.card__icon) {
+      width: var(--space-16);
+      height: var(--space-16);
+    }
+    
+    :global(.card__iconSvg) {
+      width: var(--space-10);
+      height: var(--space-10);
+    }
+  }
+  
+  .errorCard {
+    padding: var(--space-6);
+  }
+  
+  .awesomeNearFooter {
+    margin-top: var(--space-8);
+    padding-top: var(--space-6);
+    
+    a {
+      padding: var(--space-3) var(--space-6);
+      font-size: var(--text-base);
+    }
+  }
+}