diff --git a/src/app/portfolio/[slug]/building-passport/[propertyId]/BuildingPassportHomeClient.tsx b/src/app/portfolio/[slug]/building-passport/[propertyId]/BuildingPassportHomeClient.tsx
new file mode 100644
index 00000000..9ab29b71
--- /dev/null
+++ b/src/app/portfolio/[slug]/building-passport/[propertyId]/BuildingPassportHomeClient.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { useState } from "react";
+import EpcCard from "@/app/components/building-passport/EpcCard";
+import { Button } from "@/app/shadcn_components/ui/button";
+import { formatDateTime } from "@/app/utils";
+import {
+  CalendarIcon,
+  HomeIcon,
+  BuildingOfficeIcon,
+  ClockIcon,
+  UserGroupIcon,
+  HomeModernIcon,
+} from "@heroicons/react/24/solid";
+import BookSurveyModal from "../../components/BookSurveyModal";
+import BookingSuccessToast from "../../components/BookingSuccessToast";
+
+interface BuildingPassportHomeClientProps {
+  propertyMeta: any;
+  portfolioId: string; // ✅ from URL (slug)
+}
+
+export default function BuildingPassportHomeClient({
+  propertyMeta,
+  portfolioId,
+}: BuildingPassportHomeClientProps) {
+  const [openModal, setOpenModal] = useState(false);
+  const [showToast, setShowToast] = useState(false);
+  console.log(portfolioId)
+  console.log(propertyMeta)
+
+  return (
+    <div className="flex flex-col items-center mt-4">
+      {/* EPC Card + Property Info */}
+      <div className="flex justify-center mt-4 space-x-2">
+        {/* EPC Rating Card */}
+        <EpcCard
+          epcRating={propertyMeta.currentEpcRating}
+          fullMargin={false}
+          kwh={propertyMeta.detailsEpc?.currentEnergyDemand}
+          carbon={propertyMeta.detailsEpc?.co2Emissions}
+        />
+
+        {/* Property Info Card */}
+        <div className="flex flex-col p-8 bg-white shadow rounded-md max-w-2xl mx-auto text-gray-700">
+          <div className="text-2xl font-bold mb-4">Your Property</div>
+
+          <div className="flex items-center space-x-2 mb-2">
+            <CalendarIcon className="h-5 w-5 text-gray-400" />
+            <div className="text-gray-500">Building Passport Created At:</div>
+            <div>{formatDateTime(propertyMeta.createdAt)}</div>
+          </div>
+
+          <div className="flex items-center space-x-2 mb-2">
+            <HomeIcon className="h-5 w-5 text-gray-400" />
+            <div className="text-gray-500">Property Type:</div>
+            <div className="text-gray-700">{propertyMeta.propertyType}</div>
+          </div>
+
+          <div className="flex items-center space-x-2 mb-2">
+            <BuildingOfficeIcon className="h-5 w-5 text-gray-400" />
+            <div className="text-gray-500">Built Form:</div>
+            <div className="text-gray-700">{propertyMeta.builtForm}</div>
+          </div>
+
+          <div className="flex items-center space-x-2 mb-2">
+            <ClockIcon className="h-5 w-5 text-gray-400" />
+            <div className="text-gray-500">Year Built:</div>
+            <div className="text-gray-700">{propertyMeta.yearBuilt}</div>
+          </div>
+
+          <div className="flex items-center space-x-2 mb-2">
+            <UserGroupIcon className="h-5 w-5 text-gray-400" />
+            <div className="text-gray-500">Tenure:</div>
+            <div className="text-gray-700">{propertyMeta.tenure}</div>
+          </div>
+
+          <div className="flex items-center space-x-2 mb-6">
+            <HomeModernIcon className="h-5 w-5 text-gray-400" />
+            <div className="text-gray-500">Number of Habitable Rooms:</div>
+            <div className="text-gray-700">{propertyMeta.numberOfRooms}</div>
+          </div>
+        </div>
+      </div>
+
+      {/* ✅ "Book a Survey" Button */}
+      <div className="mt-6">
+        <Button
+          onClick={() => setOpenModal(true)}
+          className="bg-brandmidblue text-white hover:bg-branddarkblue"
+        >
+          Book a Survey
+        </Button>
+      </div>
+
+      {/* ✅ Modal for booking a survey */}
+      {openModal && (
+        <BookSurveyModal
+          open={openModal}
+          onOpenChange={setOpenModal}
+          propertyId={propertyMeta.id}
+          portfolioId={portfolioId} // ✅ from URL (slug)
+          address={propertyMeta.address}
+          onSuccess={() => {
+            setOpenModal(false);
+            setShowToast(true);
+          }}
+        />
+      )}
+
+      {/* ✅ Success Toast */}
+      <BookingSuccessToast
+        show={showToast}
+        onClose={() => setShowToast(false)}
+        message="Survey Booked Successfully!"
+        subtext="Your survey request has been sent to Domna. We'll contact you shortly. 🎉"
+      />
+    </div>
+  );
+}
diff --git a/src/app/portfolio/[slug]/building-passport/[propertyId]/page.tsx b/src/app/portfolio/[slug]/building-passport/[propertyId]/page.tsx
index ccb05275..326b6739 100644
--- a/src/app/portfolio/[slug]/building-passport/[propertyId]/page.tsx
+++ b/src/app/portfolio/[slug]/building-passport/[propertyId]/page.tsx
@@ -1,70 +1,20 @@
-import EpcCard from "@/app/components/building-passport/EpcCard";
-import { formatDateTime } from "@/app/utils";
-import {
-  HomeIcon,
-  BuildingOfficeIcon,
-  CalendarIcon,
-  HomeModernIcon,
-  ClockIcon,
-  UserGroupIcon,
-} from "@heroicons/react/24/solid";
 import { getPropertyMeta } from "./utils";
