diff --git a/src/app/components/property/PartCard.tsx b/src/app/components/property/PartCard.tsx
new file mode 100644
index 0000000..92691e6
--- /dev/null
+++ b/src/app/components/property/PartCard.tsx
@@ -0,0 +1,36 @@
+import { PencilSquareIcon } from "@heroicons/react/24/outline";
+import { useState } from "react";
+import PartModal from "./PartModal";
+
+export default function PartCard({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
+
+  return (
+    <section>
+      <div className="mt-6">
+        <div className="flex items-center justify-between">
+          <h2 className="text-xl font-bold">{title}</h2>
+          <button
+            className="flex items-center text-brandmidblue hover:text-brandblue transition-colors duration-200 cursor-pointer"
+            onClick={() => setIsDetailModalOpen(true)}
+          >
+            <PencilSquareIcon className="h-6 w-6 ml-2" />
+            Edit
+          </button>
+        </div>
+        <p className="text-gray-600">{description}</p>
+      </div>
+      <PartModal
+        isOpen={isDetailModalOpen}
+        setIsOpen={setIsDetailModalOpen}
+        title={title}
+      />
+    </section>
+  );
+}