diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..42c21e5
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,17 @@
+# Environment variables declared in this file are NOT automatically loaded by Prisma.
+# Please add `import "dotenv/config";` to your `prisma.config.ts` file, or use the Prisma CLI with Bun
+# to load environment variables from .env files: https://pris.ly/prisma-config-env-vars.
+
+# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
+# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
+
+# The following `prisma+postgres` URL is similar to the URL produced by running a local Prisma Postgres
+# server with the `prisma dev` CLI command, when not choosing any non-default ports or settings. The API key, unlike the
+# one found in a remote Prisma Postgres URL, does not contain any sensitive information.
+
+DATABASE_URL="postgresql://wyview:wyview@localhost:5432/wyview"
+
+NEXT_PUBLIC_PASSWORD=Azerty123
+NEXTAUTH_SECRET=secret
+NEXTAUTH_URL=http://localhost:3000
+AUTH_SECRET="openssl rand -base64 32"
\ No newline at end of file
diff --git a/app/finances/page.tsx b/app/finances/page.tsx
index 30db0bc..881e66f 100644
--- a/app/finances/page.tsx
+++ b/app/finances/page.tsx
@@ -1,9 +1,32 @@
+import StatCard from "@/components/StatCard";
+import { DollarSign } from "lucide-react";
+
 export default function FinancesPage() {
     return (
         <div>
-            <div className="text-[9px] font-mono tracking-[0.3em] text-[#4aff8c]/50 uppercase mb-1">Finances</div>
-            <h1 className="text-2xl font-black tracking-widest text-white uppercase mb-8">Finances</h1>
-            <p className="text-[#3a5a3a] font-mono text-sm">Données à venir...</p>
+            <div className="flex items-center gap-3 mb-8">
+                <div className="p-2 rounded-sm bg-yellow-500/10 border border-yellow-500/20">
+                    <DollarSign size={18} className="text-yellow-400" />
+                </div>
+                <div>
+                    <div className="text-[9px] font-mono tracking-[0.3em] text-yellow-400/50 uppercase mb-0.5">Revenus</div>
+                    <h1 className="text-2xl font-black tracking-widest text-white uppercase">Finances</h1>
+                </div>
+            </div>
+
+            <div className="grid grid-cols-2 xl:grid-cols-4 gap-4 mb-8">
+                <StatCard label="Revenus du mois" value="—" sub="Aucune donnée" accent="gold" />
+                <StatCard label="Revenus totaux" value="—" sub="Aucune donnée" accent="gold" />
+                <StatCard label="Donations" value="—" sub="Aucune donnée" accent="gold" />
+                <StatCard label="Abonnements" value="—" sub="Aucune donnée" accent="gold" />
+            </div>
+
+            <div className="bg-[#0d1210] border border-[#1a2a1a] rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]">
+                <DollarSign size={32} className="text-yellow-400/20" />
+                <p className="text-[#3a5a3a] font-mono text-xs tracking-widest text-center">
+                    AUCUNE DONNÉE FINANCIÈRE DISPONIBLE<br />POUR LE MOMENT
+                </p>
+            </div>
         </div>
     );
 }
