diff --git a/package-lock.json b/package-lock.json
index e4f2213..1af0fe1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "framer-motion": "^12.23.22",
+        "lucide-react": "^0.544.0",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
         "react-router-dom": "^7.9.3",
@@ -2360,6 +2361,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.544.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.544.0.tgz",
+      "integrity": "sha512-t5tS44bqd825zAW45UQxpG2CvcC4urOwn2TrwSH8u+MjeE+1NnWl6QqeQ/6NdjMqdOygyiT9p3Ev0p1NJykxjw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
diff --git a/package.json b/package.json
index 21d92c0..0d82dc8 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.22",
+    "lucide-react": "^0.544.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-router-dom": "^7.9.3",
diff --git a/src/components/ComingSoon.jsx b/src/components/ComingSoon.jsx
index af2c460..f4fee99 100644
--- a/src/components/ComingSoon.jsx
+++ b/src/components/ComingSoon.jsx
@@ -1,11 +1,8 @@
 import React from 'react';
+import MembershipOptions from './MembershipOptions';
 
 const ComingSoon = () => {
-  return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-900 text-white">
-      <h1 className="text-5xl font-bold">Coming Soon!</h1>
-    </div>
-  );
+  return <MembershipOptions />;
 };
 
 export default ComingSoon;
\ No newline at end of file
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 7891543..bab306c 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -21,13 +21,13 @@ function Header() {
               <div className="flex items-center space-x-8 sm:space-x-12 lg:space-x-16 mx-auto">
                 <Link
                   to="/"
-                  className="text-white font-mono hover:text-green-400 transition-colors duration-200 text-sm sm:text-base font-medium tracking-wide whitespace-nowrap no-underline"
+                  className="text-white font-mono hover:text-bright-cyan transition-colors duration-200 text-sm sm:text-base font-medium tracking-wide whitespace-nowrap no-underline"
                 >
                   Home
                 </Link>
                 <Link
                   to="/membership"
-                  className="text-white font-mono hover:text-green-400 transition-colors duration-200 text-sm sm:text-base font-medium tracking-wide whitespace-nowrap no-underline"
+                  className="text-white font-mono hover:text-bright-cyan transition-colors duration-200 text-sm sm:text-base font-medium tracking-wide whitespace-nowrap no-underline"
                 >
                   Membership
                 </Link>
@@ -39,7 +39,7 @@ function Header() {
                   onClick={() => setShowTerminal(true)}
                   className="btn-primary animate-pulse-glow whitespace-nowrap"
                 >
-                  Enter the Network
+                  > Enter the Network
                 </button>
               </div>
             </div>
diff --git a/src/components/MembershipOptions.jsx b/src/components/MembershipOptions.jsx
new file mode 100644
index 0000000..880e974
--- /dev/null
+++ b/src/components/MembershipOptions.jsx
@@ -0,0 +1,374 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Wallet, Database, Users, Cloud, Eye, X, Scale, MessageSquare, Bot, Lock, Check } from 'lucide-react';
+
+const MembershipOptions = () => {
+  const [selectedPlan, setSelectedPlan] = useState('explorer');
+
+  const fadeInUp = {
+    hidden: { opacity: 0, y: 30 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.5 } }
+  };
+
+  const scaleIn = {
+    hidden: { scale: 0.95, opacity: 0 },
+    visible: { scale: 1, opacity: 1, transition: { duration: 0.4 } }
+  };
+
+  return (
+    <section className="min-h-screen bg-black text-white py-16 px-4" style={{fontFamily: 'Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'}}>
+      <div className="max-w-6xl mx-auto">
+        {/* Toggle Pills - Centered */}
+        <motion.div 
+          className="flex justify-center mb-12"
+          initial="hidden"
+          animate="visible"
+          variants={fadeInUp}
+        >
+          <div className="inline-flex bg-zinc-900 rounded-full p-1">
+            <button
+              onClick={() => setSelectedPlan('explorer')}
+              className={`px-6 py-2 rounded-full text-sm font-medium transition-all duration-200 min-w-[120px] ${
+                selectedPlan === 'explorer' 
+                  ? 'bg-gray-300 text-black' 
+                  : 'text-gray-500 hover:text-gray-300'
+              }`}
+            >
+              EXPLORER
+            </button>
+            <button
+              onClick={() => setSelectedPlan('resident')}
+              className={`px-6 py-2 rounded-full text-sm font-medium transition-all duration-200 min-w-[120px] ${
+                selectedPlan === 'resident' 
+                  ? 'bg-gray-300 text-black' 
+                  : 'text-gray-500 hover:text-gray-300'
+              }`}
+            >
+              RESIDENT
+            </button>
+          </div>
+        </motion.div>
+
+        {/* Explorer Tier View */}
+        {selectedPlan === 'explorer' && (
+          <motion.div
+            initial="hidden"
+            animate="visible"
+            variants={scaleIn}
+            className="space-y-8"
+          >
+            {/* Main Hero Card */}
+            <div className="max-w-4xl mx-auto mb-12" style={{
+              background: 'linear-gradient(to bottom, #1a1a1a, #0a0a0a)',
+              border: '1px solid rgba(34, 211, 238, 0.25)',
+              padding: '48px 56px',
+              borderRadius: '24px'
+            }}>
+              <div className="flex items-center justify-between gap-12">
+                <div className="flex-1">
+                  <h1 className="text-4xl lg:text-5xl font-bold mb-4">Explorer Tier</h1>
+                  <div className="mb-3">
+                    <span className="text-4xl font-bold">0€</span>
+                    <span className="text-gray-400 text-lg">/month</span>
+                  </div>
+                  <p className="text-gray-400 text-base">Mycelium Network Entry Point</p>
+                </div>
+                
+                {/* Mascot/Character Placeholder */}
+                <div className="hidden lg:flex flex-shrink-0 items-center justify-center">
+                  <div className="w-64 h-52 flex items-center justify-center">
+                    <div className="w-36 h-36 rounded-full flex items-center justify-center" style={{
+                      background: 'radial-gradient(circle, rgba(34, 211, 238, 0.3), rgba(6, 182, 212, 0.1))'
+                    }}>
+                      <span className="text-gray-500 text-sm">Network Mascot</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Features Section */}
+            <div className="max-w-4xl mx-auto">
+              <h2 className="text-2xl font-semibold mb-8 px-2">
+                Everything you're getting with Explorer Tier
+              </h2>
+
+              <div className="max-w-4xl mx-auto" style={{
+                background: 'linear-gradient(to bottom, #1a1a1a, #0a0a0a)',
+                border: '1px solid rgba(34, 211, 238, 0.25)',
+                padding: '48px 56px',
+                borderRadius: '24px'
+              }}>
+                <div className="space-y-6">
+                  {/* Feature 1 */}
+                  <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg bg-zinc-800 flex items-center justify-center">
+                        <Wallet className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2">Resident wallet and decentralized domain name</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        Get your own decentralized identity with a resident wallet and custom domain name on the authentic web.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Feature 2 */}
+                  <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg bg-zinc-800 flex items-center justify-center">
+                        <Database className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2">5 GB decentralized storage and bandwidth</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        Store your data securely on the decentralized network with 5 GB of storage and bandwidth allocation.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Feature 3 */}
+                  <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg bg-zinc-800 flex items-center justify-center">
+                        <Users className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2">Community access and product exploration</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        Connect with the Mycelium Society community and explore the ecosystem of decentralized products.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Feature 4 */}
+                  <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg bg-zinc-800 flex items-center justify-center">
+                        <Cloud className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2">Discounted VM hosting on decentralized cloud</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        Get special pricing on virtual machine hosting using our decentralized cloud infrastructure.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Feature 5 */}
+                  <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg bg-zinc-800 flex items-center justify-center">
+                        <Eye className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2">Ability to browse products (read-only/limited)</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        Explore and browse the ecosystem products with limited read-only access to understand the platform.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Denied Access */}
+                  <div className="flex items-start gap-4 pt-6 border-t border-gray-800">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg flex items-center justify-center" style={{backgroundColor: 'rgba(127, 29, 29, 0.2)'}}>
+                        <X className="w-4 h-4 text-red-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2 text-red-400">Full Access - denied</h3>
+                      <p className="text-gray-500 text-sm leading-relaxed">
+                        Upgrade to Digital Resident for full access to all Mycelium Society features.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        )}
+
+        {/* Digital Resident View */}
+        {selectedPlan === 'resident' && (
+          <motion.div
+            initial="hidden"
+            animate="visible"
+            variants={scaleIn}
+            className="space-y-8"
+          >
+            {/* Main Hero Card */}
+            <div className="max-w-4xl mx-auto mb-12" style={{
+              background: 'linear-gradient(to bottom, #1a1a1a, #0a0a0a)',
+              border: '1px solid rgba(34, 211, 238, 0.25)',
+              padding: '48px 56px',
+              borderRadius: '24px'
+            }}>
+              <div className="flex items-center justify-between gap-12">
+                <div className="flex-1">
+                  <h1 className="text-4xl lg:text-5xl font-bold mb-3">Digital Resident</h1>
+                  <span className="text-cyan-400 text-sm font-semibold">with legal standing</span>
+                  <div className="mt-5 mb-3">
+                    <span className="text-4xl font-bold">10$</span>
+                    <span className="text-gray-400 text-lg">/month*</span>
+                  </div>
+                  <p className="text-gray-400 text-sm">120$ for 2 years*</p>
+                  <p className="text-gray-400 text-sm">only for Early Adopters - limited</p>
+                </div>
+                
+                {/* Mascot/Character Placeholder */}
+                <div className="hidden lg:flex flex-shrink-0 items-center justify-center">
+                  <div className="w-64 h-52 flex items-center justify-center">
+                    <div className="grid grid-cols-2 gap-3">
+                      <div className="w-20 h-20 rounded-2xl" style={{backgroundColor: 'rgba(22, 163, 74, 0.3)'}}></div>
+                      <div className="w-20 h-20 rounded-2xl" style={{backgroundColor: 'rgba(34, 211, 238, 0.3)'}}></div>
+                      <div className="w-20 h-20 rounded-2xl" style={{backgroundColor: 'rgba(147, 51, 234, 0.3)'}}></div>
+                      <div className="w-20 h-20 rounded-2xl" style={{backgroundColor: 'rgba(234, 88, 12, 0.3)'}}></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Description */}
+            <div className="max-w-4xl mx-auto mb-10 px-2">
+              <p className="text-gray-300 text-base">
+                Full access. Full sovereignty. A legal and technological framework to live, work, 
+                and build in the authentic web.
+              </p>
+            </div>
+
+            {/* Features Section */}
+            <div className="max-w-4xl mx-auto">
+              <h2 className="text-2xl font-semibold mb-8 px-2">
+                What You Get as a Digital Resident
+              </h2>
+
+              <div style={{
+                background: 'linear-gradient(to bottom, #1a1a1a, #0a0a0a)',
+                border: '1px solid rgba(34, 211, 238, 0.35)',
+                padding: '48px 56px',
+                borderRadius: '24px'
+              }}>
+                <div className="space-y-6">
+                  {/* Feature 1 - Legal & Financial */}
+                  <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg bg-zinc-800 flex items-center justify-center">
+                        <Scale className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2">Legal & Financial Framework</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        Digital company license, freezone banking with fiat and crypto accounts, 5% flat tax rate, legal protection with dispute resolution, international operations support, and asset management capabilities.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Feature 2 - Decentralized Cloud */}
+                  <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg bg-zinc-800 flex items-center justify-center">
+                        <Cloud className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2">Mycelium Cloud Infrastructure</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        P2P hosting with quantum-safe storage, no vendor lock-in. A true alternative to AWS and Google Cloud that you control.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Feature 3 - Communication Tools */}
+                  <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg bg-zinc-800 flex items-center justify-center">
+                        <MessageSquare className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2">Private Communication Suite</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        Decentralized email compatible with existing systems, secure chat and docs with end-to-end encryption, replacing Slack and Google Workspace.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Feature 4 - AI & Privacy */}
+                  <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg bg-zinc-800 flex items-center justify-center">
+                        <Bot className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2">Private AI Agents & Secure Networking</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        AI agents that work exclusively for you, built-in privacy through P2P VPN infrastructure, and blockchain domains you actually own.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Feature 5 - Storage & Identity */}
+                  <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg bg-zinc-800 flex items-center justify-center">
+                        <Lock className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2">Unlimited storage and full sovereignty</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        Unlimited decentralized storage, bandwidth, and complete control over your digital identity and data.
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* All Tools Included */}
+                  <div className="flex items-start gap-4 pt-6 border-t border-cyan-400 border-opacity-20">
+                    <div className="flex-shrink-0 mt-1">
+                      <div className="w-7 h-7 rounded-lg flex items-center justify-center" style={{backgroundColor: 'rgba(34, 211, 238, 0.2)'}}>
+                        <Check className="w-4 h-4 text-cyan-400" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-base mb-2 text-cyan-400">Everything from Explorer Tier included</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        Plus all the tools and infrastructure to build, operate, and scale your digital presence with complete sovereignty.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* CTA Button */}
+              <div className="mt-8">
+                <motion.button
+                  className="w-full py-4 text-black text-base font-bold transition-all duration-300"
+                  style={{
+                    background: 'linear-gradient(to right, rgb(6, 182, 212), rgb(34, 211, 238))',
+                    borderRadius: '16px'
+                  }}
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  Become a Digital Resident
+                </motion.button>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default MembershipOptions;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 83d6e60..296f526 100644
--- a/src/index.css
+++ b/src/index.css
@@ -82,7 +82,7 @@ button {
 
 /* Background classes */
 .bg-dark-gradient { background: #000000; }
-.bg-gray-900 { background-color: #111827; }
+.bg-gray-900 { background-color: #000000; }
 .bg-amber-100 { background-color: #fef3c7; }
 .bg-blue-100 { background-color: #dbeafe; }
 .bg-pink-100 { background-color: #fce7f3; }
@@ -342,6 +342,7 @@ button {
 
 /* Hover effects */
 .hover\:text-green-400:hover { color: #4ade80; }
+.hover\:text-bright-cyan:hover { color: #00d9ff; }
 .hover\:bg-green-400:hover { background-color: #4ade80; }
 
 /* Transitions */