From bd248ee9b3b05e3ebebec36896f0550c839af18d Mon Sep 17 00:00:00 2001
From: Lucas <lucas@lucase.com>
Date: Sun, 24 May 2026 09:11:42 +1000
Subject: [PATCH] NoSys as platform

---
 src/components/Footer.vue                     |   2 +-
 src/components/sections/about/AboutCTA.vue    |  61 +++--
 src/components/sections/about/AboutHero.vue   |  38 ++-
 .../sections/about/AboutOurMission.vue        |  87 -------
 .../sections/about/AboutTechnology.vue        | 142 +++++++----
 .../sections/about/AboutTheProblem.vue        | 193 +++++++-------
 src/components/sections/about/AboutVision.vue |  37 +++
 src/components/sections/about/AboutWhy.vue    | 125 +++++++++
 .../sections/community/CommunityHero.vue      |  26 +-
 .../community/CommunityProjectSupport.vue     | 215 ++++++++++------
 src/components/sections/hiw/HiwAppLayer.vue   |  71 ++++++
 src/components/sections/hiw/HiwCTA.vue        |  43 ++--
 src/components/sections/hiw/HiwCore.vue       | 148 ++++++++---
 src/components/sections/hiw/HiwEncryption.vue | 171 ++++++++-----
 src/components/sections/hiw/HiwHero.vue       |  45 +++-
 src/components/sections/hiw/HiwModules.vue    | 227 ++++++++---------
 src/components/sections/hiw/HiwP2P.vue        | 240 +++++++++++++-----
 src/components/sections/home/HomeCTA.vue      |  40 ++-
 .../sections/home/HomeEcosystem.vue           |  43 ++++
 src/components/sections/home/HomeHero.vue     |  74 ++++--
 src/components/sections/home/HomePlatform.vue |  31 +++
 .../sections/home/HomePrinciples.vue          | 124 +++++----
 src/components/ui/canvas/DotsMouse.vue        |   3 +-
 src/views/About.vue                           |  36 ++-
 src/views/Home.vue                            |  21 +-
 src/views/HowItWorks.vue                      |   7 +
 26 files changed, 1468 insertions(+), 782 deletions(-)
 delete mode 100644 src/components/sections/about/AboutOurMission.vue
 create mode 100644 src/components/sections/about/AboutVision.vue
 create mode 100644 src/components/sections/about/AboutWhy.vue
 create mode 100644 src/components/sections/hiw/HiwAppLayer.vue
 create mode 100644 src/components/sections/home/HomeEcosystem.vue
 create mode 100644 src/components/sections/home/HomePlatform.vue

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 98a87b8..f14aa94 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -21,7 +21,7 @@ const currentYear = new Date().getFullYear()
             </h1>
           </div>
           <p class="text-sm text-muted-foreground">
-            A social network no one can control.
+            Infrastructure for a Decentralized Future.
           </p>
         </div>
 
diff --git a/src/components/sections/about/AboutCTA.vue b/src/components/sections/about/AboutCTA.vue
index d4bf140..1153664 100644
--- a/src/components/sections/about/AboutCTA.vue
+++ b/src/components/sections/about/AboutCTA.vue
@@ -1,29 +1,52 @@
 <script setup>
-import Button from '@/components/ui/Button.vue';
-
-
+import Button from '@/components/ui/Button.vue'
+import { RouterLink } from 'vue-router'
 </script>
 
 <template>
-<section class="">
-      <div class="container py-24">
-        <div class="max-w-3xl mx-auto text-center space-y-6">
-          <h2 class="text-3xl md:text-4xl font-bold">Join the Movement</h2>
 
-          <p class="text-xl text-muted-foreground">
-            Download the app and experience social media without corporate control.
-          </p>
+  <section>
 
-          <div class="flex flex-col sm:flex-row gap-4 justify-center">
-            <RouterLink to="/downloads">
-              <Button size="lg" class="bg-amber-400 hover:bg-amber-500 text-black">Download Now</Button>
-            </RouterLink>
+    <div class="container py-24">
+
+      <div class="max-w-3xl mx-auto text-center space-y-6">
+
+        <h2 class="text-3xl md:text-4xl font-bold">
+          Explore the Platform
+        </h2>
+
+        <p class="text-xl text-muted-foreground">
+          Build decentralized systems, experiment with peer-to-peer infrastructure,
+          and participate in the future of open networks.
+        </p>
+
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+
+          <RouterLink to="/downloads">
+            <Button
+              size="lg"
+              class="bg-amber-400 hover:bg-amber-500 text-black"
+            >
+              Download
+            </Button>
+          </RouterLink>
+
+          <RouterLink to="/docs">
+            <Button
+              size="lg"
+              variant="outline"
+              class="hover:text-amber-500"
+            >
+              Documentation
+            </Button>
+          </RouterLink>
 
-            <RouterLink to="/how-it-works">
-              <Button size="lg" variant="outline" class="hover:text-amber-500">Learn How It Works</Button>
-            </RouterLink>
-          </div>
         </div>
+
       </div>
-    </section>
+
+    </div>
+
+  </section>
+
 </template>
\ No newline at end of file
diff --git a/src/components/sections/about/AboutHero.vue b/src/components/sections/about/AboutHero.vue
index a614e8b..44ed607 100644
--- a/src/components/sections/about/AboutHero.vue
+++ b/src/components/sections/about/AboutHero.vue
@@ -1,20 +1,30 @@
 <script setup>
-import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
-
-
+import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
 </script>
 
 <template>
-    <section class="container py-24 md:py-32 text-center">
-      <div class="max-w-3xl mx-auto text-center">
-        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
-          Taking Control Back from Big Tech
-        </h1>
-        <p class="text-xl text-muted-foreground leading-relaxed">
-          In a world where social media platforms control what you see, what you can say,
-          and how your data is used, we're building something different.
-        </p>
+
+  <section class="container py-24 md:py-32 text-center">
+
+    <div class="max-w-4xl mx-auto text-center">
+
+      <div class="inline-flex items-center px-3 py-1 text-sm rounded-full border border-border mb-6">
+        Open Infrastructure for Decentralized Systems
       </div>
-      <DotsMouse></DotsMouse>
-    </section>
+
+      <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
+        Technology Should Belong to Its Users
+      </h1>
+
+      <p class="text-xl text-muted-foreground leading-relaxed max-w-3xl mx-auto">
+        Modern digital infrastructure is increasingly controlled by centralized corporations and platforms.
+        NoSys exists to provide an alternative: open, peer-to-peer infrastructure designed for decentralized systems and communities.
+      </p>
+
+    </div>
+
+    <DotsMouse />
+
+  </section>
+
 </template>
\ No newline at end of file
diff --git a/src/components/sections/about/AboutOurMission.vue b/src/components/sections/about/AboutOurMission.vue
deleted file mode 100644
index a6d0a39..0000000
--- a/src/components/sections/about/AboutOurMission.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<script setup>
-import Card from '@/components/ui/Card.vue';
-import CardContent from '@/components/ui/CardContent.vue';
-import { Target } from 'lucide-vue-next';
-</script>
-
-<template>
-    <section class="">
-      <div class="container py-24">
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          <Card class="border-2 order-2 lg:order-1">
-            <CardContent class="p-8">
-              <div class="space-y-6">
-                <div class="flex items-start gap-4">
-                  <div class="h-2 w-2 rounded-full bg-primary mt-2" />
-                  <div>
-                    <h3 class="font-semibold mb-1">No Central Authority</h3>
-                    <p class="text-sm text-muted-foreground">
-                      Peer-to-peer connections remove central control
-                    </p>
-                  </div>
-                </div>
-
-                <div class="flex items-start gap-4">
-                  <div class="h-2 w-2 rounded-full bg-primary mt-2" />
-                  <div>
-                    <h3 class="font-semibold mb-1">End-to-End Encryption</h3>
-                    <p class="text-sm text-muted-foreground">
-                      Communications secured and private
-                    </p>
-                  </div>
-                </div>
-
-                <div class="flex items-start gap-4">
-                  <div class="h-2 w-2 rounded-full bg-primary mt-2" />
-                  <div>
-                    <h3 class="font-semibold mb-1">User Ownership</h3>
-                    <p class="text-sm text-muted-foreground">
-                      You own your identity and data
-                    </p>
-                  </div>
-                </div>
-
-                <div class="flex items-start gap-4">
-                  <div class="h-2 w-2 rounded-full bg-primary mt-2" />
-                  <div>
-                    <h3 class="font-semibold mb-1">Open Source</h3>
-                    <p class="text-sm text-muted-foreground">
-                      Transparency through open code
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <div class="order-1 lg:order-2">
-            <div
-              class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10
-                     text-primary rounded-full border border-primary/20 mb-6"
-            >
-              <Target class="h-4 w-4" />
-              Our Mission
-            </div>
-
-            <h2 class="text-3xl md:text-4xl font-bold mb-6">
-              Giving Control Back to Users
-            </h2>
-
-            <div class="space-y-4 text-muted-foreground leading-relaxed">
-              <p>
-                We're building a social network based on privacy, free expression and autonomy.
-              </p>
-
-              <p class="text-lg font-semibold text-foreground">
-                A truly peer-to-peer network where no one can censor or exploit you.
-              </p>
-
-              <p>
-                Decentralization + encryption + open source = independence.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-</template>
\ No newline at end of file
diff --git a/src/components/sections/about/AboutTechnology.vue b/src/components/sections/about/AboutTechnology.vue
index 918b790..ab75ebe 100644
--- a/src/components/sections/about/AboutTechnology.vue
+++ b/src/components/sections/about/AboutTechnology.vue
@@ -1,67 +1,99 @@
 <script setup>
-import Card from '@/components/ui/Card.vue';
-import CardContent from '@/components/ui/CardContent.vue';
-import { Zap } from 'lucide-vue-next';
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+
+import { Zap } from 'lucide-vue-next'
 </script>
 
 <template>
-    <section class="bg-card">
-      <div class="container py-24">
-        <div class="max-w-3xl mx-auto text-center mb-16">
-          <div
-            class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-accent/10
-                   text-accent rounded-full border border-accent/20 mb-6"
-          >
-            <Zap class="h-4 w-4" />
-            Technology
-          </div>
 
