From 18b71ca2f2fe6658c159e34635e99d0166b9d263 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 11 Sep 2025 13:27:55 +0530
Subject: [PATCH] (feat:upload) cards for upload types

---
 frontend/src/assets/crawler.svg        |   3 +
 frontend/src/assets/drive.svg          |   3 +
 frontend/src/assets/file_upload.svg    |  13 +-
 frontend/src/assets/github.svg         |   6 +-
 frontend/src/assets/reddit.svg         |   4 +
 frontend/src/assets/url.svg            |   3 +
 frontend/src/components/FilePicker.tsx |  25 ++--
 frontend/src/components/Input.tsx      |  12 +-
 frontend/src/components/types/index.ts |   1 +
 frontend/src/modals/WrapperModal.tsx   |   4 +-
 frontend/src/upload/Upload.tsx         | 168 +++++++++++++++----------
 11 files changed, 150 insertions(+), 92 deletions(-)
 create mode 100644 frontend/src/assets/crawler.svg
 create mode 100644 frontend/src/assets/drive.svg
 create mode 100644 frontend/src/assets/reddit.svg
 create mode 100644 frontend/src/assets/url.svg

diff --git a/frontend/src/assets/crawler.svg b/frontend/src/assets/crawler.svg
new file mode 100644
index 00000000..863405ad
--- /dev/null
+++ b/frontend/src/assets/crawler.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.2891 15.81L21.7091 14.39L18.4991 11.21L15.4991 10.36L17.4091 10.1L21.5991 6.89999L20.3991 5.29998L16.5891 8.14999L13.9091 8.59999L17.1091 5.40999L15.9991 0.859985L13.9991 1.33999L14.8591 4.78999L13.7591 5.92999C13.5285 5.38882 13.144 4.92736 12.6533 4.60302C12.1625 4.27867 11.5873 4.10574 10.9991 4.10574C10.4108 4.10574 9.83559 4.27867 9.34487 4.60302C8.85414 4.92736 8.4696 5.38882 8.23906 5.92999L7.10906 4.78999L7.99906 1.33999L5.99906 0.859985L4.88906 5.40999L8.08906 8.59999L5.39906 8.14999L1.59906 5.29998L0.399063 6.89999L4.59906 10.1L6.45906 10.41L3.45906 11.26L0.289062 14.39L1.70906 15.81L4.49906 12.99L6.86906 12.32L2.99906 15.64V21.1H4.99906V16.56L6.55906 15.22C6.73264 16.2723 7.27432 17.2287 8.08751 17.9188C8.90071 18.6088 9.93255 18.9876 10.9991 18.9876C12.0656 18.9876 13.0974 18.6088 13.9106 17.9188C14.7238 17.2287 15.2655 16.2723 15.4391 15.22L16.9991 16.56V21.1H18.9991V15.64L15.1291 12.32L17.4991 12.99L20.2891 15.81Z" fill="black"/>
+</svg>
diff --git a/frontend/src/assets/drive.svg b/frontend/src/assets/drive.svg
new file mode 100644
index 00000000..8ec4dc9b
--- /dev/null
+++ b/frontend/src/assets/drive.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.01 0.784912C9.928 0.784912 8.256 0.804912 8.267 0.831912C8.277 0.851912 9.975 3.83291 12.041 7.45191L15.801 14.0259H19.561C21.642 14.0259 23.314 14.0059 23.303 13.9789C23.298 13.9589 21.595 10.9779 19.528 7.35891L15.768 0.784912H12.01ZM7.25 2.51491C6.03029 4.61565 4.82028 6.72201 3.62 8.83391L0 15.1679L1.89 18.4659L3.775 21.7629L7.395 15.4279L11.013 9.09791L9.133 5.81091C8.1 4.00391 7.255 2.52091 7.25 2.51491ZM9.509 15.1679L9.306 15.5159C9.192 15.7139 8.346 17.1879 7.426 18.8029C6.864 19.7952 6.29799 20.7852 5.728 21.7729C5.718 21.7989 8.968 21.8149 12.95 21.8149H20.194L21.99 18.6579C22.982 16.9239 23.84 15.4279 23.896 15.3349L24 15.1679H16.751H9.509Z" fill="black"/>
+</svg>
diff --git a/frontend/src/assets/file_upload.svg b/frontend/src/assets/file_upload.svg
index 159b580d..cb945f1a 100644
--- a/frontend/src/assets/file_upload.svg
+++ b/frontend/src/assets/file_upload.svg
@@ -1,3 +1,10 @@
-<svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 26.0003H18C19.1 26.0003 20 25.1003 20 24.0003V14.0003H23.18C24.96 14.0003 25.86 11.8403 24.6 10.5803L15.42 1.40032C15.235 1.21491 15.0152 1.06782 14.7732 0.967453C14.5313 0.86709 14.2719 0.81543 14.01 0.81543C13.7481 0.81543 13.4887 0.86709 13.2468 0.967453C13.0048 1.06782 12.785 1.21491 12.6 1.40032L3.42 10.5803C2.16 11.8403 3.04 14.0003 4.82 14.0003H8V24.0003C8 25.1003 8.9 26.0003 10 26.0003ZM2 30.0003H26C27.1 30.0003 28 30.9003 28 32.0003C28 33.1003 27.1 34.0003 26 34.0003H2C0.9 34.0003 0 33.1003 0 32.0003C0 30.9003 0.9 30.0003 2 30.0003Z" fill="#949494"/>
-</svg>
\ No newline at end of file
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_9890_21170)">
+<path d="M12.75 19.1V8.91248L9.5 12.1625L7.75 10.35L14 4.09998L20.25 10.35L18.5 12.1625L15.25 8.91248V19.1H12.75ZM6.5 24.1C5.8125 24.1 5.22417 23.8554 4.735 23.3662C4.24583 22.8771 4.00083 22.2883 4 21.6V17.85H6.5V21.6H21.5V17.85H24V21.6C24 22.2875 23.7554 22.8762 23.2663 23.3662C22.7771 23.8562 22.1883 24.1008 21.5 24.1H6.5Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_9890_21170">
+<rect width="24" height="24" fill="white" transform="translate(0 0.0999756)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/src/assets/github.svg b/frontend/src/assets/github.svg
index 40fc238c..db294339 100644
--- a/frontend/src/assets/github.svg
+++ b/frontend/src/assets/github.svg
@@ -1,5 +1,3 @@
-<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <title>github</title>
-  <rect width="24" height="24" fill="none"/>
-  <path d="M12,2A10,10,0,0,0,8.84,21.5c.5.08.66-.23.66-.5V19.31C6.73,19.91,6.14,18,6.14,18A2.69,2.69,0,0,0,5,16.5c-.91-.62.07-.6.07-.6a2.1,2.1,0,0,1,1.53,1,2.15,2.15,0,0,0,2.91.83,2.16,2.16,0,0,1,.63-1.34C8,16.17,5.62,15.31,5.62,11.5a3.87,3.87,0,0,1,1-2.71,3.58,3.58,0,0,1,.1-2.64s.84-.27,2.75,1a9.63,9.63,0,0,1,5,0c1.91-1.29,2.75-1,2.75-1a3.58,3.58,0,0,1,.1,2.64,3.87,3.87,0,0,1,1,2.71c0,3.82-2.34,4.66-4.57,4.91a2.39,2.39,0,0,1,.69,1.85V21c0,.27.16.59.67.5A10,10,0,0,0,12,2Z" fill="black" fill-opacity="0.54"/>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0.299927C8.68678 0.299927 7.38642 0.558584 6.17317 1.06113C4.95991 1.56368 3.85752 2.30027 2.92893 3.22886C1.05357 5.10422 0 7.64776 0 10.2999C0 14.7199 2.87 18.4699 6.84 19.7999C7.34 19.8799 7.5 19.5699 7.5 19.2999V17.6099C4.73 18.2099 4.14 16.2699 4.14 16.2699C3.68 15.1099 3.03 14.7999 3.03 14.7999C2.12 14.1799 3.1 14.1999 3.1 14.1999C4.1 14.2699 4.63 15.2299 4.63 15.2299C5.5 16.7499 6.97 16.2999 7.54 16.0599C7.63 15.4099 7.89 14.9699 8.17 14.7199C5.95 14.4699 3.62 13.6099 3.62 9.79993C3.62 8.68993 4 7.79993 4.65 7.08993C4.55 6.83993 4.2 5.79993 4.75 4.44993C4.75 4.44993 5.59 4.17993 7.5 5.46993C8.29 5.24993 9.15 5.13993 10 5.13993C10.85 5.13993 11.71 5.24993 12.5 5.46993C14.41 4.17993 15.25 4.44993 15.25 4.44993C15.8 5.79993 15.45 6.83993 15.35 7.08993C16 7.79993 16.38 8.68993 16.38 9.79993C16.38 13.6199 14.04 14.4599 11.81 14.7099C12.17 15.0199 12.5 15.6299 12.5 16.5599V19.2999C12.5 19.5699 12.66 19.8899 13.17 19.7999C17.14 18.4599 20 14.7199 20 10.2999C20 8.98671 19.7413 7.68635 19.2388 6.47309C18.7362 5.25984 17.9997 4.15744 17.0711 3.22886C16.1425 2.30027 15.0401 1.56368 13.8268 1.06113C12.6136 0.558584 11.3132 0.299927 10 0.299927Z" fill="black"/>
 </svg>
