diff --git a/.gitignore b/.gitignore
index fd3dbb5..a84107a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,6 +26,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env*.local
 
 # vercel
diff --git a/next.config.mjs b/next.config.mjs
index 4678774..b8026cf 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,12 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    images:{
+        domains:[
+            "utfs.io"
+        ]
+            
+        
+    }
+};
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index 92b4830..40e09ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,9 +9,14 @@
       "version": "0.1.0",
       "dependencies": {
         "@clerk/nextjs": "^4.29.9",
+        "@hookform/resolvers": "^3.3.4",
+        "@prisma/client": "^5.11.0",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-icons": "^1.3.0",
+        "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-slot": "^1.0.2",
+        "@uploadthing/react": "^6.4.0",
+        "axios": "^1.6.7",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
         "lucide": "^0.356.0",
@@ -19,8 +24,12 @@
         "next": "14.1.3",
         "react": "^18",
         "react-dom": "^18",
+        "react-hook-form": "^7.51.0",
+        "react-hot-toast": "^2.4.1",
         "tailwind-merge": "^2.2.1",
-        "tailwindcss-animate": "^1.0.7"
+        "tailwindcss-animate": "^1.0.7",
+        "uploadthing": "^6.6.0",
+        "zod": "^3.22.4"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -30,6 +39,7 @@
         "eslint": "^8",
         "eslint-config-next": "14.1.3",
         "postcss": "^8",
+        "prisma": "^5.11.0",
         "tailwindcss": "^3.3.0",
         "typescript": "^5"
       }
@@ -268,6 +278,14 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.3.4.tgz",
+      "integrity": "sha512-o5cgpGOuJYrd+iMKvkttOclgwRW86EsWJZZRC23prf0uU2i48Htq4PuT73AVb9ionFyZrwYEITuOFGF+BydEtQ==",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -611,6 +629,68 @@
         "node": ">=14"
       }
     },
