diff --git a/public/document-outline.svg b/public/document-outline.svg
new file mode 100644
index 0000000..1a3728b
--- /dev/null
+++ b/public/document-outline.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.75 13C15.75 12.8011 15.671 12.6103 15.5303 12.4697C15.3897 12.329 15.1989 12.25 15 12.25H9C8.80109 12.25 8.61032 12.329 8.46967 12.4697C8.32902 12.6103 8.25 12.8011 8.25 13C8.25 13.1989 8.32902 13.3897 8.46967 13.5303C8.61032 13.671 8.80109 13.75 9 13.75H15C15.1989 13.75 15.3897 13.671 15.5303 13.5303C15.671 13.3897 15.75 13.1989 15.75 13ZM15.75 17C15.75 16.8011 15.671 16.6103 15.5303 16.4697C15.3897 16.329 15.1989 16.25 15 16.25H9C8.80109 16.25 8.61032 16.329 8.46967 16.4697C8.32902 16.6103 8.25 16.8011 8.25 17C8.25 17.1989 8.32902 17.3897 8.46967 17.5303C8.61032 17.671 8.80109 17.75 9 17.75H15C15.1989 17.75 15.3897 17.671 15.5303 17.5303C15.671 17.3897 15.75 17.1989 15.75 17Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 2.25C6.27065 2.25 5.57118 2.53973 5.05546 3.05546C4.53973 3.57118 4.25 4.27065 4.25 5V19C4.25 19.7293 4.53973 20.4288 5.05546 20.9445C5.57118 21.4603 6.27065 21.75 7 21.75H17C17.7293 21.75 18.4288 21.4603 18.9445 20.9445C19.4603 20.4288 19.75 19.7293 19.75 19V7.968C19.75 7.587 19.626 7.217 19.396 6.913L16.398 2.945C16.2349 2.72912 16.0239 2.554 15.7817 2.43341C15.5395 2.31282 15.2726 2.25004 15.002 2.25H7ZM5.75 5C5.75 4.31 6.31 3.75 7 3.75H14.25V8.147C14.25 8.561 14.586 8.897 15 8.897H18.25V19C18.25 19.69 17.69 20.25 17 20.25H7C6.31 20.25 5.75 19.69 5.75 19V5Z" fill="white"/>
+</svg>
diff --git a/public/face-line.svg b/public/face-line.svg
new file mode 100644
index 0000000..8fd47d3
--- /dev/null
+++ b/public/face-line.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.9787 4.64449C6.17036 5.45866 5.64786 6.64033 5.43703 8.08283C5.41987 8.20083 5.37759 8.31378 5.31303 8.41405C5.24848 8.51431 5.16316 8.59955 5.06283 8.66401C4.96251 8.72847 4.84951 8.77065 4.73149 8.7877C4.61347 8.80475 4.49316 8.79626 4.3787 8.76283C4.1487 8.69616 4.00453 8.90616 3.93203 9.10116C3.83786 9.35449 3.80953 9.72199 3.9187 10.1303C4.0137 10.4845 4.34953 11.222 4.82703 11.1778C5.01326 11.1605 5.19991 11.2063 5.35696 11.3078C5.51401 11.4094 5.63232 11.5609 5.69286 11.7378C6.53953 14.2145 8.66536 15.8337 10.4995 15.8337C12.3337 15.8337 14.4595 14.2145 15.3062 11.7378C15.3667 11.5603 15.4853 11.4083 15.6429 11.3065C15.8005 11.2047 15.9878 11.1591 16.1745 11.177C16.652 11.2228 16.9887 10.4845 17.0837 10.1303C17.1929 9.72199 17.1645 9.35449 17.0704 9.10116C16.997 8.90532 16.8529 8.69533 16.622 8.76283C16.5075 8.79654 16.3871 8.80527 16.2689 8.7884C16.1508 8.77154 16.0376 8.72949 15.9371 8.66509C15.8366 8.60069 15.7511 8.51545 15.6864 8.41514C15.6217 8.31482 15.5793 8.20178 15.562 8.08366C15.3512 6.64116 14.8287 5.45866 14.0204 4.64533C13.2262 3.84533 12.0912 3.33366 10.4995 3.33366C8.90786 3.33366 7.77286 3.84616 6.9787 4.64449ZM5.7962 3.46949C6.93786 2.32116 8.51786 1.66699 10.4995 1.66699C12.4812 1.66699 14.0604 2.32116 15.2029 3.47033C16.1662 4.43949 16.7695 5.71199 17.0779 7.11449C17.124 7.12283 17.1695 7.13338 17.2145 7.14616C17.9387 7.33949 18.4054 7.90949 18.6329 8.52116C18.8604 9.13449 18.882 9.85866 18.6937 10.562C18.4295 11.5478 17.7229 12.5203 16.692 12.7828C15.5654 15.492 13.0712 17.5003 10.4995 17.5003C7.92786 17.5003 5.43286 15.4903 4.30703 12.782C3.27786 12.5178 2.57286 11.5462 2.3087 10.562C2.12036 9.85866 2.14203 9.13449 2.36953 8.52033C2.59703 7.90949 3.0637 7.33949 3.78786 7.14533C3.83231 7.13366 3.87675 7.12366 3.9212 7.11533C4.22953 5.71199 4.83286 4.43949 5.7962 3.46949Z" fill="white"/>
+</svg>
diff --git a/public/hourglass.svg b/public/hourglass.svg
new file mode 100644
index 0000000..ceabb84
--- /dev/null
+++ b/public/hourglass.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.6877 18.125H14.3119C15.0854 18.125 15.7006 17.4887 15.6174 16.7555C15.0803 12.0312 11.8748 12.1094 11.8748 10C11.8748 7.89062 15.1213 8.00781 15.617 3.24453C15.6951 2.51094 15.0854 1.875 14.3119 1.875H5.6877C4.91426 1.875 4.30606 2.51094 4.38262 3.24453C4.87832 8.00781 8.12481 7.85156 8.12481 10C8.12481 12.1484 4.91934 12.0312 4.38262 16.7555C4.29903 17.4887 4.91426 18.125 5.6877 18.125Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.41 16.875H6.60651C5.99714 16.875 5.82526 16.1719 6.25261 15.7359C7.28698 14.6875 9.37487 13.9367 9.37487 12.7344V8.75C9.37487 7.97461 7.8905 7.38281 6.97214 6.125C6.82058 5.91758 6.83581 5.625 7.22097 5.625H12.7964C13.1249 5.625 13.196 5.91523 13.0464 6.12305C12.1413 7.38281 10.6249 7.9707 10.6249 8.75V12.7344C10.6249 13.927 12.801 14.5703 13.7655 15.7371C14.1542 16.2074 14.0182 16.875 13.41 16.875Z" fill="white"/>
+</svg>
diff --git a/public/light-up.svg b/public/light-up.svg
new file mode 100644
index 0000000..706c8c5
--- /dev/null
+++ b/public/light-up.svg
@@ -0,0 +1,10 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_298_2787)">
+<path d="M19.5 9.199H18.52C17.967 9.199 17.52 9.558 17.52 10C17.52 10.441 17.967 10.799 18.52 10.799H19.5C20.052 10.799 20.5 10.442 20.5 10C20.5 9.559 20.051 9.199 19.5 9.199ZM10.5 4.5C9.7771 4.49776 9.06089 4.63848 8.39259 4.91409C7.72428 5.1897 7.11708 5.59474 6.60591 6.10591C6.09474 6.61708 5.6897 7.22428 5.41409 7.89259C5.13848 8.56089 4.99776 9.2771 5 10C5 13.051 7.449 15.5 10.5 15.5C13.55 15.5 16 13.051 16 10C16 6.949 13.549 4.5 10.5 4.5ZM10.5 14C8.289 14 6.5 12.209 6.5 10C6.5 7.789 8.289 6 10.5 6C11.5609 6 12.5783 6.42143 13.3284 7.17157C14.0786 7.92172 14.5 8.93913 14.5 10C14.5 11.0609 14.0786 12.0783 13.3284 12.8284C12.5783 13.5786 11.5609 14 10.5 14ZM3.5 10C3.5 9.559 3.051 9.199 2.5 9.199H1.5C0.947 9.199 0.5 9.558 0.5 10C0.5 10.441 0.947 10.799 1.5 10.799H2.5C3.051 10.799 3.5 10.441 3.5 10ZM10.5 3C10.941 3 11.299 2.553 11.299 2V1C11.299 0.447 10.941 0 10.5 0C10.059 0 9.699 0.447 9.699 1V2C9.699 2.553 10.058 3 10.5 3ZM10.5 17C10.058 17 9.699 17.447 9.699 18V19C9.699 19.553 10.058 20 10.5 20C10.941 20 11.299 19.553 11.299 19V18C11.299 17.447 10.941 17 10.5 17ZM17.865 3.766C18.256 3.375 18.319 2.805 18.007 2.493C17.695 2.181 17.124 2.245 16.735 2.636L16.035 3.335C15.644 3.726 15.581 4.296 15.893 4.608C16.205 4.92 16.776 4.856 17.166 4.465L17.865 3.766ZM3.834 15.533L3.134 16.234C2.743 16.625 2.68 17.193 2.992 17.505C3.304 17.817 3.875 17.755 4.264 17.364L4.964 16.665C5.355 16.274 5.418 15.704 5.106 15.391C4.794 15.078 4.223 15.144 3.834 15.533ZM4.265 2.635C3.875 2.244 3.304 2.18 2.992 2.492C2.68 2.804 2.744 3.375 3.133 3.766L3.833 4.465C4.224 4.856 4.793 4.92 5.105 4.608C5.417 4.296 5.354 3.725 4.964 3.335L4.265 2.635ZM16.034 16.666L16.734 17.365C17.125 17.756 17.694 17.818 18.006 17.508C18.318 17.196 18.255 16.625 17.864 16.235L17.165 15.536C16.774 15.145 16.204 15.081 15.891 15.393C15.578 15.705 15.643 16.275 16.034 16.666Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_298_2787">
+<rect width="20" height="20" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/selfie_camera.svg b/public/selfie_camera.svg
new file mode 100644
index 0000000..3e99830
--- /dev/null
+++ b/public/selfie_camera.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.19352 4.86199L5.56435 3.00699C5.6399 2.62903 5.84411 2.28893 6.14222 2.04461C6.44033 1.80029 6.81391 1.66684 7.19935 1.66699H12.7993C13.1848 1.66684 13.5584 1.80029 13.8565 2.04461C14.1546 2.28893 14.3588 2.62903 14.4343 3.00699L14.8052 4.86199C14.8635 5.15261 15.003 5.42073 15.2076 5.63521C15.4122 5.84968 15.6735 6.00172 15.961 6.07366C16.6384 6.24341 17.2396 6.63456 17.6693 7.18502C18.099 7.73547 18.3325 8.41369 18.3327 9.11199V15.0003C18.3327 15.8844 17.9815 16.7322 17.3564 17.3573C16.7313 17.9825 15.8834 18.3337 14.9993 18.3337H4.99935C4.11529 18.3337 3.26745 17.9825 2.64233 17.3573C2.01721 16.7322 1.66602 15.8844 1.66602 15.0003V9.11199C1.66624 8.41369 1.89973 7.73547 2.3294 7.18502C2.75908 6.63456 3.36033 6.24341 4.03768 6.07366C4.32523 6.00172 4.58647 5.84968 4.79107 5.63521C4.99566 5.42073 5.13521 5.15261 5.19352 4.86199Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.99935 15.0007C11.8403 15.0007 13.3327 13.5083 13.3327 11.6673C13.3327 9.82637 11.8403 8.33398 9.99935 8.33398C8.1584 8.33398 6.66602 9.82637 6.66602 11.6673C6.66602 13.5083 8.1584 15.0007 9.99935 15.0007Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.16602 5H10.8327" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/selfieverification.svg b/public/selfieverification.svg
new file mode 100644
index 0000000..1716c08
--- /dev/null
+++ b/public/selfieverification.svg
@@ -0,0 +1,3 @@
+<svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.625 51.1688C16.275 38.0438 18.2187 29.8562 24.0437 24.0437C29.8562 18.2187 38.0438 16.275 51.1688 15.625M134.375 51.1688C133.725 38.0438 131.781 29.8562 125.956 24.0437C120.144 18.2187 111.956 16.275 98.8312 15.625M98.8312 134.375C111.956 133.725 120.144 131.781 125.956 125.956C131.781 120.144 133.725 111.956 134.375 98.8312M51.1688 134.375C38.0438 133.725 29.8562 131.781 24.0437 125.956C18.2187 120.144 16.275 111.956 15.625 98.8312M109.375 106.25L108.113 100.944C107.599 98.7905 106.523 96.8123 104.994 95.2113C103.466 93.6102 101.54 92.4438 99.4125 91.8312L84.375 87.4937V78.325C89.975 74.5437 93.75 67.475 93.75 59.375C93.75 47.2938 85.35 37.5 75 37.5C64.6438 37.5 56.25 47.2938 56.25 59.375C56.25 67.475 60.0187 74.5437 65.625 78.325V87.4937L50.6813 91.8688C48.6178 92.4729 46.7451 93.599 45.2441 95.1384C43.743 96.6778 42.6644 98.5783 42.1125 100.656L40.625 106.25" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/tick-circle.svg b/public/tick-circle.svg
new file mode 100644
index 0000000..97a44c5
--- /dev/null
+++ b/public/tick-circle.svg
@@ -0,0 +1,3 @@
+<svg width="154" height="154" viewBox="0 0 154 154" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M41.0661 77.0005L71.8662 102.667L112.933 51.3338M76.9995 148.867C67.5618 148.867 58.2166 147.008 49.4973 143.397C40.778 139.785 32.8555 134.491 26.1821 127.818C19.5086 121.144 14.215 113.222 10.6033 104.503C6.9917 95.7834 5.13281 86.4381 5.13281 77.0005C5.13281 67.5628 6.9917 58.2175 10.6033 49.4983C14.215 40.779 19.5086 32.8565 26.1821 26.183C32.8555 19.5096 40.778 14.216 49.4973 10.6043C58.2166 6.99268 67.5618 5.13379 76.9995 5.13379C96.0597 5.13379 114.339 12.7054 127.817 26.1831C141.295 39.6607 148.866 57.9402 148.866 77.0005C148.866 96.0607 141.295 114.34 127.817 127.818C114.339 141.295 96.0597 148.867 76.9995 148.867Z" stroke="#08B008" stroke-width="8"/>
+</svg>
diff --git a/public/trash-bin.svg b/public/trash-bin.svg
new file mode 100644
index 0000000..414a30b
--- /dev/null
+++ b/public/trash-bin.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2507 2.5H8.7507C8.58494 2.5 8.42597 2.56585 8.30876 2.68306C8.19155 2.80027 8.1257 2.95924 8.1257 3.125V3.75H11.8757V3.125C11.8757 2.95924 11.8099 2.80027 11.6926 2.68306C11.5754 2.56585 11.4165 2.5 11.2507 2.5ZM13.7507 3.75V3.125C13.7507 2.46196 13.4873 1.82607 13.0185 1.35723C12.5496 0.888392 11.9137 0.625 11.2507 0.625H8.7507C8.08766 0.625 7.45178 0.888392 6.98294 1.35723C6.5141 1.82607 6.2507 2.46196 6.2507 3.125V3.75H2.81445C2.56581 3.75 2.32736 3.84877 2.15154 4.02459C1.97573 4.2004 1.87695 4.43886 1.87695 4.6875C1.87695 4.93614 1.97573 5.1746 2.15154 5.35041C2.32736 5.52623 2.56581 5.625 2.81445 5.625H3.20445L3.6007 15.1562C3.64102 16.1231 4.0535 17.0368 4.7519 17.7066C5.4503 18.3763 6.38056 18.7502 7.3482 18.75H12.6545C13.6219 18.7499 14.5518 18.3759 15.25 17.7062C15.9481 17.0364 16.3604 16.1228 16.4007 15.1562L16.7982 5.625H17.1882C17.4368 5.625 17.6753 5.52623 17.8511 5.35041C18.0269 5.1746 18.1257 4.93614 18.1257 4.6875C18.1257 4.43886 18.0269 4.2004 17.8511 4.02459C17.6753 3.84877 17.4368 3.75 17.1882 3.75H13.7507ZM14.9207 5.625H5.0807L5.47445 15.0775C5.49446 15.561 5.70062 16.0181 6.04984 16.3531C6.39906 16.6881 6.86428 16.8751 7.3482 16.875H12.6545C13.1382 16.8748 13.6031 16.6876 13.952 16.3526C14.301 16.0177 14.507 15.5608 14.527 15.0775L14.9207 5.625ZM7.1882 8.125V14.375C7.1882 14.6236 7.28697 14.8621 7.46279 15.0379C7.63861 15.2137 7.87706 15.3125 8.1257 15.3125C8.37434 15.3125 8.6128 15.2137 8.78862 15.0379C8.96443 14.8621 9.0632 14.6236 9.0632 14.375V8.125C9.0632 7.87636 8.96443 7.6379 8.78862 7.46209C8.6128 7.28627 8.37434 7.1875 8.1257 7.1875C7.87706 7.1875 7.63861 7.28627 7.46279 7.46209C7.28697 7.6379 7.1882 7.87636 7.1882 8.125ZM11.8757 7.1875C12.1243 7.1875 12.3628 7.28627 12.5386 7.46209C12.7144 7.6379 12.8132 7.87636 12.8132 8.125V14.375C12.8132 14.6236 12.7144 14.8621 12.5386 15.0379C12.3628 15.2137 12.1243 15.3125 11.8757 15.3125C11.6271 15.3125 11.3886 15.2137 11.2128 15.0379C11.037 14.8621 10.9382 14.6236 10.9382 14.375V8.125C10.9382 7.87636 11.037 7.6379 11.2128 7.46209C11.3886 7.28627 11.6271 7.1875 11.8757 7.1875Z" fill="white"/>
+</svg>
diff --git a/public/upload-symbol.svg b/public/upload-symbol.svg
new file mode 100644
index 0000000..5fd0d18
--- /dev/null
+++ b/public/upload-symbol.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 16V7.85L8.4 10.45L7 9L12 4L17 9L15.6 10.45L13 7.85V16H11ZM6 20C5.45 20 4.97933 19.8043 4.588 19.413C4.19667 19.0217 4.00067 18.5507 4 18V15H6V18H18V15H20V18C20 18.55 19.8043 19.021 19.413 19.413C19.0217 19.805 18.5507 20.0007 18 20H6Z" fill="white"/>
+</svg>
diff --git a/public/verified.svg b/public/verified.svg
new file mode 100644
index 0000000..b0564ec
--- /dev/null
+++ b/public/verified.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.16683 18.75L5.5835 16.0833L2.5835 15.4167L2.87516 12.3333L0.833496 10L2.87516 7.66667L2.5835 4.58333L5.5835 3.91667L7.16683 1.25L10.0002 2.45833L12.8335 1.25L14.4168 3.91667L17.4168 4.58333L17.1252 7.66667L19.1668 10L17.1252 12.3333L17.4168 15.4167L14.4168 16.0833L12.8335 18.75L10.0002 17.5417L7.16683 18.75ZM9.12516 12.9583L13.8335 8.25L12.6668 7.04167L9.12516 10.5833L7.3335 8.83333L6.16683 10L9.12516 12.9583Z" fill="white"/>
+</svg>
diff --git a/src/app/user-dashboard/component/UserDashboardSidebar.tsx b/src/app/user-dashboard/component/UserDashboardSidebar.tsx
index d27ea3d..417df6a 100644
--- a/src/app/user-dashboard/component/UserDashboardSidebar.tsx
+++ b/src/app/user-dashboard/component/UserDashboardSidebar.tsx
@@ -43,11 +43,15 @@ export function Sidebar() {
     useContext(DashBoardContext);
 
   return (
-    <aside className='border h-full overflow-y-auto border-r bg-gradient-dark border-[#413F54] rounded-[12px] w-full'>
-      <div className='p-4 w-full '>
-        <div className='py-3'>
-          <Link href='/'>
-            <Image src={Logo} className='w-[300px] h-[40px]' alt='Logo' />
+    <aside className=" h-screen sticky top-0 bg-gradient-to-b from-[#29262F] via-[#1C1923] to-[#16131D] rounded-[12px]">
+      <div className="p-4 w-[272px] ">
+        <div className="py-3">
+          <Link href="/">
+            <Image
+              src={Logo}
+              className="w-[300px] h-[40px]"
+              alt="Logo"
+            />
           </Link>
         </div>
         <div
diff --git a/src/app/user-dashboard/profile/Complete.tsx b/src/app/user-dashboard/profile/Complete.tsx
new file mode 100644
index 0000000..9faa994
--- /dev/null
+++ b/src/app/user-dashboard/profile/Complete.tsx
@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import Image from 'next/image';
+
+interface DocumentUploadProps {
+    onFileUpload: (files: File[], type: 'frontId' | 'backId' | 'proofOfAddress') => void;
+}
+
+const CompleteDocumentUpload: React.FC<DocumentUploadProps> = ({ onFileUpload }) => {
+    const [frontId, setFrontId] = useState<File | null>(null);
+    const [backId, setBackId] = useState<File | null>(null);
+    const [proofOfAddress, setProofOfAddress] = useState<File | null>(null);
+
+    const handleFileRemove = (type: 'frontId' | 'backId' | 'proofOfAddress') => {
+        switch (type) {
+            case 'frontId':
+                setFrontId(null);
+                break;
+            case 'backId':
+                setBackId(null);
+                break;
+            case 'proofOfAddress':
+                setProofOfAddress(null);
+                break;
+        }
+    };
+
+    const renderFileUploadSection = (
+        title: string,
+        type: 'frontId' | 'backId' | 'proofOfAddress',
+        currentFile: File | null
+    ) => {
+        return (
+            <div className=" rounded-lg p-4 flex items-center justify-between mb-4 max-w-3xl">
+                <div className="flex items-center space-x-4">
+                    <Image
+                        src="/document-outline.svg"
+                        alt="document outline"
+                        width={25}
+                        height={25}
+                        className="z-10"
+                    />
+                    <span className="text-white">
+                        {currentFile ? currentFile.name : title}
+                    </span>
+                </div>
+                <div className="flex items-center space-x-2">
+                    <button
+                        onClick={() => handleFileRemove(type)}
+                    >
+                        <Image
+                            src="/trash-bin.svg"
+                            alt="trash bin"
+                            width={20}
+                            height={20}
+                            className="z-10"
+                        />
+                    </button>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="mx-auto p-6  my-6 justify-center rounded-xl max-w-3xl">
+            <div className='bg-[#16151C] p-8 my-5'>
+                <div className='bg-[#201F2A] border border-gray-600 rounded-lg mb-4 min-h-auto p-6'>
+                    <div className='bg-[#363446] rounded-xl'>
+                        {renderFileUploadSection('Front of ID', 'frontId', frontId)}
+                    </div>
+                    <div className='bg-[#363446] rounded-xl'>
+                        {renderFileUploadSection('Back of ID', 'backId', backId)}
+                    </div>
+
+                </div>
+            </div>
+
+            <div className=" bg-[#16151C] border border-gray-600 rounded-lg mb-4 min-h-auto p-6">
+                <h3 className="text-white  text-center text-lg mb-2">Upload Proof Of Address</h3>
+                <p className="text-gray-400 text-sm mb-4 text-center">
+                    Government-issued document, Utility Bill or Bank Statement containing your name and residential address
+                </p>
+
+                <div className='bg-[#363446] rounded-xl'>
+                    {renderFileUploadSection('Proof of Address', 'proofOfAddress', proofOfAddress)}
+                </div>
+            </div>
+
+        </div>
+    );
+};
+
+export default CompleteDocumentUpload;
\ No newline at end of file
diff --git a/src/app/user-dashboard/profile/PersonalDetails.tsx b/src/app/user-dashboard/profile/PersonalDetails.tsx
new file mode 100644
index 0000000..cb5fb59
--- /dev/null
+++ b/src/app/user-dashboard/profile/PersonalDetails.tsx
@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { ChevronDown, Calendar } from 'lucide-react';
+
+
+const PersonalDetails: React.FC = () => {
+    const [activeStep, setActiveStep] = useState('personalDetails');
+    const [formData, setFormData] = useState({
+        fullName: '',
+        emailAddress: '',
+        dateOfBirth: '',
+        nationality: 'Nigeria',
+        residentialAddress: ''
+    });
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({ ...prev, [name]: value }));
+    };
+
+    return (
+            <div className="max-w-lg w-full p-8 text-white">
+                {activeStep === 'personalDetails' && (
+                    <form className="space-y-4">
+                        <div>
+                            <label className="block text-sm mb-1">Full Name</label>
+                            <input
+                                type="text"
+                                name="fullName"
+                                value={formData.fullName}
+                                onChange={handleChange}
+                                placeholder="Your Full Name As Appears On Document"
+                                className="w-full bg-[#1D1B29] border border-gray-700 rounded-md py-2 px-3 text-white placeholder-gray-500"
+                            />
+                        </div>
+
+                        <div>
+                            <label className="block text-sm mb-1">Email Address</label>
+                            <input
+                                type="email"
+                                name="emailAddress"
+                                value={formData.emailAddress}
+                                onChange={handleChange}
+                                placeholder="Your Email Address"
+                                className="w-full bg-[#1D1B29] border border-gray-700 rounded-md py-2 px-3 text-white placeholder-gray-500"
+                            />
+                        </div>
+
+                        <div>
+                            <label className="block text-sm mb-1">Date of Birth</label>
+                            <div className="relative">
+                                <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500" size={16} />
+                                <input
+                                    type="text"
+                                    name="dateOfBirth"
+                                    value={formData.dateOfBirth}
+                                    onChange={handleChange}
+                                    placeholder="01-11-2025"
+                                    className="w-full bg-[#1D1B29] border border-gray-700 rounded-md py-2 px-8 text-white placeholder-gray-500"
+                                />
+                            </div>
+                        </div>
+
+                        <div>
+                            <label className="block text-sm mb-1">Nationality</label>
+                            <div className="relative">
+                                <select
+                                    name="nationality"
+                                    value={formData.nationality}
+                                    onChange={handleChange}
+                                    className="w-full bg-[#1D1B29] border border-gray-700 rounded-md py-2 px-3 text-white appearance-none"
+                                >
+                                    <option value="Nigeria">Nigeria</option>
+                                    <option value="Ghana">Ghana</option>
+                                    <option value="Kenya">Kenya</option>
+                                    <option value="SouthAfrica">South Africa</option>
+                                </select>
+                                <ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500" size={16} />
+                            </div>
+                        </div>
+
+                        <div>
+                            <label className="block text-sm mb-1">Residential Address</label>
+                            <input
+                                type="text"
+                                name="residentialAddress"
+                                value={formData.residentialAddress}
+                                onChange={handleChange}
+                                placeholder="Home Address"
+                                className="w-full bg-[#1D1B29] border border-gray-700 rounded-md py-2 px-3 text-white placeholder-gray-500"
+                            />
+                        </div>
+                    </form>
+                )}
+            </div>
+    );
+};
+
+export default PersonalDetails;
\ No newline at end of file
diff --git a/src/app/user-dashboard/profile/driversLicense.tsx b/src/app/user-dashboard/profile/driversLicense.tsx
new file mode 100644
index 0000000..480d87e
--- /dev/null
+++ b/src/app/user-dashboard/profile/driversLicense.tsx
@@ -0,0 +1,150 @@
+import { useState } from 'react';
+import Image from 'next/image';
+import CompleteDocumentUpload from './Complete';
+import IncompleteDocumentUpload from './incompleteUpload';
+
+type DocumentType = 'National ID' | 'Driver\'s License' | 'Passport';
+type DocumentSide = 'front' | 'back';
+
+const DriversLicense: React.FC = () => {
+    const [uploadedFiles, setUploadedFiles] = useState<{
+        frontId?: File;
+        backId?: File;
+        proofOfAddress?: File;
+    }>({});
+    
+    const handleFileUpload = (files: File[], type: 'frontId' | 'backId' | 'proofOfAddress') => {
+        setUploadedFiles(prev => ({
+            ...prev,
+            [type]: files[0]
+        }));
+    };
+    
+    const handleSubmit = () => {
+        if (uploadedFiles.frontId && uploadedFiles.backId && uploadedFiles.proofOfAddress) {
+            const formData = new FormData();
+            formData.append('frontId', uploadedFiles.frontId);
+            formData.append('backId', uploadedFiles.backId);
+            formData.append('proofOfAddress', uploadedFiles.proofOfAddress);
+            
+            console.log('Submitting documents:', formData);
+        } else {
+            alert('Please upload all required documents');
+        }
+    };
+
+    // Count the number of uploaded files
+    const uploadedFileCount = Object.values(uploadedFiles).filter(file => file !== undefined).length;
+
+    return (
+        <main>
+            <div className="bg-[#16151C] rounded-lg mb-4">
+                <div className="flex border border-gray-400 p-4 justify-evenly items-center rounded-lg bg-[#201F2A] mb-3 h-[200px]">
+                    <div>
+                        <p className="text-xs text-center mb-2">Front of ID</p>
+                        <div className="border border-gray-400 border-dotted p-4 flex flex-col items-center justify-center rounded-lg bg-[#201F2A] mb-2">
+                    <div className="flex justify-center mb-2">
+                        <Image
+                            src="/upload-symbol.svg"
+                            alt="upload symbol"
+                            width={20}
+                            height={20}
+                            className="z-10"
+                        />
+                    </div>
+                    <label className="cursor-pointer flex flex-col items-center">
+                        <p className="text-xs text-gray-400 mb-2">Drag and Drop Document or <span className="text-xs text-white">Browse</span>
+                            <input
+                                type="file"
+                                className="hidden"
+                                accept="image/*,.pdf"
+                                onChange={(e) => {
+                                    const files = e.target.files ? Array.from(e.target.files) : [];
+                                    handleFileUpload(files, 'proofOfAddress');
+                                }}
+                            />
+                        </p>
+                        <p className="text-xs text-gray-500 mt-1">Supports JPG, PNG, PDF</p>
+                    </label>
+                </div>
+                    </div>
+                    <div>
+                        <p className="text-xs text-center mb-2">Back of ID</p>
+                        <div className="border border-gray-400 border-dotted p-4 flex flex-col items-center justify-center rounded-lg bg-[#201F2A] mb-2">
+                    <div className="flex justify-center mb-2">
+                        <Image
+                            src="/upload-symbol.svg"
+                            alt="upload symbol"
+                            width={20}
+                            height={20}
+                            className="z-10"
+                        />
+                    </div>
+                    <label className="cursor-pointer flex flex-col items-center">
+                        <p className="text-xs text-gray-400 mb-2">Drag and Drop Document or <span className="text-xs text-white">Browse</span>
+                            <input
+                                type="file"
+                                className="hidden"
+                                accept="image/*,.pdf"
+                                onChange={(e) => {
+                                    const files = e.target.files ? Array.from(e.target.files) : [];
+                                    handleFileUpload(files, 'proofOfAddress');
+                                }}
+                            />
+                        </p>
+                        <p className="text-xs text-gray-500 mt-1">Supports JPG, PNG, PDF</p>
+                    </label>
+                </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="bg-[#201F2A] border border-gray-400 rounded-lg p-4 mb-6">
+                <h2 className="text-center mb-2">Upload Proof Of Address</h2>
+                <p className="text-xs text-gray-400 text-center mb-6">
+                    Government issued document or Utility Statement containing your name and residential address
+                </p>
+
+                <div className="border border-gray-400 border-dotted p-4 flex flex-col items-center justify-center rounded-lg bg-[#201F2A] mb-2">
+                    <div className="flex justify-center mb-2">
+                        <Image
+                            src="/upload-symbol.svg"
+                            alt="upload symbol"
+                            width={20}
+                            height={20}
+                            className="z-10"
+                        />
+                    </div>
+                    <label className="cursor-pointer flex flex-col items-center">
+                        <p className="text-xs text-gray-400 mb-2">Drag and Drop Document or <span className="text-xs text-white">Browse</span>
+                            <input
+                                type="file"
+                                className="hidden"
+                                accept="image/*,.pdf"
+                                onChange={(e) => {
+                                    const files = e.target.files ? Array.from(e.target.files) : [];
+                                    handleFileUpload(files, 'proofOfAddress');
+                                }}
+                            />
+                        </p>
+                        <p className="text-xs text-gray-500 mt-1">Supports JPG, PNG, PDF</p>
+                    </label>
+                </div>
+            </div>
+
+            {uploadedFileCount === 2 && (
+                <div className="min-h-screen py-4">
+                    <IncompleteDocumentUpload onFileUpload={handleFileUpload} />
+                </div>
+            )}
+            
+            {uploadedFileCount === 3 && (
+                <div className="min-h-screen py-4">
+                    <CompleteDocumentUpload onFileUpload={handleFileUpload} />
+                </div>
+            )}
+        </main>
+    );
+};
+
+export default DriversLicense;
\ No newline at end of file
diff --git a/src/app/user-dashboard/profile/incompleteUpload.tsx b/src/app/user-dashboard/profile/incompleteUpload.tsx
new file mode 100644
index 0000000..2684b62
--- /dev/null
+++ b/src/app/user-dashboard/profile/incompleteUpload.tsx
@@ -0,0 +1,118 @@
+import React, { useState, useRef, ChangeEvent } from 'react';
+import Image from 'next/image';
+
+type DocumentType = 'frontId' | 'backId' | 'proofOfAddress';
+
+interface DocumentUploadProps {
+    onFileUpload: (files: File[], type: DocumentType) => void;
+}
+
+const IncompleteDocumentUpload: React.FC<DocumentUploadProps> = ({ onFileUpload }) => {
+    const [uploadedFiles, setUploadedFiles] = useState<Record<DocumentType, File | null>>({
+        frontId: null,
+        backId: null,
+        proofOfAddress: null
+    });
+
+    const inputRefs = {
+        frontId: useRef<HTMLInputElement>(null),
+        backId: useRef<HTMLInputElement>(null),
+        proofOfAddress: useRef<HTMLInputElement>(null)
+    };
+
+    const handleFileRemove = (type: DocumentType) => {
+        const newUploadedFiles = { ...uploadedFiles, [type]: null };
+        setUploadedFiles(newUploadedFiles);
+
+        const inputRef = inputRefs[type];
+        if (inputRef.current) {
+            inputRef.current.value = '';
+        }
+    };
+
+    const renderFileUploadSection = (
+        type: DocumentType,
+        title: string
+    ) => {
+        const currentFile = uploadedFiles[type];
+        const inputRef = inputRefs[type];
+
+        return (
+            <div className="mb-4 bg-[#16151C] p-8 my-5">
+                <div className='bg-[#201F2A] border border-gray-600 rounded-lg mb-4 min-h-auto p-6'>
+                    <div className="bg-[#363446] rounded-xl p-4 flex items-center justify-between mb-4">
+                        <div className="flex items-center space-x-4">
+                            <Image
+                                src="/document-outline.svg"
+                                alt="document outline"
+                                width={25}
+                                height={25}
+                                className="z-10"
+                            />
+                            <span className="text-white">
+                                {currentFile ? currentFile.name : title}
+                            </span>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                            <button
+                                onClick={() => handleFileRemove(type)}
+                            >
+                                <Image
+                                    src="/trash-bin.svg"
+                                    alt="trash bin"
+                                    width={20}
+                                    height={20}
+                                    className="z-10"
+                                />
+                            </button>
+                        </div>
+                    </div>
+
+                    <p className="text-white text-sm mb-2 text-center">Back of ID</p>
+                    <div className="border border-dashed border-gray-600 rounded-lg p-8 flex flex-col items-center justify-center">
+                    <Image
+                        src="/upload-symbol.svg"
+                        alt="upload symbol"
+                        width={20}
+                        height={20}
+                        className="z-10"
+                    />
+                    <p className="text-sm text-gray-400">Drag and Drop Document or <span className="text-white">Browse</span></p>
+                    <p className="text-xs text-gray-500 mt-1">Supports JPG, PNG, PDF</p>
+                </div>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="min-h-screen p-6 mx-auto my-6 justify-center rounded-xl max-w-2xl">
+            <div className="space-y-4">
+                <div>
+                    {renderFileUploadSection('frontId', 'Front of ID')}
+                </div>
+
+                <div className="flex flex-col items-center justify-center bg-[#16151C] border border-gray-600 rounded-lg mb-4 min-h-auto p-6">
+                    <h2 className="text-white text-xl font-semibold mb-2">Upload Proof Of Address</h2>
+                    <p className="text-gray-400 text-xs mb-6">
+                        Government-issued document or Bank Statement containing your name and residential address
+                    </p>
+                    <p className="text-white text-sm mb-2">Upload Document</p>
+                   <div className='border border-dashed border-gray-600 rounded-lg p-8 flex flex-col items-center justify-center'>
+                    <Image
+                        src="/upload-symbol.svg"
+                        alt="upload symbol"
+                        width={20}
+                        height={20}
+                        className="z-10"
+                    />
+                    <p className="text-sm text-gray-400">Drag and Drop Document or <span className="text-white">Browse</span></p>
+                    <p className="text-xs text-gray-500 mt-1">Supports JPG, PNG, PDF</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default IncompleteDocumentUpload;
\ No newline at end of file
diff --git a/src/app/user-dashboard/profile/kyc.tsx b/src/app/user-dashboard/profile/kyc.tsx
new file mode 100644
index 0000000..7dcbd69
--- /dev/null
+++ b/src/app/user-dashboard/profile/kyc.tsx
@@ -0,0 +1,120 @@
+'use client';
+import React, { useState } from 'react';
+import PersonalDetails from './PersonalDetails';
+import SelfieVerification from './selfieVerification';
+import UploadDocuments from './uploadDocument';
+import VerificationProgress from './verificationProgress';
+
+
+const tabs = [
+  { id: 'personal-details', label: 'Personal Details' },
+  { id: 'upload-documents', label: 'Upload Documents' },
+  { id: 'selfie-verification', label: 'Selfie Verification' },
+] as const;
+
+type KYCStep = (typeof tabs)[number]['id'];
+
+const KYCVerification: React.FC = () => {
+  const [currentStep, setCurrentStep] = useState<KYCStep>('personal-details');
+
+  const goToNextStep = () => {
+    if (currentStep === 'personal-details') {
+      setCurrentStep('upload-documents');
+    } else if (currentStep === 'upload-documents') {
+      setCurrentStep('selfie-verification');
+    }
+  };
+
+  const goToPreviousStep = () => {
+    if (currentStep === 'upload-documents') {
+      setCurrentStep('personal-details');
+    } else if (currentStep === 'selfie-verification') {
+      setCurrentStep('upload-documents');
+    }
+  };
+
+const[showVerification, setShowVerification] = useState(false);
+  const handleComplete = () => {
+   setShowVerification(true);
+  };
+
+  const renderStepContent = () => {
+    switch (currentStep) {
+      case 'personal-details':
+        return <PersonalDetails />;
+      case 'upload-documents':
+        return <UploadDocuments />;
+      case 'selfie-verification':
+        return <SelfieVerification />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <main>
+      {showVerification ? (
+        <VerificationProgress />
+      ) : (
+        <>
+        <div className="p-3 w-full flex">
+        <div className="text-white text-sm mt-1">Profile</div>
+        <div className="mx-2">|</div>
+        <div className="font-medium">KYC Verification</div>
+      </div>
+  <div className='flex m-4 justify-center items-center w-full'>
+    <div className="min-h-screen text-white">          
+      <div className="max-w-full mx-auto bg-gradient-to-b from-[#29262F] via-[#1C1923] to-[#16131D] rounded-lg p-6">
+        <h1 className="text-xl font-medium text-center mb-6">KYC Verification</h1>
+        
+        <div className="flex justify-center mb-8">
+          {tabs.map((tab) => (
+            <button 
+              key={tab.id}
+              className={`pb-2 px-4 text-sm ${currentStep === tab.id ? 'border-b-2 border-white' : 'border-b-2 border-gray-200'}`}
+              onClick={() => setCurrentStep(tab.id)}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+        
+        <div className="mb-8">
+          {renderStepContent()}
+        </div>
+        
+        <div className="flex justify-end space-x-4">
+          <button 
+            className="bg-[#211A1D] border border-gray-600 text-[#D5D4D4] px-6 py-2 rounded-full"
+            onClick={goToPreviousStep}
+            disabled={currentStep === 'personal-details'}
+          >
+            Back
+          </button>
+          {currentStep === 'selfie-verification' ? (
+            <button 
+              className="bg-white text-black px-6 py-2 rounded-full"
+              onClick={handleComplete}
+            >
+              Complete
+            </button>
+          ) : (
+            <button 
+              className="bg-white text-black px-6 py-2 rounded-full"
+              onClick={goToNextStep}
+            >
+              Next
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  </div>
+  </>
+      )}
+     
+    </main>
+  );
+};
+
+export default KYCVerification;
\ No newline at end of file
diff --git a/src/app/user-dashboard/profile/nationalID.tsx b/src/app/user-dashboard/profile/nationalID.tsx
new file mode 100644
index 0000000..b1c4a5b
--- /dev/null
+++ b/src/app/user-dashboard/profile/nationalID.tsx
@@ -0,0 +1,165 @@
+import React, { useState, useRef, RefObject } from 'react';
+import { NextPage } from 'next';
+import Image from 'next/image';
+
+const NationalId: NextPage = () => {
+    const [idFile, setIdFile] = useState<File | null>(null);
+    const [addressFile, setAddressFile] = useState<File | null>(null);
+    const [idFileError, setIdFileError] = useState<string | null>(null);
+    const [addressFileError, setAddressFileError] = useState<string | null>(null);
+
+    const idInputRef = useRef<HTMLInputElement>(null);
+    const addressInputRef = useRef<HTMLInputElement>(null);
+
+    const validateFile = (file: File): boolean => {
+        const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
+        const maxSize = 5 * 1024 * 1024;
+
+        if (!allowedTypes.includes(file.type)) {
+            return false;
+        }
+
+        if (file.size > maxSize) {
+            return false;
+        }
+
+        return true;
+    };
+
+    const handleFileUpload = (
+        e: React.ChangeEvent<HTMLInputElement>,
+        setFile: React.Dispatch<React.SetStateAction<File | null>>,
+        setFileError: React.Dispatch<React.SetStateAction<string | null>>
+    ) => {
+        setFileError(null);
+
+        if (e.target.files && e.target.files[0]) {
+            const file = e.target.files[0];
+
+            if (!validateFile(file)) {
+                setFileError('Invalid file. Please upload a JPG, PNG, or PDF under 5MB.');
+                if (e.target) {
+                    e.target.value = '';
+                }
+                return;
+            }
+
+            setFile(file);
+        }
+    };
+
+    const handleIdFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+        handleFileUpload(e, setIdFile, setIdFileError);
+    };
+
+    const handleAddressFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+        handleFileUpload(e, setAddressFile, setAddressFileError);
+    };
+
+   const triggerFileInputStrict = (inputRef: RefObject<HTMLInputElement | null>) => {
+    inputRef.current?.click();
+  };
+  
+    function triggerFileInput(idInputRef: React.RefObject<HTMLInputElement | null>): void {
+        throw new Error('Function not implemented.');
+    }
+
+    return (
+        <div className=" text-white flex items-center justify-center p-4">
+            <div className="w-full max-w-md space-y-8">
+                <div className="rounded-lg p-6 bg-[#201F2A] border border-gray-400 w-[400px] h-[200px]">
+                    <div>
+                        <p className="text-sm text-center mb-2">Front Page</p>
+                        <div
+                            className="border border-dashed border-gray-600 rounded-lg p-8"
+                            onClick={() => triggerFileInput(idInputRef)}
+                        >
+                            <div className="flex flex-col items-center justify-center">
+                                <Image
+                                    src="/upload-symbol.svg"
+                                    alt="upload symbol"
+                                    width={20}
+                                    height={20}
+                                    className="z-10"
+                                />
+                                <p className="text-sm text-gray-400">
+                                    Drag and Drop Document or <span className="text-white cursor-pointer">Browse</span>
+                                </p>
+                                <p className="text-xs text-gray-500 mt-1">Supports JPG, PNG, PDF (Max 5MB)</p>
+
+                                {idFile && (
+                                    <p className="text-sm text-gray-400 mt-2">
+                                        {idFile.name}
+                                    </p>
+                                )}
+
+                                {idFileError && (
+                                    <p className="text-sm text-gray-400 mt-2">
+                                        {idFileError}
+                                    </p>
+                                )}
+                            </div>
+
+                            <input
+                                type="file"
+                                ref={idInputRef}
+                                className="hidden"
+                                id="id-upload"
+                                accept=".jpg,.jpeg,.png,.pdf"
+                                onChange={handleIdFileUpload}
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div className="rounded-lg p-6 w-2xl bg-[#201F2A] border border-gray-400 w-[400px] h-[300px]">
+                    <h2 className="text-lg text-center mb-4">Upload Proof Of Address</h2>
+                    <p className="text-xs text-gray-400 text-center mb-6">
+                        Government-issued document or a recent financial statement with your name on residential address
+                    </p>
+
+                    <div
+                        className="border border-dashed border-gray-600 rounded-lg p-8 relative"
+                        onClick={() => triggerFileInput(addressInputRef)}
+                    >
+                        <div className="flex flex-col items-center justify-center">
+                            <Image
+                                src="/upload-symbol.svg"
+                                alt="upload symbol"
+                                width={20}
+                                height={20}
+                                className="z-10"
+                            />
+                            <p className="text-sm text-gray-400">
+                                Drag and Drop Document or <span className="text-white cursor-pointer">Browse</span>
+                            </p>
+                            <p className="text-xs text-gray-500 mt-1">Supports JPG, PNG, PDF (Max 5MB)</p>
+
+                            {addressFile && (
+                                <p className="text-sm text-gray-400 mt-2">
+                                    {addressFile.name}
+                                </p>
+                            )}
+
+                            {addressFileError && (
+                                <p className="text-sm text-gray-400 mt-2">
+                                    {addressFileError}
+                                </p>
+                            )}
+                        </div>
+
+                        <input
+                            type="file"
+                            ref={addressInputRef}
+                            className="hidden"
+                            id="address-upload"
+                            accept=".jpg,.jpeg,.png,.pdf"
+                            onChange={handleAddressFileUpload}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );};
+
+export default NationalId;
\ No newline at end of file
diff --git a/src/app/user-dashboard/profile/passport.tsx b/src/app/user-dashboard/profile/passport.tsx
new file mode 100644
index 0000000..4e43f05
--- /dev/null
+++ b/src/app/user-dashboard/profile/passport.tsx
@@ -0,0 +1,163 @@
+import React, { useState, useRef } from 'react';
+import { NextPage } from 'next';
+import Image from 'next/image';
+
+const NationalId: NextPage = () => {
+    const [idFile, setIdFile] = useState<File | null>(null);
+    const [addressFile, setAddressFile] = useState<File | null>(null);
+    const [idFileError, setIdFileError] = useState<string | null>(null);
+    const [addressFileError, setAddressFileError] = useState<string | null>(null);
+
+    const idInputRef = useRef<HTMLInputElement>(null);
+    const addressInputRef = useRef<HTMLInputElement>(null);
+
+    const validateFile = (file: File): boolean => {
+        const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
+        const maxSize = 5 * 1024 * 1024; 
+
+        if (!allowedTypes.includes(file.type)) {
+            return false;
+        }
+
+        if (file.size > maxSize) {
+            return false;
+        }
+
+        return true;
+    };
+
+    const handleFileUpload = (
+        e: React.ChangeEvent<HTMLInputElement>,
+        setFile: React.Dispatch<React.SetStateAction<File | null>>,
+        setFileError: React.Dispatch<React.SetStateAction<string | null>>
+    ) => {
+        setFileError(null);
+
+        if (e.target.files && e.target.files[0]) {
+            const file = e.target.files[0];
+
+            if (!validateFile(file)) {
+                setFileError('Invalid file. Please upload a JPG, PNG, or PDF under 5MB.');
+                if (e.target) {
+                    e.target.value = '';
+                }
+                return;
+            }
+
+            setFile(file);
+        }
+    };
+
+    const handleIdFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+        handleFileUpload(e, setIdFile, setIdFileError);
+    };
+
+    const handleAddressFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+        handleFileUpload(e, setAddressFile, setAddressFileError);
+    };
+
+    const triggerFileInput = (inputRef: React.RefObject<HTMLInputElement>) => {
+        inputRef.current?.click();
+    }; 
+
+    return (
+        <div className=" text-white flex items-center justify-center p-4">
+            <div className="w-full max-w-md space-y-8">
+                <div className="rounded-lg p-6 bg-[#201F2A] border border-gray-400 w-[400px] h-[200px]">
+                    <div>
+                        <p className="text-sm text-center mb-2">Front Page</p>
+                        <div
+                            className="border border-dashed border-gray-600 rounded-lg p-8"
+                            onClick={() => idInputRef.current && triggerFileInput(idInputRef as React.RefObject<HTMLInputElement>)}
+                        >
+                            <div className="flex flex-col items-center justify-center">
+                                <Image
+                                    src="/upload-symbol.svg"
+                                    alt="upload symbol"
+                                    width={20}
+                                    height={20}
+                                    className="z-10"
+                                />
+                                <p className="text-sm text-gray-400">
+                                    Drag and Drop Document or <span className="text-white cursor-pointer">Browse</span>
+                                </p>
+                                <p className="text-xs text-gray-500 mt-1">Supports JPG, PNG, PDF (Max 5MB)</p>
+
+                                {idFile && (
+                                    <p className="text-sm text-gray-400 mt-2">
+                                        {idFile.name}
+                                    </p>
+                                )}
+
+                                {idFileError && (
+                                    <p className="text-sm text-gray-400 mt-2">
+                                        {idFileError}
+                                    </p>
+                                )}
+                            </div>
+
+                            <input
+                                type="file"
+                                ref={idInputRef}
+                                className="hidden"
+                                id="id-upload"
+                                accept=".jpg,.jpeg,.png,.pdf"
+                                onChange={handleIdFileUpload}
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div className="rounded-lg p-6 w-2xl bg-[#201F2A] border border-gray-400 w-[400px] h-[300px]">
+                    <h2 className="text-lg text-center mb-4">Upload Proof Of Address</h2>
+                    <p className="text-xs text-gray-400 text-center mb-6">
+                        Government-issued document or a recent financial statement with your name on residential address
+                    </p>
+
+                    <div
+                        className="border border-dashed border-gray-600 rounded-lg p-8 relative"
+
+                        onClick={() => addressInputRef.current && triggerFileInput(addressInputRef as React.RefObject<HTMLInputElement>)}
+                    >
+                        <div className="flex flex-col items-center justify-center">
+                            <Image
+                                src="/upload-symbol.svg"
+                                alt="upload symbol"
+                                width={20}
+                                height={20}
+                                className="z-10"
+                            />
+                            <p className="text-sm text-gray-400">
+                                Drag and Drop Document or <span className="text-white cursor-pointer">Browse</span>
+                            </p>
+                            <p className="text-xs text-gray-500 mt-1">Supports JPG, PNG, PDF (Max 5MB)</p>
+
+                            {addressFile && (
+                                <p className="text-sm text-gray-400 mt-2">
+                                    {addressFile.name}
+                                </p>
+                            )}
+
+                            {addressFileError && (
+                                <p className="text-sm text-gray-400 mt-2">
+                                    {addressFileError}
+                                </p>
+                            )}
+                        </div>
+
+                        <input
+                            type="file"
+                            ref={addressInputRef}
+                            className="hidden"
+                            id="address-upload"
+                            accept=".jpg,.jpeg,.png,.pdf"
+                            onChange={handleAddressFileUpload}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    );};
+
+export default NationalId;
\ No newline at end of file
diff --git a/src/app/user-dashboard/profile/pending.tsx b/src/app/user-dashboard/profile/pending.tsx
new file mode 100644
index 0000000..d5eab1c
--- /dev/null
+++ b/src/app/user-dashboard/profile/pending.tsx
@@ -0,0 +1,60 @@
+'use client'
+import React, { useState } from 'react';
+import Image from 'next/image';
+
+interface PendingVerificationProps {
+    fullName: string;
+    emailAddress: string;
+    dateOfBirth: string;
+    address: string;
+    nationality: string;
+    identityDocumentType: string;
+}
+
+const PendingVerification: React.FC<PendingVerificationProps> = ({
+    fullName,
+    emailAddress,
+    dateOfBirth,
+    address,
+    nationality,
+    identityDocumentType
+}) => {
+    return (
+        <div className='max-w-4xl'>
+            <div className="bg-gradient-to-b from-[#29262F] via-[#1C1923] to-[#16131D]  rounded-lg p-6 w-full">
+                <div className="flex justify-between items-center mb-4">
+                    <h2 className="text-white text-xl font-semibold">Profile Details</h2>
+                    <div className="bg-[#16131D] flex border border-gray-600 text-[#D5D4D4] px-6 py-2 rounded-full text-sm">
+                        Pending Verification
+                        <span>
+                            <Image
+                                src="/hourglass.svg"
+                                alt="hour glass outline"
+                                width={15}
+                                height={15}
+                                className="z-10"
+                            /></span>
+                    </div>
+                </div>
+
+                <div className="space-y-4">
+                    {[
+                        { label: 'Full Name', value: fullName },
+                        { label: 'Email Address', value: emailAddress },
+                        { label: 'Date of Birth', value: dateOfBirth },
+                        { label: 'Address', value: address },
+                        { label: 'Nationality', value: nationality },
+                        { label: 'Identity Document Type', value: identityDocumentType }
+                    ].map(({ label, value }) => (
+                        <div key={label} className="border-b border-gray-400 pb-2 flex">
+                            <p className="text-sm text-white mb-1 flex-item-center  w-1/2">{label}</p>
+                            <p className="text-gray-400 flex-item-center text-center">{value}</p>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default PendingVerification;
diff --git a/src/app/user-dashboard/profile/profile.tsx b/src/app/user-dashboard/profile/profile.tsx
index 98ec30a..c96f4dc 100644
--- a/src/app/user-dashboard/profile/profile.tsx
+++ b/src/app/user-dashboard/profile/profile.tsx
@@ -1,9 +1,95 @@
+'use client';
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import KYCVerification from './kyc';
+import PendingVerification from './pending';
+import VerifiedDetails from './verified';
 
 
-function Profile(){
-    return(
-        <h1>Profile</h1>
-    )
+enum VerificationStatus {
+  NotStarted = 'NOT_STARTED',
+  Pending = 'PENDING',
+  Verified = 'VERIFIED'
 }
 
+interface ProfileField {
+  label: string;
+  value: string;
+}
+
+const Profile: React.FC = () => {
+  const router = useRouter();
+  const [showKyc, setShowKyc] = useState(false);
+  
+  const [verificationStatus, setVerificationStatus] = useState<VerificationStatus>(
+    VerificationStatus.NotStarted
+  );
+
+  const profileData = {
+    fullName: 'DANIEL OCHOJA',
+    emailAddress: 'danielochoja@gmail.com',
+    dateOfBirth: '24-05-1998',
+    address: 'No.22, Hawk Street Highway, Ikeja, Lagos',
+    nationality: 'NIGERIAN',
+    identityDocumentType: "DRIVER'S LICENSE"
+  };
+
+  const profileFields: ProfileField[] = [
+    { label: 'Full Name', value: 'N/A' },
+    { label: 'Email Address', value: 'N/A' },
+    { label: 'Date of Birth', value: 'N/A' },
+    { label: 'Address', value: 'N/A' },
+    { label: 'Nationality', value: 'N/A' },
+    { label: 'Identity Document Type', value: 'N/A' },
+  ];
+
+  const handleStartKYC = () => {
+    setShowKyc(true);
+    setVerificationStatus(VerificationStatus.Pending);
+  };
+
+  const renderVerificationComponent = () => {
+    switch(verificationStatus) {
+      case VerificationStatus.NotStarted:
+        return (
+          <div className="max-w-4xl">
+            <div className="mb-8">
+              <h1 className="text-xl font-medium mb-1">No Information Yet</h1>
+              <p className="text-gray-400 text-sm mb-4">Start KYC to add profile information</p>
+              <button
+                onClick={handleStartKYC}
+                className="bg-[#1B0055] text-[#8D7FAA] border border-[#8D7FAA] rounded-full px-4 py-2 text-sm">
+                Start KYC
+              </button>
+            </div>
+
+            <div className="bg-gradient-to-b from-[#29262F] via-[#1C1923] to-[#16131D] rounded-lg p-6 w-full">
+              <h2 className="text-lg font-medium mb-6">Profile Details</h2>
+              <div className="space-y-4">
+                {profileFields.map((field) => (
+                  <div key={field.label} className="border-b border-gray-300 pb-2 flex">
+                    <p className="text-sm text-white mb-1 flex-item-center w-1/2">{field.label}</p>
+                    <p className="text-gray-300 flex-item-center text-center">{field.value}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        );
+      case VerificationStatus.Pending:
+        return showKyc ? <KYCVerification /> : <PendingVerification {...profileData} />;
+      case VerificationStatus.Verified:
+        return <VerifiedDetails {...profileData} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="min-h-screen text-white p-4">
+      {renderVerificationComponent()}
+    </div>
+  );
+};
+
 export default Profile;
\ No newline at end of file
diff --git a/src/app/user-dashboard/profile/selfieVerification.tsx b/src/app/user-dashboard/profile/selfieVerification.tsx
new file mode 100644
index 0000000..f795224
--- /dev/null
+++ b/src/app/user-dashboard/profile/selfieVerification.tsx
@@ -0,0 +1,118 @@
+import React, { useState, useRef, useEffect } from 'react';
+import Image from 'next/image';
+
+const SelfieVerification: React.FC = () => {
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isFaceProcessed, setIsFaceProcessed] = useState(false);
+  const [isTooLightBright, setIsTooLightBright] = useState(false);
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  const startVerification = async () => {
+    setIsProcessing(true);
+
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
+      }
+      setTimeout(() => {
+        setIsFaceProcessed(true);
+        setIsTooLightBright(true);
+      }, 2000);
+
+    } catch (error) {
+      console.error('Error accessing camera:', error);
+      setIsProcessing(false);
+    }
+  };
+
+  const handleBack = () => {
+    if (videoRef.current && videoRef.current.srcObject) {
+      const stream = videoRef.current.srcObject as MediaStream;
+      stream.getTracks().forEach(track => track.stop());
+    }
+  };
+
+  const handleComplete = () => {
+    if (videoRef.current && videoRef.current.srcObject) {
+      const stream = videoRef.current.srcObject as MediaStream;
+      stream.getTracks().forEach(track => track.stop());
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center rounded-lg min-h-fit text-white">
+      <div className="w-80 rounded-lg overflow-hidden shadow-lg bg-gray-900">
+        <div className="relative aspect-square flex items-center justify-center">
+          {isProcessing ? (
+            <video
+              ref={videoRef}
+              autoPlay
+              playsInline
+              muted
+              className="absolute w-full h-full object-cover"
+            />
+          ) : null}
+
+          <div className="flex items-center justify-center">
+            <Image
+              src="/selfieverification.svg"
+              alt="Selfie Verification Outline"
+              width={200}
+              height={200}
+              className="z-10"
+            />
+          </div>
+        </div>
+
+        <div className="p-4 flex justify-center space-x-6">
+          <div className="flex items-center">
+            <div>
+              <Image
+                src="/face-line.svg"
+                alt="Selfie Verification Outline"
+                width={20}
+                height={20}
+                className="w-4 h-4 sm:w-5 sm:h-5"
+              />
+            </div>
+            <span className="text-xs pl-1">Processed Face</span>
+          </div>
+
+          <div className="flex items-center">
+            <div>
+              <Image
+                src="/light-up.svg"
+                alt="Selfie light up"
+                width={20}
+                height={20}
+                className="w-4 h-4 sm:w-5 sm:h-5"
+              />
+            </div>
+            <span className="text-xs pl-1">Too Bright Lighting</span>
+          </div>
+        </div>
+
+        <div className="px-4 pb-6 pt-2">
+          <button
+            onClick={startVerification}
+            disabled={isProcessing}
+            className="w-full py-2 px-4 bg-[#211A1D] border border-gray-700 hover:bg-gray-600 rounded-full flex items-center justify-center transition duration-200"
+          >
+            <Image
+              src="/selfie_camera.svg"
+              alt="Selfie camera"
+              width={20}
+              height={20}
+              className="w-4 h-4 sm:w-5 sm:h-5 mr-2"
+            />
+            Start Verification
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SelfieVerification;
\ No newline at end of file
diff --git a/src/app/user-dashboard/profile/uploadDocument.tsx b/src/app/user-dashboard/profile/uploadDocument.tsx
new file mode 100644
index 0000000..c83661f
--- /dev/null
+++ b/src/app/user-dashboard/profile/uploadDocument.tsx
@@ -0,0 +1,67 @@
+'use client';
+import React, { useState } from 'react';
+import DriversLicense from './driversLicense';
+import PassportUpload from './passport';
+import NationalId from './nationalID';
+
+const tabs = [
+    { id: 'National-ID', label: 'National ID' },
+    { id: 'Driver\'s-License', label: 'Driver\'s License' },
+    { id: 'Passport', label: 'Passport' },
+] as const;
+
+type UploadSteps = (typeof tabs)[number]['id'];
+
+const UploadDocuments: React.FC = () => {
+    const [currentStep, setCurrentStep] = useState<UploadSteps>('National-ID');
+
+    const handleTabChange = (tabId: UploadSteps) => {
+        setCurrentStep(tabId);
+    };
+
+    const renderStepContent = () => {
+        switch (currentStep) {
+            case 'National-ID':
+                return <NationalId />;
+            case 'Driver\'s-License':
+                return <DriversLicense />;
+            case 'Passport':
+                return <PassportUpload />;
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <main>
+            <div className='bg-[#16151C] border border-gray-400 rounded-lg flex justify-center items-center w-full'>
+                <div className="min-h-screen text-white">
+                    <div className="w-full rounded-lg p-6">
+                        <h2 className="text-center text-xl font-semibold mb-4">Upload ID Proof</h2>
+                        <div className="flex justify-between mb-8">
+                            {tabs.map((tab) => (
+                                <button
+                                    key={tab.id}
+                                    type="button"
+                                    onClick={() => handleTabChange(tab.id)}
+                                    className={`py-2 px-4 text-sm ${
+                                        currentStep === tab.id 
+                                            ? 'bg-[#1B0055] text-white border rounded-full border-gray-400'
+                                            : 'text-gray-400 border rounded-full border-gray-400'
+                                    }`}
+                                >
+                                    {tab.label}
+                                </button>
+                            ))}
+                        </div>
+                        <div className="mb-8">
+                            {renderStepContent()}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    );
+};
+
+export default UploadDocuments;  
\ No newline at end of file
diff --git a/src/app/user-dashboard/profile/verificationProgress.tsx b/src/app/user-dashboard/profile/verificationProgress.tsx
new file mode 100644
index 0000000..535a735
--- /dev/null
+++ b/src/app/user-dashboard/profile/verificationProgress.tsx
@@ -0,0 +1,44 @@
+'use client';
+import React from 'react';
+import Image from 'next/image';
+
+const VerificationProgress: React.FC = () => {
+  return (
+    <main className='overflow-hidden'>
+      <div className="p-3 w-full flex">
+        <div className="text-white text-sm mt-1">Profile</div>
+        <div className="mx-2">|</div>
+        <div className="font-medium">KYC Verification</div>
+      </div>
+      <div className="flex items-center justify-center">
+        <div className="max-w-md w-full bg-gradient-to-b from-[#29262F] via-[#1C1923] to-[#16131D] rounded-lg p-8 text-center">
+          <div className="flex justify-center mb-6">
+            <div className="flex items-center justify-center">
+              <Image
+                src="/tick-circle.svg"
+                alt="green tick circle Outline"
+                width={90}
+                height={90}
+                className="z-10"
+              />
+            </div>
+          </div>
+
+          <h1 className="text-xl font-medium text-white mb-4">Verification in Progress</h1>
+
+          <p className="text-gray-300 text-sm mb-8">
+            Your submission has been received! We're reviewing them and will update you shortly. Check your email or dashboard for status updates.
+          </p>
+
+          <button
+            className="bg-white text-black px-6 py-2 rounded-full text-sm"
+          >
+            Back to Dashboard
+          </button>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default VerificationProgress;
\ No newline at end of file
diff --git a/src/app/user-dashboard/profile/verified.tsx b/src/app/user-dashboard/profile/verified.tsx
new file mode 100644
index 0000000..496a45b
--- /dev/null
+++ b/src/app/user-dashboard/profile/verified.tsx
@@ -0,0 +1,73 @@
+'use client'
+import React, { useState } from 'react';
+import Image from 'next/image';
+
+interface VerifiedProps {
+    fullName: string;
+    emailAddress: string;
+    dateOfBirth: string;
+    address: string;
+    nationality: string;
+    identityDocumentType: string;
+}
+
+const VerifiedDetails: React.FC<VerifiedProps> = ({
+    fullName,
+    emailAddress,
+    dateOfBirth,
+    address,
+    nationality,
+    identityDocumentType
+}) => {
+
+    const [showKyc, setShowKyc] = useState(false);
+
+    const handleStartKYC = () => {
+        setShowKyc(true);
+    }
+
+
+    return (
+        <div className='max-w-4xl'>
+            <div className="bg-gradient-to-b from-[#29262F] via-[#1C1923] to-[#16131D] mb-4 rounded-lg p-6 w-full">
+                <div className="flex justify-between items-center mb-4">
+                    <h2 className="text-white text-xl font-semibold">Profile Details</h2>
+                    <div className="bg-[#16131D] flex border border-gray-600 text-[#D5D4D4] px-6 py-2 rounded-full text-sm">
+                        Verified
+                        <span>
+                            <Image
+                                src="/verified.svg"
+                                alt="verified outline"
+                                width={15}
+                                height={15}
+                                className="z-10"
+                            /></span>
+                    </div>
+                </div>
+
+                <div className="space-y-4">
+                    {[
+                        { label: 'Full Name', value: fullName },
+                        { label: 'Email Address', value: emailAddress },
+                        { label: 'Date of Birth', value: dateOfBirth },
+                        { label: 'Address', value: address },
+                        { label: 'Nationality', value: nationality },
+                        { label: 'Identity Document Type', value: identityDocumentType }
+                    ].map(({ label, value }) => (
+                        <div key={label} className="border-b border-gray-400 pb-2 flex">
+                            <p className="text-sm text-white mb-1 flex-item-center  w-1/2">{label}</p>
+                            <p className="text-gray-400 flex-item-center text-center">{value}</p>
+                        </div>
+                    ))}
+                </div>
+            </div>
+            <button
+              onClick={handleStartKYC}
+              className="bg-[#1B0055] text-[#8D7FAA] border border-[#8D7FAA] rounded-full px-4 py-2 text-sm">
+              Edit Profile
+            </button>
+        </div>
+    );
+};
+
+export default VerifiedDetails;