diff --git a/app/blocked/page.js b/app/blocked/page.js
index f2ac960..300318f 100644
--- a/app/blocked/page.js
+++ b/app/blocked/page.js
@@ -80,7 +80,7 @@ export default function BlockedPage() {
             <button
               type="button"
               onClick={handleLogout}
-              className="mt-8 w-full bg-red-600 hover:bg-red-700 text-white rounded-2xl py-4 font-bold transition-colors flex items-center justify-center gap-3"
+              className="mt-8 w-full cursor-pointer bg-red-600 hover:bg-red-700 text-white rounded-2xl py-4 font-bold transition-colors flex items-center justify-center gap-3"
             >
               <LogOut className="w-5 h-5" />
               {t("blocked.logoutButton")}
diff --git a/app/components/LoginComponent/Login.jsx b/app/components/LoginComponent/Login.jsx
index 16cee72..e44b069 100644
--- a/app/components/LoginComponent/Login.jsx
+++ b/app/components/LoginComponent/Login.jsx
@@ -61,7 +61,7 @@ export default function Login() {
           setStep("otp");
           break;
         default:
-          toast.error("Login failed the email or password is wrong ");
+          toast.error("Login failed the email or password is wrong");
       }
     } catch (err) {
       console.error("[Login] Error:", err);
diff --git a/app/components/LoginComponent/LoginForm.js b/app/components/LoginComponent/LoginForm.js
index 3c2ec1d..c852b65 100644
--- a/app/components/LoginComponent/LoginForm.js
+++ b/app/components/LoginComponent/LoginForm.js
@@ -19,17 +19,34 @@ export default function LoginForm({ loginMethod, errors, formData, isLoading, is
               <Phone className={`w-5 h-5 transition-colors ${errors.credential ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
             )}
           </div>
-          <input
-            type="text"
-            // type={loginMethod === 'email' ? 'email' : 'tel'}
-            value={formData.credential}
-            onChange={(e) => handleCredentialChange(e.target.value)}
-            className={`w-full pr-12 pl-4 py-4 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${
-              errors.credential ? "border-red-500" : "border-gray-700"
-            }`}
-            placeholder={loginMethod === "email" ? t("emailPlaceholder") : t("phonePlaceholder")}
-            dir="ltr"
-          />
+          {loginMethod === "email" ? (
+            <>
+              <input
+                type="email"
+                // type={loginMethod === 'email' ? 'email' : 'tel'}
+                value={formData.credential}
+                onChange={(e) => handleCredentialChange(e.target.value)}
+                className={`w-full pr-12 pl-4 py-4 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${
+                  errors.credential ? "border-red-500" : "border-gray-700"
+                }`}
+                placeholder={t("emailPlaceholder")}
+                dir="ltr"
+              />
+            </>
+          ) : (
+            <>
+              <input
+                type="text"
+                value={formData.credential}
+                onChange={(e) => handleCredentialChange(e.target.value)}
+                className={`w-full pr-12 pl-4 py-4 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${
+                  errors.credential ? "border-red-500" : "border-gray-700"
+                }`}
+                placeholder={t("phonePlaceholder")}
+                dir="ltr"
+              />
+            </>
+          )}
         </div>
         {errors.credential && (
           <motion.p initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="text-red-500 text-sm mt-1">
diff --git a/app/owner/bookings/page.js b/app/owner/bookings/page.js
index 2a9d7d2..258a884 100644
--- a/app/owner/bookings/page.js
+++ b/app/owner/bookings/page.js
@@ -8,6 +8,7 @@ import { Calendar, User, Mail, Phone, CheckCircle, XCircle, Clock, MapPin, Bed,
 import toast, { Toaster } from "react-hot-toast";
 import { getMyRentListings, getOwnerReservationRequests } from "@/app/utils/api";
 import useAuth from "@/app/hooks/useAuth";
+import Loading from "@/app/loading";
 
 const OwnerBookingCalendar = ({ property, onDateSelect, selectedDates }) => {
   const { t } = useTranslation();
@@ -476,12 +477,7 @@ export default function OwnerBookingsPage() {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
-        <div className="text-center">
-          <Loader2 className="w-12 h-12 text-amber-500 animate-spin mx-auto mb-4" />
-          <p className="text-gray-600">{t("loading")}</p>
-        </div>
-      </div>
+      <Loading/>
     );
   }
 
diff --git a/app/owner/reservations/page.js b/app/owner/reservations/page.js
index 9d41bb0..527041b 100644
--- a/app/owner/reservations/page.js
+++ b/app/owner/reservations/page.js
@@ -665,6 +665,7 @@ import {
 import toast, { Toaster } from 'react-hot-toast';
 import AuthService from '../../services/AuthService';
 import { getRentProperties } from '../../utils/api';
+import Loading from '@/app/loading';
 
 const API_BASE =
   process.env.NEXT_PUBLIC_API_URL || 'https://45.93.137.91.nip.io/api';
@@ -1433,9 +1434,7 @@ export default function OwnerReservationRequestsPage() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
-        <Loader2 className="w-12 h-12 text-amber-500 animate-spin" />
-      </div>
+     <Loading/>
     );
   }
 
diff --git a/app/properties/page.js b/app/properties/page.js
index 68dda04..385be80 100644
--- a/app/properties/page.js
+++ b/app/properties/page.js
@@ -1,92 +1,74 @@
-'use client';
+"use client";
 
-import { useState, useEffect } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import {
-  Search,
-  MapPin,
-  Bed,
-  Bath,
-  Square,
-  Filter,
-  Grid3x3,
-  List,
-  Heart,
-  ChevronDown,
-  Star,
-  Home,
-  Building2,
-  Phone,
-  FileText
-} from 'lucide-react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { getRentProperties, getSaleProperties } from '../utils/api';
-import { useFavorites } from '@/app/contexts/FavoritesContext';
-import AuthService from '@/app/services/AuthService';
-import toast, { Toaster } from 'react-hot-toast';
-import { useTranslation } from 'react-i18next';
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Search, MapPin, Bed, Bath, Square, Filter, Grid3x3, List, Heart, ChevronDown, Star, Home, Building2, Phone, FileText } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { getRentProperties, getSaleProperties } from "../utils/api";
+import { useFavorites } from "@/app/contexts/FavoritesContext";
+import AuthService from "@/app/services/AuthService";
+import toast, { Toaster } from "react-hot-toast";
+import { useTranslation } from "react-i18next";
 
 function mapApiProperty(t, item, index) {
   const info = item.propertyInformation || {};
 
   const dailyPrice = item.dailyRent ?? item.monthlyRent ?? item.price ?? 0;
 
-  const buildingTypeMap = { 
-    0: 'apartment', 
-    1: 'villa', 
-    2: 'sweet', 
-    3: 'room', 
-    4: 'studio', 
-    5: 'office', 
-    6: 'farms', 
-    7: 'shop', 
-    8: 'warehouse' 
+  const buildingTypeMap = {
+    0: "apartment",
+    1: "villa",
+    2: "sweet",
+    3: "room",
+    4: "studio",
+    5: "office",
+    6: "farms",
+    7: "shop",
+    8: "warehouse",
   };
-  const propType = buildingTypeMap[info.buildingType] ?? buildingTypeMap[item.type] ?? 'apartment';
+  const propType = buildingTypeMap[info.buildingType] ?? buildingTypeMap[item.type] ?? "apartment";
 
-  const statusMap = { 0: 'available', 1: 'notAvailable', 2: 'booked' };
-  const status = statusMap[info.status] ?? statusMap[item.status] ?? 'available';
+  const statusMap = { 0: "available", 1: "notAvailable", 2: "booked" };
+  const status = statusMap[info.status] ?? statusMap[item.status] ?? "available";
 
   const cityMap = {
-    0: 'damascus',
-    1: 'aleppo',
-    2: 'homs',
-    3: 'latakia',
-    4: 'daraa',
-    5: 'tartous',
-    6: 'suweida',
-    7: 'deirEzzor',
-    8: 'raqqa',
-    9: 'idlib',
-    10: 'hasakah',
-    11: 'qamishli',
-    12: 'ruralDamascus'
+    0: "damascus",
+    1: "aleppo",
+    2: "homs",
+    3: "latakia",
+    4: "daraa",
+    5: "tartous",
+    6: "suweida",
+    7: "deirEzzor",
+    8: "raqqa",
+    9: "idlib",
+    10: "hasakah",
+    11: "qamishli",
+    12: "ruralDamascus",
   };
 
   const features = [];
-  if (item.isSmokeAllow) features.push(t('smoke-allowed', 'مسموح التدخين'));
-  if (item.isVisitorAllow) features.push(t('visitors-allowed', 'مسموح الزوار'));
-  if (item.specializedFor) features.push(t('specialized', 'مخصص'));
-  if (info.numberOfBedRooms) features.push(`${info.numberOfBedRooms} ${t('bedrooms', 'غرف نوم')}`);
-  if (info.numberOfBathRooms) features.push(`${info.numberOfBathRooms} ${t('bathrooms', 'حمامات')}`);
+  if (item.isSmokeAllow) features.push(t("smoke-allowed", "مسموح التدخين"));
+  if (item.isVisitorAllow) features.push(t("visitors-allowed", "مسموح الزوار"));
+  if (item.specializedFor) features.push(t("specialized", "مخصص"));
+  if (info.numberOfBedRooms) features.push(`${info.numberOfBedRooms} ${t("bedrooms", "غرف نوم")}`);
+  if (info.numberOfBathRooms) features.push(`${info.numberOfBathRooms} ${t("bathrooms", "حمامات")}`);
 
-  const apiBase = typeof window !== 'undefined' ? (process.env.NEXT_PUBLIC_API_URL || 'http://45.93.137.91/api') : '';
+  const apiBase = typeof window !== "undefined" ? process.env.NEXT_PUBLIC_API_URL || "http://45.93.137.91/api" : "";
   const rawImages = Array.isArray(info.images) ? info.images : [];
-  const images = rawImages.length > 0
-    ? rawImages.map(img => img.startsWith('http') ? img : `${apiBase}${img.startsWith('/') ? '' : '/Pictures/'}${img}`)
-    : ['/property-placeholder.jpg'];
+  const images = rawImages.length > 0 ? rawImages.map((img) => (img.startsWith("http") ? img : `${apiBase}${img.startsWith("/") ? "" : "/Pictures/"}${img}`)) : ["/property-placeholder.jpg"];
 
   return {
     id: item.id ?? index + 1,
-    title: info.address || `${t('property', 'عقار')} #${item.id || index + 1}`,
-    description: info.description || '',
+    title: info.address || `${t("property", "عقار")} #${item.id || index + 1}`,
+    description: info.description || "",
     type: propType,
     price: dailyPrice,
-    priceUnit: 'daily',
+    priceUnit: "daily",
     location: {
-      city: cityMap[info.city] || extractCity(info.address) || 'damascus',
-      district: info.address || '',
+      city: cityMap[info.city] || extractCity(info.address) || "damascus",
+      district: info.address || "",
     },
     bedrooms: info.numberOfBedRooms || 0,
     bathrooms: info.numberOfBathRooms || 0,
@@ -101,29 +83,29 @@ function mapApiProperty(t, item, index) {
 }
 
 function extractCity(address) {
-  if (!address) return '';
+  if (!address) return "";
   const cityMap = {
-    'دمشق': 'damascus',
-    'حلب': 'aleppo',
-    'حمص': 'homs',
-    'اللاذقية': 'latakia',
-    'درعا': 'daraa',
-    'طرطوس': 'tartous',
-    'السويداء': 'suweida',
-    'دير الزور': 'deirEzzor',
-    'الرقة': 'raqqa',
-    'إدلب': 'idlib',
-    'الحسكة': 'hasakah',
-    'القامشلي': 'qamishli',
-    'ريف دمشق': 'ruralDamascus'
+    دمشق: "damascus",
+    حلب: "aleppo",
+    حمص: "homs",
+    اللاذقية: "latakia",
+    درعا: "daraa",
+    طرطوس: "tartous",
+    السويداء: "suweida",
+    "دير الزور": "deirEzzor",
+    الرقة: "raqqa",
+    إدلب: "idlib",
+    الحسكة: "hasakah",
+    القامشلي: "qamishli",
+    "ريف دمشق": "ruralDamascus",
   };
   for (const [arabic, key] of Object.entries(cityMap)) {
     if (address.includes(arabic)) return key;
   }
-  return '';
+  return "";
 }
 
-const PropertyCard = ({ property, viewMode = 'grid', onLoginRequired }) => {
+const PropertyCard = ({ property, viewMode = "grid", onLoginRequired, type = "rent" }) => {
   const { t, i18n } = useTranslation();
   const { isFavorite: checkFavorite, addFavorite, removeFavorite } = useFavorites();
   const [favLoading, setFavLoading] = useState(false);
@@ -133,7 +115,10 @@ const PropertyCard = ({ property, viewMode = 'grid', onLoginRequired }) => {
   const toggleFavorite = async (e) => {
     e.preventDefault();
     e.stopPropagation();
-    if (!AuthService.isAuthenticated()) { onLoginRequired?.(); return; }
+    if (!AuthService.isAuthenticated()) {
+      onLoginRequired?.();
+      return;
+    }
     setFavLoading(true);
     if (isFav) {
       await removeFavorite(property.id);
@@ -141,40 +126,55 @@ const PropertyCard = ({ property, viewMode = 'grid', onLoginRequired }) => {
       await addFavorite(property.id);
     }
     setFavLoading(false);
-
   };
 
   const formatCurrency = (amount) => {
-    return amount?.toLocaleString() + ' ' + t('syp-symbol', 'ل.س');
+    return amount?.toLocaleString() + " " + t("syp-symbol", "ل.س");
   };
 
   const getPropertyTypeIcon = (type) => {
     switch (type) {
-      case 'villa': return <Home className="w-4 h-4" />;
-      case 'apartment': return <Building2 className="w-4 h-4" />;
-      case 'house': return <Home className="w-4 h-4" />;
-      case 'studio': return <Building2 className="w-4 h-4" />;
-      default: return <Home className="w-4 h-4" />;
+      case "villa":
+        return <Home className="w-4 h-4" />;
+      case "apartment":
+        return <Building2 className="w-4 h-4" />;
+      case "house":
+        return <Home className="w-4 h-4" />;
+      case "studio":
+        return <Building2 className="w-4 h-4" />;
+      default:
+        return <Home className="w-4 h-4" />;
     }
   };
 
   const getPropertyTypeLabel = (type) => {
     switch (type) {
-      case 'villa': return t('buildingType.villa', 'فيلا');
-      case 'apartment': return t('buildingType.apartment', 'شقة');
-      case 'house': return t('house', 'منزل');
-      case 'studio': return t('buildingType.studio', 'ستوديو');
-      case 'sweet': return t('buildingType.sweet', 'جناح');
-      case 'room': return t('buildingType.room', 'غرفة');
-      case 'office': return t('buildingType.office', 'مكتب');
-      case 'farms': return t('buildingType.farms', 'مزرعة');
-      case 'shop': return t('buildingType.shop', 'محل تجاري');
-      case 'warehouse': return t('buildingType.warehouse', 'مستودع');
-      default: return type;
+      case "villa":
+        return t("buildingType.villa", "فيلا");
+      case "apartment":
+        return t("buildingType.apartment", "شقة");
+      case "house":
+        return t("house", "منزل");
+      case "studio":
+        return t("buildingType.studio", "ستوديو");
+      case "sweet":
+        return t("buildingType.sweet", "جناح");
+      case "room":
+        return t("buildingType.room", "غرفة");
+      case "office":
+        return t("buildingType.office", "مكتب");
+      case "farms":
+        return t("buildingType.farms", "مزرعة");
+      case "shop":
+        return t("buildingType.shop", "محل تجاري");
+      case "warehouse":
+        return t("buildingType.warehouse", "مستودع");
+      default:
+        return type;
     }
   };
 
-  if (viewMode === 'list') {
+  if (viewMode === "list") {
     return (
       <motion.div
         initial={{ opacity: 0, y: 20 }}
@@ -183,21 +183,11 @@ const PropertyCard = ({ property, viewMode = 'grid', onLoginRequired }) => {
       >
         <div className="flex flex-col md:flex-row">
           <div className="md:w-1/3 relative h-64 md:h-auto bg-gray-100">
-            <Image
-              src={property.images[currentImage] || '/property-placeholder.jpg'}
-              alt={property.title}
-              fill
-              loading='lazy'
-              className="object-cover"
-            />
+            <Image src={property.images[currentImage] || "/property-placeholder.jpg"} alt={property.title} fill loading="lazy" className="object-cover" />
             {property.images.length > 1 && (
               <div className="absolute bottom-2 left-2 right-2 flex justify-center gap-1">
                 {property.images.map((_, idx) => (
-                  <button
-                    key={idx}
-                    onClick={() => setCurrentImage(idx)}
-                    className={`w-1.5 h-1.5 rounded-full transition-all ${idx === currentImage ? 'bg-gray-800 w-3' : 'bg-white/70'}`}
-                  />
+                  <button key={idx} onClick={() => setCurrentImage(idx)} className={`w-1.5 h-1.5 rounded-full transition-all ${idx === currentImage ? "bg-gray-800 w-3" : "bg-white/70"}`} />
                 ))}
               </div>
             )}
@@ -207,7 +197,7 @@ const PropertyCard = ({ property, viewMode = 'grid', onLoginRequired }) => {
                 disabled={favLoading}
                 className="w-8 h-8 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white transition-colors shadow-sm"
               >
-                <Heart className={`w-4 h-4 ${isFav ? 'fill-red-500 text-red-500' : 'text-gray-600'}`} />
+                <Heart className={`w-4 h-4 ${isFav ? "fill-red-500 text-red-500" : "text-gray-600"}`} />
               </button>
             </div>
           </div>
@@ -220,45 +210,49 @@ const PropertyCard = ({ property, viewMode = 'grid', onLoginRequired }) => {
                     {getPropertyTypeIcon(property.type)}
                     {getPropertyTypeLabel(property.type)}
                   </span>
-                  <span className={`px-2 py-1 rounded-lg text-xs font-medium ${property.status === 'available' ? 'bg-gray-800 text-white' : 'bg-gray-200 text-gray-600'}`}>
-                    {property.status === 'available' ? t('available', 'متاح') : t('booked', 'محجوز')}
+                  <span className={`px-2 py-1 rounded-lg text-xs font-medium ${property.status === "available" ? "bg-gray-800 text-white" : "bg-gray-200 text-gray-600"}`}>
+                    {property.status === "available" ? t("available", "متاح") : t("booked", "محجوز")}
                   </span>
                 </div>
                 <h3 className="text-xl font-bold text-gray-900 mb-1">{property.title}</h3>
                 <div className="flex items-center gap-1 text-gray-500 text-sm mb-3">
                   <MapPin className="w-4 h-4" />
-                  {t('city.' + property.location.city, property.location.city)}، {property.location.district}
+                  {t("city." + property.location.city, property.location.city)}، {property.location.district}
                 </div>
               </div>
               <div className="text-left">
                 <div className="text-2xl font-bold text-gray-900">{formatCurrency(property.price)}</div>
-                <div className="text-xs text-gray-500">/{property.priceUnit === 'daily' ? t('day', 'يوم') : t('month', 'شهر')}</div>
+                <div className="text-xs text-gray-500">/{property.priceUnit === "daily" ? t("day", "يوم") : t("month", "شهر")}</div>
               </div>
             </div>
 
             <div className="flex flex-wrap gap-4 mb-4">
               <div className="flex items-center gap-1 text-gray-600">
                 <Bed className="w-4 h-4" />
-                <span>{property.bedrooms} {t('rooms', 'غرف')}</span>
+                <span>
+                  {property.bedrooms} {t("rooms", "غرف")}
+                </span>
               </div>
               <div className="flex items-center gap-1 text-gray-600">
                 <Bath className="w-4 h-4" />
-                <span>{property.bathrooms} {t('bathrooms', 'حمامات')}</span>
+                <span>
+                  {property.bathrooms} {t("bathrooms", "حمامات")}
+                </span>
               </div>
               <div className="flex items-center gap-1 text-gray-600">
                 <Square className="w-4 h-4" />
-                <span>{property.area} {t('sqm', 'م²')}</span>
+                <span>
+                  {property.area} {t("sqm", "م²")}
+                </span>
               </div>
             </div>
 
             <p className="text-gray-600 text-sm mb-4 line-clamp-2">{property.description}</p>
 
             <div className="flex gap-3">
-              <Link
-                href={`/property/${property.id}`}
-                className="flex-1 bg-gray-800 text-white py-3 rounded-xl font-medium hover:bg-gray-900 transition-colors text-center"
-              >
-                {t('viewDetails', 'عرض التفاصيل')}
+              //
+              <Link href={`/property/${property.id}?type=${type}`} className="flex-1 bg-gray-800 text-white py-3 rounded-xl font-medium hover:bg-gray-900 transition-colors text-center">
+                {t("viewDetails", "عرض التفاصيل")}
               </Link>
               <button className="px-4 bg-gray-100 text-gray-700 py-3 rounded-xl font-medium hover:bg-gray-200 transition-colors flex items-center gap-2">
                 <Phone className="w-4 h-4" />
@@ -277,19 +271,14 @@ const PropertyCard = ({ property, viewMode = 'grid', onLoginRequired }) => {
       className="bg-white rounded-2xl shadow-sm hover:shadow-md transition-all duration-300 overflow-hidden border border-gray-100"
     >
       <div className="relative h-56 bg-gray-100">
-        <Image
-          src={property.images[currentImage] || '/property-placeholder.jpg'}
-          alt={property.title}
-          fill
-          className="object-cover"
-        />
+        <Image src={property.images[currentImage] || "/property-placeholder.jpg"} alt={property.title} fill className="object-cover" />
         <div className="absolute top-2 right-2 flex gap-2">
           <button
             onClick={toggleFavorite}
             disabled={favLoading}
             className="w-8 h-8 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white transition-colors shadow-sm"
           >
-            <Heart className={`w-4 h-4 ${isFav ? 'fill-red-500 text-red-500' : 'text-gray-600'}`} />
+            <Heart className={`w-4 h-4 ${isFav ? "fill-red-500 text-red-500" : "text-gray-600"}`} />
           </button>
         </div>
       </div>
@@ -302,19 +291,19 @@ const PropertyCard = ({ property, viewMode = 'grid', onLoginRequired }) => {
                 {getPropertyTypeIcon(property.type)}
                 {getPropertyTypeLabel(property.type)}
               </span>
-              {property.status === 'available' && (
-                <span className="px-2 py-1 bg-gray-800 text-white rounded-lg text-xs font-medium">{t('available', 'متاح')}</span>
-              )}
+              {property.status === "available" && <span className="px-2 py-1 bg-gray-800 text-white rounded-lg text-xs font-medium">{t("available", "متاح")}</span>}
             </div>
             <h3 className="font-bold text-gray-900 mb-1 line-clamp-1">{property.title}</h3>
             <div className="flex items-center gap-1 text-gray-500 text-xs mb-2">
               <MapPin className="w-3 h-3" />
-              <span className="line-clamp-1">{t('city.' + property.location.city, property.location.city)}، {property.location.district}</span>
+              <span className="line-clamp-1">
+                {t("city." + property.location.city, property.location.city)}، {property.location.district}
+              </span>
             </div>
           </div>
           <div className="text-left">
             <div className="text-xl font-bold text-gray-900">{formatCurrency(property.price)}</div>
-            <div className="text-xs text-gray-500">/{property.priceUnit === 'daily' ? t('day', 'يوم') : t('month', 'شهر')}</div>
+            <div className="text-xs text-gray-500">/{property.priceUnit === "daily" ? t("day", "يوم") : t("month", "شهر")}</div>
           </div>
         </div>
 
@@ -330,7 +319,10 @@ const PropertyCard = ({ property, viewMode = 'grid', onLoginRequired }) => {
             </div>
             <div className="flex items-center gap-1">
               <Square className="w-4 h-4" />
-              <span>{property.area}{t('sqm', 'م²')}</span>
+              <span>
+                {property.area}
+                {t("sqm", "م²")}
+              </span>
             </div>
           </div>
           {property.rating > 0 && (
@@ -341,11 +333,8 @@ const PropertyCard = ({ property, viewMode = 'grid', onLoginRequired }) => {
           )}
         </div>
 
-        <Link
-          href={`/property/${property.id}`}
-          className="block w-full bg-gray-800 text-white py-3 rounded-xl font-medium hover:bg-gray-900 transition-colors text-center"
-        >
-          {t('viewDetails', 'عرض التفاصيل')}
+        <Link href={`/property/${property.id}?type=${type}`} className="block w-full bg-gray-800 text-white py-3 rounded-xl font-medium hover:bg-gray-900 transition-colors text-center">
+          {t("viewDetails", "عرض التفاصيل")}
         </Link>
       </div>
     </motion.div>
@@ -357,57 +346,57 @@ const FilterBar = ({ filters, onFilterChange }) => {
   const [showFilters, setShowFilters] = useState(false);
 
   const propertyTypes = [
-    { id: 'all', label: t('all', 'الكل') },
-    { id: 'residential', label: t('propertyType.residential', 'سكني') },
-    { id: 'commercial', label: t('propertyType.commercial', 'تجاري') },
-    { id: 'agricultural', label: t('propertyType.agricultural', 'زراعي') },
+    { id: "all", label: t("all", "الكل") },
+    { id: "residential", label: t("propertyType.residential", "سكني") },
+    { id: "commercial", label: t("propertyType.commercial", "تجاري") },
+    { id: "agricultural", label: t("propertyType.agricultural", "زراعي") },
   ];
 
   const buildingTypes = [
-    { id: 'all', label: t('all', 'الكل') },
-    { id: 'apartment', label: t('buildingType.apartment', 'شقة'), icon: Building2 },
-    { id: 'villa', label: t('buildingType.villa', 'فيلا'), icon: Home },
-    { id: 'sweet', label: t('buildingType.sweet', 'جناح'), icon: Home },
-    { id: 'room', label: t('buildingType.room', 'غرفة'), icon: Home },
-    { id: 'studio', label: t('buildingType.studio', 'ستوديو'), icon: Building2 },
-    { id: 'office', label: t('buildingType.office', 'مكتب'), icon: Building2 },
-    { id: 'farms', label: t('buildingType.farms', 'مزرعة'), icon: Home },
-    { id: 'shop', label: t('buildingType.shop', 'محل تجاري'), icon: Building2 },
-    { id: 'warehouse', label: t('buildingType.warehouse', 'مستودع'), icon: Building2 }
+    { id: "all", label: t("all", "الكل") },
+    { id: "apartment", label: t("buildingType.apartment", "شقة"), icon: Building2 },
+    { id: "villa", label: t("buildingType.villa", "فيلا"), icon: Home },
+    { id: "sweet", label: t("buildingType.sweet", "جناح"), icon: Home },
+    { id: "room", label: t("buildingType.room", "غرفة"), icon: Home },
+    { id: "studio", label: t("buildingType.studio", "ستوديو"), icon: Building2 },
+    { id: "office", label: t("buildingType.office", "مكتب"), icon: Building2 },
+    { id: "farms", label: t("buildingType.farms", "مزرعة"), icon: Home },
+    { id: "shop", label: t("buildingType.shop", "محل تجاري"), icon: Building2 },
+    { id: "warehouse", label: t("buildingType.warehouse", "مستودع"), icon: Building2 },
   ];
 
   const priceRanges = [
-    { id: 'all', label: t('allPrices', 'جميع الأسعار') },
-    { id: '0-500000', label: t('price-range-less-than-500k', 'أقل من 500 ألف') },
-    { id: '500000-1000000', label: t('price-range-500k-to-1m', '500 ألف - 1 مليون') },
-    { id: '1000000-2000000', label: t('price-range-1m-to-2m', '1 مليون - 2 مليون') },
-    { id: '2000000-5000000', label: t('price-range-2m-to-5m', '2 مليون - 5 مليون') },
-    { id: '5000000+', label: t('price-range-more-than-5m', 'أكثر من 5 مليون') }
+    { id: "all", label: t("allPrices", "جميع الأسعار") },
+    { id: "0-500000", label: t("price-range-less-than-500k", "أقل من 500 ألف") },
+    { id: "500000-1000000", label: t("price-range-500k-to-1m", "500 ألف - 1 مليون") },
+    { id: "1000000-2000000", label: t("price-range-1m-to-2m", "1 مليون - 2 مليون") },
+    { id: "2000000-5000000", label: t("price-range-2m-to-5m", "2 مليون - 5 مليون") },
+    { id: "5000000+", label: t("price-range-more-than-5m", "أكثر من 5 مليون") },
   ];
 
   const cities = [
-    { id: 'all', label: t('allCities', 'جميع المدن') },
-    { id: 'damascus', label: t('city.damascus', 'دمشق') },
-    { id: 'aleppo', label: t('city.aleppo', 'حلب') },
-    { id: 'homs', label: t('city.homs', 'حمص') },
-    { id: 'latakia', label: t('city.latakia', 'اللاذقية') },
-    { id: 'daraa', label: t('city.daraa', 'درعا') },
-    { id: 'tartous', label: t('city.tartous', 'طرطوس') },
-    { id: 'suweida', label: t('city.suweida', 'السويداء') },
-    { id: 'deirEzzor', label: t('city.deirEzzor', 'دير الزور') },
-    { id: 'raqqa', label: t('city.raqqa', 'الرقة') },
-    { id: 'idlib', label: t('city.idlib', 'إدلب') },
-    { id: 'hasakah', label: t('city.hasakah', 'الحسكة') },
-    { id: 'qamishli', label: t('city.qamishli', 'القامشلي') },
-    { id: 'ruralDamascus', label: t('city.ruralDamascus', 'ريف دمشق') }
+    { id: "all", label: t("allCities", "جميع المدن") },
+    { id: "damascus", label: t("city.damascus", "دمشق") },
+    { id: "aleppo", label: t("city.aleppo", "حلب") },
+    { id: "homs", label: t("city.homs", "حمص") },
+    { id: "latakia", label: t("city.latakia", "اللاذقية") },
+    { id: "daraa", label: t("city.daraa", "درعا") },
+    { id: "tartous", label: t("city.tartous", "طرطوس") },
+    { id: "suweida", label: t("city.suweida", "السويداء") },
+    { id: "deirEzzor", label: t("city.deirEzzor", "دير الزور") },
+    { id: "raqqa", label: t("city.raqqa", "الرقة") },
+    { id: "idlib", label: t("city.idlib", "إدلب") },
+    { id: "hasakah", label: t("city.hasakah", "الحسكة") },
+    { id: "qamishli", label: t("city.qamishli", "القامشلي") },
+    { id: "ruralDamascus", label: t("city.ruralDamascus", "ريف دمشق") },
   ];
 
   const certificates = [
-    { id: 'all', label: t('allCertificates', 'جميع السندات') },
-    { id: 'realEstateTitle', label: t('certificate.realEstateTitle', 'طابو أخضر') },
-    { id: 'courtRuling', label: t('certificate.courtRuling', 'حكم محكمة') },
-    { id: 'notary', label: t('certificate.notary', 'كاتب عدل') },
-    { id: 'shares', label: t('certificate.shares', 'أسهم عقارية') }
+    { id: "all", label: t("allCertificates", "جميع السندات") },
+    { id: "realEstateTitle", label: t("certificate.realEstateTitle", "طابو أخضر") },
+    { id: "courtRuling", label: t("certificate.courtRuling", "حكم محكمة") },
+    { id: "notary", label: t("certificate.notary", "كاتب عدل") },
+    { id: "shares", label: t("certificate.shares", "أسهم عقارية") },
   ];
 
   return (
@@ -417,91 +406,91 @@ const FilterBar = ({ filters, onFilterChange }) => {
           <Search className="absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
           <input
             type="text"
-            placeholder={t('search-property-placeholder', 'ابحث عن عقار...')}
+            placeholder={t("search-property-placeholder", "ابحث عن عقار...")}
             className="w-full pr-12 px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 transition-all"
             value={filters.search}
             onChange={(e) => onFilterChange({ ...filters, search: e.target.value })}
           />
         </div>
-        <button
-          onClick={() => setShowFilters(!showFilters)}
-          className="px-6 py-3 bg-gray-100 rounded-xl font-medium hover:bg-gray-200 transition-colors flex items-center gap-2 text-gray-700"
-        >
+        <button onClick={() => setShowFilters(!showFilters)} className="px-6 py-3 bg-gray-100 rounded-xl font-medium hover:bg-gray-200 transition-colors flex items-center gap-2 text-gray-700">
           <Filter className="w-5 h-5" />
-          {t('advanced-filters', 'فلاتر متقدمة')}
-          <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
+          {t("advanced-filters", "فلاتر متقدمة")}
+          <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? "rotate-180" : ""}`} />
         </button>
       </div>
 
       <AnimatePresence>
         {showFilters && (
-          <motion.div
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: 'auto', opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            className="overflow-hidden"
-          >
+          <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={{ height: 0, opacity: 0 }} className="overflow-hidden">
             <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 pt-4 border-t border-gray-100">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">{t('property-type', 'نوع الاستثمار')}</label>
+                <label className="block text-sm font-medium text-gray-700 mb-2">{t("property-type", "نوع الاستثمار")}</label>
                 <select
                   value={filters.propertyType}
                   onChange={(e) => onFilterChange({ ...filters, propertyType: e.target.value })}
-                  className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
+                  className="w-full px-4 py-2 border bg-[#1e293b] border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
                 >
                   {propertyTypes.map((type) => (
-                    <option key={type.id} value={type.id}>{type.label}</option>
+                    <option key={type.id} value={type.id}>
+                      {type.label}
+                    </option>
                   ))}
                 </select>
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">{t('building-type', 'نوع البناء')}</label>
+                <label className="block text-sm font-medium text-gray-700 mb-2">{t("building-type", "نوع البناء")}</label>
                 <select
                   value={filters.buildingType}
                   onChange={(e) => onFilterChange({ ...filters, buildingType: e.target.value })}
-                  className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
+                  className="w-full px-4  bg-[#1e293b] py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
                 >
                   {buildingTypes.map((type) => (
-                    <option key={type.id} value={type.id}>{type.label}</option>
+                    <option key={type.id} value={type.id}>
+                      {type.label}
+                    </option>
                   ))}
                 </select>
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">{t('city', 'المدينة')}</label>
+                <label className="block text-sm font-medium text-gray-700 mb-2">{t("city", "المدينة")}</label>
                 <select
                   value={filters.city}
                   onChange={(e) => onFilterChange({ ...filters, city: e.target.value })}
-                  className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
+                  className="w-full px-4 py-2 border bg-[#1e293b] border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
                 >
                   {cities.map((city) => (
-                    <option key={city.id} value={city.id}>{city.label}</option>
+                    <option key={city.id} value={city.id}>
+                      {city.label}
+                    </option>
                   ))}
                 </select>
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">{t('price-range', 'مجال السعر')}</label>
+                <label className="block text-sm font-medium text-gray-700 mb-2">{t("price-range", "مجال السعر")}</label>
                 <select
                   value={filters.priceRange}
                   onChange={(e) => onFilterChange({ ...filters, priceRange: e.target.value })}
-                  className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
+                  className="w-full px-4 py-2 border bg-[#1e293b]   border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
                 >
                   {priceRanges.map((range) => (
-                    <option key={range.id} value={range.id}>{range.label}</option>
+                    <option key={range.id} value={range.id}>
+                      {range.label}
+                    </option>
                   ))}
                 </select>
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">{t('bedrooms', 'عدد الغرف')}</label>
+                <label className="block text-sm font-medium text-gray-700 mb-2">{t("bedrooms", "عدد الغرف")}</label>
                 <select
                   value={filters.bedrooms}
                   onChange={(e) => onFilterChange({ ...filters, bedrooms: e.target.value })}
-                  className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
+                  className="w-full px-4 py-2 border  bg-[#1e293b] border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
                 >
-                  <option value="all">{t('all-numbers', 'الكل')}</option>
+                  <option value="all">{t("all-numbers", "الكل")}</option>
                   <option value="1">1+</option>
                   <option value="2">2+</option>
                   <option value="3">3+</option>
@@ -511,13 +500,13 @@ const FilterBar = ({ filters, onFilterChange }) => {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">{t('bathrooms-label', 'عدد الحمامات')}</label>
+                <label className="block text-sm font-medium text-gray-700 mb-2">{t("bathrooms-label", "عدد الحمامات")}</label>
                 <select
                   value={filters.bathrooms}
                   onChange={(e) => onFilterChange({ ...filters, bathrooms: e.target.value })}
-                  className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
+                  className="w-full px-4 py-2 border bg-[#1e293b] border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
                 >
-                  <option value="all">{t('all-numbers', 'الكل')}</option>
+                  <option value="all">{t("all-numbers", "الكل")}</option>
                   <option value="1">1+</option>
                   <option value="2">2+</option>
                   <option value="3">3+</option>
@@ -526,31 +515,33 @@ const FilterBar = ({ filters, onFilterChange }) => {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">{t('certificate-label', 'الشهادة / السند العقاري')}</label>
+                <label className="block text-sm font-medium text-gray-700 mb-2">{t("certificate-label", "الشهادة / السند العقاري")}</label>
                 <select
                   value={filters.certificate}
                   onChange={(e) => onFilterChange({ ...filters, certificate: e.target.value })}
-                  className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
+                  className="w-full px-4 py-2 border bg-[#1e293b] border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
                 >
                   {certificates.map((cert) => (
-                    <option key={cert.id} value={cert.id}>{cert.label}</option>
+                    <option key={cert.id} value={cert.id}>
+                      {cert.label}
+                    </option>
                   ))}
                 </select>
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">{t('area-sqm', 'المساحة (م²)')}</label>
+                <label className="block text-sm font-medium text-gray-700 mb-2">{t("area-sqm", "المساحة (م²)")}</label>
                 <div className="flex gap-2">
                   <input
                     type="number"
-                    placeholder={t('from', 'من')}
+                    placeholder={t("from", "من")}
                     className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
                     value={filters.minArea}
                     onChange={(e) => onFilterChange({ ...filters, minArea: e.target.value })}
                   />
                   <input
                     type="number"
-                    placeholder={t('to', 'إلى')}
+                    placeholder={t("to", "إلى")}
                     className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
                     value={filters.maxArea}
                     onChange={(e) => onFilterChange({ ...filters, maxArea: e.target.value })}
@@ -561,28 +552,27 @@ const FilterBar = ({ filters, onFilterChange }) => {
 
             <div className="flex gap-3 mt-4 pt-4 border-t border-gray-100">
               <button
-                onClick={() => onFilterChange({
-                  search: '',
-                  propertyType: 'all',
-                  buildingType: 'all',
-                  city: 'all',
-                  priceRange: 'all',
-                  bedrooms: 'all',
-                  bathrooms: 'all',
-                  certificate: 'all',
-                  minArea: '',
-                  maxArea: '',
-                  features: []
-                })}
-                className="px-6 py-2 bg-gray-100 rounded-xl font-medium hover:bg-gray-200 transition-colors text-gray-700 text-sm"
+                onClick={() =>
+                  onFilterChange({
+                    search: "",
+                    propertyType: "all",
+                    buildingType: "all",
+                    city: "all",
+                    priceRange: "all",
+                    bedrooms: "all",
+                    bathrooms: "all",
+                    certificate: "all",
+                    minArea: "",
+                    maxArea: "",
+                    features: [],
+                  })
+                }
+                className="px-6 py-2 bg-gray-200 rounded-xl font-medium hover:bg-gray-200 transition-colors text-gray-700 text-sm"
               >
-                {t('reset', 'إعادة تعيين')}
+                {t("reset", "إعادة تعيين")}
               </button>
-              <button
-                onClick={() => setShowFilters(false)}
-                className="px-6 py-2 bg-gray-800 text-white rounded-xl font-medium hover:bg-gray-900 transition-colors text-sm"
-              >
-                {t('apply-filters', 'تطبيق')}
+              <button onClick={() => setShowFilters(false)} className="px-6 py-2 bg-gray-800 text-white rounded-xl font-medium hover:bg-gray-900 transition-colors text-sm">
+                {t("apply-filters", "تطبيق")}
               </button>
             </div>
           </motion.div>
@@ -594,24 +584,24 @@ const FilterBar = ({ filters, onFilterChange }) => {
 
 export default function PropertiesPage() {
   const { t, i18n } = useTranslation();
-  const [purposeTab, setPurposeTab] = useState('rent');
-  const [viewMode, setViewMode] = useState('grid');
-  const [sortBy, setSortBy] = useState('newest');
+  const [purposeTab, setPurposeTab] = useState("rent");
+  const [viewMode, setViewMode] = useState("grid");
+  const [sortBy, setSortBy] = useState("newest");
   const [properties, setProperties] = useState([]);
   const [loading, setLoading] = useState(true);
   const [showLoginDialog, setShowLoginDialog] = useState(false);
   const [filters, setFilters] = useState({
-    search: '',
-    propertyType: 'all',
-    buildingType: 'all',
-    city: 'all',
-    priceRange: 'all',
-    bedrooms: 'all',
-    bathrooms: 'all',
-    certificate: 'all',
-    minArea: '',
-    maxArea: '',
-    features: []
+    search: "",
+    propertyType: "all",
+    buildingType: "all",
+    city: "all",
+    priceRange: "all",
+    bedrooms: "all",
+    bathrooms: "all",
+    certificate: "all",
+    minArea: "",
+    maxArea: "",
+    features: [],
   });
 
   useEffect(() => {
@@ -620,80 +610,79 @@ export default function PropertiesPage() {
       try {
         const queryParams = new URLSearchParams();
 
-        if (filters.bedrooms !== 'all') {
-          queryParams.append('numberOfBedRooms', filters.bedrooms);
+        if (filters.bedrooms !== "all") {
+          queryParams.append("numberOfBedRooms", filters.bedrooms);
         }
 
-        if (filters.bathrooms !== 'all') {
-          queryParams.append('numberOfBathRooms', filters.bathrooms);
+        if (filters.bathrooms !== "all") {
+          queryParams.append("numberOfBathRooms", filters.bathrooms);
         }
 
         if (filters.minArea) {
-          queryParams.append('space', filters.minArea);
+          queryParams.append("space", filters.minArea);
         }
 
-        const buildingTypeReverseMap = { 
-          'apartment': 'Apartment', 
-          'villa': 'Villa', 
-          'sweet': 'Sweet', 
-          'room': 'Room', 
-          'studio': 'Studio', 
-          'office': 'Office', 
-          'farms': 'Farms', 
-          'shop': 'Shop', 
-          'warehouse': 'Warehouse' 
+        const buildingTypeReverseMap = {
+          apartment: "Apartment",
+          villa: "Villa",
+          sweet: "Sweet",
+          room: "Room",
+          studio: "Studio",
+          office: "Office",
+          farms: "Farms",
+          shop: "Shop",
+          warehouse: "Warehouse",
         };
-        if (filters.buildingType !== 'all' && buildingTypeReverseMap[filters.buildingType] !== undefined) {
-          queryParams.append('buildingType', buildingTypeReverseMap[filters.buildingType]);
+        if (filters.buildingType !== "all" && buildingTypeReverseMap[filters.buildingType] !== undefined) {
+          queryParams.append("buildingType", buildingTypeReverseMap[filters.buildingType]);
         }
 
         const propertyTypeReverseMap = {
-          'residential': 'Residential',
-          'commercial': 'Commercial',
-          'agricultural': 'Agricultural'
+          residential: "Residential",
+          commercial: "Commercial",
+          agricultural: "Agricultural",
         };
-        if (filters.propertyType !== 'all' && propertyTypeReverseMap[filters.propertyType] !== undefined) {
-          queryParams.append('propertyType', propertyTypeReverseMap[filters.propertyType]);
+        if (filters.propertyType !== "all" && propertyTypeReverseMap[filters.propertyType] !== undefined) {
+          queryParams.append("propertyType", propertyTypeReverseMap[filters.propertyType]);
         }
 
         const certificateReverseMap = {
-          'realEstateTitle': 'RealEstateTitle',
-          'courtRuling': 'CourtRuling',
-          'notary': 'Notary',
-          'shares': 'Shares'
+          realEstateTitle: "RealEstateTitle",
+          courtRuling: "CourtRuling",
+          notary: "Notary",
+          shares: "Shares",
         };
-        if (filters.certificate !== 'all' && certificateReverseMap[filters.certificate] !== undefined) {
-          queryParams.append('certificate', certificateReverseMap[filters.certificate]);
+        if (filters.certificate !== "all" && certificateReverseMap[filters.certificate] !== undefined) {
+          queryParams.append("certificate", certificateReverseMap[filters.certificate]);
         }
 
-        if (filters.city !== 'all') {
+        if (filters.city !== "all") {
           const cityFormatted = filters.city.charAt(0).toUpperCase() + filters.city.slice(1);
-          queryParams.append('city', cityFormatted);
+          queryParams.append("city", cityFormatted);
         }
 
-        const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://45.93.137.91/api';
+        const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://45.93.137.91/api";
         const rentEndpoint = `${baseUrl}/RentProperties/FilterRentProperties?${queryParams.toString()}`;
 
         const [rentRes, saleData] = await Promise.all([
           fetch(rentEndpoint, {
             headers: {
-              'Accept': 'application/json',
-            }
-          }).then(res => res.json()).catch(() => ({ data: [], isSuccess: false })),
+              Accept: "application/json",
+            },
+          })
+            .then((res) => res.json())
+            .catch(() => ({ data: [], isSuccess: false })),
           getSaleProperties().catch(() => []),
         ]);
 
         const rentList = rentRes.isSuccess && Array.isArray(rentRes.data) ? rentRes.data : [];
         const saleList = Array.isArray(saleData) ? saleData : [];
 
-        const mapped = [
-          ...rentList.map((p, i) => ({ ...mapApiProperty(t, p, i), purpose: 'rent' })),
-          ...saleList.map((p, i) => ({ ...mapApiProperty(t, p, rentList.length + i), purpose: 'sale' })),
-        ];
+        const mapped = [...rentList.map((p, i) => ({ ...mapApiProperty(t, p, i), purpose: "rent" })), ...saleList.map((p, i) => ({ ...mapApiProperty(t, p, rentList.length + i), purpose: "sale" }))];
 
         setProperties(mapped);
       } catch (err) {
-        console.error('[Properties] Failed to fetch properties:', err);
+        console.error("[Properties] Failed to fetch properties:", err);
       } finally {
         setLoading(false);
       }
@@ -703,17 +692,17 @@ export default function PropertiesPage() {
   }, [filters, t]);
 
   const filteredProperties = properties
-    .filter(p => p.purpose === purposeTab)
-    .filter(property => {
+    .filter((p) => p.purpose === purposeTab)
+    .filter((property) => {
       if (filters.search && !property.title.includes(filters.search) && !property.description.includes(filters.search)) {
         return false;
       }
-      if (filters.priceRange !== 'all') {
-        const [min, max] = filters.priceRange.split('-');
+      if (filters.priceRange !== "all") {
+        const [min, max] = filters.priceRange.split("-");
         if (max) {
           if (property.price < parseInt(min) || property.price > parseInt(max)) return false;
-        } else if (filters.priceRange.endsWith('+')) {
-          const minVal = parseInt(filters.priceRange.replace('+', ''));
+        } else if (filters.priceRange.endsWith("+")) {
+          const minVal = parseInt(filters.priceRange.replace("+", ""));
           if (property.price < minVal) return false;
         }
       }
@@ -721,33 +710,37 @@ export default function PropertiesPage() {
     })
     .sort((a, b) => {
       switch (sortBy) {
-        case 'price_asc': return a.price - b.price;
-        case 'price_desc': return b.price - a.price;
-        case 'rating': return b.rating - a.rating;
-        default: return 0;
+        case "price_asc":
+          return a.price - b.price;
+        case "price_desc":
+          return b.price - a.price;
+        case "rating":
+          return b.rating - a.rating;
+        default:
+          return 0;
       }
     });
 
   return (
-    <div dir={i18n.language === 'ar' ? 'rtl' : 'ltr'} className="min-h-screen bg-gray-50 py-8">
+    <div dir={i18n.language === "ar" ? "rtl" : "ltr"} className="min-h-screen bg-gray-50 py-8">
       <div className="container mx-auto px-4">
-        <motion.div
-          initial={{ opacity: 0, y: -20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center mb-8"
-        >
-          <h1 className="text-4xl font-bold text-gray-900 mb-2">{purposeTab === 'rent' ? t('properties-for-rent', 'عقارات للإيجار') : t('properties-for-sale', 'عقارات للبيع')}</h1>
-          <p className="text-gray-500">{t('best-properties-in-syria', 'أفضل العقارات المتاحة في سوريا مباشرة وبسهولة')}</p>
+        <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="text-center mb-8">
+          <h1 className="text-4xl font-bold text-gray-900 mb-2">{purposeTab === "rent" ? t("properties-for-rent", "عقارات للإيجار") : t("properties-for-sale", "عقارات للبيع")}</h1>
+          <p className="text-gray-500">{t("best-properties-in-syria", "أفضل العقارات المتاحة في سوريا مباشرة وبسهولة")}</p>
 
           <div className="flex justify-center mt-4">
             <div className="inline-flex bg-gray-100 rounded-xl p-1">
-              <button onClick={() => setPurposeTab('rent')}
-                className={`px-6 py-2 rounded-lg text-sm font-medium transition-all ${purposeTab === 'rent' ? 'bg-white text-amber-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}>
-                {t('for-rent', 'للإيجار')}
+              <button
+                onClick={() => setPurposeTab("rent")}
+                className={`px-6 py-2 rounded-lg text-sm font-medium transition-all ${purposeTab === "rent" ? "bg-white text-amber-600 shadow-sm" : "text-gray-500 hover:text-gray-700"}`}
+              >
+                {t("for-rent", "للإيجار")}
               </button>
-              <button onClick={() => setPurposeTab('sale')}
-                className={`px-6 py-2 rounded-lg text-sm font-medium transition-all ${purposeTab === 'sale' ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}>
-                {t('for-sale', 'للبيع')}
+              <button
+                onClick={() => setPurposeTab("sale")}
+                className={`px-6 py-2 rounded-lg text-sm font-medium transition-all ${purposeTab === "sale" ? "bg-white text-blue-600 shadow-sm" : "text-gray-500 hover:text-gray-700"}`}
+              >
+                {t("for-sale", "للبيع")}
               </button>
             </div>
           </div>
@@ -762,29 +755,29 @@ export default function PropertiesPage() {
 
         <div className="flex justify-between items-center my-6">
           <div className="text-gray-600">
-            <span className="font-bold text-gray-900">{filteredProperties.length}</span> {t('property-available', 'عقار متاح')}
+            <span className="font-bold text-gray-900">{filteredProperties.length}</span> {t("property-available", "عقار متاح")}
           </div>
           <div className="flex gap-3">
             <select
               value={sortBy}
               onChange={(e) => setSortBy(e.target.value)}
-              className="px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-gray-700 text-sm"
+              className="px-4 py-2 border bg-[#1e293b] border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-gray-700 text-sm"
             >
-              <option value="newest">{t('newest', 'الأحدث')}</option>
-              <option value="price_asc">{t('price-low-to-high', 'السعر من الأقل للأعلى')}</option>
-              <option value="price_desc">{t('price-high-to-low', 'السعر من الأعلى للأقل')}</option>
-              <option value="rating">{t('rating', 'التقييم')}</option>
+              <option value="newest">{t("newest", "الأحدث")}</option>
+              <option value="price_asc">{t("price-low-to-high", "السعر من الأقل للأعلى")}</option>
+              <option value="price_desc">{t("price-high-to-low", "السعر من الأعلى للأقل")}</option>
+              <option value="rating">{t("rating", "التقييم")}</option>
             </select>
             <div className="flex gap-2">
               <button
-                onClick={() => setViewMode('grid')}
-                className={`p-2 rounded-xl transition-colors ${viewMode === 'grid' ? 'bg-gray-800 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
+                onClick={() => setViewMode("grid")}
+                className={`p-2 rounded-xl transition-colors ${viewMode === "grid" ? "bg-gray-800 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`}
               >
                 <Grid3x3 className="w-5 h-5" />
               </button>
               <button
-                onClick={() => setViewMode('list')}
-                className={`p-2 rounded-xl transition-colors ${viewMode === 'list' ? 'bg-gray-800 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
+                onClick={() => setViewMode("list")}
+                className={`p-2 rounded-xl transition-colors ${viewMode === "list" ? "bg-gray-800 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`}
               >
                 <List className="w-5 h-5" />
               </button>
@@ -792,26 +785,19 @@ export default function PropertiesPage() {
           </div>
         </div>
 
-        <div className={viewMode === 'grid'
-          ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'
-          : 'space-y-4'
-        }>
+        <div className={viewMode === "grid" ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" : "space-y-4"}>
           {filteredProperties.map((property) => (
-            <PropertyCard key={property.id} property={property} viewMode={viewMode} onLoginRequired={() => setShowLoginDialog(true)} />
+            <PropertyCard key={property.id} property={property} viewMode={viewMode} type={property.purpose} onLoginRequired={() => setShowLoginDialog(true)} />
           ))}
         </div>
 
         {!loading && filteredProperties.length === 0 && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-center py-16"
-          >
+          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="text-center py-16">
             <div className="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
               <Home className="w-12 h-12 text-gray-400" />
             </div>
-            <h3 className="text-xl font-bold text-gray-700 mb-2">{t('no-properties', 'لا يوجد نتائج تطابق بحثك')}</h3>
-            <p className="text-gray-500">{t('try-changing-search-criteria', 'يرجى تجربة تعديل خيارات الفلترة والبحث')}</p>
+            <h3 className="text-xl font-bold text-gray-700 mb-2">{t("no-properties", "لا يوجد نتائج تطابق بحثك")}</h3>
+            <p className="text-gray-500">{t("try-changing-search-criteria", "يرجى تجربة تعديل خيارات الفلترة والبحث")}</p>
           </motion.div>
         )}
       </div>
@@ -827,20 +813,14 @@ export default function PropertiesPage() {
             <div className="w-14 h-14 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-4">
               <Heart className="w-7 h-7 text-amber-600" />
             </div>
-            <h3 className="text-xl font-bold text-gray-900 mb-2">{t('login-required-title', 'تسجيل الدخول مطلوب')}</h3>
-            <p className="text-gray-500 mb-6">{t('login-required-favorites-desc', 'يجب تسجيل الدخول لتتمكن من إضافة العقار للمفضلة')}</p>
+            <h3 className="text-xl font-bold text-gray-900 mb-2">{t("login-required-title", "تسجيل الدخول مطلوب")}</h3>
+            <p className="text-gray-500 mb-6">{t("login-required-favorites-desc", "يجب تسجيل الدخول لتتمكن من إضافة العقار للمفضلة")}</p>
             <div className="flex gap-3">
-              <button
-                onClick={() => setShowLoginDialog(false)}
-                className="flex-1 py-3 border border-gray-200 rounded-xl font-medium text-gray-600 hover:bg-gray-50 transition-colors"
-              >
-                {t('cancel', 'إلغاء')}
+              <button onClick={() => setShowLoginDialog(false)} className="flex-1 py-3 border border-gray-200 rounded-xl font-medium text-gray-600 hover:bg-gray-50 transition-colors">
+                {t("cancel", "إلغاء")}
               </button>
-              <Link
-                href="/login"
-                className="flex-1 py-3 bg-amber-500 text-white rounded-xl font-medium hover:bg-amber-600 transition-colors text-center"
-              >
-                {t('login', 'دخول')}
+              <Link href="/login" className="flex-1 py-3 bg-amber-500 text-white rounded-xl font-medium hover:bg-amber-600 transition-colors text-center">
+                {t("login", "دخول")}
               </Link>
             </div>
           </motion.div>
@@ -848,4 +828,4 @@ export default function PropertiesPage() {
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/property/[id]/PropertyDetail.js b/app/property/[id]/PropertyDetail.js
index badc68e..b16d46b 100644
--- a/app/property/[id]/PropertyDetail.js
+++ b/app/property/[id]/PropertyDetail.js
@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import { motion, AnimatePresence } from "framer-motion";
 import toast, { Toaster } from "react-hot-toast";
 import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
 import {
   MapPin,
   Bed,
@@ -244,9 +244,10 @@ function mapApiDetail(item) {
   };
 }
 
-export default function PropertyDetailsPage() {
+export default function PropertyDetailsPage({type}) {
   const { t, i18n } = useTranslation();
   const params = useParams();
+
   const router = useRouter();
   const { isFavorite, addFavorite, removeFavorite } = useFavorites();
 
@@ -271,6 +272,7 @@ export default function PropertyDetailsPage() {
 
   useEffect(() => {
     const id = params.id;
+   
     if (!id) return;
     setLoading(true);
 
@@ -278,7 +280,7 @@ export default function PropertyDetailsPage() {
       try {
         let data = null;
         try {
-          data = await getRentProperty(id);
+          data = type==="rent"?await getRentProperty(id):(await getSalePropertyById(id)) || (await getSaleProperty(id));
         } catch {}
         if (!data) {
           try {
diff --git a/app/property/[id]/page.js b/app/property/[id]/page.js
index 6f20726..e1a76e3 100644
--- a/app/property/[id]/page.js
+++ b/app/property/[id]/page.js
@@ -1,15 +1,20 @@
 import PropertyDetail from "./PropertyDetail";
 
-// Server-side API fetch for metadata (runs at request time on server)
-async function fetchPropertyForMeta(id) {
+async function fetchPropertyForMeta(id, type) {
   try {
-    const res = await fetch(`http://45.93.137.91/api/RentProperties/GetRentProperties`, {
+    const endpoint = type === "sale" ? "http://45.93.137.91/api/SaleProperties/GetSaleProperties" : "http://45.93.137.91/api/RentProperties/GetRentProperties";
+
+    const res = await fetch(endpoint, {
       next: { revalidate: 60 },
     });
+
     if (!res.ok) return null;
+
     const text = await res.text();
     const json = JSON.parse(text);
+
     const items = Array.isArray(json?.data) ? json.data : Array.isArray(json) ? json : [];
+
     return items.find((p) => p.id == id) || items[0] || null;
   } catch {
     return null;
@@ -18,7 +23,9 @@ async function fetchPropertyForMeta(id) {
 
 function mapProperty(item) {
   const info = item.propertyInformation || item.PropertyInformation || {};
+
   let details = {};
+
   if (typeof info.detailsJSON === "object" && info.detailsJSON) {
     details = info.detailsJSON;
   } else if (typeof info.DetailsJSON === "object" && info.DetailsJSON) {
@@ -30,10 +37,25 @@ function mapProperty(item) {
   }
 
   const price = item.monthlyRent || item.MonthlyRent || item.dailyRent || item.DailyRent || 0;
+
   const priceUnit = item.monthlyRent || item.MonthlyRent ? "monthly" : "daily";
+
   const buildingType = info.buildingType ?? info.BuildingType ?? 0;
-  const type = { 0: "apartment", 1: "villa", 2: "house" }[buildingType] || "apartment";
-  const typeLabel = { 0: "apartment", 1: "villa", 2: "house" }[buildingType] || "apartment";
+
+  const type =
+    {
+      0: "apartment",
+      1: "villa",
+      2: "house",
+    }[buildingType] || "apartment";
+
+  const typeLabel =
+    {
+      0: "apartment",
+      1: "villa",
+      2: "house",
+    }[buildingType] || "apartment";
+
   const address = info.address || info.Address || "";
   const bedrooms = info.numberOfBedRooms || info.NumberOfBedRooms || 0;
   const bathrooms = info.numberOfBathRooms || info.NumberOfBathRooms || 0;
@@ -56,9 +78,13 @@ function mapProperty(item) {
   };
 }
 
-export async function generateMetadata({ params }) {
+export async function generateMetadata({ params, searchParams }) {
   const { id } = await params;
-  const raw = await fetchPropertyForMeta(id);
+  const { type } = await searchParams;
+
+  console.log("Property type:", type);
+
+  const raw = await fetchPropertyForMeta(id, type);
 
   if (!raw) {
     return {
@@ -68,11 +94,13 @@ export async function generateMetadata({ params }) {
   }
 
   const p = mapProperty(raw);
-  const priceStr = `${p.price.toLocaleString()} ل.س / ${p.priceUnit === "daily" ? "يوم" : "شهر"}`;
-  const propertyImage = p.image ? (p.image.startsWith("http") ? p.image : `http://45.93.137.91${p.image}`) : "";
-  const logoUrl = `http://45.93.137.91/logo.png`;
 
-  // Use property image if available, otherwise logo
+  const priceStr = `${p.price.toLocaleString()} ل.س / ${p.priceUnit === "daily" ? "يوم" : "شهر"}`;
+
+  const propertyImage = p.image ? (p.image.startsWith("http") ? p.image : `http://45.93.137.91${p.image}`) : "";
+
+  const logoUrl = "http://45.93.137.91/logo.png";
+
   const ogImages = propertyImage
     ? [
         { url: propertyImage, width: 1200, height: 630 },
@@ -83,14 +111,16 @@ export async function generateMetadata({ params }) {
   return {
     title: `${p.title} - ${priceStr}`,
     description: p.description,
+
     openGraph: {
       title: `${p.title} - ${priceStr}`,
       description: p.description,
       images: ogImages,
-      url: `http://45.93.137.91/property/${id}`,
+      url: `http://45.93.137.91/property/${id}?type=${type}`,
       type: "website",
       siteName: "SweetHome",
     },
+
     twitter: {
       card: "summary_large_image",
       title: `${p.title} - ${priceStr}`,
@@ -100,6 +130,8 @@ export async function generateMetadata({ params }) {
   };
 }
 
-export default function PropertyPage({ params }) {
-  return <PropertyDetail params={params} />;
+export default async function PropertyPage({ params, searchParams }) {
+  const { type } = await searchParams;
+
+  return <PropertyDetail params={params} type={type} />;
 }
diff --git a/app/utils/api.js b/app/utils/api.js
index d27c44d..4a554ea 100644
--- a/app/utils/api.js
+++ b/app/utils/api.js
@@ -192,7 +192,7 @@ export async function getSaleProperties() {
 }
 
 export async function getSaleProperty(id) {
-  const items = await apiFetch("/SaleProperties/GetSaleProperties");
+  const items = await apiFetch(`/SaleProperties/GetSalePropertyById/${id}`);
   if (!Array.isArray(items)) return items;
   return items.find((p) => p.id == id) || items[0];
 }
diff --git a/middleware.js b/middleware.js
index 595504b..4af3cba 100644
--- a/middleware.js
+++ b/middleware.js
@@ -40,6 +40,7 @@ export function middleware(request) {
     return NextResponse.redirect(new URL("/", request.url));
   }
 
+  
   if (isOwnerRoute && !isOwner) {
     return NextResponse.redirect(new URL("/", request.url));
   }