+    "node_modules/@prisma/client": {
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@prisma/client/-/client-5.11.0.tgz",
+      "integrity": "sha512-SWshvS5FDXvgJKM/a0y9nDC1rqd7KG0Q6ZVzd+U7ZXK5soe73DJxJJgbNBt2GNXOa+ysWB4suTpdK5zfFPhwiw==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=16.13"
+      },
+      "peerDependencies": {
+        "prisma": "*"
+      },
+      "peerDependenciesMeta": {
+        "prisma": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@prisma/debug": {
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-5.11.0.tgz",
+      "integrity": "sha512-N6yYr3AbQqaiUg+OgjkdPp3KPW1vMTAgtKX6+BiB/qB2i1TjLYCrweKcUjzOoRM5BriA4idrkTej9A9QqTfl3A==",
+      "devOptional": true
+    },
+    "node_modules/@prisma/engines": {
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-5.11.0.tgz",
+      "integrity": "sha512-gbrpQoBTYWXDRqD+iTYMirDlF9MMlQdxskQXbhARhG6A/uFQjB7DZMYocMQLoiZXO/IskfDOZpPoZE8TBQKtEw==",
+      "devOptional": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "@prisma/debug": "5.11.0",
+        "@prisma/engines-version": "5.11.0-15.efd2449663b3d73d637ea1fd226bafbcf45b3102",
+        "@prisma/fetch-engine": "5.11.0",
+        "@prisma/get-platform": "5.11.0"
+      }
+    },
+    "node_modules/@prisma/engines-version": {
+      "version": "5.11.0-15.efd2449663b3d73d637ea1fd226bafbcf45b3102",
+      "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-5.11.0-15.efd2449663b3d73d637ea1fd226bafbcf45b3102.tgz",
+      "integrity": "sha512-WXCuyoymvrS4zLz4wQagSsc3/nE6CHy8znyiMv8RKazKymOMd5o9FP5RGwGHAtgoxd+aB/BWqxuP/Ckfu7/3MA==",
+      "devOptional": true
+    },
+    "node_modules/@prisma/fetch-engine": {
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-5.11.0.tgz",
+      "integrity": "sha512-994viazmHTJ1ymzvWugXod7dZ42T2ROeFuH6zHPcUfp/69+6cl5r9u3NFb6bW8lLdNjwLYEVPeu3hWzxpZeC0w==",
+      "devOptional": true,
+      "dependencies": {
+        "@prisma/debug": "5.11.0",
+        "@prisma/engines-version": "5.11.0-15.efd2449663b3d73d637ea1fd226bafbcf45b3102",
+        "@prisma/get-platform": "5.11.0"
+      }
+    },
+    "node_modules/@prisma/get-platform": {
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-5.11.0.tgz",
+      "integrity": "sha512-rxtHpMLxNTHxqWuGOLzR2QOyQi79rK1u1XYAVLZxDGTLz/A+uoDnjz9veBFlicrpWjwuieM4N6jcnjj/DDoidw==",
+      "devOptional": true,
+      "dependencies": {
+        "@prisma/debug": "5.11.0"
+      }
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
@@ -784,6 +864,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.2.tgz",
+      "integrity": "sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-portal": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
@@ -1238,6 +1341,68 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
+    "node_modules/@uploadthing/dropzone": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@uploadthing/dropzone/-/dropzone-0.2.1.tgz",
+      "integrity": "sha512-OK4rSFnQ2woJ07t78hTfxjMxXedLoj+Jp34kIEtYPYBTPOnNwoKhDXfRojSu8cBilkQROzIe67i0p6F4B6LQhQ==",
+      "dependencies": {
+        "file-selector": "^0.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "solid-js": "^1.7.11"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "solid-js": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@uploadthing/mime-types": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/@uploadthing/mime-types/-/mime-types-0.2.6.tgz",
+      "integrity": "sha512-mB7XAKy5ARltUWZxb2oE0OwUW5Wplxi7Z3cqCvf/ZFvQ1E6lcGVNNKbmJI8c4GaONyEYnalo0Yl228zzHzyZnQ=="
+    },
+    "node_modules/@uploadthing/react": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@uploadthing/react/-/react-6.4.0.tgz",
+      "integrity": "sha512-XvlrlgH6LM2Zmw/yzryyI6+6mdANFg9nCYvE4glF81cvqVl6X62nrwC3EhvC/H19ZaW8atwsvtyjNxZS3+l+gA==",
+      "dependencies": {
+        "@uploadthing/dropzone": "0.2.1",
+        "@uploadthing/shared": "6.3.4",
+        "file-selector": "^0.6.0",
+        "tailwind-merge": "^2.2.1"
+      },
+      "peerDependencies": {
+        "next": "*",
+        "react": "^17.0.2 || ^18.0.0",
+        "uploadthing": "6.6.0"
+      },
+      "peerDependenciesMeta": {
+        "next": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@uploadthing/shared": {
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/@uploadthing/shared/-/shared-6.3.4.tgz",
+      "integrity": "sha512-qMf7BiwQth14Gxt2Zerkrbpy/gIHUIkxBz7aN+OEh1T+z2gv8qLRhMXoWFaU56Q+3/NegdR6J+9jwPWc9WwMug==",
+      "dependencies": {
+        "std-env": "^3.7.0"
+      },
+      "peerDependencies": {
+        "@uploadthing/mime-types": "0.2.6"
+      },
+      "peerDependenciesMeta": {
+        "@uploadthing/mime-types": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -1623,6 +1788,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
+      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.4",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -1911,6 +2099,14 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/consola": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-3.2.3.tgz",
+      "integrity": "sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==",
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
     "node_modules/cookie": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
@@ -1946,8 +2142,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -2759,6 +2954,17 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -2806,6 +3012,25 @@
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -3075,6 +3300,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.14",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz",
+      "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -4501,6 +4734,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prisma": {
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/prisma/-/prisma-5.11.0.tgz",
+      "integrity": "sha512-KCLiug2cs0Je7kGkQBN9jDWoZ90ogE/kvZTUTgz2h94FEo8pczCkPH7fPNXkD1sGU7Yh65risGGD1HQ5DF3r3g==",
+      "devOptional": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "@prisma/engines": "5.11.0"
+      },
+      "bin": {
+        "prisma": "build/index.js"
+      },
+      "engines": {
+        "node": ">=16.13"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -4512,6 +4761,11 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4587,6 +4841,36 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.51.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.0.tgz",
+      "integrity": "sha512-BggOy5j58RdhdMzzRUHGOYhSz1oeylFAv6jUSG86OvCIvlAvS7KvnRY7yoAf2pfEiPN7BesnR0xx73nEk3qIiw==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
+    "node_modules/react-hot-toast": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+      "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+      "dependencies": {
+        "goober": "^2.1.10"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -5023,6 +5307,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/std-env": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.7.0.tgz",
+      "integrity": "sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg=="
+    },
     "node_modules/streamsearch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
@@ -5593,6 +5882,44 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/uploadthing": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/uploadthing/-/uploadthing-6.6.0.tgz",
+      "integrity": "sha512-PccLhKjxK1dBKcY9a5vUG+P+bu35cyB7dtDEm7xUVq/C+nc6hC/rh+vC+9jhoJhga+h+O7Rd7M8ZyBaf6W72sA==",
+      "dependencies": {
+        "@uploadthing/mime-types": "0.2.6",
+        "@uploadthing/shared": "6.3.4",
+        "consola": "^3.2.3",
+        "std-env": "^3.7.0"
+      },
+      "engines": {
+        "node": ">=18.13.0"
+      },
+      "peerDependencies": {
+        "express": "*",
+        "fastify": "*",
+        "h3": "*",
+        "next": "*",
+        "tailwindcss": "*"
+      },
+      "peerDependenciesMeta": {
+        "express": {
+          "optional": true
+        },
+        "fastify": {
+          "optional": true
+        },
+        "h3": {
+          "optional": true
+        },
+        "next": {
+          "optional": true
+        },
+        "tailwindcss": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -5882,6 +6209,14 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.22.4",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz",
+      "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index f26b696..e6d34aa 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,14 @@
   },
   "dependencies": {
     "@clerk/nextjs": "^4.29.9",
+    "@hookform/resolvers": "^3.3.4",
+    "@prisma/client": "^5.11.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
+    "@uploadthing/react": "^6.4.0",
+    "axios": "^1.6.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "lucide": "^0.356.0",
@@ -20,8 +25,12 @@
     "next": "14.1.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.51.0",
+    "react-hot-toast": "^2.4.1",
     "tailwind-merge": "^2.2.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "uploadthing": "^6.6.0",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/node": "^20",
@@ -31,6 +40,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.1.3",
     "postcss": "^8",
+    "prisma": "^5.11.0",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
new file mode 100644
index 0000000..86ceca5
--- /dev/null
+++ b/prisma/schema.prisma
@@ -0,0 +1,50 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
+// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+  relationMode = "prisma"
+}
+
+model Course{
+  id String @id @default(uuid())
+  userId String
+  title String @db.Text
+  description String? @db.Text
+  imageUrl String? @db.Text
+  price Float?
+  isPublished Boolean @default(false)
+  categoryId String?
+  category Category? @relation(fields: [categoryId],references: [id])
+  attachments Attachment[]
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@index([categoryId])
+}
+
+model Category{
+  id String @id @default(uuid())
+  name String @unique
+  courses Course[]
+}
+
+
+model Attachment{
+  id String @id @default(uuid())
+  name String
+  url String @db.Text
+  courseId String
+  course Course @relation(fields: [courseId],references: [id], onDelete: Cascade)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  @@index([courseId])
+}
\ No newline at end of file
diff --git a/src/app/(dashboard)/(routes)/teacher/courses/[courseId]/_components/description-page.tsx b/src/app/(dashboard)/(routes)/teacher/courses/[courseId]/_components/description-page.tsx
new file mode 100644
index 0000000..131bae1
--- /dev/null
+++ b/src/app/(dashboard)/(routes)/teacher/courses/[courseId]/_components/description-page.tsx
@@ -0,0 +1,93 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import React, { useState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+import { Textarea } from "@/components/ui/textarea";
+import axios from "axios";
+import toast from "react-hot-toast";
+import { useRouter } from "next/navigation";
+
+const formSchema = z.object({
+  description: z.string().min(2, {
+    message: "Description must be at least 2 characters.",
+  }),
+});
+
+interface obj {
+  courseInfo: {
+    description: string | null;
+    id: string;
+  };
+}
+const DescriptionForm = ({ courseInfo }: obj) => {
+  const router = useRouter();
+  const [isEditing, setIsEditing] = useState(false);
+  const toogleEditing = () => {
+    setIsEditing((previous) => !previous);
+  };
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      description: courseInfo.description ? courseInfo.description : "",
+    },
+  });
+
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    const { data } = await axios.patch(`/api/courses/${courseInfo.id}`, values);
+    toogleEditing();
+    if (data.success) {
+      toast.success("Updated");
+      router.refresh();
+    }
+  }
+
+  const { isSubmitting, isValid } = form.formState;
+  return (
+    <div className="bg-orange-100">
+      <div className="flex items-center">
+        <h2>Course description</h2>
+        <Button onClick={toogleEditing} variant={"ghost"}>
+          {!isEditing ? <>Edit description</> : <>Cancel</>}
+        </Button>
+      </div>
+      {!isEditing && <p>{courseInfo?.description}</p>}
+      {isEditing && (
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Textarea
+                      placeholder="e.g. This course about..."
+                      disabled={isSubmitting}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button type="submit" disabled={!isValid || isSubmitting}>
+              Save
+            </Button>
+          </form>
+        </Form>
+      )}
+    </div>
+  );
+};
+
+export default DescriptionForm;
diff --git a/src/app/(dashboard)/(routes)/teacher/courses/[courseId]/_components/image-page.tsx b/src/app/(dashboard)/(routes)/teacher/courses/[courseId]/_components/image-page.tsx
new file mode 100644
index 0000000..5907017
--- /dev/null
+++ b/src/app/(dashboard)/(routes)/teacher/courses/[courseId]/_components/image-page.tsx
@@ -0,0 +1,72 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import { z } from "zod";
+import axios from "axios";
+import toast from "react-hot-toast";
+import { useRouter } from "next/navigation";
+import { Course } from "@prisma/client";
+import FileUpload from "@/components/file-upload";
+import Image from "next/image";
+
+const formSchema = z.object({
+  imageUrl: z.string().min(2, {
+    message: "image is required",
+  }),
+});
+
+interface obj {
+  courseInfo: Course;
+}
+const ImageForm = ({ courseInfo }: obj) => {
+  const router = useRouter();
+  const [isEditing, setIsEditing] = useState(false);
+  const toogleEditing = () => {
+    setIsEditing((previous) => !previous);
+  };
+
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    const { data } = await axios.patch(`/api/courses/${courseInfo.id}`, values);
+    toogleEditing();
+    if (data.success) {
+      toast.success("Updated");
+      router.refresh();
+    }
+  }
+  return (
+    <div className="bg-orange-100">
+      <div className="flex items-center">
+        <h2>Course imageUrl</h2>
+        <Button onClick={toogleEditing} variant={"ghost"}>
+          {isEditing && <>Cancel</>}
+          {!isEditing && !courseInfo.imageUrl && <>Add Image</>}
+          {!isEditing && courseInfo.imageUrl && <>Edit Image</>}
+        </Button>
+      </div>
+      {!isEditing &&
+        (!courseInfo.imageUrl ? (
+          <div className="h-20  bg-slate-400"></div>
+        ) : (
+          <Image
+            src={courseInfo.imageUrl}
+            alt="upload"
+            width={300}
+            height={100}
+            className="object-cover"
+          />
+        ))}
+      {isEditing && (
+        <FileUpload
+          onChange={(url) => {
+            if (url) {
+              onSubmit({ imageUrl: url });
+            }
+          }}
+          endpoint="courseImage"
+        />
+      )}
+    </div>
+  );
+};
+
+export default ImageForm;
diff --git a/src/app/(dashboard)/(routes)/teacher/courses/[courseId]/_components/title-page.tsx b/src/app/(dashboard)/(routes)/teacher/courses/[courseId]/_components/title-page.tsx
new file mode 100644
index 0000000..a4c3436
--- /dev/null
+++ b/src/app/(dashboard)/(routes)/teacher/courses/[courseId]/_components/title-page.tsx
@@ -0,0 +1,95 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import React, { useState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import axios from "axios";
+import toast from "react-hot-toast";
+import { useRouter } from "next/navigation";
+
+const formSchema = z.object({
+  title: z.string().min(2, {
+    message: "title must be at least 2 characters.",
+  }),
+});
+
+interface obj {
+  courseInfo: {
+    title: string;
+    id: string;
+  };
+}
+const TitleForm = ({ courseInfo }: obj) => {
+    const router = useRouter()
+  const [isEditing, setIsEditing] = useState(false);
+  const toogleEditing = () => {
+    setIsEditing((previous) => !previous);
+  };
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      title: courseInfo.title,
+    },
+  });
+
+ async function onSubmit(values: z.infer<typeof formSchema>) {
+    const {data} = await axios.patch(`/api/courses/${courseInfo.id}`,values)
+    toogleEditing()
+    if(data.success){
+        toast.success("Updated")
+        router.refresh()
+    }
+  }
+
+  const { isSubmitting, isValid } = form.formState;
+  return (
+    <div className="bg-orange-100">
+      <div className="flex items-center">
+        <h2>Course Title</h2>
+        <Button onClick={toogleEditing} variant={"ghost"}>
+          {!isEditing ? <>Edit Title</> : <>Cancel</>}
+        </Button>
+      </div>
+      {!isEditing && <p>{courseInfo.title}</p>}
+      {isEditing && (
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      placeholder="shadcn"
+                      disabled={isSubmitting}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button type="submit" disabled={!isValid || isSubmitting}>
+              Save
+            </Button>
+          </form>
+        </Form>
+      )}
+    </div>
+  );
+};
+
+export default TitleForm;
diff --git a/src/app/(dashboard)/(routes)/teacher/courses/[courseId]/page.tsx b/src/app/(dashboard)/(routes)/teacher/courses/[courseId]/page.tsx
new file mode 100644
index 0000000..5aae77a
--- /dev/null
+++ b/src/app/(dashboard)/(routes)/teacher/courses/[courseId]/page.tsx
@@ -0,0 +1,51 @@
+import { IconBadge } from "@/components/icon-badge";
+import { db } from "@/lib/db";
+import { auth } from "@clerk/nextjs";
+import { LayoutDashboard } from "lucide-react";
+import { redirect } from "next/navigation";
+import TitleForm from "./_components/title-page";
+import DescriptionForm from "./_components/description-page";
+import ImageForm from "./_components/image-page";
+
+const SpecificCoursePage = async ({
+  params,
+}: {
+  params: { courseId: string };
+}) => {
+  const { userId }: { userId: string | null } = auth();
+  if (!userId) return redirect("/");
+
+  const course = await db.course.findUnique({
+    where: {
+      id: params.courseId,
+    },
+  });
+  console.log(course);
+  if (course?.userId !== userId) return redirect("/");
+
+  const requireField = [
+    course.title,
+    course.description,
+    course.imageUrl,
+    course.price,
+    course.categoryId,
+  ];
+  const totalFieldLength = requireField.length;
+  const completeField = requireField.filter(Boolean).length;
+
+  return (
+    <>
+      <h1>Course Setup</h1>
+      <p>Complete All Fields {`(${completeField}/${totalFieldLength})`}</p>
+      <div className="flex gap-x-3 items-center">
+        <IconBadge icon={LayoutDashboard} size="sm" />
+        <p>Customize your course</p>
+      </div>
+      <TitleForm courseInfo={course} />
+      <DescriptionForm courseInfo={course} />
+      <ImageForm courseInfo={course} />
+    </>
+  );
+};
+
+export default SpecificCoursePage;
diff --git a/src/app/(dashboard)/(routes)/teacher/courses/page.tsx b/src/app/(dashboard)/(routes)/teacher/courses/page.tsx
index fa6ebd7..0b7812a 100644
--- a/src/app/(dashboard)/(routes)/teacher/courses/page.tsx
+++ b/src/app/(dashboard)/(routes)/teacher/courses/page.tsx
@@ -1,9 +1,16 @@
-import React from 'react'
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import React from "react";
 
 const CoursesPage = () => {
   return (
-    <div>CoursesPage</div>
-  )
-}
+    <div className="flex flex-col">
+      CoursesPage
+      <Link href="/teacher/create">
+        <Button>New Course</Button>
+      </Link>
+    </div>
+  );
+};
 
