diff --git a/apps/website/components/Accordion.vue b/apps/website/components/Accordion.vue
new file mode 100644
index 0000000..8d10532
--- /dev/null
+++ b/apps/website/components/Accordion.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="accordion">
+    <button 
+      class="accordion-trigger" 
+      @click="toggle"
+      :aria-expanded="isOpen"
+    >
+      <slot name="icon" />
+      <span class="accordion-title">
+        <slot name="title" />
+      </span>
+      <Icon 
+        name="heroicons:chevron-down" 
+        :class="['accordion-chevron', { 'accordion-chevron-open': isOpen }]" 
+      />
+    </button>
+    <div v-show="isOpen" class="accordion-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Props {
+  defaultOpen?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultOpen: false
+})
+
+const isOpen = ref(props.defaultOpen)
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+</script>
+
+<style scoped>
+.accordion {
+  background-color: var(--color-white);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--color-gray-200);
+  overflow: hidden;
+}
+
+body.dark .accordion {
+  background-color: var(--color-gray-900);
+  border-color: var(--color-gray-700);
+}
+
+.accordion-trigger {
+  width: 100%;
+  padding: var(--spacing-xl);
+  font-size: var(--font-size-xl);
+  font-weight: 600;
+  color: var(--color-gray-900);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color var(--transition-base);
+}
+
+.accordion-trigger:hover {
+  background-color: var(--color-gray-50);
+}
+
+body.dark .accordion-trigger {
+  color: var(--color-white);
+}
+
+body.dark .accordion-trigger:hover {
+  background-color: var(--color-gray-800);
+}
+
+.accordion-title {
+  flex: 1;
+}
+
+.accordion-chevron {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--color-gray-400);
+  flex-shrink: 0;
+  transition: transform var(--transition-base);
+}
+
+.accordion-chevron-open {
+  transform: rotate(180deg);
+}
+
+.accordion-content {
+  padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
+  color: var(--color-gray-600);
+  line-height: 1.7;
+}
+
+body.dark .accordion-content {
+  color: var(--color-gray-300);
+}
+</style>
diff --git a/apps/website/components/FaqSection.vue b/apps/website/components/FaqSection.vue
new file mode 100644
index 0000000..41037fc
--- /dev/null
+++ b/apps/website/components/FaqSection.vue
@@ -0,0 +1,142 @@
+<template>
+  <section id="faq" class="section faq-section">
+    <div class="container-custom">
+      <div class="section-header">
+        <h2 class="section-title">
+          Frequently Asked Questions
+        </h2>
+        <p class="section-description">
+          Common questions and answers about NoteX
+        </p>
+      </div>
+
+      <div class="faq-container">
+        <Accordion v-for="(item, index) in faqItems" :key="index">
+          <template #icon>
+            <Icon name="heroicons:question-mark-circle" class="faq-icon" />
+          </template>
+          <template #title>{{ item.question }}</template>
+          <template v-for="(content, contentIndex) in item.answer" :key="contentIndex">
+            <p v-if="content.type === 'text'">{{ content.value }}</p>
+            <InlineCodeBlock v-else-if="content.type === 'code'" :code="content.value" />
+            <p v-else-if="content.type === 'note'" class="faq-note">
+              <Icon name="heroicons:light-bulb" class="faq-note-icon" />
+              {{ content.value }}
+            </p>
+          </template>
+        </Accordion>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+interface FaqContent {
+  type: 'text' | 'code' | 'note'
+  value: string
+}
+
+interface FaqItem {
+  question: string
+  answer: FaqContent[]
+}
+
+const faqItems: FaqItem[] = [
+  {
+    question: "Why does macOS say the app is damaged or from an unidentified developer?",
+    answer: [
+      {
+        type: 'text',
+        value: 'NoteX is a free, open-source app and we don\'t pay the $99/year Apple developer fee for code signing. This causes macOS to block the app by default.'
+      },
+      {
+        type: 'text',
+        value: 'To fix this, run the following command in Terminal before opening the DMG:'
+      },
+      {
+        type: 'code',
+        value: 'xattr -d com.apple.quarantine ~/Downloads/NoteX_0.7.1_aarch64.dmg'
+      },
+      {
+        type: 'note',
+        value: 'Replace the filename with the actual DMG file you downloaded.'
+      }
+    ]
+  }
+]
+</script>
+
+<style scoped>
+.faq-section {
+  background-color: var(--color-gray-50);
+}
+
+body.dark .faq-section {
+  background-color: var(--color-gray-800);
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: var(--spacing-3xl);
+}
+
+.section-title {
+  font-size: var(--font-size-4xl);
+  font-weight: 700;
+  color: var(--color-gray-900);
+  margin-bottom: var(--spacing-md);
+}
+
+body.dark .section-title {
+  color: var(--color-white);
+}
+
+.section-description {
+  font-size: var(--font-size-xl);
+  color: var(--color-gray-600);
+  max-width: 42rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+body.dark .section-description {
+  color: var(--color-gray-300);
+}
+
+.faq-container {
+  max-width: 48rem;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+}
+
+.faq-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  color: var(--color-primary-600);
+  flex-shrink: 0;
+}
+
+.faq-note {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+}
+
+.faq-note-icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+}
+
+:deep(.accordion-content p) {
+  margin-bottom: var(--spacing-md);
+}
+
+:deep(.accordion-content p:last-child) {
+  margin-bottom: 0;
+}
+</style>
diff --git a/apps/website/components/InlineCodeBlock.vue b/apps/website/components/InlineCodeBlock.vue
new file mode 100644
index 0000000..ee4aa38
--- /dev/null
+++ b/apps/website/components/InlineCodeBlock.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="code-block">
+    <code>{{ code }}</code>
+    <button 
+      class="copy-button" 
+      @click="copyToClipboard"
+      :title="copied ? 'Copied!' : 'Copy to clipboard'"
+    >
+      <Icon :name="copied ? 'heroicons:check' : 'heroicons:clipboard-document'" class="copy-icon" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps<{
+  code: string
+}>()
+
+const copied = ref(false)
+
+async function copyToClipboard() {
+  try {
+    await navigator.clipboard.writeText(props.code)
+    copied.value = true
+    setTimeout(() => {
+      copied.value = false
+    }, 2000)
+  } catch (err) {
+    console.error('Failed to copy:', err)
+  }
+}
+</script>
+
+<style scoped>
+.code-block {
+  background-color: var(--color-gray-900);
+  color: var(--color-gray-100);
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: var(--radius-md);
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: var(--font-size-sm);
+  overflow-x: auto;
+  margin: var(--spacing-md) 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+
+:global(body.dark) .code-block {
+  background-color: var(--color-gray-950);
+}
+
+.code-block code {
+  white-space: nowrap;
+  flex: 1;
+}
+
+.copy-button {
+  background: none;
+  border: none;
+  padding: var(--spacing-xs);
+  cursor: pointer;
+  color: var(--color-gray-400);
+  border-radius: var(--radius-sm);
+  transition: color var(--transition-base), background-color var(--transition-base);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.copy-button:hover {
+  color: var(--color-gray-100);
+  background-color: var(--color-gray-700);
+}
+
+.copy-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+</style>
diff --git a/apps/website/components/landing/CtaSection.vue b/apps/website/components/landing/CtaSection.vue
new file mode 100644
index 0000000..2df94e4
--- /dev/null
+++ b/apps/website/components/landing/CtaSection.vue
@@ -0,0 +1,97 @@
+<template>
+  <section class="section cta-section">
+    <div class="container-custom">
+      <div class="cta-content">
+        <h2 class="cta-title">
+          Ready to Take Better Notes?
+        </h2>
+        <p class="cta-description">
+          Join developers and writers who trust NoteX for their daily note-taking
+        </p>
+        <div class="cta-buttons">
+          <a href="#download" class="cta-btn cta-btn-white">
+            Download Now
+          </a>
+          <a href="https://github.com/cadamsdev/notes-app" target="_blank" rel="noopener noreferrer"
+             class="cta-btn cta-btn-outlined">
+            Star on GitHub ⭐
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.cta-section {
+  background-color: var(--color-primary-600);
+}
+
+body.dark .cta-section {
+  background-color: var(--color-primary-700);
+}
+
+.cta-content {
+  max-width: 48rem;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  color: var(--color-white);
+}
+
+.cta-title {
+  font-size: var(--font-size-4xl);
+  font-weight: 700;
+  margin-bottom: var(--spacing-md);
+}
+
+.cta-description {
+  font-size: var(--font-size-xl);
+  margin-bottom: var(--spacing-2xl);
+  color: var(--color-primary-100);
+}
+
+.cta-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  justify-content: center;
+}
+
+@media (min-width: 640px) {
+  .cta-buttons {
+    flex-direction: row;
+  }
+}
+
+.cta-btn {
+  padding: var(--spacing-md) var(--spacing-2xl);
+  border-radius: var(--radius-lg);
+  font-weight: 600;
+  text-decoration: none;
+  transition: background-color var(--transition-base);
+  display: inline-block;
+}
+
+.cta-btn-white {
+  background-color: var(--color-white);
+  color: var(--color-primary-600);
+}
+
+.cta-btn-white:hover {
+  background-color: var(--color-gray-100);
+}
+
+.cta-btn-outlined {
+  background-color: var(--color-primary-700);
+  color: var(--color-white);
+  border: 1px solid var(--color-primary-500);
+}
+
+.cta-btn-outlined:hover {
+  background-color: var(--color-primary-800);
+}
+</style>
diff --git a/apps/website/components/landing/DownloadSection.vue b/apps/website/components/landing/DownloadSection.vue
new file mode 100644
index 0000000..c342e9f
--- /dev/null
+++ b/apps/website/components/landing/DownloadSection.vue
@@ -0,0 +1,156 @@
+<template>
+  <section id="download" class="section download-section">
+    <div class="container-custom">
+      <div class="download-content">
+        <h2 class="section-title">
+          Download NoteX
+        </h2>
+        <p class="section-description">
+          Available for Windows, macOS, and Linux
+        </p>
+
+        <div class="download-grid">
+          <DownloadCard 
+            platform="Windows"
+            icon="mdi:microsoft-windows"
+            :downloads="[
+              { name: 'Windows Installer', ext: '.msi' },
+              { name: 'Windows Portable', ext: '.exe' }
+            ]"
+          />
+          
+          <DownloadCard 
+            platform="macOS"
+            icon="mdi:apple"
+            :downloads="[
+              { name: 'macOS Silicon', ext: '.dmg (arm64)' },
+              { name: 'macOS Intel', ext: '.dmg (x64)' }
+            ]"
+          />
+          
+          <DownloadCard 
+            platform="Linux"
+            icon="mdi:linux"
+            :downloads="[
+              { name: 'AppImage', ext: '.AppImage' },
+              { name: 'Debian Package', ext: '.deb' }
+            ]"
+          />
+        </div>
+
+        <div class="info-box">
+          <p class="info-text">
+            <Icon name="heroicons:information-circle" class="info-icon" />
+            Visit the 
+            <a href="https://github.com/usenotex/notex/releases" target="_blank" rel="noopener noreferrer" 
+               class="info-link">
+              Releases page
+            </a>
+            for the latest version and all download options.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.download-section {
+  background-color: var(--color-white);
+}
+
+body.dark .download-section {
+  background-color: var(--color-gray-900);
+}
+
+.download-content {
+  max-width: 56rem;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+.section-title {
+  font-size: var(--font-size-4xl);
+  font-weight: 700;
+  color: var(--color-gray-900);
+  margin-bottom: var(--spacing-md);
+}
+
+body.dark .section-title {
+  color: var(--color-white);
+}
+
+.section-description {
+  font-size: var(--font-size-xl);
+  color: var(--color-gray-600);
+  max-width: 42rem;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: var(--spacing-3xl);
+}
+
+body.dark .section-description {
+  color: var(--color-gray-300);
+}
+
+.download-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-2xl);
+}
+
+@media (min-width: 768px) {
+  .download-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.info-box {
+  margin-top: var(--spacing-3xl);
+  padding: var(--spacing-lg);
+  background-color: var(--color-primary-50);
+  border-radius: var(--radius-lg);
+}
+
+body.dark .info-box {
+  background-color: rgba(2, 132, 199, 0.2);
+}
+
+.info-text {
+  color: var(--color-gray-700);
+}
+
+body.dark .info-text {
+  color: var(--color-gray-300);
+}
+
+.info-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  display: inline;
+  margin-right: var(--spacing-sm);
+}
+
+.info-link {
+  font-weight: 600;
+  color: var(--color-primary-600);
+  text-decoration: none;
+  transition: color var(--transition-base);
+}
+
+.info-link:hover {
+  color: var(--color-primary-700);
+}
+
+body.dark .info-link {
+  color: var(--color-primary-400);
+}
+
+body.dark .info-link:hover {
+  color: var(--color-primary-300);
+}
+</style>
diff --git a/apps/website/components/landing/FeaturesSection.vue b/apps/website/components/landing/FeaturesSection.vue
new file mode 100644
index 0000000..bf6314f
--- /dev/null
+++ b/apps/website/components/landing/FeaturesSection.vue
@@ -0,0 +1,135 @@
+<template>
+  <section id="features" class="section features-section">
+    <div class="container-custom">
+      <div class="section-header">
+        <h2 class="section-title">
+          Everything You Need
+        </h2>
+        <p class="section-description">
+          Built with modern technologies for the best note-taking experience
+        </p>
+      </div>
+
+      <div class="features-grid">
+        <FeatureCard 
+          icon="heroicons:bolt"
+          title="Performant"
+          :features="[
+            'Built with Tauri (Rust + Vue 3)',
+            'Blazing fast startup times',
+            'Fast, reliable SQLite storage'
+          ]"
+        />
+        
+        <FeatureCard 
+          icon="heroicons:cube"
+          title="Lightweight"
+          :features="[
+            'Small installation size ~5MB',
+            'Minimal resource usage',
+            'Runs on any modern system'
+          ]"
+        />
+        
+        <FeatureCard 
+          icon="heroicons:arrow-path"
+          title="Cloud Sync"
+          :features="[
+            'Save notes anywhere on your filesystem',
+            'Works with OneDrive, Google Drive, Dropbox',
+            'Your data, your control'
+          ]"
+        />
+        
+        <FeatureCard 
+          icon="heroicons:document-text"
+          title="Markdown Support"
+          :features="[
+            'Write in plain text files',
+            'GitHub Flavored Markdown (GFM)',
+            'Take your data anywhere'
+          ]"
+        />
+        
+        <FeatureCard 
+          icon="heroicons:calendar-days"
+          title="Smart Organization"
+          :features="[
+            'Organize with hashtags (#work, #personal)',
+            'Fuzzy search with real-time filtering',
+            'Quick access to any note'
+          ]"
+        />
+        
+        <FeatureCard 
+          icon="heroicons:sparkles"
+          title="Beautiful Design"
+          :features="[
+            'Clean, minimal interface',
+            'Light/dark themes',
+            'Mobile-responsive layout'
+          ]"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.features-section {
+  background-color: var(--color-white);
+}
+
+body.dark .features-section {
+  background-color: var(--color-gray-900);
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: var(--spacing-3xl);
+}
+
+.section-title {
+  font-size: var(--font-size-4xl);
+  font-weight: 700;
+  color: var(--color-gray-900);
+  margin-bottom: var(--spacing-md);
+}
+
+body.dark .section-title {
+  color: var(--color-white);
+}
+
+.section-description {
+  font-size: var(--font-size-xl);
+  color: var(--color-gray-600);
+  max-width: 42rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+body.dark .section-description {
+  color: var(--color-gray-300);
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-2xl);
+}
+
+@media (min-width: 768px) {
+  .features-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .features-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+</style>
diff --git a/apps/website/components/landing/HeroSection.vue b/apps/website/components/landing/HeroSection.vue
new file mode 100644
index 0000000..3d10f5b
--- /dev/null
+++ b/apps/website/components/landing/HeroSection.vue
@@ -0,0 +1,187 @@
+<template>
+  <section class="section hero-section">
+    <div class="container-custom">
+      <div class="hero-content">
+        <div class="logo-container">
+          <img src="/logo.svg" alt="NoteX Logo" class="hero-logo" />
+        </div>
+        <h1 class="hero-title">
+          Your Notes, <span class="title-accent">Your Way</span>
+        </h1>
+        <p class="hero-description">
+          A minimal, local-first, markdown-based note taking app. 
+          Privacy-focused, blazingly fast, and works with your favorite cloud storage.
+        </p>
+        <div class="hero-buttons">
+          <a href="#download" class="btn-hero btn-hero-primary">
+            <Icon name="heroicons:arrow-down-tray" class="btn-icon" />
+            Download Now
+          </a>
+          <a href="https://github.com/cadamsdev/notes-app" target="_blank" rel="noopener noreferrer" 
+             class="btn-hero btn-hero-secondary">
+            <Icon name="mdi:github" class="btn-icon" />
+            View on GitHub
+          </a>
+        </div>
+        
+        <!-- Preview Images -->
+        <div class="preview-container">
+          <div class="preview-image-wrapper">
+            <img src="/preview-light.png" alt="NoteX Light Theme" class="preview-image" />
+          </div>
+          <div class="preview-image-wrapper">
+            <img src="/preview-dark.png" alt="NoteX Dark Theme" class="preview-image" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.hero-section {
+  background: linear-gradient(to bottom, var(--color-white), var(--color-gray-50));
+}
+
+body.dark .hero-section {
+  background: linear-gradient(to bottom, var(--color-gray-900), var(--color-gray-800));
+}
+
+.hero-content {
+  max-width: 56rem;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+.logo-container {
+  margin-bottom: var(--spacing-2xl);
+}
+
+.hero-logo {
+  height: 6rem;
+  width: 6rem;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: var(--spacing-lg);
+}
+
+.hero-title {
+  font-size: var(--font-size-5xl);
+  font-weight: 700;
+  color: var(--color-gray-900);
+  margin-bottom: var(--spacing-lg);
+}
+
+@media (min-width: 768px) {
+  .hero-title {
+    font-size: var(--font-size-6xl);
+  }
+}
+
+body.dark .hero-title {
+  color: var(--color-white);
+}
+
+.title-accent {
+  color: var(--color-primary-600);
+}
+
+.hero-description {
+  font-size: var(--font-size-xl);
+  color: var(--color-gray-600);
+  margin-bottom: var(--spacing-2xl);
+  max-width: 42rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+body.dark .hero-description {
+  color: var(--color-gray-300);
+}
+
+.hero-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  justify-content: center;
+}
+
+@media (min-width: 640px) {
+  .hero-buttons {
+    flex-direction: row;
+  }
+}
+
+.btn-hero {
+  font-size: var(--font-size-lg);
+  padding: var(--spacing-md) var(--spacing-2xl);
+  border-radius: var(--radius-lg);
+  font-weight: 500;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color var(--transition-base);
+}
+
+.btn-hero-primary {
+  background-color: var(--color-primary-600);
+  color: var(--color-white);
+}
+
+.btn-hero-primary:hover {
+  background-color: var(--color-primary-700);
+}
+
+.btn-hero-secondary {
+  background-color: var(--color-gray-200);
+  color: var(--color-gray-900);
+}
+
+.btn-hero-secondary:hover {
+  background-color: var(--color-gray-300);
+}
+
+body.dark .btn-hero-secondary {
+  background-color: var(--color-gray-700);
+  color: var(--color-white);
+}
+
+body.dark .btn-hero-secondary:hover {
+  background-color: var(--color-gray-600);
+}
+
+.btn-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  display: inline;
+  margin-right: var(--spacing-sm);
+}
+
+.preview-container {
+  margin-top: var(--spacing-3xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xl);
+}
+
+.preview-image-wrapper {
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  box-shadow: var(--shadow-2xl);
+  border: 1px solid var(--color-gray-200);
+}
+
+body.dark .preview-image-wrapper {
+  border-color: var(--color-gray-700);
+}
+
+.preview-image {
+  width: 100%;
+  display: block;
+}
+</style>
diff --git a/apps/website/components/landing/TechStackSection.vue b/apps/website/components/landing/TechStackSection.vue
new file mode 100644
index 0000000..725326b
--- /dev/null
+++ b/apps/website/components/landing/TechStackSection.vue
@@ -0,0 +1,77 @@
+<template>
+  <section class="section tech-section">
+    <div class="container-custom">
+      <div class="section-header">
+        <h2 class="section-title">
+          Built with Modern Tech
+        </h2>
+        <p class="section-description">
+          Powered by cutting-edge technologies for maximum performance and reliability
+        </p>
+      </div>
+
+      <div class="tech-grid">
+        <TechCard name="Tauri" icon="simple-icons:tauri" color="#24C8DB" />
+        <TechCard name="Vue 3" icon="mdi:vuejs" color="#42b883" />
+        <TechCard name="Rust" icon="mdi:language-rust" color="#CE412B" />
+        <TechCard name="SQLite" icon="simple-icons:sqlite" color="#003B57" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.tech-section {
+  background-color: var(--color-gray-50);
+}
+
+body.dark .tech-section {
+  background-color: var(--color-gray-800);
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: var(--spacing-3xl);
+}
+
+.section-title {
+  font-size: var(--font-size-4xl);
+  font-weight: 700;
+  color: var(--color-gray-900);
+  margin-bottom: var(--spacing-md);
+}
+
+body.dark .section-title {
+  color: var(--color-white);
+}
+
+.section-description {
+  font-size: var(--font-size-xl);
+  color: var(--color-gray-600);
+  max-width: 42rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+body.dark .section-description {
+  color: var(--color-gray-300);
+}
+
+.tech-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--spacing-2xl);
+  max-width: 56rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media (min-width: 768px) {
+  .tech-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+</style>
diff --git a/apps/website/pages/index.vue b/apps/website/pages/index.vue
index df4b33a..0f72408 100644
--- a/apps/website/pages/index.vue
+++ b/apps/website/pages/index.vue
@@ -1,219 +1,11 @@
 <template>
   <div>
-    <!-- Hero Section -->
-    <section class="section hero-section">
-      <div class="container-custom">
-        <div class="hero-content">
-          <div class="logo-container">
-            <img src="/logo.svg" alt="NoteX Logo" class="hero-logo" />
-          </div>
-          <h1 class="hero-title">
-            Your Notes, <span class="title-accent">Your Way</span>
-          </h1>
-          <p class="hero-description">
-            A minimal, local-first, markdown-based note taking app. 
-            Privacy-focused, blazingly fast, and works with your favorite cloud storage.
-          </p>
-          <div class="hero-buttons">
-            <a href="#download" class="btn-hero btn-hero-primary">
-              <Icon name="heroicons:arrow-down-tray" class="btn-icon" />
-              Download Now
-            </a>
-            <a href="https://github.com/cadamsdev/notes-app" target="_blank" rel="noopener noreferrer" 
-               class="btn-hero btn-hero-secondary">
-              <Icon name="mdi:github" class="btn-icon" />
-              View on GitHub
-            </a>
-          </div>
-          
-          <!-- Preview Images -->
-          <div class="preview-container">
-            <div class="preview-image-wrapper">
-              <img src="/preview-light.png" alt="NoteX Light Theme" class="preview-image" />
-            </div>
-            <div class="preview-image-wrapper">
-              <img src="/preview-dark.png" alt="NoteX Dark Theme" class="preview-image" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Features Section -->
-    <section id="features" class="section features-section">
-      <div class="container-custom">
-        <div class="section-header">
-          <h2 class="section-title">
-            Everything You Need
-          </h2>
-          <p class="section-description">
-            Built with modern technologies for the best note-taking experience
-          </p>
-        </div>
-
-        <div class="features-grid">
-          <!-- Feature Cards -->
-          <FeatureCard 
-            icon="heroicons:bolt"
-            title="Performant"
-            :features="[
-              'Built with Tauri (Rust + Vue 3)',
-              'Blazing fast startup times',
-              'Fast, reliable SQLite storage'
-            ]"
-          />
-          
-          <FeatureCard 
-            icon="heroicons:cube"
-            title="Lightweight"
-            :features="[
-              'Small installation size ~5MB',
-              'Minimal resource usage',
-              'Runs on any modern system'
-            ]"
-          />
-          
-          <FeatureCard 
-            icon="heroicons:arrow-path"
-            title="Cloud Sync"
-            :features="[
-              'Save notes anywhere on your filesystem',
-              'Works with OneDrive, Google Drive, Dropbox',
-              'Your data, your control'
-            ]"
-          />
-          
-          <FeatureCard 
-            icon="heroicons:document-text"
-            title="Markdown Support"
-            :features="[
-              'Write in plain text files',
-              'GitHub Flavored Markdown (GFM)',
-              'Take your data anywhere'
-            ]"
-          />
-          
-          <FeatureCard 
-            icon="heroicons:calendar-days"
-            title="Smart Organization"
-            :features="[
-              'Organize with hashtags (#work, #personal)',
-              'Fuzzy search with real-time filtering',
-              'Quick access to any note'
-            ]"
-          />
-          
-          <FeatureCard 
-            icon="heroicons:sparkles"
-            title="Beautiful Design"
-            :features="[
-              'Clean, minimal interface',
-              'Light/dark themes',
-              'Mobile-responsive layout'
-            ]"
-          />
-        </div>
-      </div>
-    </section>
-
-    <!-- Tech Stack Section -->
-    <section class="section tech-section">
-      <div class="container-custom">
-        <div class="section-header">
-          <h2 class="section-title">
-            Built with Modern Tech
-          </h2>
-          <p class="section-description">
-            Powered by cutting-edge technologies for maximum performance and reliability
-          </p>
-        </div>
-
-        <div class="tech-grid">
-          <TechCard name="Tauri" icon="simple-icons:tauri" color="#24C8DB" />
-          <TechCard name="Vue 3" icon="mdi:vuejs" color="#42b883" />
-          <TechCard name="Rust" icon="mdi:language-rust" color="#CE412B" />
-          <TechCard name="SQLite" icon="simple-icons:sqlite" color="#003B57" />
-        </div>
-      </div>
-    </section>
-
-    <!-- Download Section -->
-    <section id="download" class="section download-section">
-      <div class="container-custom">
-        <div class="hero-content">
-          <h2 class="section-title">
-            Download NoteX
-          </h2>
-          <p class="section-description" style="margin-bottom: var(--spacing-3xl);">
-            Available for Windows, macOS, and Linux
-          </p>
-
-          <div class="download-grid">
-            <DownloadCard 
-              platform="Windows"
-              icon="mdi:microsoft-windows"
-              :downloads="[
-                { name: 'Windows Installer', ext: '.msi' },
-                { name: 'Windows Portable', ext: '.exe' }
-              ]"
-            />
-            
-            <DownloadCard 
-              platform="macOS"
-              icon="mdi:apple"
-              :downloads="[
-                { name: 'macOS Silicon', ext: '.dmg (arm64)' },
-                { name: 'macOS Intel', ext: '.dmg (x64)' }
-              ]"
-            />
-            
-            <DownloadCard 
-              platform="Linux"
-              icon="mdi:linux"
-              :downloads="[
-                { name: 'AppImage', ext: '.AppImage' },
-                { name: 'Debian Package', ext: '.deb' }
-              ]"
-            />
-          </div>
-
-          <div class="info-box">
-            <p class="info-text">
-              <Icon name="heroicons:information-circle" class="info-icon" />
-              Visit the 
-              <a href="https://github.com/usenotex/notex/releases" target="_blank" rel="noopener noreferrer" 
-                 class="info-link">
-                Releases page
-              </a>
-              for the latest version and all download options.
-            </p>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- CTA Section -->
-    <section class="section cta-section">
-      <div class="container-custom">
-        <div class="cta-content">
-          <h2 class="cta-title">
-            Ready to Take Better Notes?
-          </h2>
-          <p class="cta-description">
-            Join developers and writers who trust NoteX for their daily note-taking
-          </p>
-          <div class="cta-buttons">
-            <a href="#download" class="cta-btn cta-btn-white">
-              Download Now
-            </a>
-            <a href="https://github.com/cadamsdev/notes-app" target="_blank" rel="noopener noreferrer"
-               class="cta-btn cta-btn-outlined">
-              Star on GitHub ⭐
-            </a>
-          </div>
-        </div>
-      </div>
-    </section>
+    <LandingHeroSection />
+    <LandingFeaturesSection />
+    <LandingTechStackSection />
+    <LandingDownloadSection />
+    <FaqSection />
+    <LandingCtaSection />
   </div>
 </template>
 