-          <h2 class="text-3xl md:text-4xl font-bold mb-6">
-            Built on Modern Peer-to-Peer Technology
-          </h2>
+  <section class="bg-card">
 
-          <p class="text-xl text-muted-foreground">
-            Designed with contemporary decentralized architectures to deliver privacy, resilience, and reliable communication without central dependencies.
-          </p>
+    <div class="container py-24">
+
+      <div class="max-w-3xl mx-auto text-center mb-16">
+
+        <div
+          class="inline-flex items-center gap-2 px-3 py-1 text-sm
+                 bg-accent/10 text-accent rounded-full
+                 border border-accent/20 mb-6"
+        >
+          <Zap class="h-4 w-4" />
+          Architecture
         </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-          <Card>
-            <CardContent class="pt-6">
-              <h3 class="text-xl font-bold mb-3">Peer-to-Peer Architecture</h3>
-              <p class="text-muted-foreground leading-relaxed">
-                Direct peer communication without servers.
-              </p>
-            </CardContent>
-          </Card>
+        <h2 class="text-3xl md:text-4xl font-bold mb-6">
+          Built as Decentralized Infrastructure
+        </h2>
 
-          <Card>
-            <CardContent class="pt-6">
-              <h3 class="text-xl font-bold mb-3">Strong Encryption</h3>
-              <p class="text-muted-foreground leading-relaxed">
-                End-to-end encrypted data.
-              </p>
-            </CardContent>
-          </Card>
+        <p class="text-xl text-muted-foreground">
+          noSys provides foundational peer-to-peer components for building distributed systems and decentralized applications.
+        </p>
 
-          <Card>
-            <CardContent class="pt-6">
-              <h3 class="text-xl font-bold mb-3">Modular Design</h3>
-              <p class="text-muted-foreground leading-relaxed">
-                Expand with community modules.
-              </p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardContent class="pt-6">
-              <h3 class="text-xl font-bold mb-3">Distributed Network</h3>
-              <p class="text-muted-foreground leading-relaxed">
-                No servers to shut down, no central database to hack.
-              </p>
-            </CardContent>
-          </Card>
-        </div>
       </div>
-    </section>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+
+        <Card>
+          <CardContent class="pt-6">
+
+            <h3 class="text-xl font-bold mb-3">
+              Peer Discovery
+            </h3>
+
+            <p class="text-muted-foreground leading-relaxed">
+              Mechanisms for discovering and connecting peers across decentralized networks.
+            </p>
+
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent class="pt-6">
+
+            <h3 class="text-xl font-bold mb-3">
+              Rendezvous Infrastructure
+            </h3>
+
+            <p class="text-muted-foreground leading-relaxed">
+              Coordination systems for establishing peer communication across different network environments.
+            </p>
+
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent class="pt-6">
+
+            <h3 class="text-xl font-bold mb-3">
+              Modular Runtime
+            </h3>
+
+            <p class="text-muted-foreground leading-relaxed">
+              Build independent decentralized applications on shared infrastructure components.
+            </p>
+
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent class="pt-6">
+
+            <h3 class="text-xl font-bold mb-3">
+              Distributed Communication
+            </h3>
+
+            <p class="text-muted-foreground leading-relaxed">
+              Direct peer communication without mandatory centralized routing.
+            </p>
+
+          </CardContent>
+        </Card>
+
+      </div>
+
+    </div>
+
+  </section>
+
 </template>
\ No newline at end of file
diff --git a/src/components/sections/about/AboutTheProblem.vue b/src/components/sections/about/AboutTheProblem.vue
index 988ca14..1912d87 100644
--- a/src/components/sections/about/AboutTheProblem.vue
+++ b/src/components/sections/about/AboutTheProblem.vue
@@ -1,109 +1,124 @@
 <script setup>
-import Card from '@/components/ui/Card.vue';
-import CardContent from '@/components/ui/CardContent.vue';
-import { AlertCircle } from 'lucide-vue-next';
-
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
 
+import { AlertCircle } from 'lucide-vue-next'
 </script>
 
 <template>
-    <section class=" bg-card">
-      <div class="container py-24">
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          <div>
-            <div
-              class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-destructive/10
-                     text-destructive rounded-full border border-destructive/20 mb-6"
-            >
-              <AlertCircle class="h-4 w-4" />
-              The Problem of Centralization
-            </div>
 
-            <h2 class="text-3xl md:text-4xl font-bold mb-6">
-              Centralized Platforms Are Broken
-            </h2>
+  <section class="bg-card">
 
-            <div class="space-y-4 text-muted-foreground leading-relaxed">
-              <p>
-                Today's social media landscape is dominated by centralized corporations that
-                control the digital lives of billions and operate under state jurisdiction.
-                These platforms:
-              </p>
+    <div class="container py-24">
 
-              <ul class="space-y-2 list-disc list-inside">
-                <li>Censor content based on opaque algorithms and legal pressure</li>
-                <li>Are subject to state laws, regulations, and political influence</li>
-                <li>Surveil users and track every interaction</li>
-                <li>Sell personal data as a business model</li>
-                <li>Manipulate visibility through proprietary algorithms</li>
-              </ul>
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
 
-              <p>
-                When communication infrastructure is centralized and bound by state authority,
-                true freedom of expression becomes structurally impossible.
-              </p>
-            </div>
+        <div>
+
+          <div
+            class="inline-flex items-center gap-2 px-3 py-1 text-sm
+                   bg-destructive/10 text-destructive rounded-full
+                   border border-destructive/20 mb-6"
+          >
+            <AlertCircle class="h-4 w-4" />
+            The Centralization Problem
           </div>
 
-          <Card class="border-2">
-            <CardContent class="p-8">
-              <div class="space-y-6 ">
-                <div class="flex items-start gap-4">
-                  <div class="h-2 w-2 rounded-full bg-destructive mt-2" />
-                  <div>
-                    <h3 class="font-semibold mb-1">Censorship</h3>
-                    <p class="text-sm text-muted-foreground">
-                      Arbitrary content removal without transparency
-                    </p>
-                  </div>
-                </div>
+          <h2 class="text-3xl md:text-4xl font-bold mb-6">
+            Critical Infrastructure Is Becoming Centralized
+          </h2>
 
-                <div class="flex items-start gap-4">
-                  <div class="h-2 w-2 rounded-full bg-destructive mt-2" />
-                  <div>
-                    <h3 class="font-semibold mb-1">Surveillance</h3>
-                    <p class="text-sm text-muted-foreground">
-                      Constant tracking of user activities
-                    </p>
-                  </div>
-                </div>
+          <div class="space-y-4 text-muted-foreground leading-relaxed">
 
-                <div class="flex items-start gap-4">
-                  <div class="h-2 w-2 rounded-full bg-destructive mt-2"> </div>
-                  <div>
-                    <h3 class="font-semibold mb-1">Data Exploitation</h3>
-                    <p class="text-sm text-muted-foreground">
-                      Personal information sold as a commodity
-                    </p>
-                  </div>
-                </div>
+            <p>
+              Communication, identity, discovery, distribution, and coordination are increasingly controlled by a small number of corporations and platforms.
+            </p>
 
-                <div class="flex items-start gap-4">
-                  <div class="h-2 w-2 rounded-full bg-destructive mt-2" />
-                  <div>
-                    <h3 class="font-semibold mb-1">Algorithmic Control</h3>
-                    <p class="text-sm text-muted-foreground">
-                      Manipulation of what content you see
-                    </p>
-                  </div>
-                </div>
+            <p>
+              As technology becomes more integrated into everyday life, centralized control over infrastructure creates structural dependency on entities users cannot govern or audit.
+            </p>
 
+            <p>
+              NoSys was created to explore a different direction:
+              decentralized systems where coordination happens directly between participants instead of through centralized intermediaries.
+            </p>
 
-                <div class="flex items-start gap-4">
-                    <div class="h-2 w-2 rounded-full bg-destructive mt-2" />
-                    <div>
-                        <h3 class="font-semibold mb-1">State Dependency</h3>
-                        <p class="text-sm text-muted-foreground">
-                        User expression limited by government authority
-                        </p>
-                    </div>
-                </div>
+          </div>
 
-                
-              </div>
-            </CardContent>
-          </Card>
         </div>
+
+        <Card class="border-2">
+
+          <CardContent class="p-8">
+
+            <div class="space-y-6">
+
+              <div class="flex items-start gap-4">
+                <div class="h-2 w-2 rounded-full bg-destructive mt-2" />
+
+                <div>
+                  <h3 class="font-semibold mb-1">
+                    Infrastructure Dependency
+                  </h3>
+
+                  <p class="text-sm text-muted-foreground">
+                    Critical systems increasingly rely on centralized providers
+                  </p>
+                </div>
+              </div>
+
+              <div class="flex items-start gap-4">
+                <div class="h-2 w-2 rounded-full bg-destructive mt-2" />
+
+                <div>
+                  <h3 class="font-semibold mb-1">
+                    Platform Control
+                  </h3>
+
+                  <p class="text-sm text-muted-foreground">
+                    Access, visibility, and communication controlled by private entities
+                  </p>
+                </div>
+              </div>
+
+              <div class="flex items-start gap-4">
+                <div class="h-2 w-2 rounded-full bg-destructive mt-2" />
+
+                <div>
+                  <h3 class="font-semibold mb-1">
+                    Data Concentration
+                  </h3>
+
+                  <p class="text-sm text-muted-foreground">
+                    Massive amounts of user data aggregated into centralized systems
+                  </p>
+                </div>
+              </div>
+
+              <div class="flex items-start gap-4">
+                <div class="h-2 w-2 rounded-full bg-destructive mt-2" />
+
+                <div>
+                  <h3 class="font-semibold mb-1">
+                    Single Points of Failure
+                  </h3>
+
+                  <p class="text-sm text-muted-foreground">
+                    Centralized architecture creates systemic fragility
+                  </p>
+                </div>
+              </div>
+
+            </div>
+
+          </CardContent>
+
+        </Card>
+
       </div>
