diff --git a/src/app/page.jsx b/src/app/page.jsx
index 8b6da3f..d343061 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -4,25 +4,25 @@ import React from 'react';
 import { MessageCircle } from 'lucide-react';
 
 const CarCard = ({ car }) => (
-  <div className="bg-white rounded-lg shadow-md overflow-hidden relative">
+  <div className="bg-white rounded-lg shadow-lg overflow-hidden transition-transform hover:scale-[1.02]">
     {car.special && (
-      <div className="absolute top-4 right-4 bg-blue-500 text-white px-4 py-1 rounded-md transform rotate-45 z-10">
+      <div className="absolute top-4 right-4 bg-blue-500 text-white px-4 py-1 rounded z-10">
         SPECIAL
       </div>
     )}
     <img 
       src={car.image} 
       alt={car.name} 
-      className="w-full h-48 object-cover"
+      className="w-full h-56 object-cover"
     />
-    <div className="p-4">
-      <h2 className="text-lg font-bold text-gray-800">
+    <div className="p-6">
+      <h2 className="text-xl font-bold text-gray-800 text-center mb-3">
         {car.name}
       </h2>
-      <div className="text-xl font-bold text-blue-500 mt-2">
+      <div className="text-2xl font-bold text-blue-500 text-center mb-4">
         ${car.price.toLocaleString()}
       </div>
-      <div className="flex justify-between mt-4 text-gray-600 text-sm">
+      <div className="flex justify-center space-x-6 text-gray-600">
         <div className="flex items-center">
           <span>{car.specs.consumption}</span>
         </div>
@@ -55,32 +55,32 @@ const HomePage = () => {
 
   return (
     <div className="min-h-screen bg-gray-50">
-      <header className="bg-white shadow-sm">
-        <div className="max-w-7xl mx-auto px-4 py-4">
-          <div className="w-48 h-12 bg-gray-200 rounded flex items-center justify-center">
-            <span className="text-gray-500">LOGO</span>
+      <header className="bg-white shadow-md">
+        <div className="max-w-6xl mx-auto px-4 py-6">
+          <div className="w-48 h-12 bg-gray-800 rounded-lg flex items-center justify-center mx-auto">
+            <span className="text-white font-bold">LOGO</span>
           </div>
         </div>
       </header>
 
-      <main className="max-w-7xl mx-auto px-4 py-8">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+      <main className="max-w-6xl mx-auto px-4 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
           {cars.map(car => (
             <CarCard key={car.id} car={car} />
           ))}
         </div>
       </main>
 
-      <footer className="bg-white shadow-sm mt-8">
-        <div className="max-w-7xl mx-auto px-4 py-6">
-          <div className="flex flex-col md:flex-row justify-between items-center">
-            <div className="text-gray-600 mb-4 md:mb-0">
-              <p>Contact: +351 123 456 789</p>
-              <p>Email: info@cardealer.com</p>
+      <footer className="bg-white shadow-md mt-auto">
+        <div className="max-w-6xl mx-auto px-4 py-8">
+          <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-8">
+            <div className="text-gray-600 text-center md:text-left">
+              <p className="font-medium">Contact: +351 123 456 789</p>
+              <p className="font-medium">Email: info@cardealer.com</p>
             </div>
             <button 
               onClick={() => window.open('https://wa.me/351123456789')}
-              className="flex items-center bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition-colors"
+              className="flex items-center bg-green-500 text-white px-6 py-3 rounded-lg hover:bg-green-600 transition-colors font-medium"
             >
               <MessageCircle className="w-5 h-5 mr-2" />
               Contact via WhatsApp