-export default CoursesPage
\ No newline at end of file
+export default CoursesPage;
diff --git a/src/app/(dashboard)/(routes)/teacher/create/page.tsx b/src/app/(dashboard)/(routes)/teacher/create/page.tsx
new file mode 100644
index 0000000..69b9588
--- /dev/null
+++ b/src/app/(dashboard)/(routes)/teacher/create/page.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import toast from "react-hot-toast";
+import axios from "axios";
+import { useRouter } from "next/navigation";
+
+const formSchema = z.object({
+  title: z.string().min(2, {
+    message: "Title must be at least 2 characters.",
+  }),
+});
+
+const CreatePage = () => {
+  const router = useRouter();
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      title: "",
+    },
+  });
+
+  const onSubmit = async (values: z.infer<typeof formSchema>) => {
+    try {
+      const { data } = await axios.post("/api/courses", values);
+      router.push(`/teacher/courses/${data?.id}`);
+      console.log(data)
+      toast.success("Course Created");
+    } catch (error) {
+      toast.error("Something wrong");
+    }
+  };
+
+  const { isSubmitting, isValid } = form.formState;
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="title"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Title</FormLabel>
+              <FormControl>
+                <Input placeholder="shadcn" {...field} />
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit" disabled={!isValid || isSubmitting}>
+          Submit
+        </Button>
+      </form>
+    </Form>
+  );
+};
+
+export default CreatePage;
diff --git a/src/app/api/courses/[courseId]/route.ts b/src/app/api/courses/[courseId]/route.ts
new file mode 100644
index 0000000..70f5532
--- /dev/null
+++ b/src/app/api/courses/[courseId]/route.ts
@@ -0,0 +1,25 @@
+import { db } from "@/lib/db"
+import { auth } from "@clerk/nextjs"
+import { NextResponse } from "next/server"
+
+export async function  PATCH(req:Request,{params}:{params:{courseId:string}}){
+    const {userId} = auth()
+ try {
+    if(!userId) return new NextResponse("unauthorized",{status:401})
+
+    const values = await req.json()
+    const findCourse = await db.course.update({
+        where:{
+            id:params.courseId,
+            userId
+        },
+        data:{
+            ...values
+        }
+    })
+    return NextResponse.json({findCourse,success:true},{status:200})
+ } catch (error) {
+    console.log("api/courses/[courseId]",error)
+    return new NextResponse("something error",{status:500})
+ }
+}
\ No newline at end of file
diff --git a/src/app/api/courses/route.ts b/src/app/api/courses/route.ts
new file mode 100644
index 0000000..a28fd8b
--- /dev/null
+++ b/src/app/api/courses/route.ts
@@ -0,0 +1,20 @@
+import { auth } from "@clerk/nextjs"
+import { NextResponse } from "next/server"
+import {db} from "@/lib/db"
+
+
+export async function POST(req:Request){
+    try {
+        const {title} = await req.json()
+        const {userId} = auth();
+        if(!userId){
+            return new NextResponse("Unauthorized",{status:401})
+        }
+        const createCourse = await db.course.create({data:{title,userId}})
+
+        return  NextResponse.json(createCourse)
+    } catch (error) {
+        console.log(`[api/courses]`,error)
+        return new NextResponse("Internal Error",{status:500})
+    }
+}
\ No newline at end of file
diff --git a/src/app/api/uploadthing/core.ts b/src/app/api/uploadthing/core.ts
new file mode 100644
index 0000000..9efc6c1
--- /dev/null
+++ b/src/app/api/uploadthing/core.ts
@@ -0,0 +1,33 @@
+import { auth } from "@clerk/nextjs";
+import { createUploadthing, type FileRouter } from "uploadthing/next";
+
+const f = createUploadthing();
+
+const handleAuth = () => {
+  const { userId } = auth();
+console.log("useridd",userId)
+  if (!userId) {
+    throw new Error("Unauthorized");
+    // console.log("unquthorized")
+  }
+  return { userId };
+};
+
+// FileRouter for your app, can contain multiple FileRoutes
+export const ourFileRouter = {
+  courseImage: f({ image: { maxFileSize: "4MB", maxFileCount: 1 } })
+    .middleware(() => handleAuth())
+    .onUploadComplete(async ({ metadata, file }) => {
+      console.log("Upload complete for userId:", metadata.userId);
+      console.log("file url", file.url);
+      return { uploadedBy: metadata.userId };
+    }),
+  courseAttachment: f(["text", "image", "video", "audio", "pdf"])
+    .middleware(() => handleAuth())
+    .onUploadComplete(() => {}),
+  chapterVideo: f({ video: { maxFileCount: 1, maxFileSize: "512GB" } })
+    .middleware(() => handleAuth())
+    .onUploadComplete(() => {}),
+} satisfies FileRouter;
+
+export type OurFileRouter = typeof ourFileRouter;
diff --git a/src/app/api/uploadthing/route.ts b/src/app/api/uploadthing/route.ts
new file mode 100644
index 0000000..6fc53e7
--- /dev/null
+++ b/src/app/api/uploadthing/route.ts
@@ -0,0 +1,11 @@
+import { createRouteHandler } from "uploadthing/next";
+ 
+import { ourFileRouter } from "./core";
+ 
+// Export routes for Next App Router
+export const { GET, POST } = createRouteHandler({
+  router: ourFileRouter,
+ 
+  // Apply an (optional) custom config:
+  // config: { ... },
+});
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 164f023..0ceb76e 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,7 +2,8 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import { ClerkProvider } from '@clerk/nextjs'
 import "./globals.css";