diff --git a/frontend/src/assets/reddit.svg b/frontend/src/assets/reddit.svg
new file mode 100644
index 00000000..705ef638
--- /dev/null
+++ b/frontend/src/assets/reddit.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.7519 13.3399C10.7519 12.7699 10.2819 12.2999 9.71187 12.2999C9.14187 12.2999 8.67188 12.7699 8.67188 13.3399C8.67188 13.6158 8.78145 13.8803 8.97648 14.0753C9.17152 14.2704 9.43605 14.3799 9.71187 14.3799C9.9877 14.3799 10.2522 14.2704 10.4473 14.0753C10.6423 13.8803 10.7519 13.6158 10.7519 13.3399ZM14.0919 15.7099C13.6419 16.1599 12.6819 16.3199 12.0019 16.3199C11.3219 16.3199 10.3619 16.1599 9.91187 15.7099C9.88755 15.6839 9.85813 15.6631 9.82545 15.6489C9.79276 15.6347 9.75751 15.6274 9.72188 15.6274C9.68624 15.6274 9.65099 15.6347 9.6183 15.6489C9.58562 15.6631 9.5562 15.6839 9.53187 15.7099C9.50583 15.7343 9.48507 15.7637 9.47088 15.7964C9.45668 15.829 9.44936 15.8643 9.44936 15.8999C9.44936 15.9356 9.45668 15.9708 9.47088 16.0035C9.48507 16.0362 9.50583 16.0656 9.53187 16.0899C10.2419 16.7999 11.6019 16.8599 12.0019 16.8599C12.4019 16.8599 13.7619 16.7999 14.4719 16.0899C14.4979 16.0656 14.5187 16.0362 14.5329 16.0035C14.5471 15.9708 14.5544 15.9356 14.5544 15.8999C14.5544 15.8643 14.5471 15.829 14.5329 15.7964C14.5187 15.7637 14.4979 15.7343 14.4719 15.7099C14.3719 15.6099 14.2019 15.6099 14.0919 15.7099ZM14.2919 12.2999C13.7219 12.2999 13.2519 12.7699 13.2519 13.3399C13.2519 13.9099 13.7219 14.3799 14.2919 14.3799C14.8619 14.3799 15.3319 13.9099 15.3319 13.3399C15.3319 12.7699 14.8719 12.2999 14.2919 12.2999Z" fill="black"/>
+<path d="M12 2.29993C6.48 2.29993 2 6.77993 2 12.2999C2 17.8199 6.48 22.2999 12 22.2999C17.52 22.2999 22 17.8199 22 12.2999C22 6.77993 17.52 2.29993 12 2.29993ZM17.8 13.6299C17.82 13.7699 17.83 13.9199 17.83 14.0699C17.83 16.3099 15.22 18.1299 12 18.1299C8.78 18.1299 6.17 16.3099 6.17 14.0699C6.17 13.9199 6.18 13.7699 6.2 13.6299C5.69 13.3999 5.34 12.8899 5.34 12.2999C5.33852 12.0132 5.4218 11.7324 5.57939 11.4928C5.73698 11.2532 5.96185 11.0656 6.22576 10.9534C6.48966 10.8412 6.78083 10.8095 7.06269 10.8622C7.34456 10.915 7.60454 11.0499 7.81 11.2499C8.82 10.5199 10.22 10.0599 11.77 10.0099L12.51 6.51993C12.52 6.44993 12.56 6.38993 12.62 6.35993C12.68 6.31993 12.75 6.30993 12.82 6.31993L15.24 6.83993C15.3221 6.67351 15.4472 6.53207 15.6023 6.4303C15.7575 6.32853 15.9371 6.27013 16.1224 6.26115C16.3077 6.25217 16.4921 6.29294 16.6564 6.37924C16.8207 6.46553 16.9589 6.59421 17.0566 6.75191C17.1544 6.90962 17.2082 7.09062 17.2125 7.27613C17.2167 7.46164 17.1712 7.64491 17.0808 7.80692C16.9903 7.96894 16.8582 8.1038 16.698 8.19753C16.5379 8.29125 16.3556 8.34042 16.17 8.33993C15.61 8.33993 15.16 7.89993 15.13 7.34993L12.96 6.88993L12.3 10.0099C13.83 10.0599 15.2 10.5299 16.2 11.2499C16.3533 11.1035 16.5367 10.9924 16.7375 10.9243C16.9382 10.8562 17.1514 10.8328 17.3621 10.8557C17.5728 10.8787 17.776 10.9473 17.9574 11.057C18.1388 11.1666 18.2941 11.3145 18.4123 11.4905C18.5306 11.6664 18.609 11.866 18.642 12.0754C18.6751 12.2847 18.662 12.4988 18.6037 12.7026C18.5454 12.9064 18.4432 13.0949 18.3044 13.2551C18.1656 13.4153 17.9934 13.5432 17.8 13.6299Z" fill="black"/>
+</svg>
diff --git a/frontend/src/assets/url.svg b/frontend/src/assets/url.svg
new file mode 100644
index 00000000..e51397f0
--- /dev/null
+++ b/frontend/src/assets/url.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.304 8.62401L19.486 11.806C20.0023 12.3155 20.4128 12.922 20.6937 13.5908C20.9747 14.2596 21.1206 14.9773 21.123 15.7026C21.1254 16.428 20.9843 17.1467 20.7079 17.8173C20.4314 18.4879 20.025 19.0972 19.5121 19.6102C18.9992 20.1231 18.3899 20.5295 17.7193 20.8059C17.0486 21.0824 16.33 21.2235 15.6046 21.221C14.8792 21.2186 14.1615 21.0727 13.4928 20.7918C12.824 20.5108 12.2174 20.1003 11.708 19.584L10.648 18.524C10.5046 18.3857 10.3903 18.2202 10.3116 18.0373C10.2329 17.8543 10.1914 17.6575 10.1896 17.4583C10.1878 17.2592 10.2256 17.0616 10.301 16.8772C10.3763 16.6929 10.4876 16.5253 10.6284 16.3844C10.7691 16.2435 10.9366 16.1321 11.1209 16.0566C11.3052 15.9811 11.5027 15.943 11.7019 15.9446C11.901 15.9463 12.0979 15.9876 12.2809 16.0661C12.464 16.1446 12.6295 16.2588 12.768 16.402L13.83 17.463C14.2996 17.9284 14.9344 18.1888 15.5955 18.1873C16.2567 18.1857 16.8903 17.9224 17.3577 17.4548C17.8252 16.9872 18.0884 16.3535 18.0897 15.6924C18.0911 15.0312 17.8305 14.3965 17.365 13.927L14.183 10.745C13.839 10.4009 13.4022 10.1647 12.926 10.0652C12.4498 9.96574 11.9549 10.0074 11.502 10.185C11.3406 10.249 11.1893 10.3143 11.048 10.381L10.584 10.598C9.96396 10.878 9.48696 10.998 8.87996 10.392C8.00796 9.52001 8.23396 8.71501 9.29696 7.98201C10.3559 7.25337 11.6365 6.91862 12.9166 7.0359C14.1966 7.15318 15.3951 7.71508 16.304 8.62401ZM10.294 2.61401L11.354 3.67401C11.6273 3.95678 11.7787 4.33562 11.7755 4.72891C11.7722 5.12221 11.6147 5.49851 11.3367 5.77675C11.0587 6.055 10.6826 6.21293 10.2893 6.21653C9.89597 6.22013 9.517 6.06912 9.23396 5.79601L8.17296 4.73601C7.94241 4.49717 7.66661 4.30664 7.36163 4.17553C7.05666 4.04442 6.72863 3.97536 6.39668 3.97239C6.06474 3.96941 5.73552 4.03257 5.42824 4.15818C5.12097 4.2838 4.84179 4.46935 4.60699 4.70402C4.37219 4.93868 4.18648 5.21776 4.06069 5.52496C3.9349 5.83217 3.87155 6.16135 3.87434 6.4933C3.87713 6.82525 3.94601 7.15332 4.07694 7.45836C4.20788 7.76341 4.39825 8.03933 4.63696 8.27001L7.81896 11.452C8.16289 11.7961 8.59974 12.0323 9.07595 12.1318C9.55217 12.2313 10.0471 12.1896 10.5 12.012C10.6613 11.948 10.8126 11.8827 10.954 11.816L11.418 11.599C12.038 11.319 12.516 11.199 13.122 11.805C13.994 12.677 13.768 13.482 12.705 14.215C11.6461 14.9437 10.3654 15.2784 9.08537 15.1611C7.80535 15.0438 6.60683 14.4819 5.69796 13.573L2.51596 10.391C1.99962 9.88154 1.58916 9.27497 1.30821 8.60622C1.02726 7.93747 0.881367 7.21975 0.878937 6.49438C0.876507 5.76901 1.01759 5.05033 1.29405 4.37971C1.57052 3.70909 1.9769 3.09978 2.48982 2.58686C3.00273 2.07395 3.61204 1.66756 4.28266 1.3911C4.95328 1.11463 5.67196 0.973553 6.39733 0.975983C7.1227 0.978413 7.84042 1.1243 8.50917 1.40526C9.17793 1.68621 9.7845 2.09767 10.294 2.61401Z" fill="black"/>
+</svg>
diff --git a/frontend/src/components/FilePicker.tsx b/frontend/src/components/FilePicker.tsx
index 8c95c6a2..453b994d 100644
--- a/frontend/src/components/FilePicker.tsx
+++ b/frontend/src/components/FilePicker.tsx
@@ -7,6 +7,7 @@ import FileIcon from '../assets/file.svg';
 import FolderIcon from '../assets/folder.svg';
 import CheckIcon from '../assets/checkmark.svg';
 import SearchIcon from '../assets/search.svg';
