diff --git a/package.json b/package.json
index d4cf1fcf..15c3c9b7 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "git-info": "rm -rf src/generated/ && mkdir src/generated/ && echo export default \"{\\\"commitHash\\\": \\\"$(git rev-parse --short HEAD)\\\", \\\"version\\\": \\\"$(git describe --tags --always)\\\"};\" > src/generated/gitInfo.ts"
   },
   "dependencies": {
-    "@stellar/design-system": "^2.0.0-beta.4",
+    "@stellar/design-system": "^2.0.0-beta.5",
     "immer": "^10.0.3",
     "next": "14.0.4",
     "react": "^18",
diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx
index feb52d34..3aa44803 100644
--- a/src/app/(sidebar)/account/create/page.tsx
+++ b/src/app/(sidebar)/account/create/page.tsx
@@ -1,14 +1,5 @@
 "use client";
 
-import { useStore } from "@/store/useStore";
-
 export default function CreateAccount() {
-  const { network } = useStore();
-
-  return (
-    <div>
-      Create Account
-      <div>{`Current network: ${network?.id}`}</div>
-    </div>
-  );
+  return <div>Create Account</div>;
 }
diff --git a/src/app/(sidebar)/account/fund/page.tsx b/src/app/(sidebar)/account/fund/page.tsx
index 07df3f55..afb29bdc 100644
--- a/src/app/(sidebar)/account/fund/page.tsx
+++ b/src/app/(sidebar)/account/fund/page.tsx
@@ -1,74 +1,5 @@
 "use client";
 
-import { useStore } from "@/store/useStore";
-import { Input, Button, Select } from "@stellar/design-system";
-import { useState } from "react";
-
 export default function FundAccount() {
-  const {
-    account: { value, update, updateNested, reset },
-  } = useStore();
-
-  const [testValue, setTestValue] = useState(value);
-
-  const handleUpdateNested = (event: any) => {
-    const val = event.target.value;
-    let submitValue = {
-      nestedValue1: "AAA",
-      nestedValue2: 111,
-    };
-
-    if (val === "Two") {
-      submitValue = {
-        nestedValue1: "BBB",
-        nestedValue2: 222,
-      };
-    }
-
-    updateNested(submitValue);
-  };
-
-  return (
-    <div>
-      Fund Account
-      <div>
-        <div>{`Test value: ${value}`}</div>
-
-        <p>Store value is updated on blur</p>
-
-        <Input
-          id="test-1"
-          fieldSize="sm"
-          value={testValue}
-          onChange={(event) => setTestValue(event.target.value)}
-          onBlur={(event) => update(event.target.value)}
-          label="Value"
-        />
-
-        <p>Testing nested object update</p>
-
-        <Select
-          id="select-1"
-          fieldSize="sm"
-          onChange={handleUpdateNested}
-          label="Nested value"
-        >
-          <option></option>
-          <option value="One">One</option>
-          <option value="Two">Two</option>
-        </Select>
-
-        <Button
-          size="sm"
-          variant="primary"
-          onClick={() => {
-            reset();
-            setTestValue("");
-          }}
-        >
-          Reset
-        </Button>
-      </div>
-    </div>
-  );
+  return <div>Fund Account</div>;
 }
diff --git a/src/app/(sidebar)/account/page.tsx b/src/app/(sidebar)/account/page.tsx
deleted file mode 100644
index b9e1da7f..00000000
--- a/src/app/(sidebar)/account/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-"use client";
-
-export default function Account() {
-  return <div>Account content</div>;
-}
diff --git a/src/app/(sidebar)/explore-endpoints/page.tsx b/src/app/(sidebar)/explore-endpoints/page.tsx
new file mode 100644
index 00000000..1a61f25b
--- /dev/null
+++ b/src/app/(sidebar)/explore-endpoints/page.tsx
@@ -0,0 +1,5 @@
+"use client";
+
+export default function ExploreEndpoints() {
+  return <div>Explore Endpoints</div>;
+}
diff --git a/src/app/(sidebar)/explore-endpoints/template.tsx b/src/app/(sidebar)/explore-endpoints/template.tsx
new file mode 100644
index 00000000..47017a8e
--- /dev/null
+++ b/src/app/(sidebar)/explore-endpoints/template.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { LayoutSidebarContent } from "@/components/layout/LayoutSidebarContent";
+
+export default function ExploreEndpointsTemplate({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <LayoutSidebarContent
+      sidebar={{
+        navItems: [],
+      }}
+    >
+      {children}
+    </LayoutSidebarContent>
+  );
+}
diff --git a/src/app/(sidebar)/soroban/contract-explorer/page.tsx b/src/app/(sidebar)/soroban/contract-explorer/page.tsx
new file mode 100644
index 00000000..7743fef5
--- /dev/null
+++ b/src/app/(sidebar)/soroban/contract-explorer/page.tsx
@@ -0,0 +1,5 @@
+"use client";
+
+export default function SorobanContractExplorer() {
+  return <div>Soroban Contract Explorer</div>;
+}
diff --git a/src/app/(sidebar)/soroban/template.tsx b/src/app/(sidebar)/soroban/template.tsx
new file mode 100644
index 00000000..6603b71b
--- /dev/null
+++ b/src/app/(sidebar)/soroban/template.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { LayoutSidebarContent } from "@/components/layout/LayoutSidebarContent";
+
+export default function TransactionTemplate({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <LayoutSidebarContent
+      sidebar={{
+        navItems: [],
+      }}
+    >
+      {children}
+    </LayoutSidebarContent>
+  );
+}
diff --git a/src/app/(sidebar)/transaction/build/page.tsx b/src/app/(sidebar)/transaction/build/page.tsx
new file mode 100644
index 00000000..08e78397
--- /dev/null
+++ b/src/app/(sidebar)/transaction/build/page.tsx
@@ -0,0 +1,5 @@
+"use client";
+
+export default function BuildTransaction() {
+  return <div>Build Transaction</div>;
+}
diff --git a/src/app/(sidebar)/transaction/fee-bump/page.tsx b/src/app/(sidebar)/transaction/fee-bump/page.tsx
new file mode 100644
index 00000000..cb3997e4
--- /dev/null
+++ b/src/app/(sidebar)/transaction/fee-bump/page.tsx
@@ -0,0 +1,5 @@
+"use client";
+
+export default function FeeBumpTransaction() {
+  return <div>Fee Bump Transaction</div>;
+}
diff --git a/src/app/(sidebar)/transaction/sign/page.tsx b/src/app/(sidebar)/transaction/sign/page.tsx
new file mode 100644
index 00000000..326001a7
--- /dev/null
+++ b/src/app/(sidebar)/transaction/sign/page.tsx
@@ -0,0 +1,5 @@
+"use client";
+
+export default function SignTransaction() {
+  return <div>Sign Transaction</div>;
+}
diff --git a/src/app/(sidebar)/transaction/simulate/page.tsx b/src/app/(sidebar)/transaction/simulate/page.tsx
new file mode 100644
index 00000000..1709d965
--- /dev/null
+++ b/src/app/(sidebar)/transaction/simulate/page.tsx
@@ -0,0 +1,5 @@
+"use client";
+
+export default function SimulateTransaction() {
+  return <div>Simulate Transaction</div>;
+}
diff --git a/src/app/(sidebar)/transaction/submit/page.tsx b/src/app/(sidebar)/transaction/submit/page.tsx
new file mode 100644
index 00000000..78b768b8
--- /dev/null
+++ b/src/app/(sidebar)/transaction/submit/page.tsx
@@ -0,0 +1,5 @@
+"use client";
+
+export default function SubmitTransaction() {
+  return <div>Submit Transaction</div>;
+}
diff --git a/src/app/(sidebar)/transaction/template.tsx b/src/app/(sidebar)/transaction/template.tsx
new file mode 100644
index 00000000..b9f99f96
--- /dev/null
+++ b/src/app/(sidebar)/transaction/template.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { LayoutSidebarContent } from "@/components/layout/LayoutSidebarContent";
+import { Routes } from "@/constants/routes";
+
+export default function TransactionTemplate({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <LayoutSidebarContent
+      sidebar={{
+        navItems: [
+          {
+            route: Routes.BUILD_TRANSACTION,
+            label: "Build Transaction",
+          },
+          {
+            route: Routes.SIGN_TRANSACTION,
+            label: "Sign Transaction",
+          },
+          {
+            route: Routes.SIMULATE_TRANSACTION,
+            label: "Simulate Transaction",
+          },
+          {
+            route: Routes.SUBMIT_TRANSACTION,
+            label: "Submit Transaction",
+          },
+          {
+            route: Routes.FEE_BUMP_TRANSACTION,
+            label: "Fee Bump",
+          },
+        ],
+      }}
+    >
+      {children}
+    </LayoutSidebarContent>
+  );
+}
diff --git a/src/app/(sidebar)/xdr/template.tsx b/src/app/(sidebar)/xdr/template.tsx
new file mode 100644
index 00000000..85068cec
--- /dev/null
+++ b/src/app/(sidebar)/xdr/template.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { LayoutSidebarContent } from "@/components/layout/LayoutSidebarContent";
+import { Routes } from "@/constants/routes";
+
+export default function XdrTemplate({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <LayoutSidebarContent
+      sidebar={{
+        navItems: [
+          {
+            route: Routes.VIEW_XDR,
+            label: "View XDR",
+          },
+          {
+            route: Routes.TO_XDR,
+            label: "To XDR",
+          },
+        ],
+      }}
+    >
+      {children}
+    </LayoutSidebarContent>
+  );
+}
diff --git a/src/app/(sidebar)/xdr/to/page.tsx b/src/app/(sidebar)/xdr/to/page.tsx
new file mode 100644
index 00000000..fd419c45
--- /dev/null
+++ b/src/app/(sidebar)/xdr/to/page.tsx
@@ -0,0 +1,5 @@
+"use client";
+
+export default function ToXdr() {
+  return <div>To XDR</div>;
+}
diff --git a/src/app/(sidebar)/xdr/view/page.tsx b/src/app/(sidebar)/xdr/view/page.tsx
new file mode 100644
index 00000000..f111eade
--- /dev/null
+++ b/src/app/(sidebar)/xdr/view/page.tsx
@@ -0,0 +1,5 @@
+"use client";
+
+export default function ViewXdr() {
+  return <div>View XDR</div>;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7769fddf..823dd1d0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,11 +1,114 @@
 "use client";
 
+import { useRouter } from "next/navigation";
+import { Card, Link, Text, Button, Icon } from "@stellar/design-system";
+
+import { NextLink } from "@/components/NextLink";
 import { LayoutContentContainer } from "@/components/layout/LayoutContentContainer";
+import { Routes } from "@/constants/routes";
 
 export default function Introduction() {
+  const router = useRouter();
+
+  const infoCards = [
+    {
+      id: "stellar-quest",
+      title: "Stellar Quest",
+      description:
+        "Learn to build world-class applications on the Stellar network in a gamified experience",
+      buttonLabel: "Go to site",
+      buttonIcon: <Icon.LinkExternal01 />,
+      buttonAction: () => window.open("https://quest.stellar.org/", "_blank"),
+    },
+    {
+      id: "tools",
+      title: "Tools",
+      description:
+        "Tools for reading and interacting with Soroban smart contracts on the Stellar Network",
+      buttonLabel: "See tools",
+      buttonIcon: undefined,
+      buttonAction: () => router.push(Routes.SOROBAN_CONTRACT_EXPLORER),
+    },
+    {
+      id: "soroban-rpc",
+      title: "Learn about the Soroban RPC",
+      description: "Learn about the Soroban RPC, a RPC gateway to Stellar",
+      buttonLabel: "Go to docs",
+      buttonIcon: <Icon.LinkExternal01 />,
+      buttonAction: () =>
+        window.open("https://soroban.stellar.org/docs/reference/rpc", "_blank"),
+    },
+    {
+      id: "horizon",
+      title: "Learn about Horizon",
+      description:
+        "Learn about the Horizon for interacting with the Stellar network",
+      buttonLabel: "Go to docs",
+      buttonIcon: <Icon.LinkExternal01 />,
+      buttonAction: () =>
+        window.open("https://developers.stellar.org/api/horizon", "_blank"),
+    },
+  ];
+
   return (
     <LayoutContentContainer>
-      <div>Introduction</div>
+      <Card>
+        <div className="CardText">
+          <Text size="lg" as="h1" weight="medium">
+            Stellar Laboratory
+          </Text>
+
+          <Text size="sm" as="p">
+            The Stellar Laboratory is a set of tools that enables people to try
+            out and learn about the Stellar network. The laboratory can{" "}
+            <NextLink href={Routes.BUILD_TRANSACTION} sds-variant="primary">
+              build transactions
+            </NextLink>
+            ,{" "}
+            <NextLink href={Routes.SIGN_TRANSACTION} sds-variant="primary">
+              sign them
+            </NextLink>
+            , and{" "}
+            <NextLink href={Routes.SUBMIT_TRANSACTION} sds-variant="primary">
+              submit them to the network
+            </NextLink>
+            . It can also make requests to any of the Horizon endpoints.
+          </Text>
+
+          <Text size="sm" as="p">
+            For Stellar docs, take a look at the{" "}
+            <Link href="https://developers.stellar.org/docs">
+              Stellar developers site
+            </Link>
+            .
+          </Text>
+        </div>
+      </Card>
+
+      <div className="IntroCards">
+        {infoCards.map((c) => (
+          <Card key={c.id}>
+            <Text size="md" as="h2" weight="medium">
+              {c.title}
+            </Text>
+
+            <Text size="sm" as="p">
+              {c.description}
+            </Text>
+
+            <div>
+              <Button
+                variant="secondary"
+                size="md"
+                icon={c.buttonIcon}
+                onClick={c.buttonAction}
+              >
+                {c.buttonLabel}
+              </Button>
+            </div>
+          </Card>
+        ))}
+      </div>
     </LayoutContentContainer>
   );
 }
diff --git a/src/components/MainNav.tsx b/src/components/MainNav.tsx
index f7ee0c26..6058d5f9 100644
--- a/src/components/MainNav.tsx
+++ b/src/components/MainNav.tsx
@@ -21,6 +21,18 @@ const primaryNavLinks: NavLink[] = [
     href: Routes.EXPLORE_ENDPOINTS,
     label: "Explore Endpoints",
   },
+  {
+    href: Routes.BUILD_TRANSACTION,
+    label: "Transactions",
+  },
+  {
+    href: Routes.VIEW_XDR,
+    label: "View XDR",
+  },
+  {
+    href: Routes.SOROBAN_CONTRACT_EXPLORER,
+    label: "Soroban",
+  },
 ];
 
 const secondaryNavLinks: NavLink[] = [
diff --git a/src/components/NextLink.tsx b/src/components/NextLink.tsx
index 25fdfe8d..674e3cdc 100644
--- a/src/components/NextLink.tsx
+++ b/src/components/NextLink.tsx
@@ -1,7 +1,9 @@
 import { ComponentProps } from "react";
 import Link from "next/link";
 
-type LinkProps = ComponentProps<typeof Link>;
+type LinkProps = ComponentProps<typeof Link> & {
+  "sds-variant"?: "primary" | "secondary" | "error" | "success" | "warning";
+};
 
 /** `NextLink` is extended `next/link`. */
 export const NextLink = (props: LinkProps) => {
@@ -13,5 +15,13 @@ export const NextLink = (props: LinkProps) => {
       : {};
   };
 
-  return <Link {...props} {...externalLinkProps(props.href.toString())} />;
+  return (
+    <Link
+      {...props}
+      className={`${props.className || ""} ${
+        props["sds-variant"] ? `Link Link--${props["sds-variant"]}` : ""
+      }`}
+      {...externalLinkProps(props.href.toString())}
+    />
+  );
 };
diff --git a/src/constants/routes.ts b/src/constants/routes.ts
index c5524e5e..e558249d 100644
--- a/src/constants/routes.ts
+++ b/src/constants/routes.ts
@@ -7,4 +7,15 @@ export enum Routes {
   PARSE_MUXED_ACCOUNT = "/account/muxed-parse",
   // Explore Endpoints
   EXPLORE_ENDPOINTS = "/explore-endpoints",
+  // Transactions
+  BUILD_TRANSACTION = "/transaction/build",
+  SIGN_TRANSACTION = "/transaction/sign",
+  SIMULATE_TRANSACTION = "/transaction/simulate",
+  SUBMIT_TRANSACTION = "/transaction/submit",
+  FEE_BUMP_TRANSACTION = "/transaction/fee-bump",
+  // View XDR
+  VIEW_XDR = "/xdr/view",
+  TO_XDR = "/xdr/to",
+  // Soroban
+  SOROBAN_CONTRACT_EXPLORER = "/soroban/contract-explorer",
 }
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 0899cc1c..6019bd3b 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -20,6 +20,24 @@
   color: var(--sds-clr-gray-11);
   background-color: var(--sds-clr-gray-02);
 
+  // ===========================================================================
+  // Generic
+  // ===========================================================================
+
+  .Heading,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--sds-clr-gray-12);
+  }
+
+  // ===========================================================================
+  // Layout
+  // ===========================================================================
+
   // Header
   &__header {
     background-color: var(--sds-clr-gray-01);
@@ -146,7 +164,6 @@
   }
 }
 