-    </section>
+
+    </div>
+
+  </section>
+
 </template>
\ No newline at end of file
diff --git a/src/components/sections/about/AboutVision.vue b/src/components/sections/about/AboutVision.vue
new file mode 100644
index 0000000..68e1a1b
--- /dev/null
+++ b/src/components/sections/about/AboutVision.vue
@@ -0,0 +1,37 @@
+<script setup>
+</script>
+
+<template>
+
+  <section>
+
+    <div class="container py-24">
+
+      <div class="max-w-4xl mx-auto text-center space-y-8">
+
+        <div class="inline-flex items-center px-3 py-1 text-sm rounded-full border border-border">
+          Long-Term Vision
+        </div>
+
+        <h2 class="text-3xl md:text-5xl font-bold text-balance">
+          Decentralization
+        </h2>
+
+        <p class="text-xl text-muted-foreground leading-relaxed">
+          Future systems may include communication networks, collaborative platforms,
+          autonomous machine coordination, distributed communities, and applications
+          that do not yet exist.
+        </p>
+
+        <p class="text-lg text-muted-foreground leading-relaxed">
+          NoSys is designed as foundational infrastructure for that future —
+          open, adaptable, and owned by no single corporation or institution.
+        </p>
+
+      </div>
+
+    </div>
+
+  </section>
+
+</template>
\ No newline at end of file
diff --git a/src/components/sections/about/AboutWhy.vue b/src/components/sections/about/AboutWhy.vue
new file mode 100644
index 0000000..06ff5cf
--- /dev/null
+++ b/src/components/sections/about/AboutWhy.vue
@@ -0,0 +1,125 @@
+<script setup>
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+
+import { Compass } from 'lucide-vue-next'
+</script>
+
+<template>
+
+  <section>
+
+    <div class="container py-24">
+
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+
+        <Card class="border-2 order-2 lg:order-1">
+
+          <CardContent class="p-8">
+
+            <div class="space-y-6">
+
+              <div class="flex items-start gap-4">
+                <div class="h-2 w-2 rounded-full bg-primary mt-2" />
+
+                <div>
+                  <h3 class="font-semibold mb-1">
+                    Open Source
+                  </h3>
+
+                  <p class="text-sm text-muted-foreground">
+                    Transparent infrastructure that can be audited, modified, and evolved by the community
+                  </p>
+                </div>
+              </div>
+
+              <div class="flex items-start gap-4">
+                <div class="h-2 w-2 rounded-full bg-primary mt-2" />
+
+                <div>
+                  <h3 class="font-semibold mb-1">
+                    Peer Coordination
+                  </h3>
+
+                  <p class="text-sm text-muted-foreground">
+                    Systems communicate directly without mandatory centralized intermediaries
+                  </p>
+                </div>
+              </div>
+
+              <div class="flex items-start gap-4">
+                <div class="h-2 w-2 rounded-full bg-primary mt-2" />
+
+                <div>
+                  <h3 class="font-semibold mb-1">
+                    Modular Infrastructure
+                  </h3>
+
+                  <p class="text-sm text-muted-foreground">
+                    Different decentralized applications can coexist on shared infrastructure
+                  </p>
+                </div>
+              </div>
+
+              <div class="flex items-start gap-4">
+                <div class="h-2 w-2 rounded-full bg-primary mt-2" />
+
+                <div>
+                  <h3 class="font-semibold mb-1">
+                    Community Ownership
+                  </h3>
+
+                  <p class="text-sm text-muted-foreground">
+                    Infrastructure designed to reduce dependence on centralized institutional control
+                  </p>
+                </div>
+              </div>
+
+            </div>
+
+          </CardContent>
+
+        </Card>
+
+        <div class="order-1 lg:order-2">
+
+          <div
+            class="inline-flex items-center gap-2 px-3 py-1 text-sm
+                   bg-primary/10 text-primary rounded-full
+                   border border-primary/20 mb-6"
+          >
+            <Compass class="h-4 w-4" />
+            Why noSys Exists
+          </div>
+
+          <h2 class="text-3xl md:text-4xl font-bold mb-6">
+            Building Infrastructure That Cannot Be Owned by a Single Entity
+          </h2>
+
+          <div class="space-y-4 text-muted-foreground leading-relaxed">
+
+            <p>
+              NoSys is an experiment in decentralized coordination infrastructure.
+            </p>
+
+            <p>
+              The objective is not simply to create applications,
+              but to provide foundations for systems that remain open,
+              resilient, and community-driven over time.
+            </p>
+
+            <p class="text-lg font-semibold text-foreground">
+              Protocols instead of platforms. Coordination instead of control.
+            </p>
+
+          </div>
+
+        </div>
+
+      </div>
+
+    </div>
+
+  </section>
+
+</template>
\ No newline at end of file
diff --git a/src/components/sections/community/CommunityHero.vue b/src/components/sections/community/CommunityHero.vue
index d3d5340..df9b4af 100644
--- a/src/components/sections/community/CommunityHero.vue
+++ b/src/components/sections/community/CommunityHero.vue
@@ -1,18 +1,28 @@
 <script setup>
-import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
-
-
+import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
 </script>
 
 <template>
   <section class="container py-24 md:py-32">
-    <div class="max-w-3xl mx-auto text-center">
-      <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">Join Our Community</h1>
-      <p class="text-xl text-muted-foreground">
-        Connect with developers, contributors, and users who are building the future of decentralized social media
+
+    <div class="max-w-4xl mx-auto text-center">
+
+      <div class="inline-flex items-center px-3 py-1 text-sm rounded-full border border-border mb-6">
+        Open Source Infrastructure • Peer-to-Peer Systems • Modular Runtime
+      </div>
+
+      <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
+        Build and Contribute to NoSys
+      </h1>
+
+      <p class="text-xl text-muted-foreground leading-relaxed max-w-3xl mx-auto">
+        NoSys is an open infrastructure platform for decentralized systems.
+        Join as a developer, contributor, or operator building peer-to-peer applications and modules on top of the runtime.
       </p>
+
     </div>
 
-    <DotsMouse></DotsMouse>
+    <DotsMouse />
+
   </section>
 </template>
\ No newline at end of file
diff --git a/src/components/sections/community/CommunityProjectSupport.vue b/src/components/sections/community/CommunityProjectSupport.vue
index 8f4a7be..ec80d2a 100644
--- a/src/components/sections/community/CommunityProjectSupport.vue
+++ b/src/components/sections/community/CommunityProjectSupport.vue
@@ -1,94 +1,141 @@
 <script setup>
-import Button from '@/components/ui/Button.vue';
-import Card from '@/components/ui/Card.vue';
-import CardContent from '@/components/ui/CardContent.vue';
-import { Github, Heart, Wallet } from 'lucide-vue-next';
-
-
+import Button from '@/components/ui/Button.vue'
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+import { Heart, Wallet, Github } from 'lucide-vue-next'
 </script>
 
 <template>
-    <section id="donate" class="bg-primary/5">
-      <div class="container py-24">
-        <div class="max-w-3xl mx-auto">
-          <div class="flex items-center gap-3 mb-8 justify-center">
-            <Heart class="h-8 w-8 text-primary" />
-            <h2 class="text-3xl md:text-4xl font-bold">Support the Project</h2>
-          </div>
-          <div class="text-center mb-8">
-            <p class="text-muted-foreground leading-relaxed text-lg">
-              NoSys is a 100% open-source project built by volunteers who believe in a free and decentralized
-              internet. Your donations help us cover development costs, infrastructure, and keep the project sustainable.
-            </p>
+  <section id="donate" class="bg-primary/5">
+
+    <div class="container py-24">
+
+      <div class="max-w-3xl mx-auto">
+
+        <!-- Header -->
+
+        <div class="text-center mb-10">
+
+          <div class="flex items-center justify-center gap-3 mb-4">
+            <Heart class="h-7 w-7 text-primary" />
+            <h2 class="text-3xl md:text-4xl font-bold">
+              Support Development
+            </h2>
           </div>
 
-          <div class="flex justify-center mb-12">
-            <Button size="lg" class="text-lg px-8 py-6 h-auto">
-              <Heart class="h-5 w-5 mr-2" />
-              Support Our Mission
-            </Button>
-          </div>
+          <p class="text-muted-foreground text-lg leading-relaxed">
+            NoSys is open-source infrastructure built to support decentralized systems.
+            Contributions help fund development, testing, and long-term protocol maintenance.
+          </p>
 
-          <div class="grid grid-cols-1 md:grid-cols-1 gap-6">
-            <!-- <Card class="border-2">
-              <CardContent class="pt-6">
-                <div class="flex flex-col items-center text-center">
-                  <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
-                    <Github class="h-6 w-6 text-primary" />
-                  </div>
-                  <h3 class="text-xl font-bold mb-2">GitHub Sponsors</h3>
-                  <p class="text-muted-foreground text-sm mb-4">
-                    Support us directly through GitHub's sponsorship program
-                  </p>
-                  <Button variant="outline" class="w-full bg-transparent">
-                    <a href="https://github.com/sponsors" target="_blank" rel="noopener noreferrer">
-                      Sponsor on GitHub
-                    </a>
-                  </Button>
-                </div>
-              </CardContent>
-            </Card> -->
-
-            
-
-            <Card class="border-2">
-              <CardContent class="pt-6">
-                <div class="flex flex-col items-center text-center">
-                  <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
-                    <Wallet class="h-6 w-6 text-primary" />
-                  </div>
-                  <h3 class="text-xl font-bold mb-2">Crypto</h3>
-                  <p class="text-muted-foreground text-sm mb-4">
-                    Donate using Bitcoin, Ethereum, or other cryptocurrencies
-                  </p>
-                  <Button variant="outline" class="w-full bg-transparent">
-                    <a href="#crypto-wallets">View Wallets</a>
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-
-          <!-- Crypto Wallets -->
-          <div class="mt-12 p-6 bg-card rounded-lg border border-border">
-            <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
-              <Wallet class="h-5 w-5 text-primary" />
-              Cryptocurrency Wallets
-            </h3>
-            <div class="space-y-4" id="crypto-wallets">
-              <div>
-                <p class="text-sm font-semibold mb-1">Bitcoin (BTC)</p>
-                <code class="text-xs bg-muted p-2 rounded block break-all">
-                  bc1q4waz2qznl9jlgz649rxsv5v83le6evvdg96rku
-                </code>
-              </div>
-            </div>
-            <p class="text-xs text-muted-foreground mt-4">
-              All donations go directly to supporting development, infrastructure, and community initiatives. Thank
-              you for your support!
-            </p>
-          </div>
         </div>
