From 03e5985fee0432664c0e42d77230ca9953f6b483 Mon Sep 17 00:00:00 2001
From: asabizanjo <asabizenjo3@gmail.com>
Date: Fri, 12 Dec 2025 00:59:35 +0000
Subject: [PATCH] new listing

---
 src/app/page.tsx                              |   3 +-
 src/components/list-property/LivePreview.tsx  |  86 ---
 .../list-property/PropertyAmenities.tsx       |  42 --
 .../list-property/PropertyCapacity.tsx        |  48 --
 .../list-property/PropertyDescription.tsx     |  32 -
 .../list-property/PropertyInstantApproval.tsx |  35 --
 .../list-property/PropertyLocation.tsx        |  29 -
 .../list-property/PropertyPhotos.tsx          |  94 ---
 .../list-property/PropertyPlaceType.tsx       |  34 -
 .../list-property/PropertyPrice.tsx           |  24 -
 src/components/list-property/PropertyType.tsx |  32 -
 .../list-property/SafetyDetails.tsx           |  43 --
 src/components/list-property/list.tsx         | 583 +++++++++++++-----
 src/components/list-property/styles.ts        |  18 -
 src/components/list-property/types.ts         |  23 -
 15 files changed, 433 insertions(+), 693 deletions(-)
 delete mode 100644 src/components/list-property/LivePreview.tsx
 delete mode 100644 src/components/list-property/PropertyAmenities.tsx
 delete mode 100644 src/components/list-property/PropertyCapacity.tsx
 delete mode 100644 src/components/list-property/PropertyDescription.tsx
 delete mode 100644 src/components/list-property/PropertyInstantApproval.tsx
 delete mode 100644 src/components/list-property/PropertyLocation.tsx
 delete mode 100644 src/components/list-property/PropertyPhotos.tsx
 delete mode 100644 src/components/list-property/PropertyPlaceType.tsx
 delete mode 100644 src/components/list-property/PropertyPrice.tsx
 delete mode 100644 src/components/list-property/PropertyType.tsx
 delete mode 100644 src/components/list-property/SafetyDetails.tsx
 delete mode 100644 src/components/list-property/styles.ts
 delete mode 100644 src/components/list-property/types.ts

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0390966..4154c8c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -16,12 +16,13 @@ import Signup from "@/components/authentication/signup";
 import Landing from "@/pages/landing/page";
 import Profile from "@/pages/profile/page";
 
+
 export default function Home() {
   return (
    <>
    <div>
     <Navigation />
-    <Profile />
+    <List />
     <Footer />
    </div>
    </>
diff --git a/src/components/list-property/LivePreview.tsx b/src/components/list-property/LivePreview.tsx
deleted file mode 100644
index b41ff6e..0000000
--- a/src/components/list-property/LivePreview.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import Image from "next/image";
-import { Camera, Star } from "@phosphor-icons/react/dist/ssr";
-import { FormData } from "./types";
-import { figtree } from "./styles";
-
-export const LivePreview = ({ data }: { data: FormData }) => {
-    // Helpers to derive display values
-    const getCity = () => {
-        if (!data.location) return "YOUR CITY";
-        const parts = data.location.split(',');
-        return parts[0].trim().toUpperCase();
-    };
-
-    const getTitle = () => {
-        if (data.title) return data.title;
-        const type = data.propertyType ? data.propertyType.charAt(0).toUpperCase() + data.propertyType.slice(1) : "Property";
-        const place = data.placeType === 'entire' ? 'Entire place' : data.placeType === 'room' ? 'Private room' : 'Shared room';
-        return `${type} · ${place}`;
-    };
-
-    const getPrice = () => {
-        return data.price ? `₨${parseInt(data.price).toLocaleString()}` : "₨0";
-    };
-
-    return (
-        <div className="w-full max-w-md mx-auto sticky top-24">
-            <div className="bg-white border-2 border-black p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
-                <div className="flex items-center justify-between mb-4">
-                    <h3 className={`${figtree.className} text-xl font-bold`}>Preview</h3>
-                    <div className="px-3 py-1 bg-black text-white text-xs font-bold uppercase tracking-wider rounded-full">
-                        New
-                    </div>
-                </div>
-
-                {/* Card Replica */}
-                <div className="border-2 border-black overflow-hidden bg-white">
-                    {/* Image Placeholder */}
-                    <div className="relative aspect-[16/14] bg-gray-100 flex items-center justify-center border-b-2 border-black overflow-hidden">
-                        {data.photos && data.photos.length > 0 ? (
-                            <Image src={data.photos[0]} alt="Preview" fill className="object-cover" />
-                        ) : (
-                            <div className="flex flex-col items-center gap-2 text-gray-400">
-                                <Camera size={48} />
-                                <span className={`${figtree.className} font-medium`}>Cover Photo</span>
-                            </div>
-                        )}
-                    </div>
-
-                    {/* Details */}
-                    <div className="p-4 space-y-2">
-                        <div className="flex items-center justify-between">
-                            <p className={`${figtree.className} text-xs font-bold text-gray-700 tracking-wider uppercase`}>
-                                {getCity()}
-                            </p>
-                            <div className="flex items-center gap-1">
-                                <Star size={16} weight="fill" />
-                                <span className={`${figtree.className} text-sm font-medium`}>New</span>
-                            </div>
-                        </div>
-
-                        <h3 className={`${figtree.className} text-base font-normal text-gray-900 line-clamp-1`}>
-                            {getTitle()}
-                        </h3>
-
-                        <p className={`${figtree.className} text-base`}>
-                            <span className="font-bold">{getPrice()}</span>
-                            <span className="text-gray-600"> night</span>
-                        </p>
-                    </div>
-                </div>
-
-                {/* Live Updates Summary */}
-                <div className="mt-6 space-y-3 border-t-2 border-gray-100 pt-4">
-                    <div className="flex justify-between text-sm">
-                        <span className="text-gray-500">Guests</span>
-                        <span className="font-medium">{data.guests || 0}</span>
-                    </div>
-                    <div className="flex justify-between text-sm">
-                        <span className="text-gray-500">Amenities</span>
-                        <span className="font-medium">{data.amenities?.length || 0} selected</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};
diff --git a/src/components/list-property/PropertyAmenities.tsx b/src/components/list-property/PropertyAmenities.tsx
deleted file mode 100644
index 59f0949..0000000
--- a/src/components/list-property/PropertyAmenities.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { WifiHigh, CookingPot, Car, SwimmingPool, Wind, TelevisionSimple } from "@phosphor-icons/react/dist/ssr";
-import { StepProps } from "./types";
-import { titleStyle, subtitleStyle, optionCardStyle, figtree } from "./styles";
-
-export const PropertyAmenities = ({ data, updateData }: StepProps) => {
-    const amenities = [
-        { id: 'wifi', label: 'Wi-Fi', icon: WifiHigh },
-        { id: 'kitchen', label: 'Kitchen', icon: CookingPot },
-        { id: 'parking', label: 'Free parking', icon: Car },
-        { id: 'pool', label: 'Pool', icon: SwimmingPool },
-        { id: 'ac', label: 'Air conditioning', icon: Wind }, // Using House as placeholder for AC if needed
-        { id: 'tv', label: 'TV', icon: TelevisionSimple },
-    ];
-
-    const toggleAmenity = (id: string) => {
-        const current = data.amenities || [];
-        const updated = current.includes(id)
-            ? current.filter((item: string) => item !== id)
-            : [...current, id];
-        updateData('amenities', updated);
-    };
-
-    return (
-        <div className="flex flex-col">
-            <h2 className={titleStyle}>What does your place offer?</h2>
-            <p className={subtitleStyle}>You can add more amenities after you publish.</p>
-            <div className="grid grid-cols-2 gap-4">
-                {amenities.map((amenity) => (
-                    <button
-                        key={amenity.id}
-                        type="button"
-                        onClick={() => toggleAmenity(amenity.id)}
-                        className={`${optionCardStyle((data.amenities || []).includes(amenity.id))} items-start w-full text-left`}
-                    >
-                        <amenity.icon size={32} weight={(data.amenities || []).includes(amenity.id) ? "fill" : "regular"} />
-                        <span className={`${figtree.className} text-lg font-medium`}>{amenity.label}</span>
-                    </button>
-                ))}
-            </div>
-        </div>
-    )
-}
diff --git a/src/components/list-property/PropertyCapacity.tsx b/src/components/list-property/PropertyCapacity.tsx
deleted file mode 100644
index 510a841..0000000
--- a/src/components/list-property/PropertyCapacity.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { StepProps, FormData } from "./types";
-import { titleStyle, subtitleStyle, figtree } from "./styles";
-
-export const PropertyCapacity = ({ data, updateData }: StepProps) => {
-    const counters: { key: keyof FormData; label: string }[] = [
-        { key: 'guests', label: 'Guests' },
-        { key: 'bedrooms', label: 'Bedrooms' },
-        { key: 'beds', label: 'Beds' },
-        { key: 'bathrooms', label: 'Bathrooms' },
-    ];
-
-    const updateCount = (key: keyof FormData, delta: number) => {
-        const current = (data[key] as number) || 0;
-        updateData(key, Math.max(0, current + delta));
-    };
-
-    return (
-        <div className="flex flex-col">
-            <h2 className={titleStyle}>Share some basics about your place</h2>
-            <p className={subtitleStyle}>You'll add more details later, like bed types.</p>
-            <div className="flex flex-col gap-6">
-                {counters.map((item) => (
-                    <div key={item.key} className="flex items-center justify-between border-b-2 border-gray-100 pb-6">
-                        <span className={`${figtree.className} text-xl font-medium`}>{item.label}</span>
-                        <div className="flex items-center gap-6">
-                            <button
-                                type="button"
-                                onClick={() => updateCount(item.key, -1)}
-                                disabled={!data[item.key]}
-                                className="w-12 h-12 rounded-full border-2 border-black flex items-center justify-center hover:bg-gray-100 disabled:opacity-30 disabled:hover:bg-transparent transition-colors"
-                            >
-                                <span className="text-2xl mb-1">-</span>
-                            </button>
-                            <span className={`${figtree.className} text-xl w-8 text-center font-bold`}>{data[item.key] || 0}</span>
-                            <button
-                                type="button"
-                                onClick={() => updateCount(item.key, 1)}
-                                className="w-12 h-12 rounded-full border-2 border-black flex items-center justify-center hover:bg-gray-100 transition-colors"
-                            >
-                                <span className="text-2xl mb-1">+</span>
-                            </button>
-                        </div>
-                    </div>
-                ))}
-            </div>
-        </div>
-    )
-}
diff --git a/src/components/list-property/PropertyDescription.tsx b/src/components/list-property/PropertyDescription.tsx
deleted file mode 100644
index 9344ce5..0000000
--- a/src/components/list-property/PropertyDescription.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { StepProps } from "./types";
-import { titleStyle, subtitleStyle, inputStyle } from "./styles";
-
-export const PropertyDescription = ({ data, updateData }: StepProps) => {
-    return (
-        <div className="flex flex-col">
-            <h2 className={titleStyle}>How would you describe your place?</h2>
-            <p className={subtitleStyle}>Short and sweet works best.</p>
-            <div className="flex flex-col gap-6">
-                <div>
-                    <label className="block text-sm font-bold mb-2">Title</label>
-                    <input
-                        type="text"
-                        placeholder="e.g. Cozy Cottage in the Hills"
-                        className={inputStyle}
-                        value={data.title || ''}
-                        onChange={(e) => updateData('title', e.target.value)}
-                    />
-                </div>
-                <div>
-                    <label className="block text-sm font-bold mb-2">Description</label>
-                    <textarea
-                        placeholder="This unique place has a style all its own..."
-                        className={`${inputStyle} h-48 resize-none`}
-                        value={data.description || ''}
-                        onChange={(e) => updateData('description', e.target.value)}
-                    />
-                </div>
-            </div>
-        </div>
-    )
-}
diff --git a/src/components/list-property/PropertyInstantApproval.tsx b/src/components/list-property/PropertyInstantApproval.tsx
deleted file mode 100644
index 67aa4c6..0000000
--- a/src/components/list-property/PropertyInstantApproval.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { CheckCircle, Article } from "@phosphor-icons/react/dist/ssr";
-import { StepProps } from "./types";
-import { titleStyle, optionCardStyle } from "./styles";
-
-export const PropertyInstantApproval = ({ data, updateData }: StepProps) => {
-    return (
-        <div className="flex flex-col">
-            <h2 className={titleStyle}>Decide how you'll confirm reservations</h2>
-            <div className="flex flex-col gap-4">
-                <button
-                    type="button"
-                    onClick={() => updateData('instantBook', true)}
-                    className={`${optionCardStyle(data.instantBook === true)} w-full flex-row items-start text-left`}
-                >
-                    <CheckCircle size={32} weight={data.instantBook === true ? "fill" : "regular"} className="shrink-0" />
-                    <div className="flex flex-col">
-                        <span className="font-bold text-lg">Use Instant Book</span>
-                        <span className="text-gray-600">Guests can book automatically. No need to approve reservations. You will be notified of each booking request.</span>
-                    </div>
-                </button>
-                <button
-                    type="button"
-                    onClick={() => updateData('instantBook', false)}
-                    className={`${optionCardStyle(data.instantBook === false)} w-full flex-row items-start text-left`}
-                >
-                    <Article size={32} weight={data.instantBook === false ? "fill" : "regular"} className="shrink-0" />
-                    <div className="flex flex-col">
-                        <span className="font-bold text-lg">Approve manually</span>
-                        <span className="text-gray-600">You approve or decline booking requests for each reservation. You will be notified of each booking request. </span>
-                    </div>
-                </button>
-            </div>
-        </div>
-    )
-}
diff --git a/src/components/list-property/PropertyLocation.tsx b/src/components/list-property/PropertyLocation.tsx
deleted file mode 100644
index a2c3759..0000000
--- a/src/components/list-property/PropertyLocation.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { MapPin } from "@phosphor-icons/react/dist/ssr";
-import { StepProps } from "./types";
-import { titleStyle, subtitleStyle, inputStyle, figtree } from "./styles";
-
-export const PropertyLocation = ({ data, updateData }: StepProps) => {
-    return (
-        <div className="flex flex-col">
-            <h2 className={titleStyle}>Where's your place located?</h2>
-            <p className={subtitleStyle}>Your address is only shared with guests after they've made a reservation.</p>
-            <div className="flex flex-col gap-6">
-                <div className="relative">
-                    <MapPin size={24} className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500" />
-                    <input
-                        type="text"
-                        placeholder="Enter your address"
-                        className={`${inputStyle} pl-12`}
-                        value={data.location || ''}
-                        onChange={(e) => updateData('location', e.target.value)}
-                    />
-                </div>
-                <div className="w-full h-80 bg-gray-100 border-2 border-black flex flex-col items-center justify-center gap-4 relative overflow-hidden group">
-                    <div className="absolute inset-0 opacity-10 bg-[radial-gradient(#000_1px,transparent_1px)] [background-size:16px_16px]" />
-                    <MapPin size={48} className="text-gray-400 group-hover:text-black transition-colors duration-300" weight="fill" />
-                    <span className={`${figtree.className} text-gray-500 font-medium`}>Map Preview</span>
-                </div>
-            </div>
-        </div>
-    )
-}
diff --git a/src/components/list-property/PropertyPhotos.tsx b/src/components/list-property/PropertyPhotos.tsx
deleted file mode 100644
index 613a620..0000000
--- a/src/components/list-property/PropertyPhotos.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useRef, ChangeEvent } from "react";
-import Image from "next/image";
-import { Camera, X, WarningCircle } from "@phosphor-icons/react/dist/ssr";
-import { StepProps } from "./types";
-import { titleStyle, subtitleStyle, figtree } from "./styles";
-
-export const PropertyPhotos = ({ data, updateData }: StepProps) => {
-    const fileInputRef = useRef<HTMLInputElement>(null);
-
-    const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
-        if (e.target.files) {
-            const newPhotos = Array.from(e.target.files).map(file => URL.createObjectURL(file));
-            const currentPhotos = data.photos || [];
-            updateData('photos', [...currentPhotos, ...newPhotos]);
-        }
-    };
-
-    const removePhoto = (index: number) => {
-        const currentPhotos = data.photos || [];
-        const updated = currentPhotos.filter((_, i) => i !== index);
-        updateData('photos', updated);
-    };
-
-    const makeCover = (index: number) => {
-        const currentPhotos = data.photos || [];
-        if (index === 0 || index >= currentPhotos.length) return;
-
-        const newPhotos = [...currentPhotos];
-        const [selectedPhoto] = newPhotos.splice(index, 1);
-        newPhotos.unshift(selectedPhoto);
-
-        updateData('photos', newPhotos);
-    };
-
-    return (
-        <div className="flex flex-col">
-            <h2 className={titleStyle}>Add some photos of your house</h2>
-            <p className={subtitleStyle}>You'll need 5 photos to get started. You can add more or make changes later.</p>
-
-            <div className="flex flex-col gap-6">
-                <div
-                    onClick={() => fileInputRef.current?.click()}
-                    className="border-2 border-dashed border-gray-300 rounded-lg p-12 flex flex-col items-center justify-center gap-4 cursor-pointer hover:bg-gray-50 transition-colors"
-                >
-                    <Camera size={48} className="text-gray-400" />
-                    <span className={`${figtree.className} text-lg font-medium underline`}>Upload photos</span>
-                    <span className="text-sm text-gray-500">JPG, PNG up to 10MB</span>
-                    <input
-                        type="file"
-                        multiple
-                        accept="image/*"
-                        className="hidden"
-                        ref={fileInputRef}
-                        onChange={handleFileChange}
-                    />
-                </div>
-
-                {data.photos && data.photos.length > 0 && (
-                    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-                        {data.photos.map((photo, index) => (
-                            <div key={index} className="relative aspect-square border-2 border-black rounded-lg overflow-hidden group">
-                                <Image src={photo} alt={`Property ${index + 1}`} fill className="object-cover" />
-                                <button
-                                    onClick={() => removePhoto(index)}
-                                    className="absolute top-2 right-2 bg-white rounded-full p-1 border-2 border-black hover:bg-red-50 transition-colors z-10"
-                                >
-                                    <X size={16} />
-                                </button>
-                                {index === 0 && (
-                                    <div className="absolute bottom-2 left-2 bg-black text-white text-xs px-2 py-1 rounded z-10">Cover Photo</div>
-                                )}
-                                {index !== 0 && (
-                                    <button
-                                        onClick={() => makeCover(index)}
-                                        className="absolute bottom-2 left-2 bg-white/90 text-black text-xs font-bold px-2 py-1 rounded border-2 border-black opacity-0 group-hover:opacity-100 transition-opacity z-10 hover:bg-[#E7FE78]"
-                                    >
-                                        Make Cover
-                                    </button>
-                                )}
-                            </div>
-                        ))}
-                    </div>
-                )}
-
-                {(!data.photos || data.photos.length < 5) && (
-                    <div className="flex items-center gap-2 text-orange-600 bg-orange-50 p-4 rounded-lg border border-orange-200">
-                        <WarningCircle size={24} />
-                        <span className="font-medium">Please upload at least {5 - (data.photos?.length || 0)} more photos</span>
-                    </div>
-                )}
-            </div>
-        </div>
-    )
-}
diff --git a/src/components/list-property/PropertyPlaceType.tsx b/src/components/list-property/PropertyPlaceType.tsx
deleted file mode 100644
index e178670..0000000
--- a/src/components/list-property/PropertyPlaceType.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { CheckCircle } from "@phosphor-icons/react/dist/ssr";
-import { StepProps } from "./types";
-import { titleStyle, subtitleStyle, optionCardStyle, figtree } from "./styles";
-
-export const PropertyPlaceType = ({ data, updateData }: StepProps) => {
-    const places = [
-        { id: 'entire', label: 'An entire place', description: 'Guests have the entire property to themselves, with full privacy and unrestricted access.' },
-        { id: 'room', label: 'A room', description: 'Guests have their own private room within the home, along with comfortable access to shared spaces.' },
-        { id: 'shared', label: 'A shared room', description: 'Guests sleep in a room or common area that may be shared with others.' },
-    ];
-
-    return (
-        <div className="flex flex-col">
-            <h2 className={titleStyle}>What type of place will guests have?</h2>
-            <p className={subtitleStyle}>Choose the level of privacy your guests will enjoy.</p>
-            <div className="flex flex-col gap-4">
-                {places.map((place) => (
-                    <button
-                        key={place.id}
-                        type="button"
-                        onClick={() => updateData('placeType', place.id)}
-                        className={`${optionCardStyle(data.placeType === place.id)} flex-row justify-between text-left items-center w-full p-6`}
-                    >
-                        <div className="flex flex-col gap-1">
-                            <span className={`${figtree.className} text-xl font-bold`}>{place.label}</span>
-                            <span className={`${figtree.className} text-gray-600`}>{place.description}</span>
-                        </div>
-                        {data.placeType === place.id && <CheckCircle size={32} weight="fill" />}
-                    </button>
-                ))}
-            </div>
-        </div>
-    )
-}
diff --git a/src/components/list-property/PropertyPrice.tsx b/src/components/list-property/PropertyPrice.tsx
deleted file mode 100644
index 6482b76..0000000
--- a/src/components/list-property/PropertyPrice.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { StepProps } from "./types";
-import { titleStyle, subtitleStyle, figtree } from "./styles";
-
-export const PropertyPrice = ({ data, updateData }: StepProps) => {
-    return (
-        <div className="flex flex-col">
-            <h2 className={titleStyle}>Now, set your price</h2>
-            <p className={subtitleStyle}>You can change it anytime.</p>
-            <div className="flex flex-col gap-8 items-center py-12 bg-[#F7F7F7] border-2 border-black">
-                <div className="relative w-full max-w-xs">
-                    <span className="absolute left-4 top-1/2 -translate-y-1/2 text-4xl font-bold text-gray-400">₨</span>
-                    <input
-                        type="number"
-                        placeholder="0"
-                        className="w-full bg-transparent text-6xl font-bold text-center outline-none p-4"
-                        value={data.price || ''}
-                        onChange={(e) => updateData('price', e.target.value)}
-                    />
-                </div>
-                <p className={`${figtree.className} text-xl text-gray-500`}>per night</p>
-            </div>
-        </div>
-    )
-}
diff --git a/src/components/list-property/PropertyType.tsx b/src/components/list-property/PropertyType.tsx
deleted file mode 100644
index 4b632e1..0000000
--- a/src/components/list-property/PropertyType.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { House, Buildings, Farm, Bed } from "@phosphor-icons/react/dist/ssr";
-import { StepProps } from "./types";
-import { titleStyle, subtitleStyle, optionCardStyle, figtree } from "./styles";
-
-export const PropertyType = ({ data, updateData }: StepProps) => {
-    const types = [
-        { id: 'house', label: 'House', icon: House },
-        { id: 'flat', label: 'Flat', icon: Buildings },
-        { id: 'farmhouse', label: 'Farmhouse', icon: Farm },
-        { id: 'guesthouse', label: 'Guesthouse', icon: Bed },
-    ];
-
-    return (
-        <div className="flex flex-col">
-            <h2 className={titleStyle}>What kind of place will you host?</h2>
-            <p className={subtitleStyle}>Select the category that best describes your property.</p>
-            <div className="grid grid-cols-2 gap-4">
-                {types.map((type) => (
-                    <button
-                        key={type.id}
-                        type="button"
-                        onClick={() => updateData('propertyType', type.id)}
-                        className={optionCardStyle(data.propertyType === type.id)}
-                    >
-                        <type.icon size={48} weight={data.propertyType === type.id ? "fill" : "light"} />
-                        <span className={`${figtree.className} text-xl font-medium`}>{type.label}</span>
-                    </button>
-                ))}
-            </div>
-        </div>
-    )
-}
diff --git a/src/components/list-property/SafetyDetails.tsx b/src/components/list-property/SafetyDetails.tsx
deleted file mode 100644
index 18d9ceb..0000000
--- a/src/components/list-property/SafetyDetails.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Camera, ShieldCheck, Farm } from "@phosphor-icons/react/dist/ssr";
-import { StepProps } from "./types";
-import { titleStyle, optionCardStyle, figtree } from "./styles";
-
-export const SafetyDetails = ({ data, updateData }: StepProps) => {
-    const safetyItems = [
-        { id: 'camera', label: 'Security camera(s)', icon: Camera },
-        { id: 'weapons', label: 'Dangerous weapons', icon: ShieldCheck },
-        { id: 'animals', label: 'Dangerous animals', icon: Farm },
-    ];
-
-    const toggleSafety = (id: string) => {
-        const current = data.safety || [];
-        const updated = current.includes(id)
-            ? current.filter((item: string) => item !== id)
-            : [...current, id];
-        updateData('safety', updated);
-    };
-
-    return (
-        <div className="flex flex-col">
-            <h2 className={titleStyle}>Does your place have any of these?</h2>
-            <div className="flex flex-col gap-4">
-                {safetyItems.map((item) => (
-                    <button
-                        key={item.id}
-                        type="button"
-                        onClick={() => toggleSafety(item.id)}
-                        className={`${optionCardStyle((data.safety || []).includes(item.id))} flex-row justify-between items-center w-full`}
-                    >
-                        <div className="flex items-center gap-4">
-                            <item.icon size={32} />
-                            <span className={`${figtree.className} text-lg font-medium`}>{item.label}</span>
-                        </div>
-                        <div className={`w-6 h-6 rounded-full border-2 border-black flex items-center justify-center transition-colors ${(data.safety || []).includes(item.id) ? 'bg-black' : 'bg-transparent'}`}>
-                            {(data.safety || []).includes(item.id) && <div className="w-2 h-2 bg-white rounded-full" />}
-                        </div>
-                    </button>
-                ))}
-            </div>
-        </div>
-    )
-}
diff --git a/src/components/list-property/list.tsx b/src/components/list-property/list.tsx
index 98c2f5f..1044887 100644
--- a/src/components/list-property/list.tsx
+++ b/src/components/list-property/list.tsx
@@ -1,185 +1,464 @@
-"use client";
+'use client';
 
