diff --git a/attached_assets/CleanShot_2025-12-23_at_22.01.28@2x_1766480562002.png b/attached_assets/CleanShot_2025-12-23_at_22.01.28@2x_1766480562002.png
new file mode 100644
index 0000000..df00ff7
Binary files /dev/null and b/attached_assets/CleanShot_2025-12-23_at_22.01.28@2x_1766480562002.png differ
diff --git a/client/src/components/ideas-list.tsx b/client/src/components/ideas-list.tsx
new file mode 100644
index 0000000..4ca758a
--- /dev/null
+++ b/client/src/components/ideas-list.tsx
@@ -0,0 +1,131 @@
+import { motion } from "framer-motion";
+import { TrendingUp, Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { IdeaResponse } from "@shared/schema";
+import { useTranslation } from "react-i18next";
+import { cn } from "@/lib/utils";
+
+interface IdeasListProps {
+  ideas: IdeaResponse[];
+  onVote: (ideaId: number) => void;
+  isVoting: { [key: number]: boolean };
+  votedIdeas: Set<number>;
+  user: any;
+  startRank?: number;
+}
+
+export function IdeasList({ 
+  ideas, 
+  onVote, 
+  isVoting, 
+  votedIdeas, 
+  user,
+  startRank = 4
+}: IdeasListProps) {
+  const { t } = useTranslation();
+  
+  if (ideas.length === 0) {
+    return null;
+  }
+
+  const handleVoteClick = (ideaId: number) => {
+    if (!user) {
+      localStorage.setItem("redirectAfterAuth", window.location.pathname);
+      window.location.href = "/auth";
+      return;
+    }
+    
+    if (!votedIdeas.has(ideaId) && !isVoting[ideaId]) {
+      onVote(ideaId);
+    }
+  };
+
+  const getBorderAccent = (rank: number) => {
+    if (rank <= 10) return "border-l-amber-400";
+    if (rank <= 20) return "border-l-blue-400";
+    return "border-l-gray-300 dark:border-l-gray-600";
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5, delay: 0.2 }}
+    >
+      <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-6">
+        {t("ideas.allIdeas", "Todas las Ideas")}
+      </h2>
+
+      <div className="space-y-3">
+        {ideas.map((idea, index) => {
+          const rank = startRank + index;
+          const hasVoted = votedIdeas.has(idea.id);
+          const voting = isVoting[idea.id];
+
+          return (
+            <motion.div
+              key={idea.id}
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: index * 0.05 }}
+              whileHover={{ x: 4, transition: { duration: 0.2 } }}
+              className={cn(
+                "relative bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700",
+                "border-l-4 p-4 transition-shadow hover:shadow-md dark:hover:shadow-gray-800/50",
+                getBorderAccent(rank)
+              )}
+              data-testid={`card-idea-list-${idea.id}`}
+            >
+              <div className="flex items-start gap-4">
+                <div className="flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-800 font-bold text-gray-600 dark:text-gray-400 text-sm">
+                  #{rank}
+                </div>
+
+                <div className="flex-1 min-w-0">
+                  <h3 className="font-semibold text-gray-900 dark:text-white text-sm line-clamp-1 mb-1">
+                    {idea.title}
+                  </h3>
+                  <p className="text-xs text-gray-600 dark:text-gray-400 line-clamp-2 leading-relaxed">
+                    {idea.description}
+                  </p>
+                </div>
+
+                <div className="flex-shrink-0 flex items-center gap-3">
+                  <div className="flex items-center gap-1 text-green-600 dark:text-green-400 font-semibold text-sm">
+                    <TrendingUp className="w-4 h-4" />
+                    {idea.votes}
+                  </div>
+
+                  <Button
+                    onClick={() => handleVoteClick(idea.id)}
+                    disabled={hasVoted || voting}
+                    variant="outline"
+                    size="sm"
+                    className={cn(
+                      "flex items-center gap-1.5 border-2 font-medium transition-all text-xs px-3",
+                      hasVoted 
+                        ? "bg-green-50 dark:bg-green-900/20 border-green-500 text-green-600 dark:text-green-400" 
+                        : "border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800"
+                    )}
+                    data-testid={`button-vote-list-${idea.id}`}
+                  >
+                    {voting ? (
+                      <Loader2 className="w-3 h-3 animate-spin" />
+                    ) : hasVoted ? (
+                      t("common.voted", "Votado")
+                    ) : (
+                      <>
+                        <TrendingUp className="w-3 h-3" />
+                        {t("common.vote", "Votar")}
+                      </>
+                    )}
+                  </Button>
+                </div>
+              </div>
+            </motion.div>
+          );
+        })}
+      </div>
+    </motion.div>
+  );
+}
diff --git a/client/src/components/top3-cards.tsx b/client/src/components/top3-cards.tsx
new file mode 100644
index 0000000..81cb049
--- /dev/null
+++ b/client/src/components/top3-cards.tsx
@@ -0,0 +1,165 @@
+import { motion } from "framer-motion";
+import { Trophy, TrendingUp } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { IdeaResponse } from "@shared/schema";
+import { useTranslation } from "react-i18next";
+import { cn } from "@/lib/utils";
+
+interface Top3CardsProps {
+  ideas: IdeaResponse[];
+  onVote: (ideaId: number) => void;
+  isVoting: { [key: number]: boolean };
+  votedIdeas: Set<number>;
+  user: any;
+}
+
+export function Top3Cards({ 
+  ideas, 
+  onVote, 
+  isVoting, 
+  votedIdeas, 
+  user 
+}: Top3CardsProps) {
+  const { t } = useTranslation();
+  
+  const top3Ideas = ideas.slice(0, 3);
+  
+  if (top3Ideas.length === 0) {
+    return null;
+  }
+
+  const getBorderColor = (rank: number) => {
+    switch(rank) {
+      case 1: return "from-yellow-400 via-amber-400 to-yellow-500";
+      case 2: return "from-blue-400 via-cyan-400 to-blue-500";
+      case 3: return "from-orange-400 via-amber-500 to-orange-500";
+      default: return "from-gray-300 to-gray-400";
+    }
+  };
+
+  const getBadgeColor = (rank: number) => {
+    switch(rank) {
+      case 1: return "bg-gradient-to-r from-yellow-400 to-amber-500 text-yellow-900";
+      case 2: return "bg-gradient-to-r from-blue-400 to-cyan-500 text-blue-900";
+      case 3: return "bg-gradient-to-r from-orange-400 to-amber-500 text-orange-900";
+      default: return "bg-gray-200 text-gray-700";
+    }
+  };
+
+  const handleVoteClick = (ideaId: number) => {
+    if (!user) {
+      localStorage.setItem("redirectAfterAuth", window.location.pathname);
+      window.location.href = "/auth";
+      return;
+    }
+    
+    if (!votedIdeas.has(ideaId) && !isVoting[ideaId]) {
+      onVote(ideaId);
+    }
+  };
+
+  return (
+    <motion.div
+      className="mb-10"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+      <div className="flex items-center gap-2 mb-6">
+        <Trophy className="w-6 h-6 text-primary" />
+        <h2 className="text-xl font-bold text-gray-900 dark:text-white">
+          Top 3 Ideas
+        </h2>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {top3Ideas.map((idea, index) => {
+          const rank = index + 1;
+          const hasVoted = votedIdeas.has(idea.id);
+          const voting = isVoting[idea.id];
+
+          return (
+            <motion.div
+              key={idea.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.1 }}
+              whileHover={{ y: -4, transition: { duration: 0.2 } }}
+              className="relative"
+              data-testid={`card-idea-${idea.id}`}
+            >
+              <div className={cn(
+                "absolute inset-0 rounded-xl bg-gradient-to-br p-[2px]",
+                getBorderColor(rank)
+              )}>
+                <div className="h-full w-full rounded-xl bg-white dark:bg-gray-900" />
+              </div>
+
+              <div className="relative p-5 h-full flex flex-col min-h-[200px]">
+                <div className="flex items-start justify-between mb-3">
+                  <div className={cn(
+                    "flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-bold",
+                    getBadgeColor(rank)
+                  )}>
+                    <Trophy className="w-3 h-3" />
+                    #{rank}
+                  </div>
+
+                  <div className="flex items-center gap-1 text-green-600 dark:text-green-400 font-semibold text-sm">
+                    <TrendingUp className="w-4 h-4" />
+                    {idea.votes}
+                  </div>
+                </div>
+
+                <div className="flex-1 mb-4">
+                  <h3 className="font-bold text-gray-900 dark:text-white text-base leading-tight mb-2 line-clamp-2">
+                    {idea.title}
+                  </h3>
+                  <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-3 leading-relaxed">
+                    {idea.description}
+                  </p>
+                </div>
+
+                <div className="flex items-center justify-between mt-auto">
+                  {idea.suggestedBy && (
+                    <span className="text-xs text-gray-500 dark:text-gray-400">
+                      {t("ideas.by", "Por")} {idea.suggestedBy}
+                    </span>
+                  )}
+                  <Button
+                    onClick={() => handleVoteClick(idea.id)}
+                    disabled={hasVoted || voting}
+                    variant="outline"
+                    size="sm"
+                    className={cn(
+                      "ml-auto flex items-center gap-1.5 border-2 font-medium transition-all",
+                      hasVoted 
+                        ? "bg-green-50 dark:bg-green-900/20 border-green-500 text-green-600 dark:text-green-400" 
+                        : "border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800"
+                    )}
+                    data-testid={`button-vote-${idea.id}`}
+                  >
+                    {voting ? (
+                      <motion.div
+                        animate={{ rotate: 360 }}
+                        transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+                        className="w-3 h-3 border-2 border-current border-t-transparent rounded-full"
+                      />
+                    ) : hasVoted ? (
+                      t("common.voted", "Votado")
+                    ) : (
+                      <>
+                        <TrendingUp className="w-3.5 h-3.5" />
+                        {t("common.vote", "Votar")}
+                      </>
+                    )}
+                  </Button>
+                </div>
+              </div>
+            </motion.div>
+          );
+        })}
+      </div>
+    </motion.div>
+  );
+}
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index b934146..b5a44f9 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -399,7 +399,10 @@
     "loadError": "Failed to load ideas",
     "analyzed": "Analyzed",
     "activeIdeas": "Active Ideas",