+
+        <!-- CTA -->
+
+        <div class="flex justify-center mb-12">
+
+          <Button size="lg" class="text-lg px-8 py-6 h-auto">
+            <Heart class="h-5 w-5 mr-2" />
+            Contribute
+          </Button>
+
+        </div>
+
+        <!-- Support Options -->
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+
+          <!-- GitHub -->
+
+          <Card class="border-2">
+
+            <CardContent class="pt-6 text-center">
+
+              <div class="flex justify-center mb-4">
+                <Github class="h-10 w-10 text-primary" />
+              </div>
+
+              <h3 class="text-xl font-bold mb-2">
+                Open Source Contributions
+              </h3>
+
+              <p class="text-muted-foreground text-sm mb-5">
+                Contribute code, review modules, or support development through GitHub.
+              </p>
+
+              <Button variant="outline" class="w-full bg-transparent">
+                <a href="https://github.com" target="_blank" rel="noopener noreferrer">
+                  View Repository
+                </a>
+              </Button>
+
+            </CardContent>
+
+          </Card>
+
+          <!-- Crypto -->
+
+          <Card class="border-2">
+
+            <CardContent class="pt-6 text-center">
+
+              <div class="flex justify-center mb-4">
+                <Wallet class="h-10 w-10 text-primary" />
+              </div>
+
+              <h3 class="text-xl font-bold mb-2">
+                Cryptocurrency Funding
+              </h3>
+
+              <p class="text-muted-foreground text-sm mb-5">
+                Direct contributions via crypto wallets for protocol and infrastructure development.
+              </p>
+
+              <Button variant="outline" class="w-full bg-transparent">
+                <a href="#crypto-wallets">
+                  View Wallets
+                </a>
+              </Button>
+
+            </CardContent>
+
+          </Card>
+
+        </div>
+
+        <!-- Wallets -->
+
+        <div
+          id="crypto-wallets"
+          class="mt-12 p-6 bg-card rounded-lg border border-border"
+        >
+
+          <h3 class="text-lg font-bold mb-6 flex items-center gap-2">
+            <Wallet class="h-5 w-5 text-primary" />
+            Funding Wallets
+          </h3>
+
+          <div class="space-y-4">
+
+            <div>
+              <p class="text-sm font-semibold mb-1">Bitcoin (BTC)</p>
+              <code class="text-xs bg-muted p-2 rounded block break-all">
+                bc1q4waz2qznl9jlgz649rxsv5v83le6evvdg96rku
+              </code>
+            </div>
+
+          </div>
+
+          <p class="text-xs text-muted-foreground mt-4">
+            Contributions are used for core development, protocol research,
+            and infrastructure maintenance.
+          </p>
+
+        </div>
+
       </div>
-    </section>
+
+    </div>
+
+  </section>
 </template>
\ No newline at end of file
diff --git a/src/components/sections/hiw/HiwAppLayer.vue b/src/components/sections/hiw/HiwAppLayer.vue
new file mode 100644
index 0000000..394fd94
--- /dev/null
+++ b/src/components/sections/hiw/HiwAppLayer.vue
@@ -0,0 +1,71 @@
+<script setup>
+import { Layers, Globe, MessageSquare, Bot, Network } from "lucide-vue-next"
+</script>
+
+<template>
+  <section class="bg-card">
+    <div class="container py-24">
+
+      <div class="max-w-3xl mx-auto text-center mb-16">
+
+        <div class="inline-flex items-center px-3 py-1 text-sm rounded-full border border-border mb-6">
+          Application Layer
+        </div>
+
+        <h2 class="text-3xl md:text-4xl font-bold mb-6">
+          What You Can Build on NoSys
+        </h2>
+
+        <p class="text-xl text-muted-foreground">
+          NoSys is infrastructure. Applications are built independently on top of it.
+        </p>
+
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+
+        <div class="p-6 border rounded-xl bg-background">
+          <MessageSquare class="h-8 w-8 text-primary mb-4" />
+          <h3 class="font-semibold mb-2">Communication Systems</h3>
+          <p class="text-sm text-muted-foreground">
+            Messaging, chat, and real-time coordination built directly on peer-to-peer transport.
+          </p>
+        </div>
+
+        <div class="p-6 border rounded-xl bg-background">
+          <Globe class="h-8 w-8 text-primary mb-4" />
+          <h3 class="font-semibold mb-2">Distributed Networks</h3>
+          <p class="text-sm text-muted-foreground">
+            Social graphs, communities, and collaborative environments without centralized servers.
+          </p>
+        </div>
+
+        <div class="p-6 border rounded-xl bg-background">
+          <Network class="h-8 w-8 text-primary mb-4" />
+          <h3 class="font-semibold mb-2">Coordination Systems</h3>
+          <p class="text-sm text-muted-foreground">
+            Multi-node systems for synchronization, data sharing, and distributed workflows.
+          </p>
+        </div>
+
+        <div class="p-6 border rounded-xl bg-background">
+          <Bot class="h-8 w-8 text-primary mb-4" />
+          <h3 class="font-semibold mb-2">Autonomous Agents</h3>
+          <p class="text-sm text-muted-foreground">
+            Machine-to-machine networks and AI-driven coordination layers.
+          </p>
+        </div>
+
+        <div class="p-6 border rounded-xl bg-background">
+          <Layers class="h-8 w-8 text-primary mb-4" />
+          <h3 class="font-semibold mb-2">Modular Systems</h3>
+          <p class="text-sm text-muted-foreground">
+            Extensible applications composed of independent interoperable modules.
+          </p>
+        </div>
+
+      </div>
+
+    </div>
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/hiw/HiwCTA.vue b/src/components/sections/hiw/HiwCTA.vue
index 10dfe7f..13b040a 100644
--- a/src/components/sections/hiw/HiwCTA.vue
+++ b/src/components/sections/hiw/HiwCTA.vue
@@ -1,31 +1,40 @@
 <script setup>
-import Button from '@/components/ui/Button.vue';
-
-
+import Button from '@/components/ui/Button.vue'
+import { RouterLink } from 'vue-router'
 </script>
 
 <template>
-    <section class="bg-card">
-      <div class="container py-24">
-        <div class="max-w-3xl mx-auto text-center space-y-6">
-          <h2 class="text-3xl md:text-4xl font-bold">
-            Ready to Experience True P2P?
-          </h2>
-          <p class="text-xl text-muted-foreground">
-            Download the app and see decentralized social networking in action
-          </p>
+  <section>
+    <div class="container py-24">
 
-          <div class="flex flex-col sm:flex-row gap-4 justify-center">
+      <div class="max-w-3xl mx-auto text-center space-y-6">
+
+        <h2 class="text-3xl md:text-4xl font-bold">
+          Build on the Infrastructure
+        </h2>
+
+        <p class="text-xl text-muted-foreground">
+          Explore NoSys, run it locally, and start building decentralized systems on top of peer-to-peer infrastructure.
+        </p>
+
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+
+          <RouterLink to="/downloads">
             <Button size="lg" class="bg-amber-400 hover:bg-amber-500 text-black">
-              <RouterLink to="/downloads">Download Now</RouterLink>
+              Download
             </Button>
+          </RouterLink>
 
+          <RouterLink to="/documentation">
             <Button size="lg" variant="outline" class="hover:text-amber-500">
-              <RouterLink to="/documentation">Read Documentation</RouterLink>
+              Documentation
             </Button>
-          </div>
+          </RouterLink>
 
         </div>
+
       </div>
-    </section>
+
+    </div>
+  </section>
 </template>
\ No newline at end of file
diff --git a/src/components/sections/hiw/HiwCore.vue b/src/components/sections/hiw/HiwCore.vue
index 56c3d8a..167ea98 100644
--- a/src/components/sections/hiw/HiwCore.vue
+++ b/src/components/sections/hiw/HiwCore.vue
@@ -1,50 +1,140 @@
 <script setup>
 import Card from '@/components/ui/Card.vue'
 import CardContent from '@/components/ui/CardContent.vue'
-import { Zap, Server, FileText } from 'lucide-vue-next'
+
+import {
+  Search,
+  ServerCog,
+  Network,
+  Workflow
+} from 'lucide-vue-next'
 </script>
 
 <template>
+
   <section class="bg-card">
+
     <div class="container py-24">
-        
+
       <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-6">Core Features</h2>
-        <p class="text-muted-foreground max-w-xl mx-auto">
-          NoSys empowers you to create decentralized networks with full control over communication rules, 
-          while providing tools to easily discover and connect with peers.
+
+        <div
+          class="inline-flex items-center px-3 py-1 text-sm
+                 rounded-full border border-border mb-6"
+        >
+          Infrastructure Layers
+        </div>
+
+        <h2 class="text-3xl md:text-4xl font-bold mb-6">
+          Core Infrastructure
+        </h2>
+
+        <p class="text-muted-foreground max-w-3xl mx-auto text-lg">
+          NoSys provides foundational infrastructure components for
+          decentralized communication, peer coordination,
+          network management, and extensible distributed systems.
         </p>
+
       </div>
 
-      
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
-        
-        <Card class="border-2">
-          <CardContent class="p-8 text-center">
-            <div class="flex items-center justify-center mb-4">
-              <FileText class="h-10 w-10 text-primary" />
-            </div>
-            <h3 class="font-bold mb-2">Networks</h3>
-            <p class="text-sm text-muted-foreground">
-              Create your own networks and define the rules for how peers communicate within them. 
-              You control who can join and how information flows.
-            </p>
-          </CardContent>
-        </Card>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
+
+        <!-- Peer Discovery -->
 
         <Card class="border-2">