-import { useState, useRef } from "react";
-import gsap from "gsap";
-import { useGSAP } from "@gsap/react";
-import { CaretLeft, CaretRight } from "@phosphor-icons/react/dist/ssr";
+import { useState, useRef, useEffect } from 'react';
+import { useGSAP } from '@gsap/react';
+import gsap from 'gsap';
+import { CaretLeft, CaretRight, House, Buildings, Tent, MapPin, Users, Bed, Toilet, CheckCircle, UploadSimple, ShieldCheck, WifiHigh, Car, SwimmingPool, Desktop, Moon, Plant, HouseLine, X, Farm, City, Plus, Minus } from '@phosphor-icons/react/dist/ssr';
+import localFont from 'next/font/local';
+import Image from 'next/image';
 
-import { FormData, FormValue } from "./types";
-import { containerStyle, buttonStyle, secondaryButtonStyle, figtree } from "./styles";
+const figtree = localFont({
+    src: [
+        {
+            path: '../../../public/Fonts/figtree/figtree.ttf',
+        },
+    ],
+});
 
-import { PropertyType } from "./PropertyType";
-import { PropertyPlaceType } from "./PropertyPlaceType";
-import { PropertyLocation } from "./PropertyLocation";
-import { PropertyCapacity } from "./PropertyCapacity";
-import { PropertyAmenities } from "./PropertyAmenities";
-import { PropertyDescription } from "./PropertyDescription";
-import { PropertyPhotos } from "./PropertyPhotos";
-import { PropertyPrice } from "./PropertyPrice";
-import { PropertyInstantApproval } from "./PropertyInstantApproval";
-import { SafetyDetails } from "./SafetyDetails";
-import { LivePreview } from "./LivePreview";
+// Types for form data
+interface FormData {
+    propertyType: string;
+    location: string;
+    description: string;
+    title: string;
+    guests: number;
+    bedrooms: number;
+    beds: number;
+    bathrooms: number;
+    amenities: string[];
+    safety: string[];
+    photos: File[]; // heavily mocked for now
+    instantApproval: boolean;
+}
 
