diff --git a/src/components/content/dropdowns/ContentDropdownItem.js b/src/components/content/dropdowns/ContentDropdownItem.js
index da6ed84..0ad37a1 100644
--- a/src/components/content/dropdowns/ContentDropdownItem.js
+++ b/src/components/content/dropdowns/ContentDropdownItem.js
@@ -15,67 +15,79 @@ const ContentDropdownItem = ({ content, onSelect }) => {
 
     return (
         <div 
-            className="px-6 py-6 border-b border-gray-700 cursor-pointer" 
+            className="group px-6 py-5 border-b border-gray-700/50 cursor-pointer hover:bg-gray-800/30 transition-colors duration-200" 
             onClick={() => onSelect(content)}
         >
-            <div className={`flex ${isMobile ? 'flex-col' : 'flex-row'} gap-4`}>
-                <div className={`relative ${isMobile ? 'w-full h-40' : 'w-[160px] h-[90px]'} flex-shrink-0 overflow-hidden rounded-md`}>
+            <div className={`flex ${isMobile ? 'flex-col' : 'flex-row'} gap-5`}>
+                <div className={`relative ${isMobile ? 'w-full h-40' : 'w-[180px] h-[100px]'} flex-shrink-0 overflow-hidden rounded-lg shadow-lg transition-transform duration-200 group-hover:scale-[1.02]`}>
                     <Image
                         alt="content thumbnail"
                         src={returnImageProxy(content?.image)}
-                        width={isMobile ? 600 : 160}
-                        height={isMobile ? 240 : 90}
+                        width={isMobile ? 600 : 180}
+                        height={isMobile ? 240 : 100}
                         className="w-full h-full object-cover object-center"
                     />
-                    <div className="absolute inset-0 bg-gradient-to-br from-primary/80 to-primary-foreground/50 opacity-60" />
+                    <div className="absolute inset-0 bg-gradient-to-br from-primary/80 to-primary-foreground/50 opacity-50 group-hover:opacity-40 transition-opacity duration-200" />
                     <div className="absolute bottom-2 left-2 flex gap-2">
-                        <BookOpen className="w-5 h-5 text-white" />
+                        <BookOpen className="w-5 h-5 text-white drop-shadow-lg" />
                     </div>
                 </div>
                 
-                <div className="flex-1">
-                    <div className="flex justify-between items-center mb-2">
-                        <h3 className="text-xl font-bold text-[#f8f8ff]">{content?.title || content?.name}</h3>
-                        
-                        {content?.price > 0 ? (
-                            <Message severity="info" text={`${content.price} sats`} className="py-1 text-xs whitespace-nowrap" />
-                        ) : (
-                            <Message severity="success" text="Free" className="py-1 text-xs whitespace-nowrap" />
-                        )}
-                    </div>
-                    
-                    {content?.summary && (
-                        <p className="text-neutral-50/90 line-clamp-2 mb-3 text-sm">{content.summary}</p>
-                    )}
-                    
-                    <div className="flex flex-wrap gap-2 mt-2">
-                        {content?.topics?.map((topic) => (
-                            <Tag key={topic} value={topic} className="px-2 py-1 text-sm text-[#f8f8ff]" />
-                        ))}
-                    </div>
-                    
-                    <div className="flex justify-between items-center mt-3">
-                        <div className="text-sm text-gray-300">
-                            {(content?.published_at || content?.created_at) 
-                                ? `Published: ${formatUnixTimestamp(content?.published_at || content?.created_at)}` 
-                                : "Not yet published"}
+                <div className="flex-1 flex flex-col justify-between">
+                    <div>
+                        <div className="flex justify-between items-start gap-4 mb-2">
+                            <h3 className="text-xl font-bold text-[#f8f8ff] group-hover:text-white transition-colors duration-200">
+                                {content?.title || content?.name}
+                            </h3>
+                            
+                            {content?.price > 0 ? (
+                                <Message severity="info" text={`${content.price} sats`} className="py-1 text-xs whitespace-nowrap shadow-sm" />
+                            ) : (
+                                <Message severity="success" text="Free" className="py-1 text-xs whitespace-nowrap shadow-sm" />
+                            )}
                         </div>
                         
-                        {!isMobile && (
-                            <GenericButton 
-                                outlined 
-                                size="small" 
-                                label="Start Learning" 
-                                icon="pi pi-chevron-right"
-                                iconPos="right"
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    onSelect(content);
-                                }} 
-                                className="items-center py-1" 
-                            />
+                        {content?.summary && (
+                            <p className="text-neutral-50/80 line-clamp-2 mb-3 text-sm leading-relaxed group-hover:text-neutral-50/90 transition-colors duration-200">
+                                {content.summary}
+                            </p>
                         )}
                     </div>
+                    
+                    <div>
+                        <div className="flex flex-wrap gap-2 mb-3">
+                            {content?.topics?.map((topic) => (
+                                <Tag 
+                                    key={topic} 
+                                    value={topic} 
+                                    className="px-2.5 py-1 text-xs font-medium text-[#f8f8ff] bg-gray-700/50 border border-gray-600/30 rounded-full" 
+                                />
+                            ))}
+                        </div>
+                        
+                        <div className="flex justify-between items-center">
+                            <div className="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-200">
+                                {(content?.published_at || content?.created_at) 
+                                    ? `Published: ${formatUnixTimestamp(content?.published_at || content?.created_at)}` 
+                                    : "Not yet published"}
+                            </div>
+                            
+                            {!isMobile && (
+                                <GenericButton 
+                                    outlined 
+                                    size="small" 
+                                    label="Open" 
+                                    icon="pi pi-chevron-right"
+                                    iconPos="right"
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        onSelect(content);
+                                    }} 
+                                    className="items-center py-1 shadow-sm hover:shadow-md transition-shadow duration-200" 
+                                />
+                            )}
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/components/content/dropdowns/MessageDropdownItem.js b/src/components/content/dropdowns/MessageDropdownItem.js
index 7f94590..1de18e9 100644
--- a/src/components/content/dropdowns/MessageDropdownItem.js
+++ b/src/components/content/dropdowns/MessageDropdownItem.js
@@ -211,7 +211,7 @@ const MessageDropdownItem = ({ message, onSelect }) => {
 
     return (
         <div 
-            className="px-6 py-6 border-b border-gray-700 cursor-pointer" 
+            className="group px-6 py-5 border-b border-gray-700/50 cursor-pointer hover:bg-gray-800/30 transition-colors duration-200" 
             onClick={() => !loading && onSelect(messageData || messageRef)}
         >
             {loading ? (
@@ -220,10 +220,49 @@ const MessageDropdownItem = ({ message, onSelect }) => {
                 </div>
             ) : (
                 isMobile ? renderSimplifiedMessage() : 
-                <CommunityMessage 
-                    message={finalMessage}
-                    platform={platform} 
-                />
+                <div className="flex flex-col">
+                    <div className="flex gap-4">
+                        <div className="w-12 h-12 rounded-full overflow-hidden bg-gray-700/50 flex-shrink-0 shadow-lg">
+                            {messageData?.avatarProxy ? (
+                                <Image 
+                                    src={messageData.avatarProxy} 
+                                    alt="avatar" 
+                                    width={48} 
+                                    height={48} 
+                                    className="object-cover w-full h-full transition-transform duration-200 group-hover:scale-[1.05]" 
+                                />
+                            ) : (
+                                <div className="w-full h-full flex items-center justify-center">
+                                    <i className="pi pi-user text-gray-400 text-xl" />
+                                </div>
+                            )}
+                        </div>
+
+                        <div className="flex-1">
+                            <div className="flex items-center justify-between mb-2">
+                                <div className="font-medium text-[#f8f8ff] group-hover:text-white transition-colors duration-200">
+                                    {messageData?.author}
+                                </div>
+                                <div className="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-200">
+                                    {messageData?.timestamp ? formatTimestampToHowLongAgo(messageData.timestamp) : ''}
+                                </div>
+                            </div>
+                            <p className="text-neutral-50/80 whitespace-pre-wrap mb-3 text-sm leading-relaxed group-hover:text-neutral-50/90 transition-colors duration-200">
+                                {messageData?.content}
+                            </p>
+                            
+                            <div className="flex flex-wrap gap-2">
+                                <div className="px-3 py-1.5 bg-blue-500/20 border border-blue-500/30 text-blue-400 rounded-full text-xs font-medium flex items-center group-hover:bg-blue-500/30 transition-colors duration-200">
+                                    {getPlatformIcon()}
+                                    {platform}
+                                </div>
+                                <div className="px-3 py-1.5 bg-gray-700/50 border border-gray-600/30 text-gray-300 rounded-full text-xs font-medium group-hover:bg-gray-700/70 transition-colors duration-200">
+                                    plebdevs
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             )}
         </div>
     );