diff --git a/apps/developer-hub/content/docs/express-relay/how-express-relay-works/index.mdx b/apps/developer-hub/content/docs/express-relay/how-express-relay-works/index.mdx
index 1fdac60df9..101f148b73 100644
--- a/apps/developer-hub/content/docs/express-relay/how-express-relay-works/index.mdx
+++ b/apps/developer-hub/content/docs/express-relay/how-express-relay-works/index.mdx
@@ -51,12 +51,15 @@ The Express Relay contract collects payment from the Searchers and forwards a sh
 ## Key Components
 
 ### Off-chain Auction Server
+
 The auction server receives bids from searchers and determines winners based on bid amounts and other criteria. It then submits winning transactions to the blockchain in the optimal order.
 
 ### On-chain Smart Contract
+
 The Express Relay smart contract validates that transactions have won the auction and enforces payment collection. It also handles revenue distribution between protocols and other stakeholders.
 
 ### Permission System
+
 Express Relay uses a permission system to ensure only auction winners can execute protected operations. This prevents frontrunning and ensures MEV capture.
 
 ## Benefits for Protocols
@@ -82,7 +85,7 @@ Express Relay also provides advantages for searchers:
 Express Relay is suitable for any protocol with valuable, time-sensitive operations:
 
 - **Lending Protocols**: Liquidations of undercollateralized positions
-- **Perpetual Protocols**: Liquidations and funding rate updates  
+- **Perpetual Protocols**: Liquidations and funding rate updates
 - **DEX Protocols**: Arbitrage opportunities and order book operations
 - **Derivatives Protocols**: Option exercises and settlement operations
 - **Cross-chain Protocols**: Bridge operations and relay transactions
@@ -116,13 +119,13 @@ There are four types of participants in the Express Relay protocol:
     icon={<Gavel size={16} />}
   />
 
-  <IntegrationCard
-    href="./opportunities"
-    colorScheme="green"
-    title="Opportunities"
-    description="Understand available opportunities"
-    icon={<Lightning size={16} />}
-  />
+<IntegrationCard
+  href="./opportunities"
+  colorScheme="green"
+  title="Opportunities"
+  description="Understand available opportunities"
+  icon={<Lightning size={16} />}
+/>
 
   <IntegrationCard
     href="./permissioning"
diff --git a/apps/developer-hub/src/components/Pages/Homepage/index.module.scss b/apps/developer-hub/src/components/Pages/Homepage/index.module.scss
index b5cbefd482..56c3a31d38 100644
--- a/apps/developer-hub/src/components/Pages/Homepage/index.module.scss
+++ b/apps/developer-hub/src/components/Pages/Homepage/index.module.scss
@@ -1,5 +1,377 @@
 @use "@pythnetwork/component-library/theme";
 