+import BuildingPassportHomeClient from "./BuildingPassportHomeClient";
 
 export const revalidate = 1;
 
-export default async function BuildingPassportHome(
-  props: {
-    params: Promise<{ slug: string; propertyId: string }>;
-  }
-) {
-  const params = await props.params;
-  // This is a server component and because we make the exact same request in the layout,
-  // the response is cached so we just gain access to the data
+export default async function BuildingPassportHome({
+  params,
+}: {
+  params: { slug: string; propertyId: string };
+}) {
   const propertyMeta = await getPropertyMeta(params.propertyId);
 
+  // ✅ pass both property data and the portfolio slug (from the URL)
   return (
-    <div className="flex flex-col items-center mt-4">
-      <div className="flex justify-center mt-4 space-x-2">
-        <EpcCard
-          epcRating={propertyMeta.currentEpcRating}
-          fullMargin={false}
-          kwh={propertyMeta.detailsEpc.currentEnergyDemand}
-          carbon={propertyMeta.detailsEpc.co2Emissions}
-        />
-        <div className="flex flex-col p-8 bg-white shadow rounded-md max-w-2xl mx-auto justify-start text-gray-700">
-          <div className="text-2xl font-bold mb-4">Your property</div>
-          <div className="flex items-center space-x-2 mb-2">
-            <CalendarIcon className="h-5 w-5 text-gray-400" />
-            <div className="text-gray-500">Building Passport Created At:</div>
-            <div>{formatDateTime(propertyMeta.createdAt)}</div>
-          </div>
-          <div className="flex items-center space-x-2 mb-2">
-            <HomeIcon className="h-5 w-5 text-gray-400" />
-            <div className="text-gray-500">Property Type:</div>
-            <div className="text-gray-700">{propertyMeta.propertyType}</div>
-          </div>
-          <div className="flex items-center space-x-2 mb-2">
-            <BuildingOfficeIcon className="h-5 w-5 text-gray-400" />
-            <div className="text-gray-500">Built Form:</div>
-            <div className="text-gray-700">{propertyMeta.builtForm}</div>
-          </div>
-          <div className="flex items-center space-x-2 mb-2">
-            <ClockIcon className="h-5 w-5 text-gray-400" />
-            <div className="text-gray-500">Year Built:</div>
-            <div className="text-gray-700">{propertyMeta.yearBuilt}</div>
-          </div>
-          <div className="flex items-center space-x-2 mb-2">
-            <UserGroupIcon className="h-5 w-5 text-gray-400" />
-            <div className="text-gray-500">Tenure:</div>
-            <div className="text-gray-700">{propertyMeta.tenure}</div>
-          </div>
-          <div className="flex items-center space-x-2 mb-2">
-            <HomeModernIcon className="h-5 w-5 text-gray-400" />
-            <div className="text-gray-500">Number of Habitable Rooms:</div>
-            <div className="text-gray-700">{propertyMeta.numberOfRooms}</div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <BuildingPassportHomeClient
+      propertyMeta={propertyMeta}
+      portfolioId={params.slug} // ✅ pass slug as portfolioId
+    />
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/portfolio/[slug]/components/BookSurveyModal.tsx b/src/app/portfolio/[slug]/components/BookSurveyModal.tsx
index bd599ce8..39f6651f 100644
--- a/src/app/portfolio/[slug]/components/BookSurveyModal.tsx
+++ b/src/app/portfolio/[slug]/components/BookSurveyModal.tsx
@@ -17,7 +17,7 @@ interface BookSurveyModalProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   propertyId: bigint;
-  portfolioId: bigint;
+  portfolioId: string;
   address: string;
   onSuccess?: () => void; // ✅ fix: properly declare optional callback
 }
@@ -41,7 +41,7 @@ export default function BookSurveyModal({
           pipelineId: "2400089278",
           dealStageId: "3288115388",
           propertyId: propertyId.toString(),
-          portfolioId: portfolioId.toString(),
+          portfolioId: portfolioId,
         }),
       });
 
