diff --git a/auth.py b/auth.py
index 75be3f0..1d6d7a5 100644
--- a/auth.py
+++ b/auth.py
@@ -204,7 +204,9 @@ def _clear_auth_cookies(response: RedirectResponse) -> RedirectResponse:
 
 @router.get("/login", response_class=HTMLResponse)
 async def login_page(request: Request):
-    return templates.TemplateResponse(request, "auth/login.html", {})
+    return templates.TemplateResponse(request, "auth/login.html", {
+        "price_pref": request.state.price_pref,
+    })
 
 
 @router.post("/login")
@@ -216,6 +218,7 @@ async def login_submit(request: Request, db: db_dependency):
     if not user:
         return templates.TemplateResponse(request, "auth/login.html", {
             "error": "Invalid username or password",
+            "price_pref": request.state.price_pref,
         })
     access = create_access_token(user.username, user.id)
     refresh = create_refresh_token(user.username, user.id, db)
@@ -226,7 +229,9 @@ async def login_submit(request: Request, db: db_dependency):
 
 @router.get("/register", response_class=HTMLResponse)
 async def register_page(request: Request):
-    return templates.TemplateResponse(request, "auth/register.html", {})
+    return templates.TemplateResponse(request, "auth/register.html", {
+        "price_pref": request.state.price_pref,
+    })
 
 
 @router.post("/register")
@@ -258,6 +263,7 @@ async def register_submit(request: Request, db: db_dependency):
             "username": username,
             "email": email,
             "full_name": full_name,
+            "price_pref": request.state.price_pref,
         })
 
     db.add(User(
diff --git a/config.py b/config.py
index befc5a2..a44220c 100644
--- a/config.py
+++ b/config.py
@@ -14,6 +14,16 @@ _loader = jinja2.FileSystemLoader("templates")
 _env = jinja2.Environment(loader=_loader, autoescape=jinja2.select_autoescape(), cache_size=0)
 templates = Jinja2Templates(env=_env)
 
+# Custom Jinja2 filter: {{ prop.price|price_fmt(price_pref, prop.area_sqft) }}
+from price_pref import format_price as _format_price
+
+
+def _price_fmt(value, price_pref="total", area_sqft=0):
+    return _format_price(value, price_pref, area_sqft)
+
+
+_env.filters["price_fmt"] = _price_fmt
+
 bcrypt_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
 
 oauth2_bearer = OAuth2PasswordBearer(tokenUrl="auth/token", auto_error=False)
diff --git a/main.py b/main.py
index 79a2976..39a1d2d 100644
--- a/main.py
+++ b/main.py
@@ -35,6 +35,15 @@ class RefreshTokenMiddleware(BaseHTTPMiddleware):
 app.add_middleware(RefreshTokenMiddleware)
 
 
+class PricePrefMiddleware(BaseHTTPMiddleware):
+    async def dispatch(self, request: Request, call_next):
+        from price_pref import get_price_pref
+        request.state.price_pref = get_price_pref(request)
+        return await call_next(request)
+
+app.add_middleware(PricePrefMiddleware)
+
+
 db_dependency = Annotated[Session, Depends(get_db)]
 user_dependency = Annotated[Optional[dict], Depends(get_current_user)]
 
@@ -64,4 +73,5 @@ async def homepage(request: Request, db: db_dependency, user: user_dependency):
     return templates.TemplateResponse(request, "index.html", {
         "user": user,
         "properties": featured,
+        "price_pref": request.state.price_pref,
     })
diff --git a/price_pref.py b/price_pref.py
new file mode 100644
index 0000000..0ad38fe
--- /dev/null
+++ b/price_pref.py
@@ -0,0 +1,19 @@
+VALID_PRICE_PREFS = ("total", "sqft", "both")
+
+
+def get_price_pref(request) -> str:
+    pref = request.cookies.get("price_pref", "total")
+    if pref not in VALID_PRICE_PREFS:
+        pref = "total"
+    return pref
+
+
+def format_price(value: int, price_pref: str = "total", area_sqft: int = 0) -> str:
+
+    if area_sqft > 0:
+        unit_price = round(value / area_sqft)
+        if price_pref == "sqft":
+            return f"${unit_price:,}/sqft"
+        if price_pref == "both":
+            return f"${value:,} (${unit_price:,}/sqft)"
+    return f"${value:,}"
diff --git a/properties.py b/properties.py
index c3a5e12..34044d7 100644
--- a/properties.py
+++ b/properties.py
@@ -52,9 +52,17 @@ async def property_list(request: Request, db: Session = Depends(get_db)):
     if prop_type:
         query = query.filter(Property.property_type == prop_type)
     if min_price:
-        query = query.filter(Property.price >= int(min_price))
+        min_val = int(min_price)
+        if request.state.price_pref == "sqft":
+            query = query.filter(Property.price >= min_val * Property.area_sqft)
+        else:
+            query = query.filter(Property.price >= min_val)
     if max_price:
-        query = query.filter(Property.price <= int(max_price))
+        max_val = int(max_price)
+        if request.state.price_pref == "sqft":
+            query = query.filter(Property.price <= max_val * Property.area_sqft)
+        else:
+            query = query.filter(Property.price <= max_val)
     if bedrooms:
         query = query.filter(Property.bedrooms >= int(bedrooms))
     if city:
@@ -91,6 +99,7 @@ async def property_list(request: Request, db: Session = Depends(get_db)):
         "bedrooms": bedrooms,
         "city_filter": city,
         "state_filter": state,
+        "price_pref": request.state.price_pref,
     })
 
 
@@ -102,6 +111,7 @@ async def property_create_form(request: Request, db: Session = Depends(get_db)):
     return templates.TemplateResponse(request, "properties/create.html", {
         "user": user,
         "values": {},
+        "price_pref": request.state.price_pref,
     })
 
 
@@ -154,6 +164,7 @@ async def property_create_submit(
             "user": user,
             "values": {k: v for k, v in request._form.items()} if hasattr(request, '_form') else {},
             "error": "Please provide at least one contact method (email or phone).",
+            "price_pref": request.state.price_pref,
         })
 
     prop = Property(
@@ -211,6 +222,7 @@ async def property_detail(prop_id: int, request: Request, db: Session = Depends(
         "primary_image": primary_image,
         "images": images,
         "is_favorited": is_favorited,
+        "price_pref": request.state.price_pref,
     })
 
 
@@ -231,6 +243,7 @@ async def property_edit_form(prop_id: int, request: Request, db: Session = Depen
         "user": user,
         "prop": prop,
         "primary_image": primary_image,
+        "price_pref": request.state.price_pref,
     })
 
 
@@ -365,4 +378,5 @@ async def dashboard(request: Request, db: Session = Depends(get_db)):
         "user": user,
         "my_properties": my_properties,
         "favorites": favorites,
+        "price_pref": request.state.price_pref,
     })
diff --git a/templates/components/navbar.html b/templates/components/navbar.html
index eecffa0..6098b3e 100644
--- a/templates/components/navbar.html
+++ b/templates/components/navbar.html
@@ -16,6 +16,38 @@
                 <a href="/properties?type=rent" class="text-gray-200 hover:text-white transition">Rent</a>
                 <a href="/properties/new" class="text-gray-200 hover:text-white transition">Sell</a>
 
+                <!-- Price Preference Toggle -->
+                <div class="relative" id="pricePrefWrapper">
+                    <button type="button" onclick="togglePricePref()"
+                            class="flex items-center gap-1.5 text-gray-200 hover:text-white transition text-sm">
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                        </svg>
+                        <span id="pricePrefLabel">{{ {"total": "Total", "sqft": "/Sqft", "both": "Both"}[price_pref] }}</span>
+                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+                        </svg>
+                    </button>
+                    <div id="pricePrefDropdown"
+                         class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl z-50 py-1 border border-gray-200">
+                        <button onclick="setPricePref('total')"
+                                class="w-full text-left px-4 py-2 text-sm hover:bg-gray-50 transition
+                                {% if price_pref == 'total' %}text-accent font-semibold{% else %}text-gray-700{% endif %}">
+                            Total Price
+                        </button>
+                        <button onclick="setPricePref('sqft')"
+                                class="w-full text-left px-4 py-2 text-sm hover:bg-gray-50 transition
+                                {% if price_pref == 'sqft' %}text-accent font-semibold{% else %}text-gray-700{% endif %}">
+                            Price per Sq Ft
+                        </button>
+                        <button onclick="setPricePref('both')"
+                                class="w-full text-left px-4 py-2 text-sm hover:bg-gray-50 transition
+                                {% if price_pref == 'both' %}text-accent font-semibold{% else %}text-gray-700{% endif %}">
+                            Both
+                        </button>
+                    </div>
+                </div>
+
                 {% if user %}
                 <a href="/dashboard" class="text-gray-200 hover:text-white transition">Dashboard</a>
                 <div class="flex items-center space-x-3 ml-2">
