/profile dont look like i can edit them anymore

app/(dashboard)/profile/page.tsx

@@ -3,7 +3,6 @@ import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/auth";
 import ClientErrorMessage from "@/components/client-error-message";
 import { Badge } from "@/components/ui/badge";
-import { FloatingLabelInput } from "@/components/ui/floating-label";
 import { getProfileById } from "@/queries/users";
 import { tryCatch } from "@/utils/tryCatch";
 
@@ -24,58 +23,34 @@ export default async function Profile() {
           {verifiedStatus(profile?.verified ?? false)}
         </div>
       </div>
-      <fieldset>
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 max-w-4xl">
-          <FloatingLabelInput
-            id="floating-name"
+      <div className="rounded-md border bg-muted/30 p-4">
+        <dl className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-6 gap-y-4 max-w-4xl">
+          <ReadOnlyField
             label="Full Name"
             value={`${profile?.first_name} ${profile?.last_name}`}
-            readOnly
           />
-          <FloatingLabelInput
-            id="floating-id-card"
-            label="ID Card"
-            value={`${profile?.id_card}`}
-            readOnly
-          />
-          <FloatingLabelInput
-            id="floating-island"
+          <ReadOnlyField label="ID Card" value={profile?.id_card} />
+          <ReadOnlyField
             label="Island"
             value={`${profile?.atoll?.name}. ${profile?.island?.name}`}
-            readOnly
           />
-          <FloatingLabelInput
-            id="floating-dob"
+          <ReadOnlyField
             label="Date of Birth"
-            value={`${new Date(
-              profile?.dob?.toString() ?? "",
-            ).toLocaleDateString("en-US", {
-              month: "short",
-              day: "2-digit",
-              year: "numeric",
-            })}`}
-            readOnly
+            value={
+              profile?.dob
+                ? new Date(profile.dob.toString()).toLocaleDateString("en-US", {
+                    month: "short",
+                    day: "2-digit",
+                    year: "numeric",
+                  })
+                : undefined
+            }
           />
-          <FloatingLabelInput
-            id="floating-address"
-            label="Address"
-            value={`${profile?.address}`}
-            readOnly
-          />
-          <FloatingLabelInput
-            id="floating-mobile"
-            label="Phone Number"
-            value={`${profile?.mobile}`}
-            readOnly
-          />
-          <FloatingLabelInput
-            id="floating-account"
-            label="Account Number"
-            value={`${profile?.acc_no}`}
-            readOnly
-          />
-        </div>
-      </fieldset>
+          <ReadOnlyField label="Address" value={profile?.address} />
+          <ReadOnlyField label="Phone Number" value={profile?.mobile} />
+          <ReadOnlyField label="Account Number" value={profile?.acc_no} />
+        </dl>
+      </div>
       {/* <Suspense key={query} fallback={"loading...."}>
         <TopupsTable searchParams={searchParams} />
       </Suspense> */}
@@ -83,6 +58,25 @@ export default async function Profile() {
   );
 }
 
+function ReadOnlyField({
+  label,
+  value,
+}: {
+  label: string;
+  value?: string | null;
+}) {
+  return (
+    <div className="flex flex-col gap-1">
+      <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        {label}
+      </dt>
+      <dd className="text-sm font-medium text-foreground break-words">
+        {value?.trim() ? value : "—"}
+      </dd>
+    </div>
+  );
+}
+
 function verifiedStatus(status: boolean) {
   switch (status) {
     case true: