diff --git a/components/d3/Chart/ui/DetailScreen/DetailScreen.tsx b/components/d3/Chart/ui/DetailScreen/DetailScreen.tsx
index 2ad745b..1dce85d 100644
--- a/components/d3/Chart/ui/DetailScreen/DetailScreen.tsx
+++ b/components/d3/Chart/ui/DetailScreen/DetailScreen.tsx
@@ -1,4 +1,4 @@
-import { Badge } from "@/components/ui/badge"
+import { ProjectCardDetails } from "@/components/project-card"
 import { Button } from "@/components/ui/button"
 import { Project } from "@/database/schemas/projects.schema"
 import { Cross1Icon } from "@radix-ui/react-icons"
@@ -56,61 +56,8 @@ export const DetailScreen = ({ nodes }: TProps) => {
         >
           <Cross1Icon className="h4 w-4" />
         </Button>
-        {selectedItems.map((item: Project) => (
-          <div key={item.id}>
-            <div className="flex items-center justify-between">
-              <div className="flex flex-col">
-                <h2 className="text-xl font-semibold text-gray-900">
-                  {item.id} Details
-                </h2>
-                <h3 className="text-md font-normal text-gray-500">
-                  {item.name}
-                </h3>
-              </div>
-            </div>
-            <div className="flex justify-between">
-              <Button
-                variant="ghost"
-                className="h-4 w-[50%] border-2 border-gray-700 px-3 py-5 font-semibold text-gray-700"
-              >
-                Content
-              </Button>
-              <Button
-                variant="ghost"
-                className="h-4 w-[50%] border-2 border-gray-200 px-3 py-5 font-semibold text-gray-500"
-              >
-                Details
-              </Button>
-            </div>
-            <div>
-              <span className="text-md text-gray-500">Labels</span>
-              <div>
-                {item.tags.map((label: any) => (
-                  <Badge
-                    variant="outline"
-                    className="bg-orange-200 text-orange-600"
-                  >
-                    {label}
-                  </Badge>
-                ))}
-              </div>
-            </div>
-            <div className="mt-4">
-              <p className="text-sm text-gray-600">
-                <strong>Id:</strong> {item.id}
-              </p>
-              <p className="text-sm text-gray-600">
-                <strong>Type:</strong> {item.projectType}
-              </p>
-              <p className="text-sm text-gray-600">
-                <strong>Name:</strong> {item.name}
-              </p>
-              <p className="text-sm text-gray-600">
-                <strong>Community size:</strong> {item.communitySize}
-              </p>
-              {/* Add more node details here */}
-            </div>
-          </div>
+        {selectedItems.map((item: Project, key) => (
+          <ProjectCardDetails key={key} item={item} />
         ))}
       </div>
     </div>
diff --git a/components/dashboard/create-project-form.tsx b/components/dashboard/create-project-form.tsx
index 27dc7fd..88c6bb0 100644
--- a/components/dashboard/create-project-form.tsx
+++ b/components/dashboard/create-project-form.tsx
@@ -356,9 +356,12 @@ export default function CreateProjectForm({
                           placeholder="Token Supply"
                           {...field}
                           value={field.value || ""}
+                          type="number"
                           onChange={(e) => {
                             const value = e.target.value.replace(/[^\d]/g, "")
-                            field.onChange(value === "" ? undefined : value)
+                            field.onChange(
+                              value === "" ? undefined : parseInt(value)
+                            )
                           }}
                         />
                       </FormControl>
diff --git a/components/dashboard/dashboard-create-project-form.tsx b/components/dashboard/dashboard-create-project-form.tsx
index f86114a..a91555e 100644
--- a/components/dashboard/dashboard-create-project-form.tsx
+++ b/components/dashboard/dashboard-create-project-form.tsx
@@ -185,6 +185,7 @@ export default function DashboardCreateProjectForm() {
                     placeholder="Token Supply"
                     {...field}
                     value={field.value || ""}
+                    type="number"
                   />
                 </FormControl>
                 <FormDescription>This is the url</FormDescription>
diff --git a/components/project-card.tsx b/components/project-card.tsx
new file mode 100644
index 0000000..4c8d395
--- /dev/null
+++ b/components/project-card.tsx
@@ -0,0 +1,62 @@
+import { Project } from "@/database/schemas/projects.schema"
+import { Badge } from "./ui/badge"
+import { Button } from "./ui/button"
+
+type Props = {
+  key: number
+  item: Project
+}
+
+export const ProjectCardDetails = ({ key, item }: Props) => {
+  return (
+    <div key={key}>
+      <div className="flex items-center justify-between">
+        <div className="flex flex-col">
+          <h2 className="text-xl font-semibold text-gray-900">
+            {item.id} Details
+          </h2>
+          <h3 className="text-md font-normal text-gray-500">{item.name}</h3>
+        </div>
+      </div>
+      <div className="flex justify-between">
+        <Button
+          variant="ghost"
+          className="h-4 w-[50%] border-2 border-gray-700 px-3 py-5 font-semibold text-gray-700"
+        >
+          Content
+        </Button>
+        <Button
+          variant="ghost"
+          className="h-4 w-[50%] border-2 border-gray-200 px-3 py-5 font-semibold text-gray-500"
+        >
+          Details
+        </Button>
+      </div>
+      <div>
+        <span className="text-md text-gray-500">Labels</span>
+        <div>
+          {item.tags.map((label: any) => (
+            <Badge variant="outline" className="bg-orange-200 text-orange-600">
+              {label}
+            </Badge>
+          ))}
+        </div>
+      </div>
+      <div className="mt-4">
+        <p className="text-sm text-gray-600">
+          <strong>Id:</strong> {item.id}
+        </p>
+        <p className="text-sm text-gray-600">
+          <strong>Type:</strong> {item.projectType}
+        </p>
+        <p className="text-sm text-gray-600">
+          <strong>Name:</strong> {item.name}
+        </p>
+        <p className="text-sm text-gray-600">
+          <strong>Community size:</strong> {item.communitySize}
+        </p>
+        {/* Add more node details here */}
+      </div>
+    </div>
+  )
+}