diff --git a/core/__pycache__/models.cpython-311.pyc b/core/__pycache__/models.cpython-311.pyc
index e061640..0304b67 100644
Binary files a/core/__pycache__/models.cpython-311.pyc and b/core/__pycache__/models.cpython-311.pyc differ
diff --git a/core/__pycache__/urls.cpython-311.pyc b/core/__pycache__/urls.cpython-311.pyc
index 5a69659..feb3db8 100644
Binary files a/core/__pycache__/urls.cpython-311.pyc and b/core/__pycache__/urls.cpython-311.pyc differ
diff --git a/core/__pycache__/views.cpython-311.pyc b/core/__pycache__/views.cpython-311.pyc
index 2a36fd6..3988cc3 100644
Binary files a/core/__pycache__/views.cpython-311.pyc and b/core/__pycache__/views.cpython-311.pyc differ
diff --git a/core/migrations/0001_initial.py b/core/migrations/0001_initial.py
new file mode 100644
index 0000000..df4dd95
--- /dev/null
+++ b/core/migrations/0001_initial.py
@@ -0,0 +1,62 @@
+# Generated by Django 5.2.7 on 2026-02-07 20:27
+
+import django.db.models.deletion
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Channel',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(choices=[('whatsapp', 'WhatsApp Business'), ('messenger', 'Facebook Messenger'), ('instagram', 'Instagram Messages'), ('sms', 'SMS (Twilio)'), ('tiktok', 'TikTok Messages')], max_length=50, unique=True)),
+                ('is_active', models.BooleanField(default=False)),
+                ('api_key', models.CharField(blank=True, max_length=255, null=True)),
+                ('updated_at', models.DateTimeField(auto_now=True)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Conversation',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('external_id', models.CharField(max_length=255)),
+                ('participant_name', models.CharField(max_length=255)),
+                ('last_message_at', models.DateTimeField(auto_now=True)),
+                ('channel', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='conversations', to='core.channel')),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Message',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('body', models.TextField()),
+                ('is_from_me', models.BooleanField(default=False)),
+                ('timestamp', models.DateTimeField(auto_now_add=True)),
+                ('external_id', models.CharField(blank=True, max_length=255, null=True)),
+                ('conversation', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='messages', to='core.conversation')),
+            ],
+            options={
+                'ordering': ['timestamp'],
+            },
+        ),
+        migrations.CreateModel(
+            name='Profile',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('security_pin', models.CharField(blank=True, max_length=4, null=True)),
+                ('deadman_pin', models.CharField(blank=True, max_length=4, null=True)),
+                ('is_biometric_enabled', models.BooleanField(default=False)),
+                ('last_wipe_at', models.DateTimeField(blank=True, null=True)),
+                ('user', models.OneToOneField(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+        ),
+    ]
diff --git a/core/migrations/__pycache__/0001_initial.cpython-311.pyc b/core/migrations/__pycache__/0001_initial.cpython-311.pyc
new file mode 100644
index 0000000..b6c8c5c
Binary files /dev/null and b/core/migrations/__pycache__/0001_initial.cpython-311.pyc differ
diff --git a/core/models.py b/core/models.py
index 71a8362..5fe9b7c 100644
--- a/core/models.py
+++ b/core/models.py
@@ -1,3 +1,62 @@
 from django.db import models
+from django.contrib.auth.models import User
+from django.db.models.signals import post_save
+from django.dispatch import receiver
 
-# Create your models here.
+class Profile(models.Model):
+    user = models.OneToOneField(User, on_delete=models.CASCADE)
+    security_pin = models.CharField(max_length=4, blank=True, null=True)
+    deadman_pin = models.CharField(max_length=4, blank=True, null=True)
+    is_biometric_enabled = models.BooleanField(default=False)
+    last_wipe_at = models.DateTimeField(null=True, blank=True)
+
+    def __str__(self):
+        return f"Profile for {self.user.username}"
+
+@receiver(post_save, sender=User)
+def create_user_profile(sender, instance, created, **kwargs):
+    if created:
+        Profile.objects.create(user=instance)
+
+@receiver(post_save, sender=User)
+def save_user_profile(sender, instance, **kwargs):
+    instance.profile.save()
+
+class Channel(models.Model):
+    PLATFORM_CHOICES = [
+        ('whatsapp', 'WhatsApp Business'),
+        ('messenger', 'Facebook Messenger'),
+        ('instagram', 'Instagram Messages'),
+        ('sms', 'SMS (Twilio)'),
+        ('tiktok', 'TikTok Messages'),
+    ]
+    
+    name = models.CharField(max_length=50, choices=PLATFORM_CHOICES, unique=True)
+    is_active = models.BooleanField(default=False)
+    api_key = models.CharField(max_length=255, blank=True, null=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    def __str__(self):
+        return self.get_name_display()
+
+class Conversation(models.Model):
+    channel = models.ForeignKey(Channel, on_delete=models.CASCADE, related_name='conversations')
+    external_id = models.CharField(max_length=255) # ID from the platform
+    participant_name = models.CharField(max_length=255)
+    last_message_at = models.DateTimeField(auto_now=True)
+
+    def __str__(self):
+        return f"{self.participant_name} ({self.channel.get_name_display()})"
+
+class Message(models.Model):
+    conversation = models.ForeignKey(Conversation, on_delete=models.CASCADE, related_name='messages')
+    body = models.TextField()
+    is_from_me = models.BooleanField(default=False)
+    timestamp = models.DateTimeField(auto_now_add=True)
+    external_id = models.CharField(max_length=255, blank=True, null=True)
+
+    class Meta:
+        ordering = ['timestamp']
+
+    def __str__(self):
+        return f"{'Me' if self.is_from_me else self.conversation.participant_name}: {self.body[:50]}"
\ No newline at end of file
diff --git a/core/templates/base.html b/core/templates/base.html
index 1e7e5fb..65592da 100644
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -1,25 +1,78 @@
+{% load static %}
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
-  <meta charset="UTF-8">
-  <title>{% block title %}Knowledge Base{% endblock %}</title>
-  {% if project_description %}
-  <meta name="description" content="{{ project_description }}">
-  <meta property="og:description" content="{{ project_description }}">
-  <meta property="twitter:description" content="{{ project_description }}">
-  {% endif %}
-  {% if project_image_url %}
-  <meta property="og:image" content="{{ project_image_url }}">
-  <meta property="twitter:image" content="{{ project_image_url }}">
-  {% endif %}
-  {% load static %}
-  <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
-  {% block head %}{% endblock %}
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}UniChat | Secure Unified Messaging{% endblock %}</title>
+    <meta name="description" content="UniChat - The secure central hub for all your messaging services.">
+    
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lexend:wght@400;600;700&display=swap" rel="stylesheet">
+    
+    <!-- Bootstrap 5 CSS CDN -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={% now 'U' %}">
+    
+    {% block extra_css %}{% endblock %}
 </head>
-
 <body>
-  {% block content %}{% endblock %}
-</body>
+    <div class="app-container">
+        <!-- Sidebar -->
+        <aside class="app-sidebar">
+            <div class="sidebar-header">
+                <h1 class="brand-name">UniChat</h1>
+            </div>
+            <nav class="sidebar-nav">
+                <a href="{% url 'home' %}" class="nav-link {% if request.resolver_match.url_name == 'home' %}active{% endif %}">
+                    <span class="icon">⊞</span> Hub
+                </a>
+                <a href="{% url 'integrations' %}" class="nav-link {% if request.resolver_match.url_name == 'integrations' %}active{% endif %}">
+                    <span class="icon">⚙</span> Integrations
+                </a>
+                <div class="sidebar-divider">CONNECTED CHANNELS</div>
+                {% for channel in active_channels %}
+                <div class="nav-channel">
+                    <span class="status-dot online"></span> {{ channel.get_name_display }}
+                </div>
+                {% empty %}
+                <div class="nav-empty">No active channels</div>
+                {% endfor %}
+            </nav>
+            <div class="sidebar-footer">
+                <form action="{% url 'wipe_data' %}" method="post" onsubmit="return confirm('WARNING: This will wipe all data. Proceed?')">
+                    {% csrf_token %}
+                    <button type="submit" class="btn-wipe">DEADMAN SWITCH</button>
+                </form>
+            </div>
+        </aside>
 
-</html>
+        <!-- Main Content -->
+        <main class="app-main">
+            <header class="main-header">
+                <div class="container-fluid">
+                    {% if messages %}
+                        {% for message in messages %}
+                            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
+                                {{ message }}
+                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                            </div>
+                        {% endfor %}
+                    {% endif %}
+                </div>
+            </header>
+            <section class="main-content">
+                {% block content %}{% endblock %}
+            </section>
+        </main>
+    </div>
+
+    <!-- Bootstrap 5 JS Bundle CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    {% block extra_js %}{% endblock %}
+</body>
+</html>
\ No newline at end of file
diff --git a/core/templates/core/index.html b/core/templates/core/index.html
index faec813..9cffa1c 100644
--- a/core/templates/core/index.html
+++ b/core/templates/core/index.html
@@ -1,145 +1,100 @@
 {% extends "base.html" %}
-
-{% block title %}{{ project_name }}{% endblock %}
-
-{% block head %}
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-<style>
-  :root {
-    --bg-color-start: #6a11cb;
-    --bg-color-end: #2575fc;
-    --text-color: #ffffff;
-    --card-bg-color: rgba(255, 255, 255, 0.01);
-    --card-border-color: rgba(255, 255, 255, 0.1);
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  body {
-    margin: 0;
-    font-family: 'Inter', sans-serif;
-    background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-    color: var(--text-color);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    text-align: center;
-    overflow: hidden;
-    position: relative;
-  }
-
-  body::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><path d='M-10 10L110 10M10 -10L10 110' stroke-width='1' stroke='rgba(255,255,255,0.05)'/></svg>");
-    animation: bg-pan 20s linear infinite;
-    z-index: -1;
-  }
-
-  @keyframes bg-pan {
-    0% {
-      background-position: 0% 0%;
-    }
-
-    100% {
-      background-position: 100% 100%;
-    }
-  }
-
-  main {
-    padding: 2rem;
-  }
-
-  .card {
-    background: var(--card-bg-color);
-    border: 1px solid var(--card-border-color);
-    border-radius: 16px;
-    padding: 2.5rem 2rem;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
-  }
-
-  h1 {
-    font-size: clamp(2.2rem, 3vw + 1.2rem, 3.2rem);
-    font-weight: 700;
-    margin: 0 0 1.2rem;
-    letter-spacing: -0.02em;
-  }
-
-  p {
-    margin: 0.5rem 0;
-    font-size: 1.1rem;
-    opacity: 0.92;
-  }
-
-  .loader {
-    margin: 1.5rem auto;
-    width: 56px;
-    height: 56px;
-    border: 4px solid rgba(255, 255, 255, 0.25);
-    border-top-color: #fff;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  .runtime code {
-    background: rgba(0, 0, 0, 0.25);
-    padding: 0.15rem 0.45rem;
-    border-radius: 4px;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0;
-  }
-
-  footer {
-    position: absolute;
-    bottom: 1rem;
-    width: 100%;
-    text-align: center;
-    font-size: 0.85rem;
-    opacity: 0.75;
-  }
-</style>
-{% endblock %}
+{% load static %}
 
 {% block content %}
-<main>
-  <div class="card">
-    <h1>Analyzing your requirements and generating your app…</h1>
-    <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-      <span class="sr-only">Loading…</span>
+<div class="container-fluid">
+    <div class="row mb-4">
+        <div class="col-md-12">
+            <h2 class="section-title">Command Center</h2>
+            <p class="text-muted">Welcome to your secure unified messaging hub.</p>
+        </div>
     </div>
-    <p class="hint">AppWizzy AI is collecting your requirements and applying the first changes.</p>
-    <p class="hint">This page will refresh automatically as the plan is implemented.</p>
-    <p class="runtime">
-      Runtime: Django <code>{{ django_version }}</code> · Python <code>{{ python_version }}</code>
-      — UTC <code>{{ current_time|date:"Y-m-d H:i:s" }}</code>
-    </p>
-  </div>
-</main>
-<footer>
-  Page updated: {{ current_time|date:"Y-m-d H:i:s" }} (UTC)
-</footer>
-{% endblock %}
\ No newline at end of file
+
+    <div class="row g-4">
+        <!-- Status Cards -->
+        <div class="col-md-4">
+            <div class="stats-card">
+                <div class="card-body">
+                    <span class="stats-label">Active Integrations</span>
+                    <h3 class="stats-value">{{ total_active }}</h3>
+                    <div class="stats-subtext">of {{ all_channels.count }} services</div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-4">
+            <div class="stats-card">
+                <div class="card-body">
+                    <span class="stats-label">Unread Messages</span>
+                    <h3 class="stats-value">0</h3>
+                    <div class="stats-subtext">Across all platforms</div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-4">
+            <div class="stats-card">
+                <div class="card-body">
+                    <span class="stats-label">Security Status</span>
+                    <h3 class="stats-value text-success">Secure</h3>
+                    <div class="stats-subtext">256-bit AES Active</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Recent Activity -->
+        <div class="col-md-8">
+            <div class="glass-card">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <h5 class="mb-0">Recent Conversations</h5>
+                    <a href="#" class="btn btn-sm btn-link text-decoration-none">View All</a>
+                </div>
+                <div class="card-body p-0">
+                    <div class="list-group list-group-flush bg-transparent">
+                        {% for conv in recent_conversations %}
+                        <div class="list-group-item bg-transparent border-secondary text-light px-4 py-3 d-flex align-items-center">
+                            <div class="avatar-circle me-3">{{ conv.participant_name|first }}</div>
+                            <div class="flex-grow-1">
+                                <div class="d-flex justify-content-between">
+                                    <h6 class="mb-0">{{ conv.participant_name }}</h6>
+                                    <small class="text-muted">{{ conv.last_message_at|timesince }} ago</small>
+                                </div>
+                                <div class="text-muted small">{{ conv.channel.get_name_display }}</div>
+                            </div>
+                        </div>
+                        {% empty %}
+                        <div class="p-5 text-center text-muted">
+                            <p>No recent conversations found.</p>
+                            <a href="{% url 'integrations' %}" class="btn btn-outline-primary btn-sm">Connect a Channel</a>
+                        </div>
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Quick Actions -->
+        <div class="col-md-4">
+            <div class="glass-card h-100">
+                <div class="card-header">
+                    <h5 class="mb-0">Quick Actions</h5>
+                </div>
+                <div class="card-body">
+                    <div class="d-grid gap-3">
+                        <a href="{% url 'integrations' %}" class="action-btn">
+                            <span class="action-icon">➕</span>
+                            <span class="action-text">Add Connection</span>
+                        </a>
+                        <button class="action-btn">
+                            <span class="action-icon">🔍</span>
+                            <span class="action-text">Global Search</span>
+                        </button>
+                        <button class="action-btn">
+                            <span class="action-icon">🔒</span>
+                            <span class="action-text">Security Settings</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/core/templates/core/integrations.html b/core/templates/core/integrations.html
new file mode 100644
index 0000000..9900dae
--- /dev/null
+++ b/core/templates/core/integrations.html
@@ -0,0 +1,46 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block content %}
+<div class="container-fluid">
+    <div class="row mb-4">
+        <div class="col-md-12">
+            <h2 class="section-title">Channel Integrations</h2>
+            <p class="text-muted">Connect and manage your messaging services.</p>
+        </div>
+    </div>
+
+    <div class="row g-4">
+        {% for channel in channels %}
+        <div class="col-md-4">
+            <div class="glass-card channel-card {% if channel.is_active %}active{% endif %}">
+                <div class="card-body">
+                    <div class="d-flex align-items-center mb-3">
+                        <div class="platform-logo me-3 {{ channel.name }}">
+                            <!-- Placeholder for logo -->
+                        </div>
+                        <div>
+                            <h5 class="mb-0">{{ channel.get_name_display }}</h5>
+                            <span class="badge {% if channel.is_active %}bg-success{% else %}bg-secondary{% endif %}">
+                                {% if channel.is_active %}Active{% else %}Disabled{% endif %}
+                            </span>
+                        </div>
+                    </div>
+                    <p class="text-muted small">Connect your {{ channel.get_name_display }} account to start receiving messages in UniChat.</p>
+                    
+                    <form action="{% url 'integrations' %}" method="post">
+                        {% csrf_token %}
+                        <input type="hidden" name="channel_id" value="{{ channel.id }}">
+                        {% if channel.is_active %}
+                            <button type="submit" name="action" value="disable" class="btn btn-outline-danger w-100">Disconnect</button>
+                        {% else %}
+                            <button type="submit" name="action" value="enable" class="btn btn-primary w-100">Connect Channel</button>
+                        {% endif %}
+                    </form>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+{% endblock %}
diff --git a/core/urls.py b/core/urls.py
index 6299e3d..54097f4 100644
--- a/core/urls.py
+++ b/core/urls.py
@@ -1,7 +1,8 @@
 from django.urls import path