-          <CardContent class="p-8 text-center">
-            <div class="flex items-center justify-center mb-4">
-              <Server class="h-10 w-10 text-primary" />
+
+          <CardContent class="p-8">
+
+            <div class="flex items-center mb-4">
+              <Search class="h-10 w-10 text-primary" />
             </div>
-            <h3 class="font-bold mb-2">Rendezvous Servers</h3>
-            <p class="text-sm text-muted-foreground">
-              These central points help you find and connect to peers when you first join a network. 
-              They make peer discovery simple while keeping your interactions decentralized.
+
+            <h3 class="font-bold text-xl mb-3">
+              Peer Discovery
+            </h3>
+
+            <p class="text-muted-foreground leading-relaxed">
+              Locate peers across decentralized environments and establish
+              communication paths between distributed nodes.
             </p>
+
           </CardContent>
+
         </Card>
+
+        <!-- Rendezvous -->
+
+        <Card class="border-2">
+
+          <CardContent class="p-8">
+
+            <div class="flex items-center mb-4">
+              <ServerCog class="h-10 w-10 text-primary" />
+            </div>
+
+            <h3 class="font-bold text-xl mb-3">
+              Rendezvous Coordination
+            </h3>
+
+            <p class="text-muted-foreground leading-relaxed">
+              Assist peers behind NATs and isolated networks in discovering
+              and connecting to each other across different environments.
+            </p>
+
+          </CardContent>
+
+        </Card>
+
+        <!-- Network Management -->
+
+        <Card class="border-2">
+
+          <CardContent class="p-8">
+
+            <div class="flex items-center mb-4">
+              <Network class="h-10 w-10 text-primary" />
+            </div>
+
+            <h3 class="font-bold text-xl mb-3">
+              Network Management
+            </h3>
+
+            <p class="text-muted-foreground leading-relaxed">
+              Create isolated decentralized sub-networks with independent peers,
+              communication rules, and coordination models.
+            </p>
+
+          </CardContent>
+
+        </Card>
+
+        <!-- Event System -->
+
+        <Card class="border-2">
+
+          <CardContent class="p-8">
+
+            <div class="flex items-center mb-4">
+              <Workflow class="h-10 w-10 text-primary" />
+            </div>
+
+            <h3 class="font-bold text-xl mb-3">
+              Modular Event System
+            </h3>
+
+            <p class="text-muted-foreground leading-relaxed">
+              Infrastructure components and modules communicate through observable
+              events, enabling extensibility and interoperability across the platform.
+            </p>
+
+          </CardContent>
+
+        </Card>
+
       </div>
+
     </div>
+
   </section>
-</template>
+
+</template>
\ No newline at end of file
diff --git a/src/components/sections/hiw/HiwEncryption.vue b/src/components/sections/hiw/HiwEncryption.vue
index 533025f..3bb0fb9 100644
--- a/src/components/sections/hiw/HiwEncryption.vue
+++ b/src/components/sections/hiw/HiwEncryption.vue
@@ -1,84 +1,127 @@
 <script setup>
-import Card from '@/components/ui/Card.vue';
-import CardContent from '@/components/ui/CardContent.vue';
-import { Lock } from 'lucide-vue-next';
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+
+import {
+  KeyRound,
+  ShieldCheck
+} from 'lucide-vue-next'
 </script>
 
 <template>
-    <section class="">
-      <div class="container py-24">
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
 
-          <Card class="border-2 order-2 lg:order-1">
-            <CardContent class="p-8">
-                <div class="space-y-6">
-                    <div>
-                        <h3 class="font-semibold mb-2">End-to-End Encryption</h3>
-                        <p class="text-sm text-muted-foreground">
-                            Messages are protected from the moment they leave your device
-                            until they reach the intended recipient.
-                        </p>
-                    </div>
+  <section>
 
-                    <div>
-                        <h3 class="font-semibold mb-2">Key-Based Identity</h3>
-                        <p class="text-sm text-muted-foreground">
-                            Your identity is represented by cryptographic keys stored locally,
-                            not by accounts managed on central servers.
-                        </p>
-                    </div>
+    <div class="container py-24">
 
-                    <div>
-                        <h3 class="font-semibold mb-2">Public Verification</h3>
-                        <p class="text-sm text-muted-foreground">
-                            Public keys allow others to verify interactions without accessing
-                            private information.
-                        </p>
-                    </div>
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
 
-                    <div>
-                        <h3 class="font-semibold mb-2">Decentralized Trust</h3>
-                        <p class="text-sm text-muted-foreground">
-                            Trust is established through cryptography, not through a single authority.
-                        </p>
-                    </div>
+        <!-- LEFT CARD -->
 
-                </div>
-            </CardContent>
-          </Card>
+        <Card class="border-2 order-2 lg:order-1">
+
+          <CardContent class="p-8">
+
+            <div class="space-y-6">
+
+              <div>
+                <h3 class="font-semibold mb-2">
+                  Local Key Ownership
+                </h3>
+
+                <p class="text-sm text-muted-foreground">
+                  Cryptographic keys are generated and stored locally,
+                  allowing peers to control their own identity and authentication.
+                </p>
+              </div>
+
+              <div>
+                <h3 class="font-semibold mb-2">
+                  Decentralized Identity
+                </h3>
+
+                <p class="text-sm text-muted-foreground">
+                  Identity is represented through cryptographic credentials
+                  instead of centralized account systems.
+                </p>
+              </div>
+
+              <div>
+                <h3 class="font-semibold mb-2">
+                  Signed Interactions
+                </h3>
+
+                <p class="text-sm text-muted-foreground">
+                  Peers can verify the authenticity and integrity of
+                  communications through cryptographic signatures.
+                </p>
+              </div>
+
+              <div>
+                <h3 class="font-semibold mb-2">
+                  Encrypted Communication
+                </h3>
+
+                <p class="text-sm text-muted-foreground">
+                  Data exchanged between peers can be protected through
+                  end-to-end encryption mechanisms.
+                </p>
+              </div>
 
-          <!-- Right Text -->
-          <div class="order-1 lg:order-2">
-            <div class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20 mb-6">
-              <Lock class="h-4 w-4" />
-              Security
             </div>
 
-            <h2 class="text-3xl md:text-4xl font-bold mb-6">
-              Encryption You Control
-            </h2>
+          </CardContent>
+
+        </Card>
+
+        <!-- RIGHT CONTENT -->
+
+        <div class="order-1 lg:order-2">
+
+          <div
+            class="inline-flex items-center gap-2 px-3 py-1 text-sm
+                   bg-primary/10 text-primary rounded-full
+                   border border-primary/20 mb-6"
+          >
+            <KeyRound class="h-4 w-4" />
+            Identity & Cryptography
+          </div>
+
+          <h2 class="text-3xl md:text-4xl font-bold mb-6">
+            Distributed Identity Secured by Cryptography
+          </h2>
+
+          <div class="space-y-4 text-muted-foreground leading-relaxed">
 
-            <div class="space-y-4 text-muted-foreground leading-relaxed">
-              <p>
-                Security is not a feature — it is the foundation of the network.
-              </p>
-              <p>
-                Each user has a private key that stays on their device.
-                This key represents your identity and is used to securely sign and protect
-                your interactions on the network.
-              </p>
-              <p>
-                Public keys allow others to verify your identity and exchange information
-                with you safely, without revealing your private data.
-            </p>
             <p>
-                Instead of relying on centralized databases of passwords,
-                identity is managed locally through cryptographic keys that you own.
+              NoSys uses cryptographic identity systems instead of centralized
+              account management infrastructure.
             </p>
-            </div>
+
+            <p>
+              Each peer controls their own private keys locally,
+              allowing authentication, verification, and secure communication
+              without depending on centralized identity providers.
+            </p>
+
+            <p>
+              Public keys enable peers to verify interactions and establish trust
+              relationships across decentralized environments.
+            </p>
+
+            <p>
+              This model reduces dependency on centralized credential storage
+              while enabling secure peer coordination and encrypted communication.
+            </p>
+
           </div>
 
         </div>
+
       </div>
-    </section>
+
+    </div>
+
+  </section>
+
 </template>
\ No newline at end of file
diff --git a/src/components/sections/hiw/HiwHero.vue b/src/components/sections/hiw/HiwHero.vue
index 4aa572a..84d5fca 100644
--- a/src/components/sections/hiw/HiwHero.vue
+++ b/src/components/sections/hiw/HiwHero.vue
@@ -1,19 +1,38 @@
 <script setup>
-import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
-
-
+import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
 </script>
 
 <template>
-    <section class="container py-24 md:py-32">
-      <div class="max-w-3xl mx-auto text-center">
-        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
-          How NoSys Works
-        </h1>
-        <p class="text-xl text-muted-foreground">
-          Understanding the technology that makes decentralized social networking possible
-        </p>
+  <section class="container py-24 md:py-32">
+
+    <div class="max-w-4xl mx-auto text-center">
+
+      <div
+        class="inline-flex items-center px-3 py-1 text-sm rounded-full
+               border border-border mb-6"
+      >
+        Distributed Systems • Peer-to-Peer • Modular Runtime
       </div>
-      <DotsMouse></DotsMouse>
-    </section>
+
+      <h1
+        class="text-4xl md:text-5xl lg:text-6xl
+               font-bold mb-6 text-balance"
+      >
+        How NoSys Works
+      </h1>
+
+      <p
+        class="text-xl text-muted-foreground
+               leading-relaxed max-w-3xl mx-auto"
+      >
+        Understanding the peer-to-peer infrastructure,
+        distributed coordination systems, and modular runtime
+        architecture behind noSys.
+      </p>
+
+    </div>
+
+    <DotsMouse />
+
+  </section>
 </template>