-.landing {
+.pageContainer {
+  display: flex;
+  min-height: calc(100vh - theme.$header-height);
+
   @include theme.max-width;
 }
+
+// Left Sidebar Navigation
+.sidebar {
+  width: 280px;
+  flex-shrink: 0;
+  border-right: 1px solid theme.color("border");
+  background: theme.color("background", "primary");
+  padding: theme.spacing(6) 0;
+  position: sticky;
+  top: theme.$header-height;
+  height: calc(100vh - theme.$header-height);
+  overflow-y: auto;
+
+  @media (width <= 1024px) {
+    display: none;
+  }
+}
+
+.sidebarContent {
+  padding: 0 theme.spacing(6);
+}
+
+.navSection {
+  margin-bottom: theme.spacing(8);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.introTitle {
+  background: theme.color("states", "data", "normal");
+  color: theme.color("background", "primary");
+
+  @include theme.text("sm", "semibold");
+
+  padding: theme.spacing(3) theme.spacing(4);
+  border-radius: theme.spacing(2);
+  margin-bottom: theme.spacing(6);
+}
+
+.sectionTitle {
+  @include theme.text("lg", "semibold");
+
+  color: theme.color("heading");
+  margin-bottom: theme.spacing(4);
+}
+
+.navList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.navItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: theme.spacing(3) 0;
+  text-decoration: none;
+
+  @include theme.text("base", "normal");
+
+  color: theme.color("muted");
+  border-bottom: 1px solid theme.color("background", "secondary");
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: theme.color("heading");
+    padding-left: theme.spacing(2);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  span:first-child {
+    flex: 1;
+  }
+}
+
+.navIcon {
+  opacity: 0.6;
+  transition: all 0.2s ease;
+
+  .navItem:hover & {
+    opacity: 1;
+    transform: translateX(theme.spacing(1));
+  }
+}
+
+// Main Content Area
+.mainContent {
+  flex: 1;
+  padding: theme.spacing(6) theme.spacing(8);
+  max-width: calc(100% - 280px);
+
+  @media (width <= 1024px) {
+    max-width: 100%;
+    padding: theme.spacing(6) theme.spacing(4);
+  }
+}
+
+.contentWrapper {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.title {
+  @include theme.text("4xl", "bold");
+
+  color: theme.color("heading");
+  margin-bottom: theme.spacing(6);
+  margin-top: 0;
+}
+
+.description {
+  @include theme.text("lg", "normal");
+
+  color: theme.color("muted");
+  line-height: 1.6;
+  margin-bottom: theme.spacing(8);
+}
+
+// Links
+.link {
+  color: theme.color("states", "data", "normal");
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+// Section styling
+.sectionHeading {
+  @include theme.text("2xl", "semibold");
+
+  color: theme.color("heading");
+  margin-bottom: theme.spacing(6);
+  margin-top: theme.spacing(12);
+
+  &:first-of-type {
+    margin-top: theme.spacing(8);
+  }
+}
+
+.sectionDescription {
+  @include theme.text("base", "normal");
+
+  color: theme.color("muted");
+  margin-bottom: theme.spacing(6);
+}
+
+// Products Section
+.productsSection {
+  margin-bottom: theme.spacing(12);
+}
+
+.productGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: theme.spacing(6);
+  margin-top: theme.spacing(8);
+}
+
+.productCard {
+  background: theme.color("background", "primary");
+  border: 1px solid theme.color("border");
+  border-radius: theme.spacing(3);
+  padding: theme.spacing(6);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: theme.color("states", "data", "normal");
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgb(0 0 0 / 10%);
+  }
+}
+
+.productHeader {
+  display: flex;
+  align-items: center;
+  gap: theme.spacing(3);
+  margin-bottom: theme.spacing(4);
+}
+
+.productBadge {
+  @include theme.text("xs", "semibold");
+
+  padding: theme.spacing(1.5) theme.spacing(3);
+  border-radius: theme.spacing(3);
+  color: white;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  font-size: 11px;
+  line-height: 1.2;
+
+  &.coreBadge,
+  &.randomnessBadge {
+    background: theme.color("states", "data", "normal");
+  }
+
+  &.lazerBadge,
+  &.mevBadge {
+    background: #8b5cf6; // Purple
+  }
+}
+
+.productIcon {
+  color: theme.color("muted");
+}
+
+.productTitle {
+  @include theme.text("lg", "semibold");
+
+  color: theme.color("heading");
+  margin-bottom: theme.spacing(3);
+}
+
+.productDescription {
+  @include theme.text("sm", "normal");
+
+  color: theme.color("muted");
+  margin-bottom: theme.spacing(6);
+  flex-grow: 1;
+}
+
+.featureList {
+  display: flex;
+  flex-direction: column;
+  gap: theme.spacing(3);
+  margin-bottom: theme.spacing(6);
+}
+
+.feature {
+  display: flex;
+  align-items: center;
+  gap: theme.spacing(3);
+
+  @include theme.text("sm", "normal");
+
+  color: theme.color("muted");
+
+  svg {
+    color: theme.color("states", "data", "normal");
+    flex-shrink: 0;
+  }
+}
+
+.productCta {
+  display: inline-flex;
+  align-items: center;
+  gap: theme.spacing(2);
+  padding: theme.spacing(3) theme.spacing(4);
+  background: theme.color("background", "secondary");
+  border: 1px solid theme.color("border");
+  border-radius: theme.spacing(2);
+  text-decoration: none;
+
+  @include theme.text("sm", "semibold");
+
+  color: theme.color("heading");
+  transition: all 0.2s ease;
+  margin-top: auto;
+
+  &:hover {
+    background: theme.color("states", "data", "normal");
+    color: white;
+    border-color: theme.color("states", "data", "normal");
+  }
+}
+
+// Quick Start Section
+.quickStartSection {
+  margin-bottom: theme.spacing(12);
+}
+
+.quickStartList {
+  list-style-type: disc;
+  padding-left: theme.spacing(6);
+
+  li {
+    @include theme.text("base", "normal");
+
+    color: theme.color("muted");
+    margin-bottom: theme.spacing(3);
+    line-height: 1.6;
+
+    strong {
+      color: theme.color("heading");
+    }
+  }
+}
+
+// Additional Resources Section
+.additionalResourcesSection {
+  margin-bottom: theme.spacing(12);
+}
+
+.resourceGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: theme.spacing(6);
+  margin-top: theme.spacing(8);
+}
+
+.resourceCard {
+  background: theme.color("background", "secondary");
+  border: 1px solid theme.color("border");
+  border-radius: theme.spacing(3);
+  padding: theme.spacing(6);
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: theme.color("states", "data", "normal");
+  }
+}
+
+.resourceTitle {
+  @include theme.text("lg", "semibold");
+
+  color: theme.color("heading");
+  margin-bottom: theme.spacing(2);
+}
+
+.resourceDescription {
+  @include theme.text("sm", "normal");
+
+  color: theme.color("muted");
+  margin-bottom: theme.spacing(4);
+}
+
+.resourceLink {
+  @include theme.text("sm", "semibold");
+
+  color: theme.color("states", "data", "normal");
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+// Developer Resources Section
+.developerResourcesSection {
+  margin-bottom: theme.spacing(8);
+}
+
+.developerList {
+  list-style-type: disc;
+  padding-left: theme.spacing(6);
+
+  li {
+    @include theme.text("base", "normal");
+
+    color: theme.color("muted");
+    margin-bottom: theme.spacing(3);
+    line-height: 1.6;
+
+    strong {
+      color: theme.color("heading");
+    }
+  }
+}
diff --git a/apps/developer-hub/src/components/Pages/Homepage/index.tsx b/apps/developer-hub/src/components/Pages/Homepage/index.tsx
index 03ac745e3a..e96748f88b 100644
--- a/apps/developer-hub/src/components/Pages/Homepage/index.tsx
+++ b/apps/developer-hub/src/components/Pages/Homepage/index.tsx
@@ -1,9 +1,402 @@
+import {
+  ArrowRight,
+  CaretRight,
+  ChartLine,
+  Lightning,
+  DiceSix,
+  Clock,
+  Globe,
+  Shield,
+  Code,
+} from "@phosphor-icons/react/dist/ssr";
+import Link from "next/link";
+
 import styles from "./index.module.scss";
 
 export const Homepage = () => {
   return (
-    <div className={styles.landing}>
-      <h2>Homepage Landing Page</h2>
+    <div className={styles.pageContainer}>
+      {/* Left Sidebar Navigation */}
+      <nav className={styles.sidebar}>
+        <div className={styles.sidebarContent}>
+          {/* Introduction Section */}
+          <div className={styles.navSection}>
+            <div className={styles.introTitle}>Introduction</div>
+          </div>
+
+          {/* Product Documentation Section */}
+          <div className={styles.navSection}>
+            <h3 className={styles.sectionTitle}>Product Documentation</h3>
+            <ul className={styles.navList}>
+              <li>
+                <Link href="/pyth-core" className={styles.navItem}>
+                  <span>Price Feeds</span>
+                  <ArrowRight size={14} className={styles.navIcon} />
+                </Link>
+              </li>
+              <li>
+                <Link href="/lazer" className={styles.navItem}>
+                  <span>Lazer</span>
+                  <ArrowRight size={14} className={styles.navIcon} />
+                </Link>
+              </li>
+              <li>
+                <Link href="/express-relay" className={styles.navItem}>
+                  <span>Express Relay</span>
+                  <ArrowRight size={14} className={styles.navIcon} />
+                </Link>
+              </li>
+              <li>
+                <Link href="/entropy" className={styles.navItem}>
+                  <span>Entropy</span>
+                  <ArrowRight size={14} className={styles.navIcon} />
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Additional Information Section */}
+          <div className={styles.navSection}>
+            <h3 className={styles.sectionTitle}>Additional Information</h3>
+            <ul className={styles.navList}>
+              <li>
+                <Link href="/pyth-token" className={styles.navItem}>
+                  <span>PYTH Token</span>
+                  <CaretRight size={14} className={styles.navIcon} />
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/oracle-integrity-staking"
+                  className={styles.navItem}
+                >
+                  <span>Oracle Integrity Staking (OIS)</span>
+                  <CaretRight size={14} className={styles.navIcon} />
+                </Link>
+              </li>
+              <li>
+                <Link href="/metrics" className={styles.navItem}>
+                  <span>Pyth Metrics</span>
+                  <CaretRight size={14} className={styles.navIcon} />
+                </Link>
+              </li>
+              <li>
+                <Link href="/whitepaper" className={styles.navItem}>
+                  <span>Whitepaper</span>
+                </Link>
+              </li>
+              <li>
+                <Link href="/security" className={styles.navItem}>
+                  <span>Security</span>
+                </Link>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+
+      {/* Main Content Area */}
+      <main className={styles.mainContent}>
+        <div className={styles.contentWrapper}>
+          <h1 className={styles.title}>Welcome to Pyth Network</h1>
+          <p className={styles.description}>
+            Pyth Network is the leading oracle protocol that connects the owners
+            of market data to applications on multiple blockchains.{" "}
+            <Link
+              href="https://insights.pyth.network/publishers"
+              target="_blank"
+              className={styles.link}
+            >
+              120+ first-party publishers
+            </Link>{" "}
+            are onboarded to the Pyth Network, including some of the biggest
+            exchanges and market making firms in the world.{" "}
+            <Link
+              href="https://defillama.com/oracles/Pyth"
+              target="_blank"
+              className={styles.link}
+            >
+              Over 250 protocols
+            </Link>{" "}
+            trust Pyth to secure their applications.
+          </p>
+
+          {/* Our Products */}
+          <section className={styles.productsSection}>
+            <h2 className={styles.sectionHeading}>Our Products</h2>
+
+            <div className={styles.productGrid}>
+              <div className={styles.productCard}>
+                <div className={styles.productHeader}>
+                  <div
+                    className={[styles.productBadge, styles.coreBadge].join(
+                      " ",
+                    )}
+                  >
+                    Core
+                  </div>
+                  <ChartLine size={24} className={styles.productIcon} />
+                </div>
+                <h3 className={styles.productTitle}>Price Feeds</h3>
+                <p className={styles.productDescription}>
+                  Real-time, high-fidelity market data for smart contracts with
+                  sub-second latency.
+                </p>
+                <div className={styles.featureList}>
+                  <div className={styles.feature}>
+                    <Clock size={16} />
+                    <span>Real-time price feeds</span>
+                  </div>
+                  <div className={styles.feature}>
+                    <ChartLine size={16} />
+                    <span>2000+ assets</span>
+                  </div>
+                  <div className={styles.feature}>
+                    <Globe size={16} />
+                    <span>100+ blockchains</span>
+                  </div>
+                </div>
+                <Link href="/pyth-core" className={styles.productCta}>
+                  Explore Price Feeds
+                  <ArrowRight size={16} />
+                </Link>
+              </div>
+
+              <div className={styles.productCard}>
+                <div className={styles.productHeader}>
+                  <div
+                    className={[styles.productBadge, styles.lazerBadge].join(
+                      " ",
+                    )}
+                  >
+                    Lazer
+                  </div>
+                  <Lightning size={24} className={styles.productIcon} />
+                </div>
+                <h3 className={styles.productTitle}>Lazer</h3>
+                <p className={styles.productDescription}>
+                  High-performance, low-latency price feeds for institutional
+                  applications.
+                </p>
+                <div className={styles.featureList}>
+                  <div className={styles.feature}>
+                    <Lightning size={16} />
+                    <span>Ultra-low latency</span>
+                  </div>
+                  <div className={styles.feature}>
+                    <Shield size={16} />
+                    <span>Institutional grade</span>
+                  </div>
+                  <div className={styles.feature}>
+                    <ChartLine size={16} />
+                    <span>High-frequency data</span>
+                  </div>
+                </div>
+                <Link href="/lazer" className={styles.productCta}>
+                  Learn About Lazer
+                  <ArrowRight size={16} />
+                </Link>
+              </div>
+
+              <div className={styles.productCard}>
+                <div className={styles.productHeader}>
+                  <div
+                    className={[styles.productBadge, styles.mevBadge].join(" ")}
+                  >
+                    MEV Protection
+                  </div>
+                  <Globe size={24} className={styles.productIcon} />
+                </div>
+                <h3 className={styles.productTitle}>Express Relay</h3>
+                <p className={styles.productDescription}>
+                  Eliminate MEV while gaining access to active searchers and
+                  liquidators.
+                </p>
+                <div className={styles.featureList}>
+                  <div className={styles.feature}>
+                    <Shield size={16} />
+                    <span>MEV protection</span>
+                  </div>
+                  <div className={styles.feature}>
+                    <Code size={16} />
+                    <span>Active searchers</span>
+                  </div>
+                  <div className={styles.feature}>
+                    <Globe size={16} />
+                    <span>Multi-chain support</span>
+                  </div>
+                </div>
+                <Link href="/express-relay" className={styles.productCta}>
+                  Explore Express Relay
+                  <ArrowRight size={16} />
+                </Link>
+              </div>
+
+              <div className={styles.productCard}>
+                <div className={styles.productHeader}>
+                  <div
+                    className={[
+                      styles.productBadge,
+                      styles.randomnessBadge,
+                    ].join(" ")}
+                  >
+                    Randomness
+                  </div>
+                  <DiceSix size={24} className={styles.productIcon} />
+                </div>
+                <h3 className={styles.productTitle}>Entropy</h3>
+                <p className={styles.productDescription}>
+                  Generate secure random numbers on the blockchain for your
+                  applications.
+                </p>
+                <div className={styles.featureList}>
+                  <div className={styles.feature}>
+                    <Shield size={16} />
+                    <span>Cryptographically secure</span>
+                  </div>
+                  <div className={styles.feature}>
+                    <Clock size={16} />
+                    <span>Real-time generation</span>
+                  </div>
+                  <div className={styles.feature}>
+                    <Globe size={16} />
+                    <span>Multi-chain support</span>
+                  </div>
+                </div>
+                <Link href="/entropy" className={styles.productCta}>
+                  Learn About Entropy
+                  <ArrowRight size={16} />
+                </Link>
+              </div>
+            </div>
+          </section>
+
+          {/* Quick Start */}
+          <section className={styles.quickStartSection}>
+            <h2 className={styles.sectionHeading}>Quick Start</h2>
+            <p className={styles.sectionDescription}>
+              Get started with Pyth Network by exploring our comprehensive
+              documentation:
+            </p>
+            <ul className={styles.quickStartList}>
+              <li>
+                <strong>
+                  <Link
+                    href="/pyth-core/getting-started"
+                    className={styles.link}
+                  >
+                    Price Feeds Getting Started
+                  </Link>
+                </strong>{" "}
+                - Integrate real-time price data
+              </li>
+              <li>
+                <strong>
+                  <Link href="/lazer" className={styles.link}>
+                    Lazer Documentation
+                  </Link>
+                </strong>{" "}
+                - High-performance price feeds
+              </li>
+              <li>
+                <strong>
+                  <Link href="/express-relay" className={styles.link}>
+                    Express Relay Integration
+                  </Link>
+                </strong>{" "}
+                - Better orderflow mechanism to eliminate MEV
+              </li>
+              <li>
+                <strong>
+                  <Link href="/entropy" className={styles.link}>
+                    Entropy Implementation
+                  </Link>
+                </strong>{" "}
+                - Secure randomness generation
+              </li>
+            </ul>
+          </section>
+
+          {/* Additional Resources */}
+          <section className={styles.additionalResourcesSection}>
+            <h2 className={styles.sectionHeading}>Additional Resources</h2>
+
+            <div className={styles.resourceGrid}>
+              <div className={styles.resourceCard}>
+                <h3 className={styles.resourceTitle}>PYTH Token</h3>
+                <p className={styles.resourceDescription}>
+                  Learn about the Pyth governance token and its role in the
+                  network.
+                </p>
+                <Link href="/pyth-token" className={styles.resourceLink}>
+                  Learn More →
+                </Link>
+              </div>
+
+              <div className={styles.resourceCard}>
+                <h3 className={styles.resourceTitle}>
+                  Oracle Integrity Staking
+                </h3>
+                <p className={styles.resourceDescription}>
+                  Understand how staking ensures data quality and network
+                  security.
+                </p>
+                <Link
+                  href="/oracle-integrity-staking"
+                  className={styles.resourceLink}
+                >
+                  Learn More →
+                </Link>
+              </div>
+
+              <div className={styles.resourceCard}>
+                <h3 className={styles.resourceTitle}>Network Metrics</h3>
+                <p className={styles.resourceDescription}>
+                  Track the network&apos;s adoption, growth, and performance
+                  metrics.
+                </p>
+                <Link href="/metrics" className={styles.resourceLink}>
+                  Learn More →
+                </Link>
+              </div>
+            </div>
+          </section>
+
+          {/* Developer Resources */}
+          <section className={styles.developerResourcesSection}>
+            <h2 className={styles.sectionHeading}>Developer Resources</h2>
+            <ul className={styles.developerList}>
+              <li>
+                <strong>
+                  <Link
+                    href="/pyth-core/contract-addresses"
+                    className={styles.link}
+                  >
+                    Contract Addresses
+                  </Link>
+                </strong>{" "}
+                - Find deployment addresses across all supported chains
+              </li>
+              <li>
+                <strong>
+                  <Link href="/whitepaper" className={styles.link}>
+                    Whitepaper
+                  </Link>
+                </strong>{" "}
+                - Deep dive into Pyth Network&apos;s technical architecture
+              </li>
+              <li>
+                <strong>
+                  <Link href="/security" className={styles.link}>
+                    Security
+                  </Link>
+                </strong>{" "}
+                - Learn about Pyth&apos;s security model and best practices
+              </li>
+            </ul>
+          </section>
+        </div>
+      </main>
     </div>
   );
 };
diff --git a/apps/entropy-debugger/next-env.d.ts b/apps/entropy-debugger/next-env.d.ts
index 1b3be0840f..830fb594ca 100644
--- a/apps/entropy-debugger/next-env.d.ts
+++ b/apps/entropy-debugger/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.