diff --git a/app/instagram/page.tsx b/app/instagram/page.tsx
index d593a18..f7d9a2f 100644
--- a/app/instagram/page.tsx
+++ b/app/instagram/page.tsx
@@ -1,9 +1,33 @@
+
+import StatCard from "@/components/StatCard";
+import { Camera } from "lucide-react";
+
 export default function InstagramPage() {
     return (
         <div>
-            <div className="text-[9px] font-mono tracking-[0.3em] text-[#4aff8c]/50 uppercase mb-1">Instagram</div>
-            <h1 className="text-2xl font-black tracking-widest text-white uppercase mb-8">Instagram</h1>
-            <p className="text-[#3a5a3a] font-mono text-sm">Données à venir...</p>
+            <div className="flex items-center gap-3 mb-8">
+                <div className="p-2 rounded-sm bg-orange-500/10 border border-orange-500/20">
+                    <Camera size={18} className="text-orange-400" />
+                </div>
+                <div>
+                    <div className="text-[9px] font-mono tracking-[0.3em] text-orange-400/50 uppercase mb-0.5">Plateforme</div>
+                    <h1 className="text-2xl font-black tracking-widest text-white uppercase">Instagram</h1>
+                </div>
+            </div>
+
+            <div className="grid grid-cols-2 xl:grid-cols-4 gap-4 mb-8">
+                <StatCard label="Abonnés" value="—" sub="Aucune donnée" accent="gold" />
+                <StatCard label="Likes totaux" value="—" sub="Aucune donnée" accent="gold" />
+                <StatCard label="Posts publiés" value="—" sub="Aucune donnée" accent="gold" />
+                <StatCard label="Portée moy." value="—" sub="Aucune donnée" accent="gold" />
+            </div>
+
+            <div className="bg-[#0d1210] border border-[#1a2a1a] rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]">
+                <Camera size={32} className="text-orange-400/20" />
+                <p className="text-[#3a5a3a] font-mono text-xs tracking-widest text-center">
+                    CONNECTEZ VOTRE COMPTE INSTAGRAM<br />POUR AFFICHER VOS STATISTIQUES
+                </p>
+            </div>
         </div>
     );
 }
diff --git a/app/tiktok/page.tsx b/app/tiktok/page.tsx
index 403a501..e18329e 100644
--- a/app/tiktok/page.tsx
+++ b/app/tiktok/page.tsx
@@ -1,9 +1,33 @@
+
+import StatCard from "@/components/StatCard";
+import { Music2 } from "lucide-react";
+
 export default function TikTokPage() {
     return (
         <div>
-            <div className="text-[9px] font-mono tracking-[0.3em] text-[#4aff8c]/50 uppercase mb-1">TikTok</div>
-            <h1 className="text-2xl font-black tracking-widest text-white uppercase mb-8">TikTok</h1>
-            <p className="text-[#3a5a3a] font-mono text-sm">Données à venir...</p>
+            <div className="flex items-center gap-3 mb-8">
+                <div className="p-2 rounded-sm bg-pink-500/10 border border-pink-500/20">
+                    <Music2 size={18} className="text-pink-400" />
+                </div>
+                <div>
+                    <div className="text-[9px] font-mono tracking-[0.3em] text-pink-400/50 uppercase mb-0.5">Plateforme</div>
+                    <h1 className="text-2xl font-black tracking-widest text-white uppercase">TikTok</h1>
+                </div>
+            </div>
+
+            <div className="grid grid-cols-2 xl:grid-cols-4 gap-4 mb-8">
+                <StatCard label="Followers" value="—" sub="Aucune donnée" accent="red" />
+                <StatCard label="Likes totaux" value="—" sub="Aucune donnée" accent="red" />
+                <StatCard label="Vues totales" value="—" sub="Aucune donnée" accent="red" />
+                <StatCard label="Vidéos publiées" value="—" sub="Aucune donnée" accent="red" />
+            </div>
+
+            <div className="bg-[#0d1210] border border-[#1a2a1a] rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]">
+                <Music2 size={32} className="text-pink-400/20" />
+                <p className="text-[#3a5a3a] font-mono text-xs tracking-widest text-center">
+                    CONNECTEZ VOTRE COMPTE TIKTOK<br />POUR AFFICHER VOS STATISTIQUES
+                </p>
+            </div>
         </div>
     );
 }