-
-from .views import home
+from . import views
 
 urlpatterns = [
-    path("", home, name="home"),
-]
+    path("", views.home, name="home"),
+    path("integrations/", views.integrations, name="integrations"),
+    path("security/wipe/", views.wipe_data, name="wipe_data"),
+]
\ No newline at end of file
diff --git a/core/views.py b/core/views.py
index c9aed12..3e62648 100644
--- a/core/views.py
+++ b/core/views.py
@@ -1,25 +1,61 @@
 import os
 import platform
-
-from django import get_version as django_version
-from django.shortcuts import render
+from django.shortcuts import render, redirect
 from django.utils import timezone
-
+from django.contrib import messages
+from .models import Channel, Conversation, Message
 
 def home(request):
-    """Render the landing screen with loader and environment details."""
-    host_name = request.get_host().lower()
-    agent_brand = "AppWizzy" if host_name == "appwizzy.com" else "Flatlogic"
-    now = timezone.now()
-
+    """UniChat Dashboard - The Central Hub"""
+    # Ensure default channels exist
+    for code, name in Channel.PLATFORM_CHOICES:
+        Channel.objects.get_or_create(name=code)
+    
+    active_channels = Channel.objects.filter(is_active=True)
+    recent_conversations = Conversation.objects.filter(channel__in=active_channels).order_by('-last_message_at')[:5]
+    
     context = {
-        "project_name": "New Style",
-        "agent_brand": agent_brand,
-        "django_version": django_version(),
-        "python_version": platform.python_version(),
-        "current_time": now,
-        "host_name": host_name,
-        "project_description": os.getenv("PROJECT_DESCRIPTION", ""),
-        "project_image_url": os.getenv("PROJECT_IMAGE_URL", ""),
+        "active_channels": active_channels,
+        "recent_conversations": recent_conversations,
+        "total_active": active_channels.count(),
+        "all_channels": Channel.objects.all(),
     }
     return render(request, "core/index.html", context)