-
+import ToastProvider from "@/components/ToastProvider/toastProvider";
+import "@uploadthing/react/styles.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
@@ -18,7 +19,10 @@ export default function RootLayout({
   return (
     <ClerkProvider>
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+      <ToastProvider/>
+        {children}
+        </body>
     </html>
     </ClerkProvider>
   );
diff --git a/src/components/ToastProvider/toastProvider.tsx b/src/components/ToastProvider/toastProvider.tsx
new file mode 100644
index 0000000..7d99e96
--- /dev/null
+++ b/src/components/ToastProvider/toastProvider.tsx
@@ -0,0 +1,7 @@
+import { Toaster } from "react-hot-toast";
+
+const ToastProvider = () => {
+  return <Toaster position="bottom-left" reverseOrder={false} />;
+};
+
+export default ToastProvider;
diff --git a/src/components/file-upload.tsx b/src/components/file-upload.tsx
new file mode 100644
index 0000000..2847e9c
--- /dev/null
+++ b/src/components/file-upload.tsx
@@ -0,0 +1,26 @@
+"use client";
+import { UploadDropzone } from "@/lib/uploadthing";
+import { ourFileRouter } from "@/app/api/uploadthing/core";
+import toast from "react-hot-toast";
+
+interface FileUpload {
+  onChange: (url?: string) => void;
+  endpoint: keyof typeof ourFileRouter;
+}
+const FileUpload = ({ onChange, endpoint }: FileUpload) => {
+  return (
+    <UploadDropzone
+      endpoint={endpoint}
+      onClientUploadComplete={(res: any) => {
+        onChange(res?.[0].url);
+        toast.success("Upload Completed");
+      }}
+      onUploadError={(error: Error) => {
+        // Do something with the error.
+        toast.error(`ERROR! ${error.message}`);
+      }}
+    />
+  );
+};
+
+export default FileUpload;
diff --git a/src/components/icon-badge.tsx b/src/components/icon-badge.tsx
new file mode 100644
index 0000000..d06abeb
--- /dev/null
+++ b/src/components/icon-badge.tsx
@@ -0,0 +1,63 @@
+import { LucideIcon } from "lucide-react";
+import { cva, type VariantProps }  from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const backgroundVariants = cva(
+  "rounded-full flex items-center justify-center",
+  {
+    variants: {
+      variant: {
+        default: "bg-sky-100",
+        success: "bg-emerald-100",
+      },
+      size: {
+        default: "p-2",
+        sm: "p-1",
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    }
+  }
+);
+
+const iconVariants = cva(
+  "",
+  {
+    variants: {
+      variant: {
+        default: "text-sky-700",
+        success: "text-emerald-700",
+      },
+      size: {
+        default: "h-8 w-8",
+        sm: "h-4 w-4"
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    }
+  }
+);
+
+type BackgroundVariantsProps = VariantProps<typeof backgroundVariants>;
+type IconVariantsProps = VariantProps<typeof iconVariants>;
+
+interface IconBadgeProps extends BackgroundVariantsProps, IconVariantsProps {
+  icon: LucideIcon;
+};
+
+export const IconBadge = ({
+  icon: Icon,
+  variant,
+  size,
+}: IconBadgeProps) => {
+  return (
+    <div className={cn(backgroundVariants({ variant, size }))}>
+      <Icon className={cn(iconVariants({ variant, size }))} />
+    </div>
+  )
+};
\ No newline at end of file
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
new file mode 100644
index 0000000..f6afdaf
--- /dev/null
+++ b/src/components/ui/form.tsx
@@ -0,0 +1,176 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..a92b8e0
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..5341821
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..d1258e4
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/src/lib/db.ts b/src/lib/db.ts
new file mode 100644
index 0000000..fec7526
--- /dev/null
+++ b/src/lib/db.ts
@@ -0,0 +1,13 @@
+import { PrismaClient } from '@prisma/client'
+
+const prismaClientSingleton = () => {
+  return new PrismaClient()
+}
+
+declare global {
+  var prismaGlobal: undefined | ReturnType<typeof prismaClientSingleton>
+}
+
+export const db = globalThis.prismaGlobal ?? prismaClientSingleton()
+
+if (process.env.NODE_ENV !== 'production') globalThis.prismaGlobal = db
\ No newline at end of file
diff --git a/src/lib/uploadthing.ts b/src/lib/uploadthing.ts
new file mode 100644
index 0000000..13d9af4
--- /dev/null
+++ b/src/lib/uploadthing.ts
@@ -0,0 +1,9 @@
+import {
+    generateUploadButton,
+    generateUploadDropzone,
+  } from "@uploadthing/react";
+   
+  import type { OurFileRouter } from "@/app/api/uploadthing/core";
+   
+  export const UploadButton = generateUploadButton<OurFileRouter>();
+  export const UploadDropzone = generateUploadDropzone<OurFileRouter>();
\ No newline at end of file
diff --git a/src/middleware.ts b/src/middleware.ts
index a5c6155..20c1b7a 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -2,7 +2,7 @@ import { authMiddleware } from "@clerk/nextjs";
 
 export default authMiddleware({
 //   // Routes that can be accessed while signed out
-//   publicRoutes: ["/anyone-can-visit-this-route"],
+publicRoutes: ["/api/uploadthing"],
 //   // Routes that can always be accessed, and have
 //   // no authentication information
 //   ignoredRoutes: ["/no-auth-in-this-route"],