-// TODO: update name
 .NavLink {
   --Nav-navLink-color: var(--sds-clr-gray-11);
   --Nav-navLink-border-color: transparent;
@@ -158,6 +175,7 @@
     color var(--sds-anim-transition-default),
     border-color var(--sds-anim-transition-default);
   border-bottom: 2px solid var(--Nav-navLink-border-color);
+  white-space: nowrap;
 
   @media (hover: hover) {
     &:hover {
@@ -208,3 +226,35 @@
     font-weight: var(--sds-fw-semi-bold);
   }
 }
+
+// =============================================================================
+// Pages
+// =============================================================================
+
+// Introduction
+.CardText {
+  display: flex;
+  flex-direction: column;
+  gap: pxToRem(12px);
+
+  p {
+    margin-bottom: 0 !important;
+  }
+}
+
+.IntroCards {
+  display: grid;
+  gap: pxToRem(12px);
+  grid-template-columns: 1fr 1fr;
+
+  .Card {
+    display: flex;
+    flex-direction: column;
+    gap: pxToRem(8px);
+    justify-content: space-between;
+
+    :nth-child(2) {
+      flex: 1;
+    }
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 9e04f47c..8757e2a5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -168,10 +168,10 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.6.1.tgz#9ab8f811930d7af3e3d549183a50884f9eb83f36"
   integrity sha512-UY+FGM/2jjMkzQLn8pxcHGMaVLh9aEitG3zY2CiY7XHdLiz3bZOwa6oDxNqEMv7zZkV+cj5DOdz0cQ1BP5Hjgw==
 
-"@stellar/design-system@^2.0.0-beta.4":
-  version "2.0.0-beta.4"
-  resolved "https://registry.yarnpkg.com/@stellar/design-system/-/design-system-2.0.0-beta.4.tgz#29c95cbd9e8641ba1eab2116c198d9a659b0f10e"
-  integrity sha512-HIGo51qj37BAj4AGp4cxs+DENoiepQQFcOtVfT87Mp+x/lwIZcGhYGVAe/DuKwjyMak379qy9iI/lSY4GlTQlQ==
+"@stellar/design-system@^2.0.0-beta.5":
+  version "2.0.0-beta.5"
+  resolved "https://registry.yarnpkg.com/@stellar/design-system/-/design-system-2.0.0-beta.5.tgz#caa0a3f214ff25bf94d89a0181c39ab3215612d7"
+  integrity sha512-fnFZq+doZcqeX2hTgKUVT6SbSmFaZx6tahBl+qN0z6EuxusNbA29HcWNsptwiZK3lLlqm88Wu3jWcVmhvB6zzg==
   dependencies:
     "@floating-ui/dom" "^1.5.3"
     bignumber.js "^9.1.1"