@@ -52,6 +84,27 @@
                 <a href="/properties" class="text-gray-200 hover:text-white py-2">Buy</a>
                 <a href="/properties?type=rent" class="text-gray-200 hover:text-white py-2">Rent</a>
                 <a href="/properties/new" class="text-gray-200 hover:text-white py-2">Sell</a>
+                <!-- Mobile Price Preference -->
+                <div class="border-t border-white/20 pt-2 mt-1">
+                    <span class="text-xs text-gray-400 uppercase tracking-wide">Price Display</span>
+                    <div class="flex gap-2 mt-1">
+                        <button onclick="setPricePref('total')"
+                                class="px-3 py-1 text-xs rounded-full transition
+                                {% if price_pref == 'total' %}bg-warm text-primary font-semibold{% else %}bg-white/10 text-gray-300{% endif %}">
+                            Total
+                        </button>
+                        <button onclick="setPricePref('sqft')"
+                                class="px-3 py-1 text-xs rounded-full transition
+                                {% if price_pref == 'sqft' %}bg-warm text-primary font-semibold{% else %}bg-white/10 text-gray-300{% endif %}">
+                            /Sqft
+                        </button>
+                        <button onclick="setPricePref('both')"
+                                class="px-3 py-1 text-xs rounded-full transition
+                                {% if price_pref == 'both' %}bg-warm text-primary font-semibold{% else %}bg-white/10 text-gray-300{% endif %}">
+                            Both
+                        </button>
+                    </div>
+                </div>
                 {% if user %}
                 <a href="/dashboard" class="text-gray-200 hover:text-white py-2">Dashboard</a>
                 <a href="/auth/logout" class="text-warm hover:text-warm-dark py-2 font-medium">Logout ({{ user.username }})</a>
@@ -68,4 +121,20 @@
     document.getElementById('mobile-menu-btn')?.addEventListener('click', () => {
         document.getElementById('mobile-menu').classList.toggle('hidden');
     });
+
+    function togglePricePref() {
+        document.getElementById('pricePrefDropdown').classList.toggle('hidden');
+    }
+
+    function setPricePref(pref) {
+        document.cookie = 'price_pref=' + pref + ';path=/;max-age=31536000;samesite=lax';
+        location.reload();
+    }
+
+    document.addEventListener('click', function(e) {
+        var wrapper = document.getElementById('pricePrefWrapper');
+        if (wrapper && !wrapper.contains(e.target)) {
+            document.getElementById('pricePrefDropdown').classList.add('hidden');
+        }
+    });
 </script>
diff --git a/templates/components/property_card.html b/templates/components/property_card.html
index 63d3aef..979dfb8 100644
--- a/templates/components/property_card.html
+++ b/templates/components/property_card.html
@@ -1,4 +1,4 @@
-{% macro property_card(prop) %}
+{% macro property_card(prop, price_pref="total") %}
 <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
     <a href="/properties/{{ prop.id }}" class="block">
         <div class="relative h-52 bg-gray-200">
@@ -35,7 +35,7 @@
 
     <div class="p-5">
         <div class="flex items-center justify-between mb-2">
-            <span class="text-2xl font-bold text-primary">${{ "{:,}".format(prop.price) }}</span>
+            <span class="text-2xl font-bold text-primary">{{ prop.price|price_fmt(price_pref, prop.area_sqft) }}</span>
         </div>
 
         <h3 class="text-lg font-semibold text-gray-800 mb-1 truncate">
diff --git a/templates/dashboard/index.html b/templates/dashboard/index.html
index 0ff02a0..715897b 100644
--- a/templates/dashboard/index.html
+++ b/templates/dashboard/index.html
@@ -64,7 +64,7 @@
                                 </div>
                             </div>
                         </td>
-                        <td class="px-6 py-4 font-semibold text-primary">${{ "{:,}".format(prop.price) }}</td>
+                        <td class="px-6 py-4 font-semibold text-primary">{{ prop.price|price_fmt(price_pref, prop.area_sqft) }}</td>
                         <td class="px-6 py-4">
                             <span class="px-2.5 py-1 rounded-full text-xs font-medium
                                 {% if prop.status == 'active' %}bg-green-100 text-green-800