-function List() {
+const PROPERTY_TYPES = [
+    { id: 'shared_house', label: 'Shared House', icon: Users },
+    { id: 'entire_house', label: 'Entire House', icon: House },
+    { id: 'farmhouse', label: 'Farmhouse', icon: Farm },
+    { id: 'guesthouse', label: 'Guesthouse', icon: HouseLine },
+    { id: 'apartment', label: 'Apartment', icon: City },
+    { id: 'cabin', label: 'Cabin', icon: Tent },
+];
+
+const AMENITIES_LIST = [
+    { id: 'wifi', label: 'Wi-Fi', icon: WifiHigh },
+    { id: 'parking', label: 'Free Parking', icon: Car },
+    { id: 'pool', label: 'Pool', icon: SwimmingPool },
+    { id: 'workspace', label: 'Workspace', icon: Desktop },
+];
+
+const SAFETY_LIST = [
+    { id: 'smoke_alarm', label: 'Smoke Alarm', icon: ShieldCheck },
+    { id: 'first_aid', label: 'First Aid Kit', icon: ShieldCheck },
+    { id: 'fire_ext', label: 'Fire Extinguisher', icon: ShieldCheck },
+];
+
+export default function List() {
     const [step, setStep] = useState(0);
-    const [direction, setDirection] = useState(1);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const formRef = useRef<HTMLDivElement>(null);
+
     const [formData, setFormData] = useState<FormData>({
-        guests: 1,
-        bedrooms: 1,
-        beds: 1,
-        bathrooms: 1,
+        propertyType: '',
+        location: '',
+        description: '',
+        title: '',
+        guests: 4,
+        bedrooms: 2,
+        beds: 2,
+        bathrooms: 1.5,
+        amenities: [],
+        safety: [],
+        photos: [],
+        instantApproval: false,
     });
-    const contentRef = useRef<HTMLDivElement>(null);
 
-    const steps = [
-        PropertyType,
-        PropertyPlaceType,
-        PropertyLocation,
-        PropertyCapacity,
-        PropertyAmenities,
-        PropertyDescription,
-        PropertyPhotos,
-        PropertyPrice,
-        PropertyInstantApproval,
-        SafetyDetails
-    ];
-
-    const phases = [
-        { name: "Basics", start: 0, end: 4 },
-        { name: "Description", start: 5, end: 6 },
-        { name: "Publish", start: 7, end: 9 }
-    ];
-
-    const currentPhaseIndex = phases.findIndex(p => step >= p.start && step <= p.end);
-    const currentPhase = phases[currentPhaseIndex];
-
-    const CurrentStepComponent = steps[step];
-    const totalSteps = steps.length;
-
-    const updateData = (key: keyof FormData, value: FormValue) => {
-        setFormData(prev => ({ ...prev, [key]: value }));
-    };
-
-    const handleNext = () => {
-        // Validation for photos
-        if (step === 6 && (!formData.photos || formData.photos.length < 5)) {
-            alert("Please upload at least 5 photos to continue.");
-            return;
-        }
-
-        if (step < steps.length - 1) {
-            setDirection(1);
-            setStep(prev => prev + 1);
-        }
-    };
-
-    const handleBack = () => {
-        if (step > 0) {
-            setDirection(-1);
-            setStep(prev => prev - 1);
-        }
-    };
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [isSuccess, setIsSuccess] = useState(false);
+    const [error, setError] = useState('');
 
+    // Animation for step transitions
     useGSAP(() => {
-        if (!contentRef.current) return;
-        gsap.fromTo(contentRef.current,
-            { x: direction * 20, opacity: 0 },
-            { x: 0, opacity: 1, duration: 0.4, ease: "power2.out" }
+        gsap.fromTo(formRef.current,
+            { opacity: 0, x: 20 },
+            { opacity: 1, x: 0, duration: 0.5, ease: 'power2.out' }
         );
     }, [step]);
 
-    return (
-        <div className="flex min-h-screen w-full bg-white">
-            {/* Left Panel - Form */}
-            <div className="w-full lg:w-1/2 flex flex-col h-screen relative">
-                {/* Header Section */}
-                <div className="bg-white z-10 border-b-2 border-gray-100">
-                    <div className="px-8 py-6 flex justify-between items-center">
-                        <div className="flex items-center gap-4">
-                            <div className="w-10 h-10 bg-black text-white rounded-full flex items-center justify-center font-bold text-lg">
-                                {step + 1}
-                            </div>
-                            <div className="flex flex-col">
-                                <span className={`${figtree.className} font-bold text-sm uppercase tracking-wider`}>Step {step + 1} of {totalSteps}</span>
-                                <span className={`${figtree.className} text-xs text-gray-500`}>{currentPhase.name}</span>
+    const handleNext = () => {
+        if (step === 5 && formData.photos.length < 5) {
+            setError('Please upload at least 5 photos to continue.');
+            return;
+        }
+        setError('');
+        setStep((prev) => prev + 1);
+    };
+
+    const handleBack = () => {
+        setStep((prev) => Math.max(0, prev - 1));
+    };
+
+    const handleChange = (field: keyof FormData, value: any) => {
+        setFormData((prev) => ({ ...prev, [field]: value }));
+    };
+
+    const toggleArrayItem = (field: 'amenities' | 'safety', item: string) => {
+        setFormData((prev) => {
+            const list = prev[field];
+            return list.includes(item)
+                ? { ...prev, [field]: list.filter((i) => i !== item) }
+                : { ...prev, [field]: [...list, item] };
+        });
+    };
+
+    const handleSubmit = () => {
+        setIsSubmitting(true);
+        // Simulate API call
+        setTimeout(() => {
+            setIsSubmitting(false);
+            setIsSuccess(true);
+        }, 2000);
+    };
+
+    // Render Steps
+    const renderStep = () => {
+        if (isSuccess) {
+            return (
+                <div className="flex flex-col items-center justify-center h-full text-center space-y-6 animate-in fade-in zoom-in duration-500">
+                    <CheckCircle className="w-24 h-24 text-[#E7FE78] fill-current" weight="fill" />
+                    <h2 className={`${figtree.className} text-3xl font-bold`}>Submission Received!</h2>
+                    <p className={`${figtree.className} text-xl text-gray-600 max-w-md`}>
+                        We are processing your request, your listing will be manually reviewed before going live, this can take upto 24 hours.
+                    </p>
+                    <button
+                        onClick={() => window.location.href = '/'}
+                        className={`${figtree.className} mt-8 bg-[#E7FE78] text-black border-2 border-black shadow-[4px_4px_0px_rgba(0,0,0,1)] px-8 py-3 rounded-full hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_rgba(0,0,0,1)] transition-all active:shadow-none active:translate-x-[4px] active:translate-y-[4px]`}
+                    >
+                        Return Home
+                    </button>
+                </div>
+            );
+        }
+
+        switch (step) {
+            case 0: // Property Type
+                return (
+                    <div className="space-y-8">
+                        <h2 className={`${figtree.className} text-3xl font-bold`}>What kind of place will you host?</h2>
+                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                            {PROPERTY_TYPES.map((type) => {
+                                const Icon = type.icon;
+                                const isSelected = formData.propertyType === type.id;
+                                return (
+                                    <div
+                                        key={type.id}
+                                        onClick={() => handleChange('propertyType', type.id)}
+                                        className={`cursor-pointer p-6 border-2 rounded-xl flex flex-col items-center space-y-4 transition-all duration-300 ${isSelected ? 'border-black bg-[#E7FE78] shadow-[4px_4px_0px_rgba(0,0,0,1)]' : 'border-gray-200 hover:border-black'
+                                            }`}
+                                    >
+                                        <Icon className="w-12 h-12" />
+                                        <span className={`${figtree.className} font-semibold text-lg`}>{type.label}</span>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </div>
+                );
+            case 1: // Location
+                return (
+                    <div className="space-y-8">
+                        <h2 className={`${figtree.className} text-3xl font-bold`}>Where's your place located?</h2>
+                        <div className="space-y-4">
+                            <label className={`${figtree.className} text-gray-600`}>Address</label>
+                            <div className="relative">
+                                <MapPin className="absolute left-4 top-1/2 -translate-y-1/2 w-6 h-6 text-gray-400" />
+                                <input
+                                    type="text"
+                                    value={formData.location}
+                                    onChange={(e) => handleChange('location', e.target.value)}
+                                    placeholder="123 Lakeview Drive, Lakeside, CA"
+                                    className={`${figtree.className} w-full pl-12 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-black focus:outline-none transition-colors text-lg`}
+                                />
                             </div>
                         </div>
                     </div>
-
-                    {/* Segmented Progress Bar */}
-                    <div className="w-full px-8 pb-6 flex gap-2">
-                        {phases.map((phase, index) => {
-                            let fill = 0;
-                            if (index < currentPhaseIndex) {
-                                fill = 100;
-                            } else if (index === currentPhaseIndex) {
-                                const phaseTotal = phase.end - phase.start + 1;
-                                const phaseStep = step - phase.start + 1;
-                                fill = (phaseStep / phaseTotal) * 100;
-                            }
-
-                            return (
-                                <div key={phase.name} className="h-1 flex-1 bg-gray-100 rounded-full overflow-hidden relative">
+                );
+            case 2: // Basics (Capacity)
+                return (
+                    <div className="space-y-8">
+                        <h2 className={`${figtree.className} text-3xl font-bold`}>Share some basics about your place</h2>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            {[
+                                { label: 'Guests', field: 'guests', icon: Users },
+                                { label: 'Bedrooms', field: 'bedrooms', icon: Moon },
+                                { label: 'Beds', field: 'beds', icon: Bed },
+                                { label: 'Bathrooms', field: 'bathrooms', icon: Toilet },
+                            ].map((item) => {
+                                const Icon = item.icon;
+                                return (
+                                    <div key={item.field} className="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl">
+                                        <div className="flex items-center space-x-3">
+                                            <Icon className="w-6 h-6 text-gray-500" />
+                                            <span className={`${figtree.className} text-lg`}>{item.label}</span>
+                                        </div>
+                                        <div className="flex items-center space-x-4">
+                                            <button
+                                                onClick={() => handleChange(item.field as keyof FormData, Math.max(0, (formData[item.field as keyof FormData] as number) - 1))}
+                                                className="w-8 h-8 rounded-full border border-gray-300 flex items-center justify-center hover:border-black transition-colors cursor-pointer hover:bg-[#E7FE78] hover:border-2"
+                                            >
+                                                <Minus />   
+                                            </button>
+                                            <span className={`${figtree.className} text-xl w-6 text-center`}>{formData[item.field as keyof FormData] as number}</span>
+                                            <button
+                                                onClick={() => handleChange(item.field as keyof FormData, (formData[item.field as keyof FormData] as number) + 1)}
+                                                className="w-8 h-8 rounded-full border border-gray-300 flex items-center justify-center hover:border-black transition-colors cursor-pointer hover:bg-[#E7FE78] hover:border-2"
+                                            >
+                                                <Plus />
+                                            </button>
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </div>
+                );
+            case 3: // Description
+                return (
+                    <div className="space-y-8">
+                        <h2 className={`${figtree.className} text-3xl font-bold`}>Describe your place</h2>
+                        <div className="space-y-4">
+                            <div>
+                                <label className={`${figtree.className} text-gray-600 block mb-2`}>Title</label>
+                                <input
+                                    type="text"
+                                    value={formData.title}
+                                    onChange={(e) => handleChange('title', e.target.value)}
+                                    placeholder="e.g. Charming Lakeside Cabin"
+                                    className={`${figtree.className} w-full p-4 border-2 border-gray-200 rounded-xl focus:border-black focus:outline-none transition-colors text-lg`}
+                                />
+                            </div>
+                            <div>
+                                <label className={`${figtree.className} text-gray-600 block mb-2`}>Description</label>
+                                <textarea
+                                    value={formData.description}
+                                    onChange={(e) => handleChange('description', e.target.value)}
+                                    placeholder="Tell guests what makes your place unique..."
+                                    rows={5}
+                                    className={`${figtree.className} w-full p-4 border-2 border-gray-200 rounded-xl focus:border-black focus:outline-none transition-colors text-lg resize-none`}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                );
+            case 4: // Amenities
+                return (
+                    <div className="space-y-8">
+                        <h2 className={`${figtree.className} text-3xl font-bold`}>What does it offer?</h2>
+                        <div className="space-y-6">
+                            <h3 className={`${figtree.className} text-xl font-semibold`}>Amenities</h3>
+                            <div className="grid grid-cols-2 gap-4">
+                                {AMENITIES_LIST.map((item) => (
                                     <div
-                                        className="absolute top-0 left-0 h-full bg-[#E7FE78] transition-all duration-500 ease-out"
-                                        style={{ width: `${fill}%` }}
+                                        key={item.id}
+                                        onClick={() => toggleArrayItem('amenities', item.id)}
+                                        className={`cursor-pointer p-4 border-2 rounded-xl flex items-center space-x-3 transition-all ${formData.amenities.includes(item.id) ? 'border-black bg-[#E7FE78]' : 'border-gray-200 hover:border-black'
+                                            }`}
+                                    >
+                                        <item.icon className="w-6 h-6" />
+                                        <span className={figtree.className}>{item.label}</span>
+                                    </div>
+                                ))}
+                            </div>
+                            <h3 className={`${figtree.className} text-xl font-semibold`}>Safety</h3>
+                            <div className="grid grid-cols-2 gap-4">
+                                {SAFETY_LIST.map((item) => (
+                                    <div
+                                        key={item.id}
+                                        onClick={() => toggleArrayItem('safety', item.id)}
+                                        className={`cursor-pointer p-4 border-2 rounded-xl flex items-center space-x-3 transition-all ${formData.safety.includes(item.id) ? 'border-black bg-[#E7FE78]' : 'border-gray-200 hover:border-black'
+                                            }`}
+                                    >
+                                        <item.icon className="w-6 h-6" />
+                                        <span className={figtree.className}>{item.label}</span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                );
+            case 5: // Photos
+                return (
+                    <div className="space-y-8">
+                        <div>
+                            <h2 className={`${figtree.className} text-3xl font-bold`}>Add some photos</h2>
+                            <p className={`${figtree.className} text-gray-500 mt-2`}>You need at least 5 photos to publish your listing.</p>
+                        </div>
+
+                        <div
+                            onClick={() => document.getElementById('photo-upload')?.click()}
+                            className="border-2 border-dashed border-gray-300 rounded-xl p-12 flex flex-col items-center justify-center space-y-4 hover:border-black transition-colors cursor-pointer bg-gray-50"
+                        >
+                            <input
+                                id="photo-upload"
+                                type="file"
+                                multiple
+                                accept="image/*"
+                                className="hidden"
+                                onChange={(e) => {
+                                    if (e.target.files) {
+                                        const newPhotos = Array.from(e.target.files);
+                                        setFormData(prev => ({ ...prev, photos: [...prev.photos, ...newPhotos] }));
+                                        setError('');
+                                    }
+                                }}
+                            />
+                            <UploadSimple className="w-16 h-16 text-gray-400" />
+                            <div className="text-center">
+                                <p className={`${figtree.className} text-lg font-semibold`}>Click to upload photos</p>
+                                <p className={`${figtree.className} text-sm text-gray-500`}>Select multiple files</p>
+                            </div>
+                        </div>
+
+                        {error && (
+                            <div className="p-4 bg-red-50 text-red-600 rounded-lg flex items-center gap-2">
+                                <ShieldCheck className="w-5 h-5" />
+                                <span className={figtree.className}>{error}</span>
+                            </div>
+                        )}
+
+                        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                            {formData.photos.length > 0 && formData.photos.map((photo, index) => (
+                                <div key={index} className="aspect-square relative rounded-lg overflow-hidden group">
+                                    <Image
+                                        src={URL.createObjectURL(photo)}
+                                        alt={`Preview ${index}`}
+                                        fill
+                                        className="object-cover"
                                     />
+                                    <button
+                                        onClick={() => setFormData(prev => ({
+                                            ...prev,
+                                            photos: prev.photos.filter((_, i) => i !== index)
+                                        }))}
+                                        className="absolute top-2 right-2 bg-white p-1 rounded-full shadow-md opacity-0 group-hover:opacity-100 transition-opacity"
+                                    >
+                                        <X size={16} />
+                                    </button>
                                 </div>
-                            );
-                        })}
+                            ))}
+                        </div>
+                    </div>
+                );
+            case 6: // Instant Approval
+                return (
+                    <div className="space-y-8">
+                        <h2 className={`${figtree.className} text-3xl font-bold`}>Finish up</h2>
+                        <div className="flex items-center justify-between p-6 border-2 border-gray-200 rounded-xl">
+                            <div>
+                                <h3 className={`${figtree.className} text-xl font-semibold`}>Instant Approval</h3>
+                                <p className={`${figtree.className} text-gray-500 max-w-sm`}>Listings with instant approval get 30% more bookings on average.</p>
+                            </div>
+                            <button
+                                onClick={() => handleChange('instantApproval', !formData.instantApproval)}
+                                className={`w-16 h-8 rounded-full transition-colors relative ${formData.instantApproval ? 'bg-[#E7FE78] border-2 border-black' : 'bg-gray-200 border-2 border-transparent'}`}
+                            >
+                                <div className={`absolute top-1/2 -translate-y-1/2 w-6 h-6 bg-white rounded-full border-2 border-black transition-all ${formData.instantApproval ? 'left-[calc(100%-1.6rem)]' : 'left-1'}`} />
+                            </button>
+                        </div>
+                    </div>
+                );
+            case 7: // Preview
+                return (
+                    <div className="space-y-8">
+                        <h2 className={`${figtree.className} text-3xl font-bold`}>Review your listing</h2>
+                        <div className="border-2 border-black rounded-xl overflow-hidden shadow-[8px_8px_0px_rgba(0,0,0,1)] bg-white">
+                            <div className="h-64 bg-gray-200 relative flex items-center justify-center">
+                                <Image src="/placeholder-house.jpg" alt="House" width={800} height={400} className="object-cover w-full h-full opacity-50" />
+                                <span className={`${figtree.className} absolute text-gray-500`}>Cover Photo</span>
+                            </div>
+                            <div className="p-6 space-y-4">
+                                <div>
+                                    <h3 className={`${figtree.className} text-2xl font-bold`}>{formData.title || 'Untitled Listing'}</h3>
+                                    <p className={`${figtree.className} text-gray-600 flex items-center gap-2`}>
+                                        <MapPin weight="fill" /> {formData.location || 'No location set'}
+                                    </p>
+                                </div>
+                                <div className="flex gap-4 text-sm text-gray-600 border-y py-4">
+                                    <span>{formData.guests} Guests</span> •
+                                    <span>{formData.bedrooms} Bedrooms</span> •
+                                    <span>{formData.beds} Beds</span> •
+                                    <span>{formData.bathrooms} Baths</span>
+                                </div>
+                                <p className={`${figtree.className} text-gray-700`}>{formData.description || 'No description provided.'}</p>
+                                <div className="flex flex-wrap gap-2">
+                                    {formData.amenities.map(a => (
+                                        <span key={a} className="px-3 py-1 bg-gray-100 rounded-full text-sm">{AMENITIES_LIST.find(i => i.id === a)?.label}</span>
+                                    ))}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                );
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <div ref={containerRef} className="min-h-[calc(81vh)] w-full bg-white text-black p-8 flex flex-col">
+            {/* Header / Progress with max-width for better readability */}
+            {!isSuccess && (
+                <div className="w-full max-w-6xl mx-auto mb-4">
+                    <div className="flex items-center justify-between mb-4">
+                        <span className={`${figtree.className} font-bold text-gray-400`}>Step {step + 1} of 8</span>
+                        <div className="flex gap-1">
+                            {Array.from({ length: 8 }).map((_, i) => (
+                                <div
+                                    key={i}
+                                    className={`h-2 rounded-full transition-all duration-300 ${i <= step ? 'w-8 bg-[#E7FE78] border-2 border-black' : 'w-2 bg-gray-200'}`}
+                                />
+                            ))}
+                        </div>
                     </div>
                 </div>
+            )}
 
-                {/* Scrollable Content */}
-                <div className="flex-1 overflow-y-auto p-8 md:p-12">
-                    <div ref={contentRef} className={containerStyle}>
-                        <CurrentStepComponent
-                            data={formData}
-                            updateData={updateData}
-                        />
-                    </div>
+            {/* Content Form */}
+            <div className="flex-1 flex items-center justify-center w-full">
+                <div ref={formRef} className="w-full max-w-4xl">
+                    {renderStep()}
                 </div>
+            </div>
 
-                {/* Fixed Footer Navigation */}
-                <div className="border-t-2 border-gray-100 p-6 bg-white flex justify-between items-center z-10">
+            {/* Footer Navigation */}
+            {!isSuccess && (
+                <div className="flex justify-between items-center pt-8 w-full max-w-6xl mx-auto">
                     <button
-                        type="button"
                         onClick={handleBack}
                         disabled={step === 0}
-                        className={`${secondaryButtonStyle} ${step === 0 ? 'opacity-0 pointer-events-none' : ''}`}
+                        className={`${figtree.className} text-black font-semibold underline disabled:opacity-0 hover:text-gray-600 transition-colors`}
                     >
-                        <CaretLeft size={20} /> Back
+                        Back
                     </button>
-                    <button
-                        type="button"
-                        onClick={handleNext}
-                        className={buttonStyle}
-                    >
-                        {step === totalSteps - 1 ? 'Finish' : 'Next'} <CaretRight size={20} />
-                    </button>
-                </div>
-            </div>
 
-            {/* Right Panel - Live Preview */}
-            <div className="hidden lg:flex w-1/2 bg-[#F7F7F7] border-l-2 border-black relative flex-col items-center justify-center p-12 overflow-hidden">
-                {/* Background Pattern */}
-                <div className="absolute inset-0 opacity-5"
-                    style={{
-                        backgroundImage: `radial-gradient(circle at 2px 2px, black 1px, transparent 0)`,
-                        backgroundSize: '24px 24px'
-                    }}
-                />
-
-                <div className="relative z-10 w-full max-w-lg">
-                    <div className="mb-8 text-center">
-                        <h2 className={`${figtree.className} text-3xl font-bold mb-2`}>What guests will see</h2>
-                        <p className={`${figtree.className} text-gray-500`}>As you update your listing, see how it looks in search results.</p>
-                    </div>
-                    <LivePreview data={formData} />
+                    {step === 7 ? (
+                        <button
+                            onClick={handleSubmit}
+                            disabled={isSubmitting}
+                            className={`${figtree.className} bg-[#E7FE78] text-black px-8 py-3 rounded-lg font-bold border-2 border-black shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_rgba(0,0,0,1)] transition-all active:shadow-none active:translate-x-[4px] active:translate-y-[4px] disabled:opacity-50 disabled:cursor-not-allowed`}
+                        >
+                            {isSubmitting ? 'Submitting...' : 'Submit Listing'}
+                        </button>
+                    ) : (
+                        <button
+                            onClick={handleNext}
+                            className={`${figtree.className} bg-[#E7FE78] text-black px-8 py-3 rounded-lg font-bold border-2 border-black shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_rgba(0,0,0,1)] transition-all active:shadow-none active:translate-x-[4px] active:translate-y-[4px] flex items-center gap-2`}
+                        >
+                            Next <CaretRight weight="bold" />
+                        </button>
+                    )}
                 </div>
-            </div>
+            )}
         </div>
-    )
+    );
 }
-
-export default List;
diff --git a/src/components/list-property/styles.ts b/src/components/list-property/styles.ts
deleted file mode 100644
index 423f47d..0000000
--- a/src/components/list-property/styles.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import localFont from "next/font/local";
-
-export const figtree = localFont({
-    src: [
-        {
-            path: '../../../public/Fonts/figtree/figtree.ttf',
-        },
-    ],
-})
-
-export const containerStyle = `flex flex-col gap-8 w-full max-w-xl mx-auto pb-24`; // Added padding bottom for fixed footer
-export const titleStyle = `${figtree.className} text-4xl font-bold mb-2`;
-export const subtitleStyle = `${figtree.className} text-lg text-gray-500 mb-8`;
-export const inputStyle = `${figtree.className} w-full p-4 border-2 border-black text-lg outline-none focus:bg-[#F7F7F7] transition-colors placeholder:text-gray-400`;
-export const buttonStyle = `${figtree.className} flex items-center justify-center gap-2 px-8 py-3 border-2 border-black bg-[#E7FE78] text-lg font-medium hover:bg-[#dcfc4e] transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] active:translate-y-[4px] active:shadow-none transition-all`;
-export const secondaryButtonStyle = `${figtree.className} flex items-center justify-center gap-2 px-8 py-3 border-2 border-black bg-white text-lg font-medium hover:bg-gray-50 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] active:translate-y-[4px] active:shadow-none transition-all`;
-export const optionCardStyle = (selected: boolean) =>
-    `flex flex-col items-center justify-center gap-4 p-6 border-2 border-black cursor-pointer transition-all ${selected ? 'bg-[#E7FE78]' : 'bg-white hover:bg-gray-50'}`;
diff --git a/src/components/list-property/types.ts b/src/components/list-property/types.ts
deleted file mode 100644
index a952c3f..0000000
--- a/src/components/list-property/types.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export interface FormData {
-    propertyType?: string;
-    placeType?: string;
-    location?: string;
-    guests?: number;
-    bedrooms?: number;
-    beds?: number;
-    bathrooms?: number;
-    amenities?: string[];
-    description?: string;
-    price?: string;
-    instantBook?: boolean;
-    safety?: string[];
-    title?: string;
-    photos?: string[];
-}
-
-export type FormValue = string | number | boolean | string[] | undefined;
-
-export interface StepProps {
-    data: FormData;
-    updateData: (key: keyof FormData, value: FormValue) => void;
-}