diff --git a/app/twitch/page.tsx b/app/twitch/page.tsx
index c4bbc4f..f826bec 100644
--- a/app/twitch/page.tsx
+++ b/app/twitch/page.tsx
@@ -1,9 +1,32 @@
+import StatCard from "@/components/StatCard";
+import { TwitchIcon } from "lucide-react";
+
 export default function TwitchPage() {
     return (
         <div>
-            <div className="text-[9px] font-mono tracking-[0.3em] text-[#4aff8c]/50 uppercase mb-1">Twitch</div>
-            <h1 className="text-2xl font-black tracking-widest text-white uppercase mb-8">Twitch</h1>
-            <p className="text-[#3a5a3a] font-mono text-sm">Données à venir...</p>
+            <div className="flex items-center gap-3 mb-8">
+                <div className="p-2 rounded-sm bg-purple-500/10 border border-purple-500/20">
+                    <TwitchIcon size={18} className="text-purple-400" />
+                </div>
+                <div>
+                    <div className="text-[9px] font-mono tracking-[0.3em] text-purple-400/50 uppercase mb-0.5">Plateforme</div>
+                    <h1 className="text-2xl font-black tracking-widest text-white uppercase">Twitch</h1>
+                </div>
+            </div>
+
+            <div className="grid grid-cols-2 xl:grid-cols-4 gap-4 mb-8">
+                <StatCard label="Followers" value="—" sub="Aucune donnée" accent="purple" />
+                <StatCard label="Viewers moy." value="—" sub="Aucune donnée" accent="purple" />
+                <StatCard label="Heures streamées" value="—" sub="Aucune donnée" accent="purple" />
+                <StatCard label="Abonnés actifs" value="—" sub="Aucune donnée" accent="purple" />
+            </div>
+
+            <div className="bg-[#0d1210] border border-[#1a2a1a] rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]">
+                <TwitchIcon size={32} className="text-purple-400/20" />
+                <p className="text-[#3a5a3a] font-mono text-xs tracking-widest text-center">
+                    CONNECTEZ VOTRE COMPTE TWITCH<br />POUR AFFICHER VOS STATISTIQUES
+                </p>
+            </div>
         </div>
     );
 }
diff --git a/app/youtube/page.tsx b/app/youtube/page.tsx
index f40a3c0..e4d7f8d 100644
--- a/app/youtube/page.tsx
+++ b/app/youtube/page.tsx
@@ -1,9 +1,32 @@
-export default function YouTubePage() {
+import StatCard from "@/components/StatCard";
+import { YoutubeIcon } from "lucide-react";
+
+export default function YoutubePage() {
     return (
         <div>
-            <div className="text-[9px] font-mono tracking-[0.3em] text-[#4aff8c]/50 uppercase mb-1">YouTube</div>
-            <h1 className="text-2xl font-black tracking-widest text-white uppercase mb-8">YouTube</h1>
-            <p className="text-[#3a5a3a] font-mono text-sm">Données à venir...</p>
+            <div className="flex items-center gap-3 mb-8">
+                <div className="p-2 rounded-sm bg-red-500/10 border border-red-500/20">
+                    <YoutubeIcon size={18} className="text-red-400" />
+                </div>
+                <div>
+                    <div className="text-[9px] font-mono tracking-[0.3em] text-red-400/50 uppercase mb-0.5">Plateforme</div>
+                    <h1 className="text-2xl font-black tracking-widest text-white uppercase">YouTube</h1>
+                </div>
+            </div>
+
+            <div className="grid grid-cols-2 xl:grid-cols-4 gap-4 mb-8">
+                <StatCard label="Abonnés" value="—" sub="Aucune donnée" accent="red" />
+                <StatCard label="Vues totales" value="—" sub="Aucune donnée" accent="red" />
+                <StatCard label="Vidéos publiées" value="—" sub="Aucune donnée" accent="red" />
+                <StatCard label="Watch time (h)" value="—" sub="Aucune donnée" accent="red" />
+            </div>
+
+            <div className="bg-[#0d1210] border border-[#1a2a1a] rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]">
+                <YoutubeIcon size={32} className="text-red-400/20" />
+                <p className="text-[#3a5a3a] font-mono text-xs tracking-widest text-center">
+                    CONNECTEZ VOTRE COMPTE YOUTUBE<br />POUR AFFICHER VOS STATISTIQUES
+                </p>
+            </div>
         </div>
     );
 }