+import Input from './Input';
 
 interface CloudFile {
   id: string;
@@ -361,20 +362,16 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
 
           {/* Search input */}
           <div className="mb-3">
-            <div className="relative">
-              <input
-                type="text"
-                placeholder="Search files and folders..."
-                value={searchQuery}
-                onChange={(e) => handleSearchChange(e.target.value)}
-                className="w-full px-3 py-2 pr-10 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-              />
-              <button
-                className="absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 dark:text-gray-400"
-              >
-                <img src={SearchIcon} alt="Search" className="w-4 h-4" />
-              </button>
-            </div>
+            <Input
+              type="text"
+              placeholder="Search files and folders..."
+              value={searchQuery}
+              onChange={(e) => handleSearchChange(e.target.value)}
+              colorVariant="silver"
+              borderVariant="thin"
+              labelBgClassName="bg-white dark:bg-charleston-green-2"
+              leftIcon={<img src={SearchIcon} alt="Search" width={16} height={16} />}
+            />
           </div>
 
           <div className="flex items-center justify-between">
diff --git a/frontend/src/components/Input.tsx b/frontend/src/components/Input.tsx
index dbc517cb..b9f9d93a 100644
--- a/frontend/src/components/Input.tsx
+++ b/frontend/src/components/Input.tsx
@@ -16,6 +16,7 @@ const Input = ({
   textSize = 'medium',
   children,
   labelBgClassName = 'bg-white dark:bg-raisin-black',
+  leftIcon,
   onChange,
   onPaste,
   onKeyDown,
@@ -42,7 +43,7 @@ const Input = ({
     <div className={`relative ${className}`}>
       <input
         ref={inputRef}
-        className={`peer text-jet dark:text-bright-gray h-[42px] w-full rounded-full bg-transparent px-3 py-1 placeholder-transparent outline-hidden ${colorStyles[colorVariant]} ${borderStyles[borderVariant]} ${textSizeStyles[textSize]} [&:-webkit-autofill]:appearance-none [&:-webkit-autofill]:bg-transparent [&:-webkit-autofill_selected]:bg-transparent`}
+        className={`peer text-jet dark:text-bright-gray h-[42px] w-full rounded-full bg-transparent ${leftIcon ? 'pl-10' : 'px-3'} py-1 placeholder-transparent outline-hidden ${colorStyles[colorVariant]} ${borderStyles[borderVariant]} ${textSizeStyles[textSize]} [&:-webkit-autofill]:appearance-none [&:-webkit-autofill]:bg-transparent [&:-webkit-autofill_selected]:bg-transparent`}
         type={type}
         id={id}
         name={name}
@@ -57,12 +58,19 @@ const Input = ({
       >
         {children}
       </input>
+      {leftIcon && (
+        <div className="absolute left-3 top-1/2 transform -translate-y-1/2 flex items-center justify-center">
+          {leftIcon}
+        </div>
+      )}
       {placeholder && (
         <label
           htmlFor={id}
           className={`absolute select-none ${
             hasValue ? '-top-2.5 left-3 text-xs' : ''
-          } px-2 transition-all peer-placeholder-shown:top-2.5 peer-placeholder-shown:left-3 peer-placeholder-shown:${
+          } px-2 transition-all peer-placeholder-shown:top-2.5 ${
+            leftIcon ? 'peer-placeholder-shown:left-7' : 'peer-placeholder-shown:left-3'
+          } peer-placeholder-shown:${
             textSizeStyles[textSize]
           } text-gray-4000 pointer-events-none cursor-none peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs dark:text-gray-400 ${labelBgClassName} max-w-[calc(100%-24px)] overflow-hidden text-ellipsis whitespace-nowrap`}
         >
diff --git a/frontend/src/components/types/index.ts b/frontend/src/components/types/index.ts
index 1c0d138d..491071d8 100644
--- a/frontend/src/components/types/index.ts
+++ b/frontend/src/components/types/index.ts
@@ -22,6 +22,7 @@ export type InputProps = {
   onKeyDown?: (
     e: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>,
   ) => void;
+  leftIcon?: React.ReactNode;
 };
 
 export type MermaidRendererProps = {
diff --git a/frontend/src/modals/WrapperModal.tsx b/frontend/src/modals/WrapperModal.tsx
index 136d25ec..d7df5cc0 100644
--- a/frontend/src/modals/WrapperModal.tsx
+++ b/frontend/src/modals/WrapperModal.tsx
@@ -45,7 +45,7 @@ export default function WrapperModal({
     <div className="fixed top-0 left-0 z-30 flex h-screen w-screen items-center justify-center">
       <div
         ref={modalRef}
-        className={`relative w-11/12 rounded-2xl bg-white p-8 shadow-2xl sm:w-[512px] dark:bg-[#26272E] ${className}`}
+        className={`relative rounded-2xl bg-white dark:bg-[#26272E] p-8 shadow-[0px_4px_40px_-3px_#0000001A] ${className}`}
       >
         {!isPerformingTask && (
           <button
@@ -55,7 +55,7 @@ export default function WrapperModal({
             <img className="filter dark:invert" src={Exit} alt="Close" />
           </button>
         )}
-        <div className={`overflow-y-auto no-scrollbar ${contentClassName}`}>{children}</div>
+        <div className={`overflow-y-auto no-scrollbar text-[#18181B] dark:text-[#ECECF1] ${contentClassName}`}>{children}</div>
       </div>
     </div>
   );
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index 5d0d6a96..e6914ebe 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -10,7 +10,8 @@ import Dropdown from '../components/Dropdown';
 import Input from '../components/Input';
 import ToggleSwitch from '../components/ToggleSwitch';
 import WrapperModal from '../modals/WrapperModal';
-import { ActiveState, Doc } from '../models/misc';
+import { ActiveState, Doc } from '../models/misc';  
+
 import { getDocs } from '../preferences/preferenceApi';
 import {
   selectSourceDocs,
@@ -28,6 +29,14 @@ import {
 
 import {FilePicker}  from '../components/FilePicker';
 
+import CrawlerIcon from '../assets/crawler.svg';
+import FileUploadIcon from '../assets/file_upload.svg';
+import UrlIcon from '../assets/url.svg';
+import GithubIcon from '../assets/github.svg';
+import RedditIcon from '../assets/reddit.svg';
+import DriveIcon from '../assets/drive.svg';
+import ChevronRight from '../assets/chevron-right.svg';
+
 function Upload({
   receivedFile = [],
   setModalState,
@@ -250,13 +259,13 @@ function Upload({
   const { t } = useTranslation();
   const setTimeoutRef = useRef<number | null>(null);
 
-  const urlOptions: { label: string; value: IngestorType }[] = [
-    { label: 'Crawler', value: 'crawler' },
-    { label: 'Link', value: 'url' },
-    { label: 'GitHub', value: 'github' },
-    { label: 'Reddit', value: 'reddit' },
-    { label: 'Google Drive', value: 'google_drive' },
-    { label: 'Upload File', value: 'local_file' },
+  const ingestorOptions: { label: string; value: IngestorType; icon: string }[] = [
+    { label: 'Upload File', value: 'local_file', icon: FileUploadIcon },
+    { label: 'Crawler', value: 'crawler', icon: CrawlerIcon },
+    { label: 'Link', value: 'url', icon: UrlIcon },
+    { label: 'GitHub', value: 'github', icon: GithubIcon },
+    { label: 'Reddit', value: 'reddit', icon: RedditIcon },
+    { label: 'Google Drive', value: 'google_drive', icon: DriveIcon },
   ];
 
   const sourceDocs = useSelector(selectSourceDocs);
@@ -546,21 +555,6 @@ function Upload({
     xhr.send(formData);
   };
 
-
-
-  
-
-      
-      
-      
-    
-
-  
-
-  
-
-  
-
   
 
   const { getRootProps, getInputProps } = useDropzone({
@@ -652,73 +646,112 @@ function Upload({
       },
     }));
   };
-  const handleIngestorTypeChange = (type: IngestorType) => {
-    //Updates the ingestor seleced in dropdown and resets the config to the default config for that type
-    const defaultConfig = IngestorDefaultConfigs[type];
+  const handleIngestorTypeChange = (type: IngestorType | null) => {
+    if (type === null) {
+      setIngestor({
+        type: null,
+        name: '',
+        config: {},
+      });
+      setfiles([]);
+      return;
+    }
 
+    const defaultConfig = IngestorDefaultConfigs[type];
     setIngestor({
       type,
       name: defaultConfig.name,
       config: defaultConfig.config,
     });
 
-    
-
     // Clear files if switching away from local_file
     if (type !== 'local_file') {
       setfiles([]);
     }
   };
 
+  const renderIngestorSelection = () => {
+    return (
+      <div className="grid grid-cols-3 gap-4 w-full">
+        {ingestorOptions.map((option) => (
+          <div
+            key={option.value}
+            className={`relative flex flex-col justify-between rounded-2xl cursor-pointer w-[181px] h-[91.2px] border border-solid pt-[21.1px] pr-[21px] pb-[15px] pl-[21px] gap-[13.1px] transition-colors duration-300 ease-out ${
+              ingestor.type === option.value 
+                ? 'bg-[#7D54D1] text-white border-[#7D54D1] shadow-[0px_0px_8px_0px_#FFFFFF1A] dark:shadow-[0px_0px_8px_0px_#FFFFFF1A]' 
+                : 'bg-transparent hover:bg-[#ECECEC]/30 dark:hover:bg-[#383838]/30 border-[#D7D7D7] dark:border-[#4A4A4A] shadow-[0px_4px_40px_-3px_#0000001A]'
+            }`}
+            onClick={() => handleIngestorTypeChange(option.value as IngestorType)}
+          >
+            <div className="flex flex-col justify-between h-full">
+              <div className="w-6 h-6">
+                <img 
+                  src={option.icon} 
+                  alt={option.label} 
+                  className={`${ingestor.type === option.value ? 'filter invert' : ''} dark:filter dark:invert`}
+                />
+              </div>
+              <p className="font-inter font-semibold text-[13px] leading-[18px] self-start">
+                {option.label}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
   let view;
 
   if (progress?.type === 'UPLOAD') {
     view = <UploadProgress></UploadProgress>;
   } else if (progress?.type === 'TRAINING') {
     view = <TrainingProgress></TrainingProgress>;
-  } else {
+  }   else {
     view = (
-      <div className="flex w-full flex-col gap-4">
-        <p className="text-jet dark:text-bright-gray text-center text-2xl font-semibold">
-          {t('modals.uploadDoc.label')}
-        </p>
-        
-
+      <div className="flex w-full flex-col gap-6">
+        {!ingestor.type && (
+          <p className="text-[#18181B] dark:text-[#ECECF1] text-left font-inter font-semibold text-[20px] leading-[28px] tracking-[0.15px]">
+            Select the way to add your source
+          </p>
+        )}
         
         {activeTab && (
           <>
-            <Dropdown
-              options={urlOptions}
-              selectedValue={
-                urlOptions.find((opt) => opt.value === ingestor.type) || null
-              }
-              onSelect={(selected: { label: string; value: string }) =>
-                handleIngestorTypeChange(selected.value as IngestorType)
-              }
-              size="w-full"
-              rounded="3xl"
-              border="border"
-              placeholder="Select ingestor type"
-              placeholderClassName="text-gray-400 dark:text-silver"
-            />
-            {/* Dynamically render form fields based on schema */}
+            {!ingestor.type && renderIngestorSelection()}
+            {ingestor.type && (
+              <div className="flex flex-col gap-4">
+                <button
+                  onClick={() => handleIngestorTypeChange(null)}
+                  className="flex items-center gap-2 text-[#777777] hover:text-[#555555] w-fit"
+                >
+                  <img 
+                    src={ChevronRight} 
+                    alt="back" 
+                    className="h-3 w-3 transform rotate-180" 
+                  />
+                  <span>Back</span>
+                </button>
 
-            <Input
-              type="text"
-              colorVariant="silver"
-              value={ingestor.name}
-              onChange={(e) => {
-                setIngestor((prevState) => ({
-                  ...prevState,
-                  name: e.target.value,
-                }));
-              }}
-              borderVariant="thin"
-              placeholder="Name"
-              required={true}
-              labelBgClassName="bg-white dark:bg-charleston-green-2"
-            />
-            {renderFormFields()}
+                <Input
+                  type="text"
+                  colorVariant="silver"
+                  value={ingestor.name}
+                  onChange={(e) => {
+                    setIngestor((prevState) => ({
+                      ...prevState,
+                      name: e.target.value,
+                    }));
+                  }}
+                  borderVariant="thin"
+                  placeholder="Name"
+                  required={true}
+                  labelBgClassName="bg-white dark:bg-charleston-green-2"
+                  className="max-w-xs"
+                />
+                {renderFormFields()}
+              </div>
+            )}
+  
             {ingestor.type && IngestorFormSchemas[ingestor.type as IngestorType].some(
               (field: FormField) => field.advanced,
             ) && (
@@ -734,7 +767,7 @@ function Upload({
           </>
         )}
         <div className="flex justify-end gap-4">
-          {activeTab && (
+          {activeTab && ingestor.type && (
             <button
               onClick={() => {
                 if (!ingestor.type) return;
@@ -775,6 +808,7 @@ function Upload({
         setfiles([]);
         setModalState('INACTIVE');
       }}
+      className="w-11/12 sm:w-auto sm:min-w-[600px] md:min-w-[700px]"
     >
       {view}
     </WrapperModal>