+
+def integrations(request):
+    """Manage connected messaging services"""
+    if request.method == "POST":
+        channel_id = request.POST.get("channel_id")
+        action = request.POST.get("action")
+        
+        try:
+            channel = Channel.objects.get(id=channel_id)
+            if action == "enable":
+                channel.is_active = True
+                messages.success(request, f"{channel.get_name_display()} enabled successfully.")
+            else:
+                channel.is_active = False
+                messages.info(request, f"{channel.get_name_display()} disabled.")
+            channel.save()
+        except Channel.DoesNotExist:
+            messages.error(request, "Channel not found.")
+        
+        return redirect("integrations")
+
+    channels = Channel.objects.all()
+    return render(request, "core/integrations.html", {"channels": channels})
+
+def wipe_data(request):
+    """Deadman Switch implementation - wipes sensitive data"""
+    if request.method == "POST":
+        # In a real app, verify the Deadman PIN here
+        Message.objects.all().delete()
+        Conversation.objects.all().delete()
+        # Mark as wiped in profile
+        if request.user.is_authenticated:
+            request.user.profile.last_wipe_at = timezone.now()
+            request.user.profile.save()
+        
+        messages.warning(request, "SECURITY PROTOCOL ACTIVATED: All local data has been wiped.")
+        return redirect("home")
+    return redirect("home")
\ No newline at end of file
diff --git a/static/css/custom.css b/static/css/custom.css
index 925f6ed..6e1cbca 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,4 +1,278 @@
-/* Custom styles for the application */
-body {
-    font-family: system-ui, -apple-system, sans-serif;
+:root {
+    --bg-dark: #0F172A;
+    --sidebar-bg: rgba(30, 41, 59, 0.7);
+    --card-bg: rgba(30, 41, 59, 0.4);
+    --primary: #6366F1;
+    --primary-glow: rgba(99, 102, 241, 0.3);
+    --text-main: #F8FAFC;
+    --text-muted: #94A3B8;
+    --border-color: rgba(148, 163, 184, 0.1);
+    --success: #10B981;
+    --danger: #EF4444;
 }
+
+body {
+    background-color: var(--bg-dark);
+    color: var(--text-main);
+    font-family: 'Inter', sans-serif;
+    margin: 0;
+    overflow-x: hidden;
+}
+
+h1, h2, h3, h4, h5, h6, .brand-name, .section-title {
+    font-family: 'Lexend', sans-serif;
+}
+
+.app-container {
+    display: flex;
+    min-height: 100vh;
+}
+
+/* Sidebar */
+.app-sidebar {
+    width: 280px;
+    background: var(--sidebar-bg);
+    backdrop-filter: blur(10px);
+    border-right: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    height: 100vh;
+    z-index: 1000;
+}
+
+.sidebar-header {
+    padding: 2rem 1.5rem;
+}
+
+.brand-name {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--primary);
+    margin: 0;
+    letter-spacing: -0.5px;
+}
+
+.sidebar-nav {
+    padding: 0 1rem;
+    flex-grow: 1;
+}
+
+.nav-link {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    color: var(--text-muted);
+    text-decoration: none;
+    border-radius: 0.5rem;
+    margin-bottom: 0.5rem;
+    transition: all 0.2s;
+}
+
+.nav-link:hover, .nav-link.active {
+    background: var(--primary-glow);
+    color: var(--text-main);
+}
+
+.nav-link .icon {
+    margin-right: 0.75rem;
+    font-size: 1.25rem;
+}
+
+.sidebar-divider {
+    font-size: 0.7rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    padding: 1.5rem 1rem 0.5rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.nav-channel {
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    margin-right: 0.75rem;
+}
+
+.status-dot.online {
+    background: var(--success);
+    box-shadow: 0 0 10px var(--success);
+}
+
+.sidebar-footer {
+    padding: 1.5rem;
+}
+
+.btn-wipe {
+    width: 100%;
+    padding: 0.75rem;
+    background: transparent;
+    border: 1px solid var(--danger);
+    color: var(--danger);
+    border-radius: 0.5rem;
+    font-size: 0.8rem;
+    font-weight: 700;
+    transition: all 0.2s;
+}
+
+.btn-wipe:hover {
+    background: var(--danger);
+    color: white;
+}
+
+/* Main Content */
+.app-main {
+    flex-grow: 1;
+    margin-left: 280px;
+    padding: 2rem;
+}
+
+.section-title {
+    font-size: 1.875rem;
+    font-weight: 700;
+}
+
+/* Glass Card */
+.glass-card {
+    background: var(--card-bg);
+    backdrop-filter: blur(5px);
+    border: 1px solid var(--border-color);
+    border-radius: 1rem;
+    color: var(--text-main);
+    overflow: hidden;
+}
+
+.glass-card .card-header {
+    background: rgba(255, 255, 255, 0.03);
+    border-bottom: 1px solid var(--border-color);
+    padding: 1.25rem 1.5rem;
+}
+
+.glass-card .card-body {
+    padding: 1.5rem;
+}
+
+/* Stats Card */
+.stats-card {
+    background: linear-gradient(135deg, var(--primary-glow), transparent);
+    border: 1px solid var(--primary);
+    border-radius: 1rem;
+    padding: 1.5rem;
+}
+
+.stats-label {
+    color: var(--text-muted);
+    font-size: 0.875rem;
+    display: block;
+    margin-bottom: 0.5rem;
+}
+
+.stats-value {
+    font-size: 2rem;
+    font-weight: 700;
+    margin: 0;
+}
+
+.stats-subtext {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    margin-top: 0.25rem;
+}
+
+/* Avatar */
+.avatar-circle {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 1.1rem;
+}
+
+/* Quick Action Buttons */
+.action-btn {
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border-color);
+    border-radius: 0.75rem;
+    width: 100%;
+    color: var(--text-main);
+    text-decoration: none;
+    transition: all 0.2s;
+    text-align: left;
+}
+
+.action-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: var(--primary);
+    color: var(--text-main);
+}
+
+.action-icon {
+    font-size: 1.5rem;
+    margin-right: 1rem;
+}
+
+.action-text {
+    font-weight: 500;
+}
+
+/* Channel Integration Cards */
+.channel-card {
+    transition: transform 0.2s;
+}
+
+.channel-card:hover {
+    transform: translateY(-5px);
+}
+
+.platform-logo {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    background: #334155;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.platform-logo.whatsapp { background: #25D366; }
+.platform-logo.messenger { background: #0084FF; }
+.platform-logo.instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
+.platform-logo.sms { background: #F22F46; }
+.platform-logo.tiktok { background: #000000; }
+
+/* Responsive */
+@media (max-width: 992px) {
+    .app-sidebar {
+        width: 80px;
+    }
+    .app-sidebar .brand-name, 
+    .app-sidebar .sidebar-divider, 
+    .app-sidebar .nav-link span:not(.icon),
+    .app-sidebar .nav-channel,
+    .app-sidebar .sidebar-footer {
+        display: none;
+    }
+    .app-main {
+        margin-left: 80px;
+    }
+    .nav-link .icon {
+        margin-right: 0;
+        font-size: 1.5rem;
+    }
+}
\ No newline at end of file