diff --git a/src/components/InvitePeopleModal.vue b/src/components/InvitePeopleModal.vue
index 948342a8..572a65c0 100644
--- a/src/components/InvitePeopleModal.vue
+++ b/src/components/InvitePeopleModal.vue
@@ -8,15 +8,25 @@
       address listed below using the invite link.
     </p>
 
-    <p class="mt-1">
+    <div class="invite-link-box mt-1">
       <code class="select-all link">{{ inviteLink }}</code>
-    </p>
+      <button class="button invitee-list-action" @click="copyLink" title="Copy invite link">
+        <FontAwesomeIcon :icon="faCopy" />
+      </button>
+    </div>
 
     <p class="mt-2">Enter an email address or NDN name below</p>
 
-    <div class="field mt-2">
-      <input class="input" type="text" :placeholder="`name@example.com or /user-name`" v-model="inviteInput"
-        :disabled="!isOwner" @keydown.enter.prevent="addInvitees(inviteInput)" @paste="addInviteesOnPaste" autofocus />
+    <div class="field has-addons mt-2">
+      <div class="control is-expanded">
+        <input class="input" type="text" :placeholder="`name@example.com or /user-name`" v-model="inviteInput"
+          :disabled="!isOwner" @keydown.enter.prevent="addInvitees(inviteInput)" @paste="addInviteesOnPaste" autofocus />
+      </div>
+      <div class="control">
+        <button class="button is-primary" @click="addInvitees(inviteInput)" :disabled="!isOwner">
+          Add
+        </button>
+      </div>
     </div>
 
     <div class="invitee-management">
@@ -429,9 +439,42 @@ function displayProfileName(name: string): string {
   return utils.stripNdnPrefixForDisplay(name);
 }
 
+async function copyLink() {
+  await navigator.clipboard.writeText(inviteLink.value);
+  Toast.success('Invite link copied to clipboard!');
+}
+
 </script>
 
 <style scoped lang="scss">
+.invite-link-box {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.05);
+  overflow-x: auto;
+
+  code {
+    background: transparent;
+    padding: 0;
+    word-break: break-all;
+    font-size: 0.85rem;
+    flex: 1;
+  }
+
+  .invitee-list-action {
+    flex-shrink: 0;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
 .textarea {
   resize: none;
 }
diff --git a/src/components/ModalComponent.vue b/src/components/ModalComponent.vue
index 3202fa71..a7430e2a 100644
--- a/src/components/ModalComponent.vue
+++ b/src/components/ModalComponent.vue
@@ -2,8 +2,8 @@
   <Teleport to="body">
     <Transition name="fade-2">
       <div class="modal is-active anim-fade" v-if="show || loading">
-        <div class="modal-background"></div>
-        <div class="modal-content">
+        <div class="modal-background" @click="emit('close')"></div>
+        <div class="modal-content" @click.stop>
           <LoadingSpinner v-if="loading" class="fixed-center" />
 
           <div class="box" v-if="show">
@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, watch } from 'vue';
+import { nextTick, watch, onMounted, onUnmounted } from 'vue';
 
 import LoadingSpinner from '@/components/LoadingSpinner.vue';
 