@@ -106,7 +106,7 @@
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {% from "components/property_card.html" import property_card %}
             {% for fav_prop in favorites %}
-            {{ property_card(fav_prop) }}
+            {{ property_card(fav_prop, price_pref) }}
             {% endfor %}
         </div>
         {% else %}
diff --git a/templates/index.html b/templates/index.html
index 83066aa..25c05ea 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -42,7 +42,7 @@
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         {% from "components/property_card.html" import property_card %}
         {% for prop in properties %}
-        {{ property_card(prop) }}
+        {{ property_card(prop, price_pref) }}
         {% endfor %}
     </div>
     {% else %}
diff --git a/templates/properties/create.html b/templates/properties/create.html
index cddc761..f5b6cf3 100644
--- a/templates/properties/create.html
+++ b/templates/properties/create.html
@@ -34,13 +34,37 @@
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div>
                 <label class="block text-sm font-medium text-gray-700 mb-1">Price (USD) *</label>
-                <div class="relative">
+                <!-- Input mode toggle -->
+                <div class="flex gap-1 mb-2 bg-gray-100 rounded-lg p-0.5 text-xs">
+                    <button type="button" id="priceModeTotal" onclick="setPriceMode('total')"
+                            class="flex-1 py-1.5 rounded-md font-medium transition bg-white shadow text-primary">
+                        Total Price
+                    </button>
+                    <button type="button" id="priceModeUnit" onclick="setPriceMode('unit')"
+                            class="flex-1 py-1.5 rounded-md font-medium transition text-gray-500">
+                        Per Sqft
+                    </button>
+                </div>
+                <!-- Total price input (default visible) -->
+                <div class="relative" id="totalPriceGroup">
                     <span class="absolute left-3 top-3 text-gray-500 font-medium">$</span>
-                    <input type="number" name="price" required min="0"
+                    <input type="number" id="totalPriceInput" name="price" required min="0"
                            value="{{ values.price|default('') }}"
                            placeholder="450,000"
                            class="w-full pl-8 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent outline-none transition">
                 </div>
+                <!-- Unit price input (hidden by default) -->
+                <div class="relative hidden" id="unitPriceGroup">
+                    <span class="absolute left-3 top-3 text-gray-500 font-medium">$</span>
+                    <input type="number" id="unitPriceInput" min="0" step="0.01"
+                           placeholder="225"
+                           class="w-full pl-8 pr-12 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent outline-none transition">
+                    <span class="absolute right-3 top-3 text-gray-400 text-sm">/sqft</span>
+                </div>
+                <!-- Reference total when in unit mode -->
+                <p class="text-xs text-gray-400 mt-1 hidden" id="priceRef">
+                    Total: <span id="priceRefValue">$0</span>
+                </p>
             </div>
             <div>
                 <label class="block text-sm font-medium text-gray-700 mb-1">Property Type *</label>
@@ -71,7 +95,7 @@
             </div>
             <div>
                 <label class="block text-sm font-medium text-gray-700 mb-1">Area (sqft) *</label>
-                <input type="number" name="area_sqft" required min="0"
+                <input type="number" id="areaSqftInput" name="area_sqft" required min="0"
                        value="{{ values.area_sqft|default('') }}"
                        placeholder="2000"
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent outline-none transition">
@@ -170,4 +194,61 @@
         </div>
     </form>
 </div>