\ No newline at end of file
diff --git a/src/components/sections/hiw/HiwModules.vue b/src/components/sections/hiw/HiwModules.vue
index 668bcbb..4339deb 100644
--- a/src/components/sections/hiw/HiwModules.vue
+++ b/src/components/sections/hiw/HiwModules.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Box, Key, Cpu, Server, File, Users, Lock, Cable, AppWindowMac, FileBox, MessageSquareLock, MessageSquareQuote } from "lucide-vue-next"
+import { Box, Key, Cpu, Server, FileBox, AppWindowMac } from "lucide-vue-next"
 import {
   AccordionRoot,
   AccordionItem,
@@ -9,129 +9,106 @@ import {
 </script>
 
 <template>
-<section class="">
-  <div class="container py-24">
+  <section>
+    <div class="container py-24">
+
+      <div class="max-w-3xl mx-auto text-center mb-16">
+
+        <div class="inline-flex items-center px-3 py-1 text-sm rounded-full border border-border mb-6">
+          Runtime Architecture
+        </div>
+
+        <h2 class="text-3xl md:text-4xl font-bold mb-6">
+          Modular System Components
+        </h2>
+
+        <p class="text-xl text-muted-foreground">
+          noSys is composed of independent runtime modules that handle networking,
+          identity, coordination, and system-level operations.
+        </p>
+
+      </div>
+
+      <div class="max-w-4xl mx-auto">
+
+        <AccordionRoot type="single" collapsible class="space-y-4">
+
+          <AccordionItem value="fspn" class="border rounded-lg px-6 bg-card">
+            <AccordionTrigger class="hover:no-underline">
+              <div class="flex items-center gap-3">
+                <Box class="h-5 w-5 text-primary" />
+                <span class="font-semibold">FSPN (Core Protocol)</span>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
+              Core peer communication protocol responsible for message transport and distributed connectivity across nodes.
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="lockbox" class="border rounded-lg px-6 bg-card">
+            <AccordionTrigger class="hover:no-underline">
+              <div class="flex items-center gap-3">
+                <Key class="h-5 w-5 text-primary" />
+                <span class="font-semibold">LockBox</span>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
+              Local cryptographic identity and key management system.
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="core" class="border rounded-lg px-6 bg-card">
+            <AccordionTrigger class="hover:no-underline">
+              <div class="flex items-center gap-3">
+                <Cpu class="h-5 w-5 text-primary" />
+                <span class="font-semibold">noSys Core</span>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
+              Coordinates peers, modules, runtime state, and system services across the platform.
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="rendezvous" class="border rounded-lg px-6 bg-card">
+            <AccordionTrigger class="hover:no-underline">
+              <div class="flex items-center gap-3">
+                <Server class="h-5 w-5 text-primary" />
+                <span class="font-semibold">Rendezvous Layer</span>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
+              Coordination layer that assists peers in discovering and establishing connections across network boundaries.
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="filetransfer" class="border rounded-lg px-6 bg-card">
+            <AccordionTrigger class="hover:no-underline">
+              <div class="flex items-center gap-3">
+                <FileBox class="h-5 w-5 text-primary" />
+                <span class="font-semibold">Distributed File Transfer</span>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
+              Secure peer-to-peer file exchange infrastructure.
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="ui" class="border rounded-lg px-6 bg-card">
+            <AccordionTrigger class="hover:no-underline">
+              <div class="flex items-center gap-3">
+                <AppWindowMac class="h-5 w-5 text-primary" />
+                <span class="font-semibold">Local UI Runtime</span>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
+              Interface layer where modules expose decentralized application interfaces running locally on each node.
+            </AccordionContent>
+          </AccordionItem>
+
+        </AccordionRoot>
+
+      </div>
 
-    <div class="max-w-3xl mx-auto text-center mb-16">
-      <h2 class="text-3xl md:text-4xl font-bold mb-6">Modular Architecture</h2>
-      <p class="text-xl text-muted-foreground">
-        NoSys is built with independent modules. Some come by default, and the community can add more.
-      </p>
     </div>
-
-    <div class="max-w-4xl mx-auto">
-      <AccordionRoot type="single" collapsible class="space-y-4">
-
-        <AccordionItem value="fspn" class="border rounded-lg px-6 bg-card">
-          <AccordionTrigger class="hover:no-underline">
-            <div class="flex items-center gap-3">
-              <Box class="h-5 w-5 text-primary" />
-              <span class="font-semibold">FSPN</span>
-            </div>
-          </AccordionTrigger>
-          <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
-            The Free Speech Protocol Network handles the basic connections between users, ensuring everyone can communicate freely.
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="lockbox" class="border rounded-lg px-6 bg-card">
-          <AccordionTrigger class="hover:no-underline">
-            <div class="flex items-center gap-3">
-              <Key class="h-5 w-5 text-primary" />
-              <span class="font-semibold">LockBox</span>
-            </div>
-          </AccordionTrigger>
-          <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
-            Manages your private and public keys, keeping your identity and data secure.
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="nosys-core" class="border rounded-lg px-6 bg-card">
-          <AccordionTrigger class="hover:no-underline">
-            <div class="flex items-center gap-3">
-              <Cpu class="h-5 w-5 text-primary" />
-              <span class="font-semibold">NoSys Core</span>
-            </div>
-          </AccordionTrigger>
-          <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
-            The heart of the platform: manages peers, connections, settings, servers, and modules.
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="api" class="border rounded-lg px-6 bg-card">
-          <AccordionTrigger class="hover:no-underline">
-            <div class="flex items-center gap-3">
-              <Cable class="h-5 w-5 text-primary" />
-              <span class="font-semibold">API</span>
-            </div>
-          </AccordionTrigger>
-          <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
-            Handles the endpoints that modules expose, allowing secure communication and integration.
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="vuernosys" class="border rounded-lg px-6 bg-card">
-          <AccordionTrigger class="hover:no-underline">
-            <div class="flex items-center gap-3">
-              <AppWindowMac class="h-5 w-5 text-primary" />
-              <span class="font-semibold">VueNoSys</span>
-            </div>
-          </AccordionTrigger>
-          <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
-            The browser-based front-end: modules provide their interfaces here, all running locally.
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="rendezvous" class="border rounded-lg px-6 bg-card">
-          <AccordionTrigger class="hover:no-underline">
-            <div class="flex items-center gap-3">
-              <Server class="h-5 w-5 text-primary" />
-              <span class="font-semibold">Rendezvous</span>
-            </div>
-          </AccordionTrigger>
-          <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
-            Helps users and servers find each other, simplifying initial connections.
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="filetransfer" class="border rounded-lg px-6 bg-card">
-          <AccordionTrigger class="hover:no-underline">
-            <div class="flex items-center gap-3">
-              <FileBox class="h-5 w-5 text-primary" />
-              <span class="font-semibold">FileTransfer</span>
-            </div>
-          </AccordionTrigger>
-          <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
-            Securely manages file transfers, ensuring reliability and privacy.
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="p2post" class="border rounded-lg px-6 bg-card">
-          <AccordionTrigger class="hover:no-underline">
-            <div class="flex items-center gap-3">
-              <MessageSquareQuote class="h-5 w-5 text-primary" />
-              <span class="font-semibold">P2Post</span>
-            </div>
-          </AccordionTrigger>
-          <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
-            The social network module: creates networks, manages posts, profiles, friends, and network rules.
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="p2private" class="border rounded-lg px-6 bg-card">
-          <AccordionTrigger class="hover:no-underline">
-            <div class="flex items-center gap-3">
-              <MessageSquareLock class="h-5 w-5 text-primary" />
-              <span class="font-semibold">P2Private</span>
-            </div>
-          </AccordionTrigger>
-          <AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
-            Focused on private communication between you and your contacts, keeping messages secure.
-          </AccordionContent>
-        </AccordionItem>
-
-      </AccordionRoot>
-    </div>
-  </div>
-</section>
-</template>
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/hiw/HiwP2P.vue b/src/components/sections/hiw/HiwP2P.vue
index 1064e91..a2a3617 100644
--- a/src/components/sections/hiw/HiwP2P.vue
+++ b/src/components/sections/hiw/HiwP2P.vue
@@ -1,81 +1,189 @@
 <script setup>
-import Card from '@/components/ui/Card.vue';
-import CardContent from '@/components/ui/CardContent.vue';
-import { Network } from 'lucide-vue-next';
-
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
 
+import {
+  Network,
+  Server,
+  Router,
+  Globe
+} from 'lucide-vue-next'
 </script>
 
 <template>
-    <section class="bg-card">
-      <div class="container py-24">
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
 
-          <!-- Left Text -->
-          <div>
-            <div class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20 mb-6">
-              <Network class="h-4 w-4" />
-              Peer-to-Peer
-            </div>
+  <section class="bg-card">
 
-            <h2 class="text-3xl md:text-4xl font-bold mb-6">
-              Direct Connections, No Middlemen
-            </h2>
+    <div class="container py-24">
 
-            <div class="space-y-4 text-muted-foreground leading-relaxed">
-              <p>
-                In traditional social media, all your data flows through corporate servers...
-              </p>
-              <p>
-                <strong class="text-foreground">
-                  With P2P, you connect directly to other users.
-                </strong>
-              </p>
-              <p>
-                This architecture makes the network censorship-resistant and resilient...
-              </p>
-            </div>
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+
+        <!-- LEFT CONTENT -->
+
+        <div>
+
+          <div
+            class="inline-flex items-center gap-2 px-3 py-1 text-sm
+                   bg-primary/10 text-primary rounded-full
+                   border border-primary/20 mb-6"
+          >
+            <Network class="h-4 w-4" />
+            Distributed Networking
           </div>
 
-          <Card class="border-2">
-            <CardContent class="p-8">
-              <div class="space-y-8">
-                <div>
-                  <h3 class="font-semibold mb-4 text-destructive">Traditional Model</h3>
-                  <div class="flex items-center justify-center gap-4">
-                    <div class="h-12 w-12 rounded-full bg-muted flex items-center justify-center text-xs">User</div>
-                    <div class="text-muted-foreground">→</div>
-                    <div class="h-16 w-16 rounded-lg bg-destructive/20 border-2 border-destructive flex items-center justify-center text-xs text-center">
-                      Server
-                    </div>
-                    <div class="text-muted-foreground">→</div>
-                    <div class="h-12 w-12 rounded-full bg-muted flex items-center justify-center text-xs">User</div>
-                  </div>
-                  <p class="text-sm text-muted-foreground mt-4">
-                    All data flows through corporate servers
-                  </p>
-                </div>
+          <h2 class="text-3xl md:text-4xl font-bold mb-6">
+            Peer Coordination Without Centralized Infrastructure
+          </h2>
 
-                <div>
-                  <h3 class="font-semibold mb-4 text-primary">P2P Model</h3>
-                  <div class="flex items-center justify-center gap-4">
-                    <div class="h-12 w-12 rounded-full bg-primary/20 border-2 border-primary flex items-center justify-center text-xs">
-                      Peer
-                    </div>
-                    <div class="text-primary">↔</div>
-                    <div class="h-12 w-12 rounded-full bg-primary/20 border-2 border-primary flex items-center justify-center text-xs">
-                      Peer
-                    </div>
-                  </div>
-                  <p class="text-sm text-muted-foreground mt-4">
-                    Direct connections between users
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
+          <div class="space-y-4 text-muted-foreground leading-relaxed">
+
+            <p>
+              Traditional applications route communication through centralized infrastructure,
+              creating dependency on providers that control connectivity,
+              coordination, and access.
+            </p>
+
+            <p>
+              NoSys enables peers to discover and communicate directly using
+              decentralized networking and coordination mechanisms.
+            </p>
+
+            <p>
+              Rendezvous services assist peers in locating each other and establishing
+              communication paths across different network environments,
+              while peer-to-peer communication reduces dependency on centralized intermediaries.
+            </p>
+
+            <p>
+              This architecture allows decentralized systems to remain resilient,
+              modular, and adaptable across different types of applications.
+            </p>
+
+          </div>
 
         </div>
+
+        <!-- RIGHT CARD -->
+
+        <Card class="border-2">
+
+          <CardContent class="p-8">
+
+            <div class="space-y-8">
+
+              <!-- Traditional -->
+
+              <div>
+
+                <div class="flex items-center gap-2 mb-4">
+                  <Server class="h-5 w-5 text-destructive" />
+
+                  <h3 class="font-semibold text-destructive">
+                    Traditional Architecture
+                  </h3>
+                </div>
+
+                <div class="flex items-center justify-center gap-4">
+
+                  <div
+                    class="h-12 w-12 rounded-full bg-muted
+                           flex items-center justify-center text-xs"
+                  >
+                    Client
+                  </div>
+
+                  <div class="text-muted-foreground">
+                    →
+                  </div>
+
+                  <div
+                    class="h-16 w-16 rounded-lg
+                           bg-destructive/20 border-2 border-destructive
+                           flex items-center justify-center text-xs text-center"
+                  >
+                    Central
+                    Server
+                  </div>
+
+                  <div class="text-muted-foreground">
+                    →
+                  </div>
+
+                  <div
+                    class="h-12 w-12 rounded-full bg-muted
+                           flex items-center justify-center text-xs"
+                  >
+                    Client
+                  </div>
+
+                </div>
+
+                <p class="text-sm text-muted-foreground mt-4">
+                  Communication depends on centralized coordination infrastructure
+                </p>
+
+              </div>
+
+              <!-- Distributed -->
+
+              <div>
+
+                <div class="flex items-center gap-2 mb-4">
+                  <Globe class="h-5 w-5 text-primary" />
+
+                  <h3 class="font-semibold text-primary">
+                    Distributed Architecture
+                  </h3>
+                </div>
+
+                <div class="flex items-center justify-center gap-3 flex-wrap">
+
+                  <div
+                    class="h-12 w-12 rounded-full
+                           bg-primary/20 border-2 border-primary
+                           flex items-center justify-center text-xs"
+                  >
+                    Peer
+                  </div>
+
+                  <Router class="h-4 w-4 text-primary" />
+
+                  <div
+                    class="h-12 w-12 rounded-full
+                           bg-primary/20 border-2 border-primary
+                           flex items-center justify-center text-xs"
+                  >
+                    Peer
+                  </div>
+
+                  <Router class="h-4 w-4 text-primary" />
+
+                  <div
+                    class="h-12 w-12 rounded-full
+                           bg-primary/20 border-2 border-primary
+                           flex items-center justify-center text-xs"
+                  >
+                    Peer
+                  </div>
+
+                </div>
+
+                <p class="text-sm text-muted-foreground mt-4">
+                  Peers coordinate directly through distributed networking
+                </p>
+
+              </div>
+
+            </div>
+
+          </CardContent>
+
+        </Card>
+
       </div>
-    </section>
+
+    </div>
+
+  </section>
+
 </template>
\ No newline at end of file
diff --git a/src/components/sections/home/HomeCTA.vue b/src/components/sections/home/HomeCTA.vue
index 4f832e1..3e42c14 100644
--- a/src/components/sections/home/HomeCTA.vue
+++ b/src/components/sections/home/HomeCTA.vue
@@ -1,20 +1,32 @@
 <script setup>
 import { RouterLink } from 'vue-router'
-import Button from '@/components/ui/Button.vue';
-
-
+import Button from '@/components/ui/Button.vue'
 </script>
 
 <template>
-    <section class="container py-24">
-      <div class="max-w-3xl mx-auto text-center space-y-6">
-        <h2 class="text-3xl md:text-4xl font-bold">Ready to Join the Revolution?</h2>
-        <p class="text-xl text-muted-foreground">
-          Download our app and experience a social network built for freedom, not profit.
-        </p>
-        <Button size="lg" class="text-lg px-8 bg-amber-400 hover:bg-amber-500 text-black">
-          <RouterLink to="/downloads">Get Started</RouterLink>
-        </Button>
-      </div>
-    </section>
+  <section class="container py-24">
+
+    <div class="max-w-3xl mx-auto text-center space-y-6">
+
+      <h2 class="text-3xl md:text-4xl font-bold">
+        Start Building Decentralized Systems
+      </h2>
+
+      <p class="text-xl text-muted-foreground">
+        Explore the platform, connect peers, and build applications
+        without centralized infrastructure.
+      </p>
+
+      <Button
+        size="lg"
+        class="text-lg px-8 bg-amber-400 hover:bg-amber-500 text-black"
+      >
+        <RouterLink to="/downloads">
+          Get Started
+        </RouterLink>
+      </Button>
+
+    </div>
+
+  </section>
 </template>
\ No newline at end of file
diff --git a/src/components/sections/home/HomeEcosystem.vue b/src/components/sections/home/HomeEcosystem.vue
new file mode 100644
index 0000000..a807ab4
--- /dev/null
+++ b/src/components/sections/home/HomeEcosystem.vue
@@ -0,0 +1,43 @@
+<script setup>
+const items = [
+  'Social Networks',
+  'Encrypted Messaging',
+  'File Distribution',
+  'IoT Networks',
+  'Autonomous Systems',
+  'Collaborative Platforms',
+  'Distributed Communities',
+  'Future Decentralized Applications'
+]
+</script>
+
+<template>
+  <section class="container py-24">
+
+    <div class="text-center mb-16">
+      <h2 class="text-3xl md:text-4xl font-bold mb-4">
+        Build Anything on Top
+      </h2>
+
+      <p class="text-xl text-muted-foreground max-w-3xl mx-auto">
+        NoSys is designed as infrastructure for decentralized ecosystems,
+        enabling entirely different categories of peer-to-peer applications.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+
+      <div
+        v-for="item in items"
+        :key="item"
+        class="border rounded-xl p-6 text-center bg-card hover:border-primary transition-colors"
+      >
+        <p class="font-medium">
+          {{ item }}
+        </p>
+      </div>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/home/HomeHero.vue b/src/components/sections/home/HomeHero.vue
index 3a95bc4..310c3b3 100644
--- a/src/components/sections/home/HomeHero.vue
+++ b/src/components/sections/home/HomeHero.vue
@@ -1,40 +1,58 @@
 <script setup>
 import { RouterLink } from 'vue-router'
-import Button from '@/components/ui/Button.vue';
-import DotsMouse from '@/components/ui/canvas/DotsMouse.vue';
-
+import Button from '@/components/ui/Button.vue'
+import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
 </script>
 
 <template>
-    <section class="container py-24 md:py-32 lg:py-40">
-      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+  <section class="container py-24 md:py-32 lg:py-40">
 
-        <div class="space-y-6">
-          <div class="inline-block px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20">
-            100% Peer-to-Peer
-          </div>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
 
-          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-balance">
-            A Social Network Built for Free Expression
-          </h1>
+      <div class="space-y-6">
 
-          <p class="text-xl text-muted-foreground text-pretty">
-            A peer-to-peer social network designed to keep communication open,
-            transparent, and user-controlled.
-          </p>
-
-          <div class="flex flex-col sm:flex-row gap-4">
-            <Button size="lg" class="text-lg px-8 bg-amber-400 hover:bg-amber-500 text-black">
-              <RouterLink to="/downloads">Download Now</RouterLink>
-            </Button>
-
-            <Button variant="outline" size="lg" class="text-lg px-8 bg-transparent hover:text-amber-500">
-              <RouterLink to="/how-it-works">Learn More</RouterLink>
-            </Button>
-          </div>
+        <div class="inline-block px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20">
+          Open Source • Peer-to-Peer • Decentralized
         </div>
-        <DotsMouse></DotsMouse>
+
+        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-balance">
+          Infrastructure for a Decentralized Future
+        </h1>
+
+        <p class="text-xl text-muted-foreground text-pretty max-w-2xl">
+          NoSys is a peer-to-peer platform for building decentralized systems.
+          Create social networks, communication platforms, autonomous networks,
+          distributed applications, and future technologies without relying on centralized infrastructure.
+        </p>
+
+        <div class="flex flex-col sm:flex-row gap-4">
+
+          <Button
+            size="lg"
+            class="text-lg px-8 bg-amber-400 hover:bg-amber-500 text-black"
+          >
+            <RouterLink to="/downloads">
+              Download
+            </RouterLink>
+          </Button>
+
+          <Button
+            variant="outline"
+            size="lg"
+            class="text-lg px-8 bg-transparent hover:text-amber-500"
+          >
+            <RouterLink to="/docs">
+              Documentation
+            </RouterLink>
+          </Button>
+
+        </div>
+
       </div>
 
-    </section>
+      <DotsMouse />
+
+    </div>
+
+  </section>
 </template>
\ No newline at end of file
diff --git a/src/components/sections/home/HomePlatform.vue b/src/components/sections/home/HomePlatform.vue
new file mode 100644
index 0000000..c1d8a2a
--- /dev/null
+++ b/src/components/sections/home/HomePlatform.vue
@@ -0,0 +1,31 @@
+<script setup>
+</script>
+
+<template>
+  <section class="container py-24">
+
+    <div class="max-w-4xl mx-auto text-center space-y-6">
+
+      <div class="inline-block px-3 py-1 text-sm rounded-full border border-border">
+        What is NoSys?
+      </div>
+
+      <h2 class="text-3xl md:text-5xl font-bold text-balance">
+        A Platform, Not an Application
+      </h2>
+
+      <p class="text-xl text-muted-foreground leading-relaxed">
+        NoSys provides the foundation for decentralized communication and coordination.
+        It includes peer discovery, rendezvous, encrypted communication,
+        sub-network management, and modular infrastructure for building distributed systems.
+      </p>
+
+      <p class="text-lg text-muted-foreground leading-relaxed">
+        Instead of relying on centralized servers controlled by corporations,
+        applications built on NoSys communicate directly between peers.
+      </p>
+
+    </div>
+
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/sections/home/HomePrinciples.vue b/src/components/sections/home/HomePrinciples.vue
index 457469c..70a06f5 100644
--- a/src/components/sections/home/HomePrinciples.vue
+++ b/src/components/sections/home/HomePrinciples.vue
@@ -1,62 +1,84 @@
 <script setup>
-import Card from '@/components/ui/Card.vue';
-import CardContent from '@/components/ui/CardContent.vue';
-import { Shield, Unlock, Users } from 'lucide-vue-next';
-
+import Card from '@/components/ui/Card.vue'
+import CardContent from '@/components/ui/CardContent.vue'
 
+import {
+  Network,
+  Shield,
+  Blocks
+} from 'lucide-vue-next'
 </script>
 
 <template>
-    <section class="container py-24">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">Built on Three Core Principles</h2>
-        <p class="text-xl text-muted-foreground max-w-2xl mx-auto">
-          Our mission is to give you back control of your digital life
-        </p>
-      </div>
+  <section class="container py-24">
 
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+    <div class="text-center mb-16">
+      <h2 class="text-3xl md:text-4xl font-bold mb-4">
+        Core Infrastructure Principles
+      </h2>
 
-        <Card class="border-2">
-          <CardContent class="pt-6">
-            <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
-              <Shield class="h-6 w-6" />
-            </div>
-            <h3 class="text-2xl font-bold mb-3">Privacy</h3>
-            <p class="text-muted-foreground leading-relaxed">
-              End-to-end encryption ensures your data belongs only to you.
-              No corporate surveillance, no data mining, no third-party access.
-            </p>
-          </CardContent>
-        </Card>
+      <p class="text-xl text-muted-foreground max-w-2xl mx-auto">
+        Built to reduce dependency on centralized systems
+      </p>
+    </div>
 
-        <Card class="border-2">
-          <CardContent class="pt-6">
-            <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
-              <Unlock class="h-6 w-6 text-primary" />
-            </div>
-            <h3 class="text-2xl font-bold mb-3">Autonomy</h3>
-            <p class="text-muted-foreground leading-relaxed">
-              You own your content, connections, and identity.
-              No platform can ban you, shadow ban you, or restrict your reach.
-            </p>
-          </CardContent>
-        </Card>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 
-        <Card class="border-2">
-          <CardContent class="pt-6">
-            <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
-              <Users class="h-6 w-6 text-primary" />
-            </div>
-            <h3 class="text-2xl font-bold mb-3">Decentralization</h3>
-            <p class="text-muted-foreground leading-relaxed">
-              No single point of failure or control.
-              The network runs on peer-to-peer connections,
-              making it resilient and censorship-resistant.
-            </p>
-          </CardContent>
-        </Card>
+      <Card class="border-2">
+        <CardContent class="pt-6">
 
-      </div>
-    </section>
+          <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
+            <Network class="h-6 w-6 text-primary" />
+          </div>
+
+          <h3 class="text-2xl font-bold mb-3">
+            Peer-to-Peer
+          </h3>
+
+          <p class="text-muted-foreground leading-relaxed">
+            Systems communicate directly between peers without depending on centralized infrastructure or single points of control.
+          </p>
+
+        </CardContent>
+      </Card>
+
+      <Card class="border-2">
+        <CardContent class="pt-6">
+
+          <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
+            <Shield class="h-6 w-6 text-primary" />
+          </div>
+
+          <h3 class="text-2xl font-bold mb-3">
+            Sovereignty
+          </h3>
+
+          <p class="text-muted-foreground leading-relaxed">
+            Identity, communication, and infrastructure belong to the participants of the network, not centralized providers.
+          </p>
+
+        </CardContent>
+      </Card>
+
+      <Card class="border-2">
+        <CardContent class="pt-6">
+
+          <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
+            <Blocks class="h-6 w-6 text-primary" />
+          </div>
+
+          <h3 class="text-2xl font-bold mb-3">
+            Modularity
+          </h3>
+
+          <p class="text-muted-foreground leading-relaxed">
+            Build different systems on top of the same decentralized infrastructure, from social platforms to autonomous machine networks.
+          </p>
+
+        </CardContent>
+      </Card>
+
+    </div>
+
+  </section>
 </template>
\ No newline at end of file
diff --git a/src/components/ui/canvas/DotsMouse.vue b/src/components/ui/canvas/DotsMouse.vue
index c6a5528..7ebc0fe 100644
--- a/src/components/ui/canvas/DotsMouse.vue
+++ b/src/components/ui/canvas/DotsMouse.vue
@@ -133,12 +133,11 @@ function drawIfMouseMoving() {
   if (!mouseMoving){
     if (dots.length > 0 && dots[dots.length - 1] === undefined) {
       dots = [];
-      console.log("Cleaning dots")
     }
     return;
   };
 
-  if (dots.length === 0 || ! getPreviousDot(dots.length, 1)) {
+  if (dots.length === 0 || !getPreviousDot(dots.length, 1)) {
     const seedDot = new Dot(0, mouseX, mouseY);
     dots.push(seedDot);
     return;
diff --git a/src/views/About.vue b/src/views/About.vue
index 3a5d3fc..28ced99 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,17 +1,19 @@
 <script setup>
-import AboutHero from "@/components/sections/about/AboutHero.vue";
-import AboutTheProblem from "@/components/sections/about/AboutTheProblem.vue";
-import AboutOurMission from "@/components/sections/about/AboutOurMission.vue";
-import AboutTechnology from "@/components/sections/about/AboutTechnology.vue";
-import AboutCTA from "@/components/sections/about/AboutCTA.vue";
+import AboutHero from "@/components/sections/about/AboutHero.vue"
+import AboutTheProblem from "@/components/sections/about/AboutTheProblem.vue"
+import AboutWhy from "@/components/sections/about/AboutWhy.vue"
+import AboutTechnology from "@/components/sections/about/AboutTechnology.vue"
+import AboutVision from "@/components/sections/about/AboutVision.vue"
+import AboutCTA from "@/components/sections/about/AboutCTA.vue"
 </script>
 
 <template>
 
   <div class="flex flex-col">
+
     <section class="border-b border-border">
       <div class="container mx-auto">
-        <AboutHero/>
+        <AboutHero />
       </div>
     </section>
 
@@ -23,7 +25,7 @@ import AboutCTA from "@/components/sections/about/AboutCTA.vue";
 
     <section class="border-b border-border">
       <div class="container mx-auto">
-        <AboutOurMission />
+        <AboutWhy />
       </div>
     </section>
 
@@ -32,11 +34,19 @@ import AboutCTA from "@/components/sections/about/AboutCTA.vue";
         <AboutTechnology />
       </div>
     </section>
+
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <AboutVision />
+      </div>
+    </section>
+
+    <section>
+      <div class="container mx-auto">
+        <AboutCTA />
+      </div>
+    </section>
+
   </div>
 
-  <section class="">
-    <div class="container mx-auto">
-      <AboutCTA/>
-    </div>
-  </section>
-</template>
+</template>
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 99138a9..b181a44 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,28 +1,43 @@
 <script setup>
 import HomeHero from '@/components/sections/home/HomeHero.vue'
+import HomePlatform from '@/components/sections/home/HomePlatform.vue'
 import HomePrinciples from '@/components/sections/home/HomePrinciples.vue'
+import HomeEcosystem from '@/components/sections/home/HomeEcosystem.vue'
 import HomeCTA from '@/components/sections/home/HomeCTA.vue'
-
 </script>
 
 <template>
   <div class="flex flex-col">
+
     <section class="border-b border-border">
       <div class="container mx-auto">
         <HomeHero />
       </div>
     </section>
 
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <HomePlatform />
+      </div>
+    </section>
+
     <section class="border-b border-border">
       <div class="container mx-auto">
         <HomePrinciples />
       </div>
     </section>
 
-    <section class="">
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <HomeEcosystem />
+      </div>
+    </section>
+
+    <section>
       <div class="container mx-auto">
         <HomeCTA />
       </div>
     </section>
+
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/src/views/HowItWorks.vue b/src/views/HowItWorks.vue
index 6226fe0..be8528f 100644
--- a/src/views/HowItWorks.vue
+++ b/src/views/HowItWorks.vue
@@ -30,6 +30,12 @@
       </div>
     </section>
 
+    <section class="border-b border-border">
+      <div class="container mx-auto">
+        <HiwAppLayer />
+      </div>
+    </section>
+
     <section class="">
       <div class="container mx-auto">
         <HiwCTA />
@@ -45,6 +51,7 @@ import HiwP2P from '@/components/sections/hiw/HiwP2P.vue'
 import HiwEncryption from '@/components/sections/hiw/HiwEncryption.vue'
 import HiwCore from '@/components/sections/hiw/HiwCore.vue'
 import HiwModules from '@/components/sections/hiw/HiwModules.vue'
+import HiwAppLayer from '@/components/sections/hiw/HiwAppLayer.vue'
 import HiwCTA from '@/components/sections/hiw/HiwCTA.vue'
 
 </script>