diff --git a/frontend/src/app/credentials/add/page.jsx b/frontend/src/app/credentials/add/page.jsx
index c83f78a..5ab13b1 100644
--- a/frontend/src/app/credentials/add/page.jsx
+++ b/frontend/src/app/credentials/add/page.jsx
@@ -1,10 +1,26 @@
-import React from "react";
+"use client";
+import React, { useRef, useState } from "react";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import globalStyle from "../../globalStyle.module.css";
 import createCredStyle from "./styles.module.css";
 import TopToolTip from "@/app/components/topToolTip/TopToolTip";
+import TextField from "@/app/components/fields/textfield";
 
-const page = () => {
+const Page = () => {
+  const fileInputRef = useRef(null);
+  const [fileName, setFileName] = useState("");
+
+  const handleClick = () => {
+    fileInputRef.current.click();
+  };
+
+  const handleFileChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      setFileName(file.name);
+      console.log(file); // you can send this to backend later
+    }
+  };
   return (
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>
@@ -27,13 +43,42 @@ const page = () => {
                 </div>
                 {/* Content */}
                 <div className={createCredStyle.credInputField}>
-                  <input
-                    type="text"
-                    name=""
-                    id=""
-                    placeholder="Enter Email"
-                    className={createCredStyle.placeholderTxt}
-                  />
+                  <TextField placeHolder="Enter Credential Name" />
+                </div>
+              </div>
+              {/* Upload File */}
+              <div className={createCredStyle.uploadFile}>
+                {/* Label */}
+                <div className={createCredStyle.label}>
+                  <p>Upload File</p>
+                </div>
+
+                {/* Hidden File Input */}
+                <input
+                  type="file"
+                  ref={fileInputRef}
+                  onChange={handleFileChange}
+                  style={{ display: "none" }}
+                />
+
+                {/* Custom Upload Box */}
+                <div
+                  className={createCredStyle.upload}
+                  onClick={handleClick}
+                  style={{ cursor: "pointer" }}
+                >
+                  {fileName ? (
+                    <p>{fileName}</p>
+                  ) : (
+                    <>
+                      <p className={createCredStyle.chooseTxt}>
+                        Click to choose a file
+                      </p>
+                      <p className={createCredStyle.dragTxt}>
+                        Drag or drop here
+                      </p>
+                    </>
+                  )}
                 </div>
               </div>
             </div>
@@ -44,4 +89,4 @@ const page = () => {
   );
 };
 
-export default page;
+export default Page;
diff --git a/frontend/src/app/credentials/add/styles.module.css b/frontend/src/app/credentials/add/styles.module.css
index 83a1908..0e35953 100644
--- a/frontend/src/app/credentials/add/styles.module.css
+++ b/frontend/src/app/credentials/add/styles.module.css
@@ -50,100 +50,54 @@
   gap: 8px;
   align-self: stretch;
 }
-
-.credInputField > p {
+.uploadFile {
   display: flex;
-  height: 44px;
-  padding: 12px 16px;
   flex-direction: column;
-  justify-content: center;
   align-items: flex-start;
-  background: none;
-  gap: 10px;
+  gap: 12px;
   align-self: stretch;
-  border-radius: 6px;
-  border: 1px solid #616583;
-  border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
 }
-
-.credInputField > input:hover {
-  border: 1px solid #616583;
-  border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
-  background: rgba(75, 79, 109, 0.05);
-  background: color(display-p3 0.298 0.3098 0.4196 / 0.05);
-}
-
-.credInputField input:focus {
-  outline: none;
-  border-radius: 6px;
-  border: 1px solid #959aff;
-  border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
-  background: rgba(75, 79, 109, 0.25);
-  background: color(display-p3 0.298 0.3098 0.4196 / 0.25);
-  caret-color: #959aff;
-}
-.credInputField input:focus::placeholder {
-  color: #4b4f6d;
-  color: color(display-p3 0.298 0.3098 0.4196);
-}
-
-.placeholderTxt::placeholder {
+.label > .optionalTxt {
   color: #85869b;
   color: color(display-p3 0.5216 0.5255 0.6);
   font-family: Inter;
+  font-size: 16 px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: normal;
+}
+.upload {
+  display: flex;
+  height: 203px;
+  padding: 12px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 1px dashed #5980f1;
+  border: 1px dashed color(display-p3 0.3804 0.4959 0.9137);
+}
+.chooseTxt {
+  color: #5980f1;
+  color: color(display-p3 0.3804 0.4959 0.9137);
+  text-align: center;
+  font-family: Inter;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
-}
-/* 
-.inputField {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
   align-self: stretch;
 }
-.inputField > input {
-  display: flex;
-  height: 44px;
-  padding: 12px 16px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  background: none;
-  gap: 10px;
-  align-self: stretch;
-  border-radius: 6px;
-  border: 1px solid #616583;
-  border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
-}
-.inputField > input:hover {
-  border: 1px solid #616583;
-  border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
-  background: rgba(75, 79, 109, 0.05);
-  background: color(display-p3 0.298 0.3098 0.4196 / 0.05);
-}
-
-.inputField input:focus {
-  outline: none;
-  border-radius: 6px;
-  border: 1px solid #959aff;
-  border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
-  background: rgba(75, 79, 109, 0.25);
-  background: color(display-p3 0.298 0.3098 0.4196 / 0.25);
-  caret-color: #959aff;
-}
-.inputField input:focus::placeholder {
-  color: #4b4f6d;
-  color: color(display-p3 0.298 0.3098 0.4196);
-}
-
-.placeholderTxt::placeholder {
+.dragTxt {
   color: #85869b;
   color: color(display-p3 0.5216 0.5255 0.6);
+  text-align: center;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 14px;
   font-style: normal;
   font-weight: 400;
-  line-height: normal; */
+  line-height: normal;
+  align-self: stretch;
+}