+
+<script>
+(function() {
+    var priceMode = 'total';
+
+    window.setPriceMode = function(mode) {
+        priceMode = mode;
+        var totalGroup = document.getElementById('totalPriceGroup');
+        var unitGroup = document.getElementById('unitPriceGroup');
+        var totalBtn = document.getElementById('priceModeTotal');
+        var unitBtn = document.getElementById('priceModeUnit');
+        var ref = document.getElementById('priceRef');
+        var priceInput = document.getElementById('totalPriceInput');
+
+        if (mode === 'total') {
+            totalGroup.classList.remove('hidden');
+            unitGroup.classList.add('hidden');
+            ref.classList.add('hidden');
+            totalBtn.classList.add('bg-white', 'shadow', 'text-primary');
+            totalBtn.classList.remove('text-gray-500');
+            unitBtn.classList.remove('bg-white', 'shadow', 'text-primary');
+            unitBtn.classList.add('text-gray-500');
+        } else {
+            totalGroup.classList.add('hidden');
+            unitGroup.classList.remove('hidden');
+            ref.classList.remove('hidden');
+            unitBtn.classList.add('bg-white', 'shadow', 'text-primary');
+            unitBtn.classList.remove('text-gray-500');
+            totalBtn.classList.remove('bg-white', 'shadow', 'text-primary');
+            totalBtn.classList.add('text-gray-500');
+            updateTotalFromUnit();
+        }
+    };
+
+    function getArea() {
+        return parseInt(document.getElementById('areaSqftInput').value) || 0;
+    }
+
+    function updateTotalFromUnit() {
+        var unitVal = parseFloat(document.getElementById('unitPriceInput').value) || 0;
+        var area = getArea();
+        var total = Math.round(unitVal * area);
+        document.getElementById('totalPriceInput').value = total || '';
+        document.getElementById('priceRefValue').textContent = '$' + total.toLocaleString();
+    }
+
+    document.getElementById('unitPriceInput').addEventListener('input', updateTotalFromUnit);
+    document.getElementById('areaSqftInput').addEventListener('input', function() {
+        if (priceMode === 'unit') updateTotalFromUnit();
+    });
+
+    // Ensure total price is synced before form submission
+    document.querySelector('form').addEventListener('submit', function() {
+        if (priceMode === 'unit') updateTotalFromUnit();
+    });
+})();
+</script>
 {% endblock %}
diff --git a/templates/properties/detail.html b/templates/properties/detail.html
index e8d15e8..7f566ce 100644
--- a/templates/properties/detail.html
+++ b/templates/properties/detail.html
@@ -82,7 +82,7 @@
             <div>
                 <div class="flex items-center justify-between flex-wrap gap-4">
                     <h1 class="text-3xl font-bold text-primary">{{ prop.title }}</h1>
-                    <span class="text-3xl font-extrabold text-accent">${{ "{:,}".format(prop.price) }}</span>
+                    <span class="text-3xl font-extrabold text-accent">{{ prop.price|price_fmt(price_pref, prop.area_sqft) }}</span>
                 </div>
                 <p class="flex items-center text-gray-500 mt-2">
                     <svg class="w-5 h-5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/templates/properties/edit.html b/templates/properties/edit.html
index 088337e..304e7b5 100644
--- a/templates/properties/edit.html
+++ b/templates/properties/edit.html
@@ -32,12 +32,36 @@
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div>
                 <label class="block text-sm font-medium text-gray-700 mb-1">Price (USD) *</label>
-                <div class="relative">
+                <!-- Input mode toggle -->
+                <div class="flex gap-1 mb-2 bg-gray-100 rounded-lg p-0.5 text-xs">
+                    <button type="button" id="priceModeTotal" onclick="setPriceMode('total')"
+                            class="flex-1 py-1.5 rounded-md font-medium transition bg-white shadow text-primary">
+                        Total Price
+                    </button>
+                    <button type="button" id="priceModeUnit" onclick="setPriceMode('unit')"
+                            class="flex-1 py-1.5 rounded-md font-medium transition text-gray-500">
+                        Per Sqft
+                    </button>
+                </div>
+                <!-- Total price input (default visible) -->
+                <div class="relative" id="totalPriceGroup">
                     <span class="absolute left-3 top-3 text-gray-500 font-medium">$</span>
-                    <input type="number" name="price" required min="0"
+                    <input type="number" id="totalPriceInput" name="price" required min="0"
                            value="{{ prop.price }}"
                            class="w-full pl-8 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent outline-none transition">
                 </div>
+                <!-- Unit price input (hidden by default) -->
+                <div class="relative hidden" id="unitPriceGroup">
+                    <span class="absolute left-3 top-3 text-gray-500 font-medium">$</span>
+                    <input type="number" id="unitPriceInput" min="0" step="0.01"
+                           placeholder="225"
+                           class="w-full pl-8 pr-12 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent outline-none transition">
+                    <span class="absolute right-3 top-3 text-gray-400 text-sm">/sqft</span>
+                </div>
+                <!-- Reference total when in unit mode -->
+                <p class="text-xs text-gray-400 mt-1 hidden" id="priceRef">
+                    Total: <span id="priceRefValue">$0</span>
+                </p>
             </div>
             <div>
                 <label class="block text-sm font-medium text-gray-700 mb-1">Property Type *</label>