@@ -35,6 +35,20 @@ const props = defineProps({
 
 const emit = defineEmits(['close']);
 
+function handleEscapeKey(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    emit('close');
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', handleEscapeKey);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleEscapeKey);
+});
+
 watch(
   () => props.show,
   async (show) => {
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 1ab1df28..fd086bcf 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -43,6 +43,22 @@
               About</router-link
             >
           </li>
+          <li>
+            <router-link to="/help">
+              <FontAwesomeIcon class="mr-1" :icon="faLightbulb" size="sm" />
+              Getting Started</router-link
+            >
+            <ul v-if="route.name === 'help'" class="menu-list help-toc">
+              <li v-for="item in helpTocItems" :key="item.id">
+                <a
+                  :class="{ 'is-active': activeHelpSection === item.id }"
+                  @click="scrollToHelp(item.id)"
+                >
+                  {{ item.label }}
+                </a>
+              </li>
+            </ul>
+          </li>
           <li>
             <a href="https://github.com/pulsejet/ownly" target="_blank">
               <FontAwesomeIcon class="mr-1" :icon="faGithub" size="sm" />
@@ -197,6 +213,7 @@ import {
   faTableCells,
   faQrcode,
   faCircleInfo,
+  faLightbulb,
   faRobot,
   faCircleExclamation,
   faArrowsRotate,
@@ -224,7 +241,7 @@ import QRIdentityModal from './QRIdentityModal.vue';
 const route = useRoute();
 //const router = useRouter();
 const routeIsDashboard = computed(() =>
-  ['dashboard', 'join', 'about'].includes(String(route.name)),
+  ['dashboard', 'join', 'about', 'help'].includes(String(route.name)),
 );
 const routeIsWorkspace = computed(() =>
   ['space-home', 'project', 'discuss', 'project-file'].includes(String(route.name)),
@@ -253,6 +270,22 @@ const projectFiles = ref([] as IProjectFile[]);
 
 const connState = ref(globalThis._ndnd_conn_state);
 
+const helpTocItems = [
+  { id: 'creating-workspace', label: 'Creating a Workspace' },
+  { id: 'joining-workspace', label: 'Joining a Workspace' },
+  { id: 'inviting-others', label: 'Inviting Others' },
+];
+const activeHelpSection = ref('creating-workspace');
+
+function scrollToHelp(id: string) {
+  activeHelpSection.value = id;
+  window.location.hash = id;
+  const el = document.getElementById(id);
+  if (el) {
+    el.scrollIntoView({ behavior: 'auto' });
+  }
+}
+
 const busListeners = {
   'project-list': (projs: IProject[]) => (projects.value = projs),
   'project-files': (name: string, files: IProjectFile[]) => {
@@ -266,6 +299,9 @@ const busListeners = {
       Toast.info('Disconnected - you are offline');
     }
   },
+  'help-toc-active': (id: string) => {
+    activeHelpSection.value = id;
+  },
 };
 
 const showNotifBubble = ref(false);
@@ -307,6 +343,7 @@ onMounted(async () => {
   GlobalBus.addListener('project-files', busListeners['project-files']);
   GlobalBus.addListener('chat-channels', busListeners['chat-channels']);
   GlobalBus.addListener('conn-change', busListeners['conn-change']);
+  GlobalBus.addListener('help-toc-active', busListeners['help-toc-active']);
   interval = setInterval(() => {
     setNotification();
   },
@@ -322,6 +359,7 @@ onUnmounted(() => {
   GlobalBus.removeListener('project-files', busListeners['project-files']);
   GlobalBus.removeListener('chat-channels', busListeners['chat-channels']);
   GlobalBus.removeListener('conn-change', busListeners['conn-change']);
+  GlobalBus.removeListener('help-toc-active', busListeners['help-toc-active']);
   clearInterval(interval);
   preferredDark?.removeEventListener('change', onThemeMediaChange);
 });
@@ -767,5 +805,49 @@ async function sosRequest() {
   &.resizing .sidebar-resizer::before {
     background: rgba(255, 255, 255, 0.22);
   }
+
+  .help-toc {
+    list-style: none;
+    margin: 4px 0px 4px 10px;
+    padding: 0 0 0 16px;
+    border-left: 1px solid rgba(255, 255, 255, 0.12);
+    position: relative;
+
+    li {
+      margin: 0;
+      padding: 0;
+      position: relative;
+
+      a {
+        display: block;
+        padding: 6px 10px;
+        font-size: 0.85rem;
+        color: rgba(255, 255, 255, 0.8);
+        text-decoration: none;
+        border-radius: 6px;
+        position: relative;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.06);
+        }
+
+        &.is-active {
+          background: rgba(255, 255, 255, 0.08);
+          color: white;
+
+          &::before {
+            content: '';
+            position: absolute;
+            left: -17px;
+            top: 0;
+            bottom: 0;
+            width: 3px;
+            border-radius: 6px;
+            background: var(--sidebar-highlight-bg);
+          }
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/components/home/CreateWorkspaceModal.vue b/src/components/home/CreateWorkspaceModal.vue
index ed5b0613..775a9326 100644
--- a/src/components/home/CreateWorkspaceModal.vue
+++ b/src/components/home/CreateWorkspaceModal.vue
@@ -33,7 +33,7 @@
 
     <div class="field mt-2 has-text-right">
       <div class="control">
-        <button class="button is-light mr-2" :disabled="loading" @click="close">Cancel</button>
+        <button class="button mr-2" :disabled="loading" @click="close">Cancel</button>
         <button class="button is-primary" :disabled="loading" @click="create">Create</button>
       </div>
     </div>
diff --git a/src/components/home/JoinWorkspaceModal.vue b/src/components/home/JoinWorkspaceModal.vue
index c929baf3..da94851b 100644
--- a/src/components/home/JoinWorkspaceModal.vue
+++ b/src/components/home/JoinWorkspaceModal.vue
@@ -6,7 +6,7 @@
       <label class="label">Dashboard Label</label>
       <div class="control">
         <input
-          class="input"
+          class="input soft-if-dark"
           type="text"
           placeholder="Marketing Team"
           v-model="opts.label"
@@ -19,7 +19,7 @@
     <div class="field">
       <label class="label">NDN Name</label>
       <div class="control">
-        <input class="input" type="text" placeholder="/my/awesome/workspace" v-model="opts.name" />
+        <input class="input soft-if-dark" type="text" placeholder="/my/awesome/workspace" v-model="opts.name" />
       </div>
       <p class="help">Unique network identifier of the workspace</p>
     </div>
@@ -27,14 +27,14 @@
     <div class="field">
       <label class="label">Pre-Shared Key</label>
       <div class="control">
-        <input class="input" type="text" placeholder="..." v-model="opts.psk" />
+        <input class="input soft-if-dark" type="text" placeholder="..." v-model="opts.psk" />
       </div>
       <p class="help">Ask the owner of the workspace for the key</p>
     </div>
 
     <div class="field has-text-right">
       <div class="control">
-        <button class="button is-light mr-2" :disabled="loading" @click="close">Cancel</button>
+        <button class="button mr-2" :disabled="loading" @click="close">Cancel</button>
         <button class="button is-primary" :disabled="loading" @click="join">Join</button>
       </div>
     </div>
diff --git a/src/components/landing/DemoCreateWorkspaceModal.vue b/src/components/landing/DemoCreateWorkspaceModal.vue
new file mode 100644
index 00000000..f9045241
--- /dev/null
+++ b/src/components/landing/DemoCreateWorkspaceModal.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="box soft-if-dark demo-modal">
+    <div class="title is-5 mb-4">Create Workspace</div>
+
+    <div class="field">
+      <label class="label">Dashboard Label</label>
+      <div class="control">
+        <input class="input" type="text" placeholder="Marketing Team" />
+      </div>
+      <p class="help">A readable label for the workspace on your dashboard</p>
+    </div>
+
+    <div class="field">
+      <label class="label">Name Identifier</label>
+      <div class="control">
+        <input class="input" type="text" placeholder="marketing-team" />
+      </div>
+      <p class="help">A unique identifier for the workspace, without spaces or special characters</p>
+    </div>
+
+    <div>
+      Your workspace will have the network name &ndash;<br />
+      <code>/ndn/username/marketing-team</code>
+    </div>
+
+    <div class="field mt-2 has-text-right">
+      <div class="control">
+        <button class="button mr-2">Cancel</button>
+        <button class="button is-primary">Create</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.demo-modal {
+  width: 400px;
+  max-width: 100%;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+}
+</style>
diff --git a/src/components/landing/DemoDashboard.vue b/src/components/landing/DemoDashboard.vue
new file mode 100644
index 00000000..078ac935
--- /dev/null
+++ b/src/components/landing/DemoDashboard.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="demo-dashboard has-background-primary soft-if-dark">
+    <div class="spacelist">
+      <div class="create box">
+        <div class="box-content">
+          <div class="block">
+            <div class="media-content">
+              <p class="subtitle is-5 soft-if-dark">Don't see what you are looking for?</p>
+            </div>
+          </div>
+
+          <div class="content has-text-right">
+            <button class="button mr-2 mb-2 is-small-caps">
+              Create a new workspace
+            </button>
+            <button class="button mr-2 is-primary is-small-caps soft-if-dark">
+              Join a workspace
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  highlightCreate: {
+    type: Boolean,
+    default: false,
+  },
+  highlightJoin: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.demo-dashboard {
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+  overflow: hidden;
+}
+
+.spacelist {
+  margin: 0;
+}
+
+.box {
+  border: none;
+  box-shadow: none;
+}
+</style>
diff --git a/src/components/landing/DemoJoinWorkspaceModal.vue b/src/components/landing/DemoJoinWorkspaceModal.vue
new file mode 100644
index 00000000..194f33ae
--- /dev/null
+++ b/src/components/landing/DemoJoinWorkspaceModal.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="box demo-modal">
+    <div class="title is-5 mb-4">Join Workspace</div>
+
+    <div class="field">
+      <label class="label">Dashboard Label</label>
+      <div class="control">
+        <input class="input" type="text" placeholder="Marketing Team" />
+      </div>
+      <p class="help">A readable label for the workspace on your dashboard</p>
+    </div>
+
+    <div class="field">
+      <label class="label">NDN Name</label>
+      <div class="control">
+        <input class="input" type="text" placeholder="/my/awesome/workspace" />
+      </div>
+      <p class="help">Unique network identifier of the workspace</p>
+    </div>
+
+    <div class="field">
+      <label class="label">Pre-Shared Key</label>
+      <div class="control">
+        <input class="input" type="text" placeholder="..." />
+      </div>
+      <p class="help">Ask the owner of the workspace for the key</p>
+    </div>
+
+    <div class="field has-text-right">
+      <div class="control">
+        <button class="button mr-2">Cancel</button>
+        <button class="button is-primary">Join</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.demo-modal {
+  width: 400px;
+  max-width: 100%;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+}
+</style>
diff --git a/src/components/landing/DemoModal.vue b/src/components/landing/DemoModal.vue
new file mode 100644
index 00000000..982f4eaf
--- /dev/null
+++ b/src/components/landing/DemoModal.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="box soft-if-dark demo-modal">
+    <div class="title is-5 mb-4">{{ title }}</div>
+    <p>{{ description }}</p>
+    <div class="invite-link-box mt-1">
+      <code class="select-all link">{{ link }}</code>
+      <button class="button invitee-list-action soft-if-dark">
+        <FontAwesomeIcon :icon="faCopy" />
+      </button>
+    </div>
+    <p class="mt-2">{{ inputLabel }}</p>
+    <div class="field has-addons mt-2">
+      <div class="control is-expanded">
+        <input class="input soft-if-dark" type="text" :placeholder="placeholder" disabled />
+      </div>
+      <div class="control">
+        <button class="button is-primary soft-if-dark" disabled>Add</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faCopy } from '@fortawesome/free-solid-svg-icons';
+
+defineProps({
+  title: {
+    type: String,
+    default: 'Invite people',
+  },
+  description: {
+    type: String,
+    default: 'An invitation will be generated for each email address.',
+  },
+  link: {
+    type: String,
+    default: 'https://app.ownly.dev/join/my-workspace...',
+  },
+  inputLabel: {
+    type: String,
+    default: 'Enter an email address or NDN name below',
+  },
+  placeholder: {
+    type: String,
+    default: 'name@example.com or /user-name',
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.demo-modal {
+  width: 450px;
+  max-width: 100%;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+}
+
+.invite-link-box {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.05);
+  overflow-x: auto;
+
+  code {
+    background: transparent;
+    padding: 0;
+    word-break: break-all;
+    font-size: 0.85rem;
+    flex: 1;
+  }
+
+  .invitee-list-action {
+    flex-shrink: 0;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>
diff --git a/src/components/landing/DemoSidebarHome.vue b/src/components/landing/DemoSidebarHome.vue
new file mode 100644
index 00000000..dd0547fa
--- /dev/null
+++ b/src/components/landing/DemoSidebarHome.vue
@@ -0,0 +1,179 @@
+<template>
+  <aside class="menu main-nav has-background-primary soft-if-dark">
+    <div class="top-sheet">
+      <div class="logo-row">
+        <img alt="logo" class="logo" src="@/assets/logo-white.svg" />
+        <label v-if="showTheme" class="theme-switch">
+          <input type="checkbox" />
+          <span class="track">
+            <FontAwesomeIcon class="track-icon sun" :icon="faSun" />
+            <FontAwesomeIcon class="track-icon moon" :icon="faMoon" />
+            <span class="knob" />
+          </span>
+        </label>
+      </div>
+      <p class="menu-label">General</p>
+      <ul class="menu-list">
+        <li><a :class="{ 'is-active': activeItem === 'dashboard' }">
+          <FontAwesomeIcon class="mr-1" :icon="faTableCells" size="sm" />Dashboard
+        </a></li>
+      </ul>
+      <p class="menu-label">About</p>
+      <ul class="menu-list">
+        <li><a><FontAwesomeIcon class="mr-1" :icon="faCircleInfo" size="sm" />About</a></li>
+        <li><a><FontAwesomeIcon class="mr-1" :icon="faLightbulb" size="sm" />Getting Started</a></li>
+        <li><a><FontAwesomeIcon class="mr-1" :icon="faGithub" size="sm" />GitHub</a></li>
+      </ul>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faTableCells, faCircleInfo, faLightbulb, faSun, faMoon } from '@fortawesome/free-solid-svg-icons';
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
+
+defineProps({
+  showTheme: {
+    type: Boolean,
+    default: false,
+  },
+  activeItem: {
+    type: String,
+    default: 'dashboard',
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.main-nav {
+  padding: 8px;
+  border-radius: 6px;
+  width: 230px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+
+  .top-sheet {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .logo-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 5px 10px;
+  }
+
+  .logo {
+    display: block;
+    height: 30px;
+    margin: 3px 0;
+  }
+
+  .theme-switch {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+
+    input {
+      position: absolute;
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+
+    .track {
+      position: relative;
+      width: 40px;
+      height: 20px;
+      border-radius: 10px;
+      background: rgba(255, 255, 255, 0.1);
+      transition: background 0.25s ease;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 5px;
+      box-sizing: border-box;
+    }
+
+    .track-icon {
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.35);
+      transition: color 0.25s ease;
+      z-index: 1;
+    }
+
+    .knob {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.5);
+      transition: left 0.25s ease, background 0.25s ease;
+    }
+
+    input:checked ~ .track .knob {
+      left: 22px;
+    }
+
+    &:hover .track {
+      background: rgba(255, 255, 255, 0.18);
+    }
+
+    &:hover .track-icon {
+      color: rgba(255, 255, 255, 0.7);
+    }
+
+    &:hover .knob {
+      background: rgba(255, 255, 255, 0.8);
+    }
+  }
+
+  .menu-label {
+    color: #bbb;
+    font-size: 0.6rem;
+    margin: 6px 8px 2px;
+  }
+
+  .menu-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  :deep(li > a) {
+    background-color: transparent;
+    color: white;
+    display: flex;
+    align-items: center;
+    min-height: 26px;
+    font-size: 0.85rem;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    &.is-active,
+    &.router-link-active {
+      background: rgba(255, 255, 255, 0.08);
+      color: white;
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 3px;
+        border-radius: 6px 0 0 6px;
+        background: var(--sidebar-highlight-bg);
+        pointer-events: none;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/landing/DemoSidebarWorkspace.vue b/src/components/landing/DemoSidebarWorkspace.vue
new file mode 100644
index 00000000..e8d541e0
--- /dev/null
+++ b/src/components/landing/DemoSidebarWorkspace.vue
@@ -0,0 +1,184 @@
+<template>
+  <aside class="menu main-nav has-background-primary soft-if-dark">
+    <div class="top-sheet">
+      <div class="logo-row">
+        <img alt="logo" class="logo" src="@/assets/logo-white.svg" />
+        <label v-if="showTheme" class="theme-switch">
+          <input type="checkbox" />
+          <span class="track">
+            <FontAwesomeIcon class="track-icon sun" :icon="faSun" />
+            <FontAwesomeIcon class="track-icon moon" :icon="faMoon" />
+            <span class="knob" />
+          </span>
+        </label>
+      </div>
+      <p class="menu-label">Projects</p>
+      <ul class="menu-list">
+        <li><a><FontAwesomeIcon class="mr-1" :icon="faLayerGroup" size="sm" />Projects</a></li>
+      </ul>
+      <p class="menu-label">Discussion</p>
+      <ul class="menu-list">
+        <li><a><FontAwesomeIcon class="mr-1" :icon="faHashtag" size="sm" />General</a></li>
+      </ul>
+      <p class="menu-label">AI Agents</p>
+      <ul class="menu-list">
+        <li><a><FontAwesomeIcon class="mr-1" :icon="faRobot" size="sm" />Manage agents</a></li>
+      </ul>
+      <p class="menu-label">Workspace</p>
+      <ul class="menu-list">
+        <li><a :class="{ 'is-active': activeItem === 'invite' }">
+          <FontAwesomeIcon class="mr-1" :icon="faPlus" size="sm" />Invite people
+        </a></li>
+      </ul>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faLayerGroup, faHashtag, faRobot, faPlus, faSun, faMoon } from '@fortawesome/free-solid-svg-icons';
+
+defineProps({
+  showTheme: {
+    type: Boolean,
+    default: false,
+  },
+  activeItem: {
+    type: String,
+    default: 'invite',
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.main-nav {
+  padding: 8px;
+  border-radius: 6px;
+  width: 230px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+
+  .top-sheet {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .logo-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 5px 10px;
+  }
+
+  .logo {
+    display: block;
+    height: 30px;
+    margin: 3px 0;
+  }
+
+  .theme-switch {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+
+    input {
+      position: absolute;
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+
+    .track {
+      position: relative;
+      width: 40px;
+      height: 20px;
+      border-radius: 10px;
+      background: rgba(255, 255, 255, 0.1);
+      transition: background 0.25s ease;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 5px;
+      box-sizing: border-box;
+    }
+
+    .track-icon {
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.35);
+      transition: color 0.25s ease;
+      z-index: 1;
+    }
+
+    .knob {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.5);
+      transition: left 0.25s ease, background 0.25s ease;
+    }
+
+    input:checked ~ .track .knob {
+      left: 22px;
+    }
+
+    &:hover .track {
+      background: rgba(255, 255, 255, 0.18);
+    }
+
+    &:hover .track-icon {
+      color: rgba(255, 255, 255, 0.7);
+    }
+
+    &:hover .knob {
+      background: rgba(255, 255, 255, 0.8);
+    }
+  }
+
+  .menu-label {
+    color: #bbb;
+    font-size: 0.6rem;
+    margin: 6px 8px 2px;
+  }
+
+  .menu-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  :deep(li > a) {
+    background-color: transparent;
+    color: white;
+    display: flex;
+    align-items: center;
+    min-height: 26px;
+    font-size: 0.85rem;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    &.is-active,
+    &.router-link-active {
+      background: rgba(255, 255, 255, 0.08);
+      color: white;
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 3px;
+        border-radius: 6px 0 0 6px;
+        background: var(--sidebar-highlight-bg);
+        pointer-events: none;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/landing/HelpComponent.vue b/src/components/landing/HelpComponent.vue
new file mode 100644
index 00000000..69be5927
--- /dev/null
+++ b/src/components/landing/HelpComponent.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="content">
+    <section id="creating-workspace" class="help-section">
+      <h2>Creating a Workspace</h2>
+
+      <StepItem :number="1" title="Go to Dashboard">
+        Click on <strong>Dashboard</strong> in the sidebar to access your workspaces.
+        <template #visual>
+          <DemoSidebarHome :active-item="'dashboard'" />
+        </template>
+      </StepItem>
+
+      <StepItem :number="2" title="Create Workspace">
+        Click the <strong>Create a new workspace</strong> button.
+        <template #visual>
+          <DemoDashboard />
+        </template>
+      </StepItem>
+
+      <StepItem :number="3" title="Fill in Details">
+        Fill in the <strong>Dashboard Label</strong> and <strong>Name Identifier</strong> fields.
+        <template #visual>
+          <DemoCreateWorkspaceModal />
+        </template>
+      </StepItem>
+
+      <StepItem :number="4" title="Start Collaborating">
+        Your workspace is ready. Invite team members or create projects and channels.
+      </StepItem>
+    </section>
+
+    <section id="joining-workspace" class="help-section">
+      <h2>Joining a Workspace</h2>
+
+      <StepItem :number="1" title="Go to Dashboard">
+        Click on <strong>Dashboard</strong> in the sidebar to access your workspaces.
+        <template #visual>
+          <DemoSidebarHome :active-item="'dashboard'" />
+        </template>
+      </StepItem>
+
+      <StepItem :number="2" title="Join Workspace">
+        Click the <strong>Join a workspace</strong> button.
+        <template #visual>
+          <DemoDashboard />
+        </template>
+      </StepItem>
+
+      <StepItem :number="3" title="Fill in Details">
+        Fill in the <strong>Dashboard Label</strong>, <strong>NDN Name</strong>, and <strong>Pre-Shared Key</strong> fields.
+        <template #visual>
+          <DemoJoinWorkspaceModal />
+        </template>
+      </StepItem>
+
+      <StepItem :number="4" title="Start Collaborating">
+        You're now part of the workspace. Create projects and channels to collaborate.
+      </StepItem>
+    </section>
+
+    <section id="inviting-others" class="help-section">
+      <h2>Inviting Others</h2>
+      <p>Here's how to invite someone to your workspace:</p>
+
+      <StepItem :number="1" title="Join a Workspace (first)">
+        The <strong>Invite people</strong> menu only appears when you're in a workspace.
+      </StepItem>
+
+      <StepItem :number="2" title="Open Invite Modal">
+        Click <strong>Invite people</strong> in the sidebar under the Workspace section.
+        <template #visual>
+          <DemoSidebarWorkspace :active-item="'invite'" />
+        </template>
+      </StepItem>
+
+      <StepItem :number="3" title="Copy the Invite Link">
+        Click the <strong>Copy Invite Link</strong> button in the modal.
+        <template #visual>
+          <DemoModal
+            title="Invite people to My Workspace"
+            link="https://app.ownly.dev/join/my-workspace..."
+          />
+        </template>
+      </StepItem>
+
+      <StepItem :number="4" title="Send to Your Teammate">
+        Share the link with your teammate via chat, email, or any method you prefer.
+      </StepItem>
+
+      <StepItem :number="5" title="They Join">
+        Your teammate opens the link and clicks <strong>Join</strong> on the dashboard.
+      </StepItem>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue';
+import DemoSidebarHome from './DemoSidebarHome.vue';
+import DemoSidebarWorkspace from './DemoSidebarWorkspace.vue';
+import DemoDashboard from './DemoDashboard.vue';
+import DemoCreateWorkspaceModal from './DemoCreateWorkspaceModal.vue';
+import DemoJoinWorkspaceModal from './DemoJoinWorkspaceModal.vue';
+import DemoModal from './DemoModal.vue';
+import StepItem from './StepItem.vue';
+import { GlobalBus } from '@/services/event-bus';
+
+const tocIds = ['creating-workspace', 'joining-workspace', 'inviting-others'];
+let isScrolling = false;
+
+function handleScroll() {
+  if (isScrolling) return;
+
+  const sections = tocIds.map(id => document.getElementById(id)).filter(Boolean);
+  const scrollPos = window.scrollY + 100;
+
+  for (let i = sections.length - 1; i >= 0; i--) {
+    const section = sections[i];
+    if (section && section.offsetTop <= scrollPos) {
+      const id = section.id;
+      window.location.hash = id;
+      GlobalBus.emit('help-toc-active', id);
+      break;
+    }
+  }
+}
+
+function handleHashChange() {
+  const hash = window.location.hash.slice(1);
+  if (hash && tocIds.includes(hash)) {
+    GlobalBus.emit('help-toc-active', hash);
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll);
+  window.addEventListener('hashchange', handleHashChange);
+  handleHashChange();
+});
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll);
+  window.removeEventListener('hashchange', handleHashChange);
+});
+</script>
+
+<style scoped lang="scss">
+.content {
+  flex: 1;
+  min-width: 0;
+}
+
+.help-section {
+  padding: 1.5rem 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+
+  h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: inherit;
+    margin-bottom: 1rem;
+  }
+
+  > p {
+    font-size: 1.15rem;
+    font-weight: 300;
+    color: inherit;
+    line-height: 1.6;
+    margin-bottom: 0.5rem;
+  }
+
+  strong {
+    color: inherit;
+    font-weight: 600;
+  }
+
+  code {
+    background: rgba(255, 255, 255, 0.15);
+    padding: 0.15em 0.4em;
+    border-radius: 4px;
+    font-size: 0.9em;
+    color: inherit;
+  }
+}
+</style>
diff --git a/src/components/landing/StepItem.vue b/src/components/landing/StepItem.vue
new file mode 100644
index 00000000..caefcf2f
--- /dev/null
+++ b/src/components/landing/StepItem.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="step-item">
+    <div class="step-content">
+      <div class="step-left">
+        <div class="step-number">{{ number }}</div>
+      </div>
+      <div class="step-right">
+        <div v-if="title" class="step-title">{{ title }}</div>
+        <div class="step-text">
+          <slot />
+        </div>
+        <div v-if="$slots.visual" class="step-visual">
+          <slot name="visual" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  number: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.step-item {
+  display: flex;
+  margin-bottom: 2rem;
+  width: 100%;
+}
+
+.step-content {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+.step-left {
+  flex-shrink: 0;
+}
+
+.step-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.step-number {
+  width: 28px;
+  height: 28px;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: inherit;
+}
+
+.step-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: inherit;
+}
+
+.step-text {
+  color: inherit;
+  line-height: 1.6;
+  font-size: 1rem;
+
+  strong {
+    font-weight: 600;
+  }
+}
+
+.step-visual {
+  display: flex;
+  gap: 1rem;
+  margin-top: 0.5rem;
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index da7b734e..08afe89a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,6 +5,7 @@ import SpaceDiscussView from '@/views/SpaceDiscussView.vue';
 import SpaceProjectView from '@/views/SpaceProjectView.vue';
 import ProjectFileView from '@/views/ProjectFileView.vue';
 import AboutView from '@/views/AboutView.vue';
+import HelpView from '@/views/HelpView.vue';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -44,6 +45,11 @@ const router = createRouter({
       name: 'about',
       component: AboutView,
     },
+    {
+      path: '/help',
+      name: 'help',
+      component: HelpView,
+    },
     {
       path: '/:pathMatch(.*)*',
       redirect: '/',
diff --git a/src/services/event-bus.ts b/src/services/event-bus.ts
index 656ba433..46be6b08 100644
--- a/src/services/event-bus.ts
+++ b/src/services/event-bus.ts
@@ -47,4 +47,10 @@ export const GlobalBus = new EventEmitter() as TypedEmitter<{
    * @param channels List of agent channels
    */
   'agent-channels': (channels: IAgentChannel[]) => void;
+
+  /**
+   * Event when the active help section changes.
+   * @param id Section ID that is now active
+   */
+  'help-toc-active': (id: string) => void;
 }>;
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index b04b053c..87342e18 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
+import { onMounted } from 'vue';
 import AboutComponent from '@/components/landing/AboutComponent.vue';
 import { formTabName } from '@/utils';
-import { onMounted } from 'vue';
 
 onMounted(() => {
-  // Update tab name
   document.title = formTabName('About');
 });
 </script>
diff --git a/src/views/HelpView.vue b/src/views/HelpView.vue
new file mode 100644
index 00000000..b1f06430
--- /dev/null
+++ b/src/views/HelpView.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import HelpComponent from '@/components/landing/HelpComponent.vue';
+import { formTabName } from '@/utils';
+
+onMounted(() => {
+  document.title = formTabName('Getting Started');
+});
+</script>
+
+<template>
+  <main class="has-background-primary soft-if-dark">
+    <div class="help-content">
+      <HelpComponent />
+    </div>
+  </main>
+</template>
+
+<style scoped lang="scss">
+main {
+  overflow-y: auto;
+  height: 100%;
+}
+
+.help-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+  color: white;
+}
+
+.title {
+  color: white;
+  text-align: center;
+  margin-bottom: 2rem;
+}
+</style>