-    "totalVotes": "Total Votes"
+    "totalVotes": "Total Votes",
+    "allIdeas": "All Ideas",
+    "by": "By",
+    "empty": "No ideas yet"
   },
   "priority": {
     "hybridScore": "Priority score (combines votes + YouTube opportunity)",
@@ -897,7 +900,9 @@
     "watchDemo": "▶ Watch Demo"
   },
   "suggest": {
-    "idea": "Suggest Idea"
+    "idea": "Suggest Idea",
+    "notFound": "Didn't find what you were looking for?",
+    "helpCreator": "Help {{creator}} by suggesting an idea"
   },
   "redemptions": {
     "short": "Redemptions",
diff --git a/client/src/locales/es/translation.json b/client/src/locales/es/translation.json
index fde8814..7609c5e 100644
--- a/client/src/locales/es/translation.json
+++ b/client/src/locales/es/translation.json
@@ -401,7 +401,10 @@
     "loadError": "Error al cargar ideas",
     "analyzed": "Analizado",
     "activeIdeas": "Ideas Activas",
-    "totalVotes": "Votos Totales"
+    "totalVotes": "Votos Totales",
+    "allIdeas": "Todas las Ideas",
+    "by": "Por",
+    "empty": "Aún no hay ideas"
   },
   "priority": {
     "hybridScore": "Puntuación de prioridad (combina votos + oportunidad YouTube)",
@@ -896,7 +899,9 @@
     "watchDemo": "▶ Ver Demo"
   },
   "suggest": {
-    "idea": "Sugerir Idea"
+    "idea": "Sugerir Idea",
+    "notFound": "¿No encontraste lo que buscabas?",
+    "helpCreator": "Ayuda a {{creator}} sugiriendo una idea"
   },
   "errors": {
     "notEnoughPoints": "No tienes suficientes puntos para enviar una sugerencia",
diff --git a/client/src/pages/modern-public-profile.tsx b/client/src/pages/modern-public-profile.tsx
index 7971174..49e2d14 100644
--- a/client/src/pages/modern-public-profile.tsx
+++ b/client/src/pages/modern-public-profile.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import { useParams, useLocation } from "wouter";
 import { useQuery } from "@tanstack/react-query";
 import { motion, AnimatePresence } from "framer-motion";
@@ -9,30 +9,27 @@ import { IdeaResponse } from "@shared/schema";
 import { apiRequest, queryClient } from "@/lib/queryClient";
 import {
   Loader2,
-  Share2,
   ExternalLink,
   Twitter,
   Instagram,
   Youtube,
   Globe,
-  UserPlus,
   ArrowLeft,
+  Lightbulb,
+  Coins,
+  UserPlus,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { ThemeToggle } from "@/components/theme-toggle";
-import { LanguageToggle } from "@/components/language-toggle";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { ModernSidebar } from "@/components/modern-sidebar";
 import { MobileBottomNav } from "@/components/mobile-bottom-nav";
-import { CompactIdeaCard } from "@/components/compact-idea-card";
 import SuggestIdeaModal from "@/components/suggest-idea-modal";
 import AudienceStats from "@/components/audience-stats";
 import { PublicStore } from "@/components/public-store";
-import { UserIndicator } from "@/components/user-indicator";
 import { MobileMenu } from "@/components/mobile-menu";
-import { Top3Podium } from "@/components/top3-podium";
+import { Top3Cards } from "@/components/top3-cards";
+import { IdeasList } from "@/components/ideas-list";
 import { LeaderboardSkeleton } from "@/components/leaderboard-skeleton";
 import { FaTiktok } from "react-icons/fa";
 import { FaThreads } from "react-icons/fa6";
@@ -72,10 +69,8 @@ export default function ModernPublicProfile() {
       enabled: !!username,
     });
 
-  // Check if current user is the profile owner
   const isOwnProfile = user?.username === username;
 
-  // Query user points for this specific creator
   const { data: userPoints } = useQuery<{ totalPoints: number }>({
     queryKey: [`/api/user/points/${data?.creator?.id}`],
     enabled: !!user && !isOwnProfile && !!data?.creator?.id,
@@ -93,7 +88,6 @@ export default function ModernPublicProfile() {
     }
   }, [error, navigate, toast]);
 
-  // Load voted ideas from localStorage only for authenticated users
   useEffect(() => {
     if (user) {
       const userKey = `votedIdeas_${user.id}`;
@@ -106,7 +100,6 @@ export default function ModernPublicProfile() {
     }
   }, [user]);
 
-  // Check vote status for all ideas when data loads
   useEffect(() => {
     if (!data?.ideas || !user) {
       setVotedIdeas(new Set());
@@ -155,7 +148,6 @@ export default function ModernPublicProfile() {
         method: "POST",
       });
 
-      // Update localStorage using the fresh state to avoid race condition
       const userKey = `votedIdeas_${user.id}`;
       const updatedVotedIdeas = Array.from(new Set([...Array.from(votedIdeas), ideaId]));
       localStorage.setItem(userKey, JSON.stringify(updatedVotedIdeas));
@@ -167,7 +159,6 @@ export default function ModernPublicProfile() {
         description: t("vote.successDesc"),
       });
 
-      // Invalidate points for this specific creator
       if (data?.creator?.id) {
         queryClient.invalidateQueries({ queryKey: [`/api/user/points/${data.creator.id}`] });
       }
@@ -216,7 +207,7 @@ export default function ModernPublicProfile() {
 
   if (isLoading) {
     return (
-      <div className="flex items-center justify-center min-h-screen bg-[#FFF9F5] dark:bg-gray-900">
+      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
         <Loader2 className="h-8 w-8 animate-spin text-primary" />
       </div>
     );
@@ -224,7 +215,7 @@ export default function ModernPublicProfile() {
 
   if (!data) {
     return (
-      <div className="flex items-center justify-center min-h-screen">
+      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
         <div className="text-center">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
             {t("profile.notFound")}
@@ -248,215 +239,130 @@ export default function ModernPublicProfile() {
     { platform: "website", url: creator.websiteUrl },
   ].filter(link => link.url);
 
-  const renderProfileSection = () => (
-    <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      className="space-y-6"
-    >
-      {/* Creator Info Card */}
-      <div className="bg-white/90 dark:bg-gray-900/90 backdrop-blur-xl rounded-md border border-gray-200/50 dark:border-gray-700/50 overflow-hidden shadow-xl shadow-gray-200/50 dark:shadow-gray-800/50">
-        <div className="p-8">
-          <div className="flex flex-col lg:flex-row lg:items-center gap-6">
-            {/* Avatar */}
-            <motion.div
-              whileHover={{ scale: 1.05 }}
-              className="flex-shrink-0"
-            >
-              <Avatar className="w-24 h-24 border-4 border-white shadow-xl">
-                <AvatarImage src={creator.logoUrl || ""} alt={creator.username} />
-                <AvatarFallback className="text-2xl font-bold bg-primary text-white">
-                  {creator.username.charAt(0).toUpperCase()}
-                </AvatarFallback>
-              </Avatar>
-            </motion.div>
-
-            {/* Info */}
-            <div className="flex-1 min-w-0">
-              <h1 className="text-3xl font-bold bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-300 bg-clip-text text-transparent mb-2">
-                {creator.username}
-              </h1>
-              {creator.profileDescription && (
-                <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">
-                  {creator.profileDescription}
-                </p>
-              )}
-
-              {/* Social Links */}
-              {socialLinks.length > 0 && (
-                <div className="flex flex-wrap gap-2">
-                  {socialLinks.map((link) => (
-                    <motion.a
-                      key={link.platform}
-                      href={formatSocialUrl(link.url!, link.platform)}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-800 rounded-md text-sm text-gray-600 dark:text-gray-400 hover:bg-primary/10 hover:text-primary dark:hover:bg-primary/20 dark:hover:text-primary transition-colors"
-                      whileHover={{ scale: 1.05 }}
-                      whileTap={{ scale: 0.95 }}
-                    >
-                      {getSocialIcon(link.platform)}
-                      <span className="capitalize">{link.platform}</span>
-                    </motion.a>
-                  ))}
-                </div>
-              )}
-            </div>
-
-            {/* Action Button */}
-            {!isOwnProfile && user && (
-              <motion.div
-                initial={{ opacity: 0, x: 20 }}
-                animate={{ opacity: 1, x: 0 }}
-                className="flex-shrink-0"
-              >
-                <Button
-                  onClick={() => setSuggestDialogOpen(true)}
-                  disabled={!userPoints || userPoints.totalPoints < 3}
-                  className="bg-primary hover:bg-primary/90 text-white shadow-lg"
-                >
-                  <UserPlus className="h-4 w-4 mr-2" />
-                  {t("suggest.idea")}
-                </Button>
-              </motion.div>
-            )}
-          </div>
-        </div>
-      </div>
-    </motion.div>
-  );
-
   const renderIdeasSection = () => {
     if (isLoading) {
       return <LeaderboardSkeleton />;
     }
 
     return (
-    <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      className="space-y-6"
-    >
-      {/* Creator Profile Info */}
-      <div className="bg-white/90 dark:bg-gray-900/90 backdrop-blur-xl rounded-md border border-gray-200/50 dark:border-gray-700/50 overflow-hidden shadow-xl shadow-gray-200/50 dark:shadow-gray-800/50">
-        <div className="p-6">
-          <div className="flex flex-col sm:flex-row sm:items-center gap-4">
-            {/* Avatar */}
-            <motion.div
-              whileHover={{ scale: 1.05 }}
-              className="flex-shrink-0"
-            >
-              <Avatar className="w-16 h-16 border-2 border-gray-100 shadow-lg">
-                <AvatarImage src={creator.logoUrl || ""} alt={creator.username} />
-                <AvatarFallback className="text-xl font-bold bg-primary text-white">
-                  {creator.username.charAt(0).toUpperCase()}
-                </AvatarFallback>
-              </Avatar>
-            </motion.div>
-
-            {/* Info */}
-            <div className="flex-1 min-w-0">
-              <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
-                {creator.username}
-              </h1>
-              {creator.profileDescription && (
-                <p className="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-3">
-                  {creator.profileDescription}
-                </p>
-              )}
-
-              {/* Social Links */}
-              {socialLinks.length > 0 && (
-                <div className="flex flex-wrap gap-2">
-                  {socialLinks.map((link) => (
-                    <motion.a
-                      key={link.platform}
-                      href={formatSocialUrl(link.url!, link.platform)}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex items-center gap-1.5 px-2.5 py-1 bg-gray-100 dark:bg-gray-800 rounded-md text-xs text-gray-600 dark:text-gray-400 hover:bg-primary/10 hover:text-primary dark:hover:bg-primary/20 dark:hover:text-primary transition-colors"
-                      whileHover={{ scale: 1.05 }}
-                      whileTap={{ scale: 0.95 }}
-                    >
-                      {getSocialIcon(link.platform)}
-                      <span className="capitalize">{link.platform}</span>
-                    </motion.a>
-                  ))}
-                </div>
-              )}
-            </div>
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="space-y-8"
+      >
+        <div className="mb-8">
+          <motion.div 
+            className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 shadow-sm"
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+          >
+            <div className="flex flex-col sm:flex-row sm:items-start gap-4">
+              <motion.div
+                whileHover={{ scale: 1.05 }}
+                className="flex-shrink-0"
+              >
+                <Avatar className="w-16 h-16 border-2 border-gray-100 dark:border-gray-800 shadow-md">
+                  <AvatarImage src={creator.logoUrl || ""} alt={creator.username} />
+                  <AvatarFallback className="text-xl font-bold bg-primary text-white">
+                    {creator.username.charAt(0).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+              </motion.div>
 
-          </div>
+              <div className="flex-1 min-w-0">
+                <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
+                  {creator.username}
+                </h2>
+                {creator.profileDescription && (
+                  <p className="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-4">
+                    {creator.profileDescription}
+                  </p>
+                )}
+
+                {socialLinks.length > 0 && (
+                  <div className="flex flex-wrap gap-2">
+                    {socialLinks.map((link) => (
+                      <motion.a
+                        key={link.platform}
+                        href={formatSocialUrl(link.url!, link.platform)}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center gap-1.5 px-3 py-1.5 bg-gray-100 dark:bg-gray-800 rounded-full text-xs font-medium text-gray-600 dark:text-gray-400 hover:bg-primary/10 hover:text-primary dark:hover:bg-primary/20 dark:hover:text-primary transition-colors"
+                        whileHover={{ scale: 1.05 }}
+                        whileTap={{ scale: 0.95 }}
+                        data-testid={`link-social-${link.platform}`}
+                      >
+                        {getSocialIcon(link.platform)}
+                        <span className="capitalize">{link.platform}</span>
+                      </motion.a>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          </motion.div>
         </div>
-      </div>
 
-      {/* Ideas Section Header */}
-      <div className="flex items-center justify-between">
-        <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
-          {t("ideas.title")}
-        </h2>
-        <Badge variant="secondary" className="bg-primary/10 text-primary">
-          {ideas.length} {t("ideas.total")}
-        </Badge>
-      </div>
+        {ideas.length === 0 ? (
+          <div className="text-center py-16">
+            <Lightbulb className="h-12 w-12 mx-auto text-gray-300 dark:text-gray-600 mb-4" />
+            <p className="text-gray-500 dark:text-gray-400 text-lg">
+              {t("ideas.empty")}
+            </p>
+          </div>
+        ) : (
+          <>
+            <Top3Cards
+              ideas={ideas.slice(0, 3)}
+              onVote={handleVote}
+              isVoting={isVoting}
+              votedIdeas={votedIdeas}
+              user={user && !isOwnProfile ? user : null}
+            />
 
-      {ideas.length === 0 ? (
-        <div className="text-center py-12">
-          <p className="text-gray-500 dark:text-gray-400">
-            {t("ideas.empty")}
-          </p>
-        </div>
-      ) : (
-        <>
-          {/* Top 3 Podium */}
-          {ideas.length > 0 && (
-            <div className="mb-8">
-              <Top3Podium
-                ideas={ideas.slice(0, 3)}
+            {ideas.length > 3 && (
+              <IdeasList
+                ideas={ideas.slice(3)}
                 onVote={handleVote}
-                user={user && !isOwnProfile ? user : null}
-                votedIdeas={votedIdeas}
                 isVoting={isVoting}
-                successVote={null}
+                votedIdeas={votedIdeas}
+                user={user && !isOwnProfile ? user : null}
+                startRank={4}
               />
-            </div>
-          )}
-
-          {/* Other Ideas */}
-          {ideas.length > 3 && (
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.3 }}
-              className="space-y-4"
-            >
-              <div className="text-center mb-6">
-                <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">
-                  {t("leaderboard.otherIdeas")}
+            )}
+
+            {/* CTA to suggest idea at the end of the list */}
+            {user && !isOwnProfile && (
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.2 }}
+                className="mt-8 text-center py-8 px-4 bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800"
+              >
+                <Lightbulb className="h-10 w-10 mx-auto text-primary mb-3" />
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                  {t("suggest.notFound", "¿No encontraste lo que buscabas?")}
                 </h3>
-                <p className="text-gray-600 dark:text-gray-400 text-sm">
-                  {t("leaderboard.otherIdeasDesc")}
+                <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+                  {t("suggest.helpCreator", "Ayuda a {{creator}} sugiriendo una idea", { creator: creator.username })}
                 </p>
-              </div>
-              
-              <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-                {ideas.slice(3).map((idea, index) => (
-                  <CompactIdeaCard
-                    key={idea.id}
-                    rank={index + 4}
-                    idea={idea}
-                    isVoting={isVoting[idea.id]}
-                    isVoted={votedIdeas.has(idea.id)}
-                    onVote={handleVote}
-                    isLoggedIn={!!user && !isOwnProfile}
-                  />
-                ))}
-              </div>
-            </motion.div>
-          )}
-        </>
-      )}
-    </motion.div>
+                <Button
+                  onClick={() => setSuggestDialogOpen(true)}
+                  disabled={!userPoints || userPoints.totalPoints < 3}
+                  className="bg-primary hover:bg-primary/90 text-white"
+                  data-testid="button-suggest-bottom"
+                >
+                  <UserPlus className="h-4 w-4 mr-2" />
+                  {t("suggest.idea", "Sugerir Idea")}
+                  <span className="ml-2 text-xs opacity-80">
+                    (3 {t("common.points", "puntos")})
+                  </span>
+                </Button>
+              </motion.div>
+            )}
+          </>
+        )}
+      </motion.div>
     );
   };
 
@@ -491,22 +397,32 @@ export default function ModernPublicProfile() {
   };
 
   return (
-    <div className="min-h-screen bg-[#FFF9F5] dark:from-gray-900 dark:via-gray-900 dark:to-gray-900">
-      {/* Desktop User Indicator */}
-      <div className="hidden lg:block fixed top-4 right-4 z-50">
-        <UserIndicator user={user} variant="desktop" />
-      </div>
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      {user && !isOwnProfile && (
+        <div className="hidden lg:flex fixed top-4 right-4 z-50 items-center gap-2 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-full px-4 py-2 shadow-md">
+          <Coins className="w-5 h-5 text-primary" />
+          <span className="font-semibold text-gray-900 dark:text-white" data-testid="text-points-desktop">
+            {userPoints?.totalPoints ?? 0}
+          </span>
+        </div>
+      )}
 
-      {/* Mobile Header */}
-      <div className="lg:hidden fixed top-0 left-0 right-0 z-40 bg-white/90 dark:bg-gray-900/90 backdrop-blur-xl border-b border-gray-200/50 dark:border-gray-700/50">
-        <div className="flex items-center justify-between h-16 px-4">
-          <div className="flex items-center gap-3">
+      <div className="lg:hidden fixed top-0 left-0 right-0 z-40 bg-white/95 dark:bg-gray-900/95 backdrop-blur-lg border-b border-gray-200 dark:border-gray-800">
+        <div className="flex items-center justify-between h-14 px-4">
+          <div className="flex items-center gap-2">
             <h1 className="text-lg font-bold text-gray-900 dark:text-white">
               Fanlist
             </h1>
           </div>
-          <div className="flex items-center gap-2">
-            {user && <UserIndicator user={user} variant="mobile" />}
+          <div className="flex items-center gap-3">
+            {user && !isOwnProfile && (
+              <div className="flex items-center gap-1.5 bg-gray-100 dark:bg-gray-800 rounded-full px-3 py-1.5">
+                <Coins className="w-4 h-4 text-primary" />
+                <span className="font-semibold text-sm text-gray-900 dark:text-white" data-testid="text-points-mobile">
+                  {userPoints?.totalPoints ?? 0}
+                </span>
+              </div>
+            )}
             <MobileMenu 
               username={user?.username}
               isCreatorProfile={false}
@@ -515,11 +431,8 @@ export default function ModernPublicProfile() {
           </div>
         </div>
       </div>
-      
 
-      {/* Main Layout */}
-      <div className="flex lg:pt-0 pt-16">
-        {/* Desktop Sidebar */}
+      <div className="flex lg:pt-0 pt-14">
         <div className="hidden lg:block">
           <ModernSidebar
             activeSection={activeSection}
@@ -532,12 +445,11 @@ export default function ModernPublicProfile() {
           />
         </div>
 
-        {/* Main Content */}
         <main className={cn(
-          "flex-1 p-6 transition-all duration-300",
+          "flex-1 p-4 md:p-6 transition-all duration-300",
           "lg:ml-64 mb-20 lg:mb-0"
         )}>
-          <div className="max-w-6xl mx-auto">
+          <div className="max-w-5xl mx-auto">
             <AnimatePresence mode="wait">
               <motion.div
                 key={activeSection}
@@ -553,7 +465,6 @@ export default function ModernPublicProfile() {
         </main>
       </div>
 
-      {/* Mobile Bottom Navigation */}
       <div className="lg:hidden">
         <MobileBottomNav
           activeSection={activeSection}
@@ -561,7 +472,6 @@ export default function ModernPublicProfile() {
         />
       </div>
 
-      {/* Suggest Idea Modal */}
       <SuggestIdeaModal
         username={creator.username}
         open={suggestDialogOpen}
@@ -573,4 +483,4 @@ export default function ModernPublicProfile() {
       />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/replit.md b/replit.md
index ca9185e..059fedd 100644
--- a/replit.md
+++ b/replit.md
@@ -5,6 +5,17 @@ Fanlist is a web application designed to empower content creators by enabling th
 
 ## Recent Changes
 
+### December 23, 2025 - Public Profile Redesign
+- **New Layout**: Redesigned public profile page with modern card-based layout inspired by reference design.
+- **Greeting Header**: Added personalized "Hello/Hola USERNAME" greeting at the top of the page.
+- **Top3Cards Component**: New component displaying top 3 ideas with gradient borders (gold for #1, blue for #2, orange for #3).
+- **IdeasList Component**: Clean list view for remaining ideas with left border accent and minimal styling.
+- **Outline Vote Buttons**: Vote buttons now use outline style with dark borders instead of filled backgrounds.
+- **Creator Info Card**: Reorganized creator section with avatar, name, description, and social links in a clean card.
+- **Theme Support**: Full dark/light theme support with bg-gray-50/bg-gray-950 backgrounds.
+- **Internationalization**: Added translations for "allIdeas", "by", and "empty" in both English and Spanish.
+- **Responsive Design**: Layout adapts well to mobile and desktop with consistent styling.
+
 ### November 7, 2025 - Idea Completion and Archival System
 - **Dual-Action Management**: Implemented both "Complete" and "Delete" actions for ideas, allowing creators to archive finished ideas separately from permanent deletion.
 - **Schema Enhancement**: Added 'completed' status to ideas alongside existing 'approved' and 'pending' statuses.