@@ -225,362 +17,3 @@ useHead({
   ]
 })
 </script>
-
-<style scoped>
-/* Hero Section */
-.hero-section {
-  background: linear-gradient(to bottom, var(--color-white), var(--color-gray-50));
-}
-
-body.dark .hero-section {
-  background: linear-gradient(to bottom, var(--color-gray-900), var(--color-gray-800));
-}
-
-.hero-content {
-  max-width: 56rem;
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-}
-
-.logo-container {
-  margin-bottom: var(--spacing-2xl);
-}
-
-.hero-logo {
-  height: 6rem;
-  width: 6rem;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: var(--spacing-lg);
-}
-
-.hero-title {
-  font-size: var(--font-size-5xl);
-  font-weight: 700;
-  color: var(--color-gray-900);
-  margin-bottom: var(--spacing-lg);
-}
-
-@media (min-width: 768px) {
-  .hero-title {
-    font-size: var(--font-size-6xl);
-  }
-}
-
-body.dark .hero-title {
-  color: var(--color-white);
-}
-
-.title-accent {
-  color: var(--color-primary-600);
-}
-
-.hero-description {
-  font-size: var(--font-size-xl);
-  color: var(--color-gray-600);
-  margin-bottom: var(--spacing-2xl);
-  max-width: 42rem;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-body.dark .hero-description {
-  color: var(--color-gray-300);
-}
-
-.hero-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-  justify-content: center;
-}
-
-@media (min-width: 640px) {
-  .hero-buttons {
-    flex-direction: row;
-  }
-}
-
-.btn-hero {
-  font-size: var(--font-size-lg);
-  padding: var(--spacing-md) var(--spacing-2xl);
-  border-radius: var(--radius-lg);
-  font-weight: 500;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color var(--transition-base);
-}
-
-.btn-hero-primary {
-  background-color: var(--color-primary-600);
-  color: var(--color-white);
-}
-
-.btn-hero-primary:hover {
-  background-color: var(--color-primary-700);
-}
-
-.btn-hero-secondary {
-  background-color: var(--color-gray-200);
-  color: var(--color-gray-900);
-}
-
-.btn-hero-secondary:hover {
-  background-color: var(--color-gray-300);
-}
-
-body.dark .btn-hero-secondary {
-  background-color: var(--color-gray-700);
-  color: var(--color-white);
-}
-
-body.dark .btn-hero-secondary:hover {
-  background-color: var(--color-gray-600);
-}
-
-.btn-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-  display: inline;
-  margin-right: var(--spacing-sm);
-}
-
-.preview-container {
-  margin-top: var(--spacing-3xl);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2xl);
-}
-
-.preview-image-wrapper {
-  border-radius: var(--radius-xl);
-  overflow: hidden;
-  box-shadow: var(--shadow-2xl);
-  border: 1px solid var(--color-gray-200);
-}
-
-body.dark .preview-image-wrapper {
-  border-color: var(--color-gray-700);
-}
-
-.preview-image {
-  width: 100%;
-  display: block;
-}
-
-/* Section Styles */
-.features-section {
-  background-color: var(--color-white);
-}
-
-body.dark .features-section {
-  background-color: var(--color-gray-900);
-}
-
-.tech-section {
-  background-color: var(--color-gray-50);
-}
-
-body.dark .tech-section {
-  background-color: var(--color-gray-800);
-}
-
-.download-section {
-  background-color: var(--color-white);
-}
-
-body.dark .download-section {
-  background-color: var(--color-gray-900);
-}
-
-.section-header {
-  text-align: center;
-  margin-bottom: var(--spacing-3xl);
-}
-
-.section-title {
-  font-size: var(--font-size-4xl);
-  font-weight: 700;
-  color: var(--color-gray-900);
-  margin-bottom: var(--spacing-md);
-}
-
-body.dark .section-title {
-  color: var(--color-white);
-}
-
-.section-description {
-  font-size: var(--font-size-xl);
-  color: var(--color-gray-600);
-  max-width: 42rem;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-body.dark .section-description {
-  color: var(--color-gray-300);
-}
-
-.features-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--spacing-2xl);
-}
-
-@media (min-width: 768px) {
-  .features-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (min-width: 1024px) {
-  .features-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-.tech-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: var(--spacing-2xl);
-  max-width: 56rem;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-@media (min-width: 768px) {
-  .tech-grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-.download-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--spacing-2xl);
-}
-
-@media (min-width: 768px) {
-  .download-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-.info-box {
-  margin-top: var(--spacing-3xl);
-  padding: var(--spacing-lg);
-  background-color: var(--color-primary-50);
-  border-radius: var(--radius-lg);
-}
-
-body.dark .info-box {
-  background-color: rgba(2, 132, 199, 0.2);
-}
-
-.info-text {
-  color: var(--color-gray-700);
-}
-
-body.dark .info-text {
-  color: var(--color-gray-300);
-}
-
-.info-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-  display: inline;
-  margin-right: var(--spacing-sm);
-}
-
-.info-link {
-  font-weight: 600;
-  color: var(--color-primary-600);
-  text-decoration: none;
-  transition: color var(--transition-base);
-}
-
-.info-link:hover {
-  color: var(--color-primary-700);
-}
-
-body.dark .info-link {
-  color: var(--color-primary-400);
-}
-
-body.dark .info-link:hover {
-  color: var(--color-primary-300);
-}
-
-/* CTA Section */
-.cta-section {
-  background-color: var(--color-primary-600);
-}
-
-body.dark .cta-section {
-  background-color: var(--color-primary-700);
-}
-
-.cta-content {
-  max-width: 48rem;
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-  color: var(--color-white);
-}
-
-.cta-title {
-  font-size: var(--font-size-4xl);
-  font-weight: 700;
-  margin-bottom: var(--spacing-md);
-}
-
-.cta-description {
-  font-size: var(--font-size-xl);
-  margin-bottom: var(--spacing-2xl);
-  color: var(--color-primary-100);
-}
-
-.cta-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-  justify-content: center;
-}
-
-@media (min-width: 640px) {
-  .cta-buttons {
-    flex-direction: row;
-  }
-}
-
-.cta-btn {
-  padding: var(--spacing-md) var(--spacing-2xl);
-  border-radius: var(--radius-lg);
-  font-weight: 600;
-  text-decoration: none;
-  transition: background-color var(--transition-base);
-  display: inline-block;
-}
-
-.cta-btn-white {
-  background-color: var(--color-white);
-  color: var(--color-primary-600);
-}
-
-.cta-btn-white:hover {
-  background-color: var(--color-gray-100);
-}
-
-.cta-btn-outlined {
-  background-color: var(--color-primary-700);
-  color: var(--color-white);
-  border: 1px solid var(--color-primary-500);
-}
-
-.cta-btn-outlined:hover {
-  background-color: var(--color-primary-800);
-}
-</style>
diff --git a/apps/website/tsconfig.json b/apps/website/tsconfig.json
index bfa0fea..eee7ab0 100644
--- a/apps/website/tsconfig.json
+++ b/apps/website/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     // Environment setup & latest features
-    "lib": ["ESNext"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "target": "ESNext",
     "module": "Preserve",
     "moduleDetection": "force",