diff --git a/components/parole.tsx b/components/parole.tsx
index 9e9ccf0f..eec78562 100644
--- a/components/parole.tsx
+++ b/components/parole.tsx
@@ -84,9 +84,12 @@ export function Parole() {
 
   if (status === 'loading') {
     return (
-      <Card className="bg-white/50 backdrop-blur-sm">
+      <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full">
+        <CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-gray-100">
+          <CardTitle className="text-lg font-semibold text-gray-800">Talk mentions</CardTitle>
+        </CardHeader>
         <CardContent className="p-6">
-          <p className="text-center text-muted-foreground">Loading...</p>
+          <p className="text-center text-gray-500">Loading...</p>
         </CardContent>
       </Card>
     );
@@ -94,16 +97,20 @@ export function Parole() {
 
   if (status === 'unauthenticated' || (error && error.includes('Session expired'))) {
     return (
-      <Card className="bg-white/50 backdrop-blur-sm">
+      <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full">
+        <CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-gray-100">
+          <CardTitle className="text-lg font-semibold text-gray-800">Talk mentions</CardTitle>
+        </CardHeader>
         <CardContent className="p-6">
           <div className="text-center">
-            <p className="text-muted-foreground mb-4">Please sign in to view messages</p>
+            <p className="text-gray-500 mb-4">Please sign in to view messages</p>
             <Button 
               onClick={(e) => {
                 e.stopPropagation();
                 signIn('keycloak');
               }}
               variant="default"
+              className="bg-blue-600 hover:bg-blue-700 text-white"
             >
               Sign In
             </Button>
@@ -115,7 +122,7 @@ export function Parole() {
 
   return (
     <Card 
-      className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg" 
+      className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full cursor-pointer" 
       onClick={() => router.push('/parole')}
     >
       <CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-gray-100">