diff --git a/app/page.tsx b/app/page.tsx
index f8273bb4..4954a54f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -9,9 +9,9 @@ import { Parole } from "@/components/parole";
 
 export default function Home() {
   return (
-    <main className="container mx-auto p-4 space-y-4">
+    <main className="container mx-auto py-6 px-8 space-y-6">
       {/* First row */}
-      <div className="grid grid-cols-12 gap-4">
+      <div className="grid grid-cols-12 gap-6">
         <div className="col-span-3">
           <QuoteCard />
         </div>
@@ -27,7 +27,7 @@ export default function Home() {
       </div>
       
       {/* Second row */}
-      <div className="grid grid-cols-12 gap-4">
+      <div className="grid grid-cols-12 gap-6">
         <div className="col-span-6">
           <Email />
         </div>
diff --git a/components/email.tsx b/components/email.tsx
index 291b3e6c..29891a96 100644
--- a/components/email.tsx
+++ b/components/email.tsx
@@ -88,7 +88,7 @@ export function Email() {
 
   return (
     <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">
+      <CardHeader className="flex flex-row items-center justify-between pb-2 space-x-4 border-b border-gray-100">
         <CardTitle className="text-lg font-semibold text-gray-800">Email</CardTitle>
         <Button
           variant="ghost"
@@ -104,7 +104,7 @@ export function Email() {
         {error ? (
           <p className="text-center text-red-500">{error}</p>
         ) : (
-          <div className="space-y-4 max-h-[300px] overflow-y-auto">
+          <div className="space-y-3 max-h-[240px] overflow-y-auto pr-2">
             {emails.length === 0 ? (
               <p className="text-center text-gray-500">No emails available</p>
             ) : (
@@ -113,16 +113,16 @@ export function Email() {
                   key={email.id}
                   className="p-3 hover:bg-gray-50/50 rounded-lg transition-colors"
                 >
-                  <div className="flex items-center justify-between mb-1">
-                    <span className="text-xs font-medium text-gray-500">{email.sender.name}</span>
-                    <div className="flex items-center space-x-2">
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="text-sm font-medium text-gray-600">{email.sender.name}</span>
+                    <div className="flex items-center space-x-3">
                       {email.isUnread && (
                         <span className="w-2 h-2 bg-blue-600 rounded-full"></span>
                       )}
-                      <span className="text-xs text-gray-500">{email.date}</span>
+                      <span className="text-sm text-gray-500">{email.date}</span>
                     </div>
                   </div>
-                  <h3 className={`text-sm ${email.isUnread ? 'font-semibold' : 'font-medium'} text-gray-800`}>
+                  <h3 className={`text-sm ${email.isUnread ? 'font-semibold' : 'font-medium'} text-gray-800 line-clamp-2`}>
                     {email.subject}
                   </h3>
                 </div>
diff --git a/components/news.tsx b/components/news.tsx
index 103a4134..bcef357e 100644
--- a/components/news.tsx
+++ b/components/news.tsx
@@ -66,7 +66,7 @@ export function News() {
 
   return (
     <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">
+      <CardHeader className="flex flex-row items-center justify-between pb-2 space-x-4 border-b border-gray-100">
         <CardTitle className="text-lg font-semibold text-gray-800">News</CardTitle>
         <Button
           variant="ghost"
@@ -82,7 +82,7 @@ export function News() {
         {error ? (
           <p className="text-center text-red-500">{error}</p>
         ) : (
-          <div className="space-y-4 max-h-[300px] overflow-y-auto">
+          <div className="space-y-3 max-h-[240px] overflow-y-auto pr-2">
             {news.length === 0 ? (
               <p className="text-center text-gray-500">No news available</p>
             ) : (
@@ -91,13 +91,13 @@ export function News() {
                   key={item.id}
                   className="p-3 hover:bg-gray-50/50 rounded-lg transition-colors"
                 >
-                  <div className="flex items-center justify-between mb-1">
-                    <span className="text-xs font-medium text-gray-500">{item.date}</span>
-                    <span className="text-xs px-2 py-1 rounded-full bg-blue-50 text-blue-700">
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="text-sm text-gray-600">{item.date}</span>
+                    <span className="text-xs px-2.5 py-1 rounded-full bg-blue-50 text-blue-700">
                       {item.category}
                     </span>
                   </div>
-                  <h3 className="text-sm font-medium text-gray-800">{item.title}</h3>
+                  <h3 className="text-sm font-medium text-gray-800 line-clamp-2">{item.title}</h3>
                 </div>
               ))
             )}