diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 023a0c4..d04a3fb 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -38,6 +38,12 @@ const Header = () => {
             >
               Become a Host
             </Link>
+            <a
+              href="#"
+              className="hidden md:block text-sm font-semibold text-gray-700 hover:bg-gray-100 px-4 py-2 rounded-full"
+            >
+              Help
+            </a>
 
 
             <div className="relative">
diff --git a/frontend/src/components/ListingCard.tsx b/frontend/src/components/ListingCard.tsx
index 0eb17e8..276e03d 100644
--- a/frontend/src/components/ListingCard.tsx
+++ b/frontend/src/components/ListingCard.tsx
@@ -51,6 +51,13 @@ const ListingCard = ({ listing }: ListingCardProps) => {
           }}
         />
 
+        {/* Guest Favorite Badge */}
+        {listing.reviewCount && listing.reviewCount >= 50 && (
+          <span className="absolute top-3 left-3 bg-white text-xs font-bold px-2.5 py-1 rounded-full shadow-md border border-gray-100">
+            Guest favorite
+          </span>
+        )}
+
         {/* Favorite Button */}
         <button
           onClick={handleFavoriteClick}
diff --git a/frontend/src/pages/ListingDetail.tsx b/frontend/src/pages/ListingDetail.tsx
index 91f1a1d..1936dca 100644
--- a/frontend/src/pages/ListingDetail.tsx
+++ b/frontend/src/pages/ListingDetail.tsx
@@ -13,6 +13,9 @@ import {
   FaParking,
   FaTv,
   FaSnowflake,
+  FaShareAlt,
+  FaRegHeart,
+  FaShieldAlt,
 } from 'react-icons/fa';
 import { listingService } from '../services/listingService';
 import { bookingService } from '../services/bookingService';
@@ -100,20 +103,32 @@ const ListingDetail = () => {
         <h1 className="text-3xl font-semibold text-gray-900 mb-2">
           {listing.title}
         </h1>
-        <div className="flex items-center space-x-4 text-sm">
-          {listing.rating && (
-            <div className="flex items-center">
-              <FaStar className="text-black mr-1" />
-              <span className="font-semibold">{listing.rating}</span>
-              <span className="text-gray-600 ml-1">
-                ({listing.reviewCount} reviews)
-              </span>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-4 text-sm">
+            {listing.rating && (
+              <div className="flex items-center">
+                <FaStar className="text-black mr-1" />
+                <span className="font-semibold">{listing.rating}</span>
+                <span className="text-gray-600 ml-1">
+                  ({listing.reviewCount} reviews)
+                </span>
+              </div>
+            )}
+            <div className="flex items-center text-gray-600">
+              <FaMapMarkerAlt className="mr-1" />
+              {listing.location.city}, {listing.location.state},{' '}
+              {listing.location.country}
             </div>
-          )}
-          <div className="flex items-center text-gray-600">
-            <FaMapMarkerAlt className="mr-1" />
-            {listing.location.city}, {listing.location.state},{' '}
-            {listing.location.country}
+          </div>
+          <div className="flex items-center space-x-3">
+            <button className="flex items-center space-x-2 text-sm font-semibold text-gray-700 hover:bg-gray-100 px-3 py-2 rounded-lg transition">
+              <FaShareAlt />
+              <span>Share</span>
+            </button>
+            <button className="flex items-center space-x-2 text-sm font-semibold text-gray-700 hover:bg-gray-100 px-3 py-2 rounded-lg transition">
+              <FaRegHeart />
+              <span>Save</span>
+            </button>
           </div>
         </div>
       </div>
@@ -193,6 +208,20 @@ const ListingDetail = () => {
             </div>
           </div>
 
+          {/* Cancellation Policy */}
+          <div className="pb-8 border-b border-gray-200">
+            <h3 className="text-xl font-semibold mb-4">Cancellation policy</h3>
+            <div className="flex items-start space-x-4">
+              <FaShieldAlt className="text-green-600 text-xl mt-1 flex-shrink-0" />
+              <div>
+                <p className="font-semibold text-gray-900">Free cancellation within 48 hours</p>
+                <p className="text-gray-600 text-sm mt-1">
+                  Cancel before check-in for a partial refund. After that, the first night is non-refundable.
+                </p>
+              </div>
+            </div>
+          </div>
+
           {/* Reviews */}
           {reviews && reviews.length > 0 && (
             <div className="pb-8 border-b border-gray-200">
@@ -295,10 +324,11 @@ const ListingDetail = () => {
             <button
               onClick={handleBooking}
               disabled={bookingMutation.isPending || !checkIn || !checkOut}
-              className="w-full bg-airbnb-red text-white font-semibold py-3 rounded-lg hover:bg-red-600 transition disabled:opacity-50 disabled:cursor-not-allowed"
+              className="w-full bg-gradient-to-r from-airbnb-red to-pink-600 text-white font-semibold py-3 rounded-lg hover:from-red-600 hover:to-pink-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {bookingMutation.isPending ? 'Booking...' : 'Reserve'}
             </button>
+            <p className="text-center text-sm text-gray-500 mt-2">You won't be charged yet</p>
 
             {nights > 0 && (
               <div className="mt-6 space-y-2">
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index f96ed25..e340bda 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -55,6 +55,13 @@ const Login = () => {
           </p>
         </div>
 
+        {/* Demo Credentials */}
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+          <p className="text-sm font-medium text-blue-800 mb-1">Demo Credentials</p>
+          <p className="text-xs text-blue-600">Email: <span className="font-mono">demo@example.com</span></p>
+          <p className="text-xs text-blue-600">Password: <span className="font-mono">password123</span></p>
+        </div>
+
         <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
           <div className="rounded-md shadow-sm -space-y-px">
             <div>
@@ -126,6 +133,39 @@ const Login = () => {
               {loginMutation.isPending ? 'Signing in...' : 'Sign in'}
             </button>
           </div>
+
+          <div className="relative my-6">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-gray-300"></div>
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="px-2 bg-gray-50 text-gray-500">or continue with</span>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <button
+              type="button"
+              className="w-full flex items-center justify-center py-3 px-4 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition"
+            >
+              <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
+                <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/>
+                <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+                <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+                <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+              </svg>
+              Google
+            </button>
+            <button
+              type="button"
+              className="w-full flex items-center justify-center py-3 px-4 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition"
+            >
+              <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.161 22 16.416 22 12c0-5.523-4.477-10-10-10z"/>
+              </svg>
+              GitHub
+            </button>
+          </div>
         </form>
       </div>
     </div>