diff --git a/src/app/portfolio/[slug]/components/propertyTableColumns.tsx b/src/app/portfolio/[slug]/components/propertyTableColumns.tsx
index 52307c13..c65a7743 100644
--- a/src/app/portfolio/[slug]/components/propertyTableColumns.tsx
+++ b/src/app/portfolio/[slug]/components/propertyTableColumns.tsx
@@ -21,9 +21,6 @@ import {
   PropertyToRecommendation,
   PropertyWithRelations,
 } from "@/app/db/schema/property";
-import BookSurveyModal from "./BookSurveyModal";
-import BookingSuccessToast from "./BookingSuccessToast";
-import { useState } from "react";
 
 
 interface DataTableColumnHeaderProps<TData, TValue>
@@ -218,10 +215,7 @@ export const columns: ColumnDef<PropertyWithRelations>[] = [
   {
     id: "actions",
     cell: ({ row }) => {
-      const [openModal, setOpenModal] = useState(false);
-      const [showToast, setShowToast] = useState(false);
       const property = row.original;
-      const address = String(row.getValue("address"));
       const propertyId = property.id;
       const portfolioId = property.portfolioId;
 
@@ -246,9 +240,6 @@ export const columns: ColumnDef<PropertyWithRelations>[] = [
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
                 <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                <DropdownMenuItem onClick={()=> setOpenModal(true)}>
-                  Book a survey
-                </DropdownMenuItem>
                 <DropdownMenuItem
                   //   onClick={() => navigator.clipboard.writeText(payment.id)}
                   className="text-gray-700 cursor-pointer"
@@ -268,25 +259,6 @@ export const columns: ColumnDef<PropertyWithRelations>[] = [
               </DropdownMenuContent>
             </DropdownMenu>
           </div>
-            {/* ✅ Render modal outside dropdown context */}
-            {openModal && (
-              <BookSurveyModal 
-                open={openModal} 
-                onOpenChange={setOpenModal} 
-                propertyId={propertyId}
-                portfolioId={portfolioId}
-                address={address}
-                onSuccess={() => setShowToast(true)}
-              />
-            )}
-
-            {/* 💥 Toast */}
-            <BookingSuccessToast
-              show={showToast}
-              onClose={() => setShowToast(false)}
-              message="Survey Booked Successfully!"
-              subtext="Your Survey Request is with Domna and will be in contact with you shortly. 🎉"
-            />
         </>
       );
     },