@@ -67,7 +91,7 @@
             </div>
             <div>
                 <label class="block text-sm font-medium text-gray-700 mb-1">Area (sqft) *</label>
-                <input type="number" name="area_sqft" required min="0"
+                <input type="number" id="areaSqftInput" name="area_sqft" required min="0"
                        value="{{ prop.area_sqft }}"
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent outline-none transition">
             </div>
@@ -173,4 +197,68 @@
         </div>
     </form>
 </div>
+
+<script>
+(function() {
+    var priceMode = 'total';
+
+    window.setPriceMode = function(mode) {
+        priceMode = mode;
+        var totalGroup = document.getElementById('totalPriceGroup');
+        var unitGroup = document.getElementById('unitPriceGroup');
+        var totalBtn = document.getElementById('priceModeTotal');
+        var unitBtn = document.getElementById('priceModeUnit');
+        var ref = document.getElementById('priceRef');
+
+        if (mode === 'total') {
+            totalGroup.classList.remove('hidden');
+            unitGroup.classList.add('hidden');
+            ref.classList.add('hidden');
+            totalBtn.classList.add('bg-white', 'shadow', 'text-primary');
+            totalBtn.classList.remove('text-gray-500');
+            unitBtn.classList.remove('bg-white', 'shadow', 'text-primary');
+            unitBtn.classList.add('text-gray-500');
+        } else {
+            totalGroup.classList.add('hidden');
+            unitGroup.classList.remove('hidden');
+            ref.classList.remove('hidden');
+            unitBtn.classList.add('bg-white', 'shadow', 'text-primary');
+            unitBtn.classList.remove('text-gray-500');
+            totalBtn.classList.remove('bg-white', 'shadow', 'text-primary');
+            totalBtn.classList.add('text-gray-500');
+            updateTotalFromUnit();
+        }
+    };
+
+    function getArea() {
+        return parseInt(document.getElementById('areaSqftInput').value) || 0;
+    }
+
+    function updateTotalFromUnit() {
+        var unitVal = parseFloat(document.getElementById('unitPriceInput').value) || 0;
+        var area = getArea();
+        var total = Math.round(unitVal * area);
+        document.getElementById('totalPriceInput').value = total || '';
+        document.getElementById('priceRefValue').textContent = '$' + total.toLocaleString();
+    }
+
+    document.getElementById('unitPriceInput').addEventListener('input', updateTotalFromUnit);
+    document.getElementById('areaSqftInput').addEventListener('input', function() {
+        if (priceMode === 'unit') updateTotalFromUnit();
+    });
+
+    // Initialize unit price from existing values
+    var priceInput = document.getElementById('totalPriceInput');
+    var areaInput = document.getElementById('areaSqftInput');
+    if (priceInput.value && areaInput.value && parseInt(areaInput.value) > 0) {
+        var unitPrice = parseInt(priceInput.value) / parseInt(areaInput.value);
+        document.getElementById('unitPriceInput').value = Math.round(unitPrice * 100) / 100;
+    }
+
+    // Ensure total price is synced before form submission
+    document.querySelector('form').addEventListener('submit', function() {
+        if (priceMode === 'unit') updateTotalFromUnit();
+    });
+})();
+</script>
 {% endblock %}
diff --git a/templates/properties/list.html b/templates/properties/list.html
index 3bf865c..8d04689 100644
--- a/templates/properties/list.html
+++ b/templates/properties/list.html
@@ -30,7 +30,12 @@
                 </div>
 
                 <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Price Range (USD)</label>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">
+                        Price Range
+                        {% if price_pref == 'sqft' %}
+                        <span class="text-xs text-gray-400 font-normal">(per sqft)</span>
+                        {% endif %}
+                    </label>
                     <div class="flex gap-2">
                         <input type="number" name="min_price" value="{{ min_price|default('') }}"
                                placeholder="Min" min="0"
@@ -86,7 +91,7 @@
             <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                 {% from "components/property_card.html" import property_card %}
                 {% for prop in properties %}
-                {{ property_card(prop) }}
+                {{ property_card(prop, price_pref) }}
                 {% endfor %}
             </div>