diff --git a/public/Add icon.svg b/public/Add icon.svg
new file mode 100644
index 0000000..156c4b5
--- /dev/null
+++ b/public/Add icon.svg	
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" x="0" y="0" viewBox="0 0 64 64" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><circle cx="32" cy="32" r="29" fill="#006df0" opacity="1" data-original="#006df0"></circle><path fill="#2488ff" d="M32 3a29 29 0 0 0-20.506 49.506l41.012-41.012A28.909 28.909 0 0 0 32 3z" opacity="1" data-original="#2488ff"></path><path fill="#ffcd00" d="M45 28h-9v-9a4 4 0 0 0-8 0v9h-9a4 4 0 0 0 0 8h9v9a4 4 0 0 0 8 0v-9h9a4 4 0 0 0 0-8z" opacity="1" data-original="#ffcd00"></path><g fill="#231f20"><path d="M32 62a30 30 0 1 1 30-30 30.034 30.034 0 0 1-30 30zm0-58a28 28 0 1 0 28 28A28.032 28.032 0 0 0 32 4z" fill="#231f20" opacity="1" data-original="#231f20"></path><path d="M30 8.079a1 1 0 0 1-.078-2A28.251 28.251 0 0 1 32 6a1 1 0 0 1 0 2c-.638 0-1.284.025-1.921.076zM7 33a1 1 0 0 1-1-1A25.953 25.953 0 0 1 25.76 6.757a1 1 0 1 1 .48 1.943A23.959 23.959 0 0 0 8 32a1 1 0 0 1-1 1zM32 50a5.006 5.006 0 0 1-5-5v-8h-8a5 5 0 0 1 0-10h8v-8a5 5 0 0 1 10 0v8h8a5 5 0 0 1 0 10h-8v8a5.006 5.006 0 0 1-5 5zM19 29a3 3 0 0 0 0 6h9a1 1 0 0 1 1 1v9a3 3 0 0 0 6 0v-9a1 1 0 0 1 1-1h9a3 3 0 0 0 0-6h-9a1 1 0 0 1-1-1v-9a3 3 0 0 0-6 0v9a1 1 0 0 1-1 1z" fill="#231f20" opacity="1" data-original="#231f20"></path></g></g></svg>
\ No newline at end of file
diff --git a/public/Clear all icon.svg b/public/Clear all icon.svg
new file mode 100644
index 0000000..abcfee2
--- /dev/null
+++ b/public/Clear all icon.svg	
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><g fill-rule="evenodd" clip-rule="evenodd"><path fill="#a9b0bb" d="M127.119 230.334H375.28l-31.776 256.922a9.958 9.958 0 0 1-9.924 8.772H168.82a9.959 9.959 0 0 1-9.924-8.772z" opacity="1" data-original="#a9b0bb"></path><path fill="#cad0d7" d="M116.979 213.839h268.439c2.754 0 5 2.246 5 5v25.978c0 2.754-2.246 5-5 5H116.979a5.01 5.01 0 0 1-5-5v-25.978a5.01 5.01 0 0 1 5-5z" opacity="1" data-original="#cad0d7"></path><path fill="#fdcd56" d="M468.122 53.476c-35.427 4.396-99.101 21.441-157.315 84.401l19.582 11.306c1.391.803 2.138 2.257 1.981 3.856s-1.174 2.879-2.695 3.396l-72.263 24.538c-1.13.384-2.252.273-3.286-.324a3.877 3.877 0 0 1-1.923-2.684l-14.88-74.85c-.313-1.575.287-3.096 1.593-4.031 1.306-.936 2.938-1.016 4.33-.213l20.194 11.659c20.778-27.265 78.339-80.119 204.709-63.007a2.986 2.986 0 0 1 2.601 2.975 2.985 2.985 0 0 1-2.628 2.978z" opacity="1" data-original="#fdcd56"></path><path fill="#a9b0bb" d="M24.218 179.977 179.841 24.354a4.805 4.805 0 0 1 2.727-1.399l42.255-6.926 14.793 14.793a5.01 5.01 0 0 1 0 7.071L37.757 239.751a5.01 5.01 0 0 1-7.071 0l-14.793-14.793 6.926-42.255a4.8 4.8 0 0 1 1.399-2.726z" opacity="1" data-original="#a9b0bb"></path><path fill="#cad0d7" d="m15.893 224.959 208.93-208.93 14.793 14.793a5.01 5.01 0 0 1 0 7.071L37.757 239.751a5.01 5.01 0 0 1-7.071 0z" opacity="1" data-original="#cad0d7"></path><path d="M433.98 53.175c-33.211 9.122-82.41 30.389-128.212 79.921a7.008 7.008 0 0 0 1.643 10.816l13.851 7.993-62.753 21.308-12.919-64.998 14.463 8.347a6.983 6.983 0 0 0 9.057-1.816c11.188-14.679 31.87-35.07 66.884-48.846 29.875-11.767 64.564-16.504 103.596-14.199a268.18 268.18 0 0 0-5.61 1.474zm65.459-7.085c-.292-.165-.79-.447-2.098-.697l.019-.071c-64.659-13.022-120.68-10.481-166.5 7.552-34.341 13.517-56.1 33.042-69.029 48.559L239.21 88.368a7.006 7.006 0 0 0-7.58.372 7.02 7.02 0 0 0-2.79 7.057l17.493 87.98a6.996 6.996 0 0 0 3.369 4.696 6.962 6.962 0 0 0 3.5.941 7.08 7.08 0 0 0 2.249-.372l84.941-28.845a7.013 7.013 0 0 0 4.719-5.942 7.005 7.005 0 0 0-3.472-6.747l-19.53-11.273c80.909-82.57 169.332-77.366 173.072-77.093.151.014.287.023.438.033a6.997 6.997 0 0 0 7.1-5.039 6.983 6.983 0 0 0-3.28-8.046zM34.328 233.361l-8.427-8.431L224.93 25.901l8.431 8.427zm150.113-203.63L29.731 184.445l-3.312 20.16L204.61 26.424zM69.859 114.117l5.199 5.199 44.254-44.254-5.203-5.199c-2.508-2.507-5.857-3.891-9.429-3.891-3.581 0-6.93 1.383-9.443 3.891L69.859 95.241c-2.508 2.512-3.891 5.862-3.891 9.438s1.383 6.926 3.891 9.438zM248.21 29.383l-18.33-18.33a7 7 0 0 0-6.079-1.962l-43.849 7.189a6.99 6.99 0 0 0-3.811 1.957L129.21 65.163l-5.199-5.199c-5.152-5.152-12.021-7.993-19.332-7.993-7.321 0-14.18 2.842-19.337 7.993L59.96 85.342c-5.147 5.157-7.989 12.021-7.989 19.337s2.842 14.18 7.989 19.337l5.199 5.199-46.921 46.921a6.986 6.986 0 0 0-1.957 3.82L9.092 223.8a7.016 7.016 0 0 0 1.957 6.079l18.33 18.33a6.997 6.997 0 0 0 4.95 2.047c1.792 0 3.58-.682 4.954-2.047L248.21 39.277a7.002 7.002 0 0 0 0-9.894zm-3.901 414.699V301.713a6.998 6.998 0 0 1 7.001-7.006 7.007 7.007 0 0 1 7.001 7.006v142.368a7.003 7.003 0 0 1-7.001 7.001 6.993 6.993 0 0 1-7.001-7zm47.473-17.479 5.119-108.084c.179-3.858 3.467-6.827 7.321-6.658 3.858.188 6.85 3.458 6.657 7.33l-5.119 108.07a6.998 6.998 0 0 1-6.991 6.667h-.329c-3.869-.188-6.852-3.467-6.658-7.325zm-94.93.659-5.124-108.07a7.005 7.005 0 0 1 6.662-7.33c3.882-.169 7.142 2.799 7.321 6.658l5.128 108.084a7.01 7.01 0 0 1-6.657 7.326h-.343a6.998 6.998 0 0 1-6.987-6.668zm186.679-184.477v-21.977H119.09v21.977zm-47.19 246.219 28.718-232.217H137.547l28.723 232.217zm54.19-282.192H112.089a6.997 6.997 0 0 0-7.001 7.001v35.973a6.997 6.997 0 0 0 7.001 7.001h11.362l29.688 240.074a6.995 6.995 0 0 0 6.949 6.14h182.44a6.985 6.985 0 0 0 6.939-6.14l29.692-240.074h11.372a7.006 7.006 0 0 0 7.001-7.001v-35.973a7.006 7.006 0 0 0-7.001-7.001z" fill="#000000" opacity="1" data-original="#000000" class="hovered-path custom-cursor-on-hover"></path></g></g></svg>
\ No newline at end of file
diff --git a/public/Clear icon.svg b/public/Clear icon.svg
new file mode 100644
index 0000000..cae5944
--- /dev/null
+++ b/public/Clear icon.svg	
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" x="0" y="0" viewBox="0 0 682.667 682.667" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><defs><clipPath id="a" clipPathUnits="userSpaceOnUse"><path d="M0 512h512V0H0Z" fill="#000000" opacity="1" data-original="#000000"></path></clipPath></defs><g clip-path="url(#a)" transform="matrix(1.33333 0 0 -1.33333 0 682.667)"><path d="M0 0c-9.501-34.626 3.869-61.5 40.111-80.652-93.967-43.504-191.495-76.473-292.585-98.908 17.188 37.214 11.51 66.688-17.052 88.447" style="fill-opacity:1;fill-rule:nonzero;stroke:none" transform="translate(322.194 194.878)" fill="#ffbf3e" data-original="#ffbf3e"></path><path d="m0 0-274.827-92.904c-5.926-2.004-9.107-8.432-7.103-14.358l9.438-27.921c2.003-5.926 8.432-9.106 14.358-7.103L16.693-49.381c5.926 2.003 9.106 8.431 7.103 14.358l-9.438 27.92C12.354-1.177 5.926 2.003 0 0" style="fill-opacity:1;fill-rule:nonzero;stroke:none" transform="translate(308.15 245.16)" fill="#ff8040" data-original="#ff8040"></path><path d="m0 0-199.059-67.292c-5.926-2.003-9.107-8.431-7.103-14.357l9.438-27.921c2.003-5.926 8.432-9.106 14.358-7.103L92.461-23.769c5.926 2.004 9.106 8.432 7.103 14.358L90.126 18.51c-2.003 5.926-8.432 9.106-14.358 7.103L30.379 10.27" style="stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="translate(232.381 219.546)" fill="none" stroke="#000000" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="none" stroke-opacity="" data-original="#000000"></path><path d="m0 0-27.85-9.42-21.53-7.28-92.77 274.44c-4.61 13.64 2.7 28.43 16.34 33.04a25.98 25.98 0 0 0 11.59 1.17c9.6-1.21 18.15-7.74 21.45-17.51z" style="fill-opacity:1;fill-rule:nonzero;stroke:none" transform="translate(195.424 207.058)" fill="#e86328" data-original="#e86328"></path><path d="m0 0-27.85-9.42-92.78 274.44c-3.3 9.78-.48 20.15 6.41 26.93 9.6-1.21 18.15-7.74 21.45-17.51z" style="fill-opacity:1;fill-rule:nonzero;stroke:none" transform="translate(195.424 207.058)" fill="#ff8040" data-original="#ff8040"></path><path d="m0 0 70.142-207.493 49.381 16.694L26.749 83.643C22.14 97.279 7.348 104.597-6.288 99.987c-13.636-4.61-20.954-19.401-16.344-33.037l13.481-39.881" style="stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="translate(75.903 397.853)" fill="none" stroke="#000000" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="none" stroke-opacity="" data-original="#000000"></path><path d="M0 0c28.57-21.76 34.24-51.24 17.06-88.45 59.65 13.24 118.05 30.14 175.22 50.72" style="stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="translate(52.664 103.768)" fill="none" stroke="#000000" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="none" stroke-opacity="" data-original="#000000"></path><path d="M0 0c-9.5-34.63 3.87-61.5 40.11-80.65-6.65-3.08-13.32-6.11-20.01-9.08" style="stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="translate(322.194 194.878)" fill="none" stroke="#000000" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="none" stroke-opacity="" data-original="#000000"></path><path d="M0 0c10.424 34.928 3.772 64.073-19.972 87.46" style="stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="translate(106.758 27.839)" fill="none" stroke="#000000" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="none" stroke-opacity="" data-original="#000000"></path><path d="M0 0c-19.25 19.3-26.96 42.52-23.11 69.66" style="stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="translate(311.184 113.688)" fill="none" stroke="#000000" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="none" stroke-opacity="" data-original="#000000"></path><path d="M0 0c2.646 32.298-5.125 61.065-23.328 86.326" style="stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="translate(149.35 42.237)" fill="none" stroke="#000000" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="none" stroke-opacity="" data-original="#000000"></path><path d="M0 0c.58-21.1 5.95-40.58 16.12-58.43" style="stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="translate(248.844 170.078)" fill="none" stroke="#000000" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="none" stroke-opacity="" data-original="#000000"></path><path d="M0 0c-4.793 29.784-13.636 58.188-26.539 85.24" style="stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="translate(190.089 56.009)" fill="none" stroke="#000000" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="none" stroke-opacity="" data-original="#000000"></path><path d="M0 0a310.75 310.75 0 0 1 19.3-60.53" style="stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="translate(211.314 157.398)" fill="none" stroke="#000000" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="none" stroke-opacity="" data-original="#000000"></path><path d="M0 0c0 12.515-10.146 22.661-22.661 22.661-9.89 0-18.295-6.338-21.388-15.172-.716.04-1.435.065-2.161.065-21.104 0-38.212-17.108-38.212-38.212 0-21.104 17.108-38.213 38.212-38.213 21.104 0 38.212 17.109 38.212 38.213a38.15 38.15 0 0 1-1.909 11.927C-3.927-14.651 0-7.785 0 0" style="fill-opacity:1;fill-rule:nonzero;stroke:none" transform="translate(485.318 102.22)" fill="#e4e4ef" data-original="#e4e4ef"></path><path d="M0 0c1.08 0 2.16.05 3.22.14-6.7-5.77-15.42-9.26-24.94-9.26-21.1 0-38.21 17.11-38.21 38.21 0 20.02 15.39 36.44 34.98 38.07-8.12-7.01-13.26-17.38-13.26-28.95C-38.21 17.11-21.1 0 0 0" style="fill-opacity:1;fill-rule:nonzero;stroke:none" transform="translate(460.826 42.471)" fill="#cacadb" data-original="#cacadb"></path><path d="M0 0c0-10.09-6.37-18.7-15.31-22.01-2.54-.94-5.28-1.45-8.14-1.45-12.96 0-23.46 10.5-23.46 23.46 0 12.95 10.5 23.45 23.46 23.45 2.86 0 5.6-.51 8.14-1.45C-6.37 18.69 0 10.09 0 0" style="fill-opacity:1;fill-rule:nonzero;stroke:none" transform="translate(434.124 183.868)" fill="#cacadb" data-original="#cacadb"></path><path d="M0 0c0-10.09-6.37-18.7-15.31-22.01C-24.25-18.7-30.62-10.09-30.62 0c0 10.09 6.37 18.69 15.31 22C-6.37 18.69 0 10.09 0 0" style="fill-opacity:1;fill-rule:nonzero;stroke:none" transform="translate(434.124 183.868)" fill="#e4e4ef" data-original="#e4e4ef"></path><path d="M0 0c0-16.87-13.68-30.54-30.54-30.54-16.87 0-30.55 13.67-30.55 30.54 0 2.23.25 4.41.7 6.5-7.38 2.21-12.77 9.05-12.77 17.16 0 9.89 8.02 17.9 17.91 17.9 1.28 0 2.53-.14 3.73-.4 2.49 9.13 10.81 15.85 20.73 15.85 11.87 0 21.5-9.63 21.5-21.51 0-4.01-1.12-7.76-3.04-10.98C-4.85 18.95 0 10.04 0 0" style="fill-opacity:1;fill-rule:nonzero;stroke:none" transform="translate(488.374 271.508)" fill="#e4e4ef" data-original="#e4e4ef"></path><path d="M0 0c0 12.515-10.146 22.661-22.661 22.661-9.89 0-18.295-6.338-21.388-15.172-.716.04-1.435.065-2.161.065-21.104 0-38.212-17.108-38.212-38.212 0-21.104 17.108-38.213 38.212-38.213 21.104 0 38.212 17.109 38.212 38.213a38.15 38.15 0 0 1-1.909 11.927C-3.927-14.651 0-7.785 0 0Z" style="stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="translate(485.318 102.22)" fill="none" stroke="#000000" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="none" stroke-opacity="" data-original="#000000"></path><path d="M0 0c0 12.955-10.502 23.457-23.457 23.457S-46.914 12.955-46.914 0s10.502-23.457 23.457-23.457S0-12.955 0 0Z" style="stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="translate(434.127 183.864)" fill="none" stroke="#000000" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="none" stroke-opacity="" data-original="#000000"></path><path d="M0 0c1.16-18.59-10.23-36.35-28.75-42.48a41.913 41.913 0 0 0-12.22-2.12c-18-.44-34.93 10.82-40.88 28.8-.25.76-.48 1.52-.68 2.28-10.3.18-19.82 6.76-23.24 17.09-4.32 13.06 2.76 27.16 15.83 31.49 8.13 2.69 16.65.97 22.98-3.87 3.49 2.59 7.44 4.68 11.79 6.12a41.788 41.788 0 0 0 20.33 1.53v-.01a42.11 42.11 0 0 0 24-13.17c2.58 2.24 5.93 3.6 9.61 3.6 8.1 0 14.66-6.56 14.66-14.66C13.43 6.92 7.52.63 0 0" style="fill-opacity:1;fill-rule:nonzero;stroke:none" transform="translate(336.414 77.728)" fill="#e4e4ef" data-original="#e4e4ef"></path><path d="M0 0c-18-.44-34.93 10.82-40.88 28.8-.25.76-.48 1.52-.68 2.28-10.3.18-19.82 6.76-23.24 17.09-4.32 13.06 2.76 27.16 15.83 31.49 8.13 2.69 16.65.97 22.98-3.87 3.49 2.59 7.44 4.68 11.79 6.12a41.788 41.788 0 0 0 20.33 1.53v-.01C-14.2 81.91-35.07 20.91 0 0" style="fill-opacity:1;fill-rule:nonzero;stroke:none" transform="translate(295.444 33.128)" fill="#cacadb" data-original="#cacadb"></path><path d="M0 0c0 8.097-6.563 14.661-14.661 14.661a14.59 14.59 0 0 1-9.608-3.605c-10.833 11.921-28.053 17.04-44.33 11.651a41.991 41.991 0 0 1-11.793-6.117c-6.327 4.833-14.854 6.559-22.982 3.868-13.066-4.327-20.151-18.427-15.825-31.494 3.419-10.326 12.942-16.91 23.235-17.086.205-.761.429-1.521.68-2.279 7.296-22.034 31.073-33.982 53.107-26.686 18.514 6.13 29.902 23.897 28.742 42.488C-5.913-13.975 0-7.683 0 0Z" style="stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="translate(349.845 92.331)" fill="none" stroke="#000000" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="none" stroke-opacity="" data-original="#000000"></path><path d="M0 0v0" style="stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="translate(474.199 198.524)" fill="none" stroke="#000000" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="none" stroke-opacity="" data-original="#000000"></path><path d="M0 0v0" style="stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="translate(367.013 49.35)" fill="none" stroke="#000000" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="none" stroke-opacity="" data-original="#000000"></path><path d="M0 0v0" style="stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="translate(376.461 250.326)" fill="none" stroke="#000000" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="none" stroke-opacity="" data-original="#000000"></path><path d="M0 0c-16.87 0-30.55 13.67-30.55 30.54 0 2.23.25 4.41.7 6.5-7.38 2.21-12.77 9.05-12.77 17.16 0 9.89 8.02 17.9 17.91 17.9 1.28 0 2.53-.14 3.73-.4 2.49 9.13 10.81 15.85 20.73 15.85-22.37-13.18-7.17-41.56-7.17-41.56C-24.79 33.83-19.58 0 0 0" style="fill-opacity:1;fill-rule:nonzero;stroke:none" transform="translate(457.834 240.968)" fill="#cacadb" data-original="#cacadb"></path><path d="M0 0a21.367 21.367 0 0 1 3.042 10.983c0 11.876-9.627 21.503-21.502 21.503-9.915 0-18.24-6.72-20.726-15.846a17.92 17.92 0 0 1-3.732.403c-9.892 0-17.91-8.018-17.91-17.909 0-8.104 5.385-14.942 12.769-17.153a30.597 30.597 0 0 1-.7-6.501c0-16.869 13.675-30.544 30.545-30.544 16.869 0 30.544 13.675 30.544 30.544C12.33-14.477 7.482-5.567 0 0Z" style="stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="translate(476.044 296.03)" fill="none" stroke="#000000" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="none" stroke-opacity="" data-original="#000000"></path></g></g></svg>
\ No newline at end of file
diff --git a/src/components/InputBox.jsx b/src/components/InputBox.jsx
index a2b4915..27825bf 100644
--- a/src/components/InputBox.jsx
+++ b/src/components/InputBox.jsx
@@ -99,7 +99,10 @@ export const InputBox = ({
             value="INDI"
             onChange={() => setCurrentInputMethod("INDI")}
           />
-          <label htmlFor="radioValueIndividual">Add individually <img src="Individual icon.svg" style={{width: "24px", height: "24px"}} /></label>
+          <label htmlFor="radioValueIndividual">
+            Add individually{" "}
+            <img src="Individual icon.svg" className="icon-class" />
+          </label>
         </div>
 
         <div>
@@ -111,7 +114,9 @@ export const InputBox = ({
             onChange={() => setCurrentInputMethod("BULK")}
             defaultChecked
           />
-          <label htmlFor="radioValueBulk">Add in bulk <img src="Bulk icon.svg" style={{width: "24px", height: "24px"}} /></label>
+          <label htmlFor="radioValueBulk">
+            Add in bulk <img src="Bulk icon.svg" className="icon-class" />
+          </label>
         </div>
       </div>
 
@@ -138,7 +143,13 @@ export const InputBox = ({
                     )
                   }
                 >
-                  Add
+                  Add{" "}
+                  <img
+                    src="Add icon.svg"
+                    className="icon-class"
+                    alt="Add icon"
+                    style={{ marginLeft: "5px" }}
+                  />
                 </button>
                 <button
                   type="button"
@@ -146,6 +157,12 @@ export const InputBox = ({
                   onClick={() => handleClear(type)}
                 >
                   Clear
+                  <img
+                    src="Clear icon.svg"
+                    className="icon-class"
+                    alt="Clear icon"
+                    style={{ marginLeft: "5px" }}
+                  />
                 </button>
                 <button
                   type="button"
@@ -153,23 +170,31 @@ export const InputBox = ({
                   onClick={() => handleClear(type, true)}
                 >
                   Clear All
+                  <img
+                    src="Clear all icon.svg"
+                    className="icon-class"
+                    alt="Clear all icon"
+                    style={{ marginLeft: "5px" }}
+                  />
                 </button>
               </div>
             </div>
           ))
         : ["AR", "BT"].map((type) => (
             <div key={type} className="individual-input">
-              <label htmlFor={type} className="form-label">
-                {type === "AR" ? "Arrival times" : "Burst times"}
-              </label>{" "}
-              <input
-                className="text-box"
-                type="number"
-                id={type}
-                min={0}
-                max={99}
-                defaultValue={0}
-              />
+              <div className="individual-input-inner">
+                <label htmlFor={type} className="form-label">
+                  {type === "AR" ? "Arrival times" : "Burst times"}
+                </label>{" "}
+                <input
+                  className="text-box"
+                  type="number"
+                  id={type}
+                  min={0}
+                  max={99}
+                  defaultValue={0}
+                />
+              </div>
               <div className="button-container">
                 {(type === "AR" ? arrivalArray : burstTimeArray).length < 10 ? (
                   <button
@@ -182,7 +207,13 @@ export const InputBox = ({
                       )
                     }
                   >
-                    Add
+                    Add{" "}
+                    <img
+                      src="Add icon.svg"
+                      className="icon-class"
+                      alt="Add icon"
+                      style={{ marginLeft: "5px" }}
+                    />
                   </button>
                 ) : (
                   <button className="btn btn-primary" disabled>
@@ -194,7 +225,13 @@ export const InputBox = ({
                   className="btn btn-warning"
                   onClick={() => handleClear(type)}
                 >
-                  Clear
+                  Clear{" "}
+                  <img
+                    src="Clear icon.svg"
+                    className="icon-class"
+                    alt="Clear icon"
+                    style={{ marginLeft: "5px" }}
+                  />
                 </button>
                 <button
                   type="button"
@@ -202,6 +239,12 @@ export const InputBox = ({
                   onClick={() => handleClear(type, true)}
                 >
                   Clear All
+                  <img
+                    src="Clear all icon.svg"
+                    className="icon-class"
+                    alt="Clear all icon"
+                    style={{ marginLeft: "5px" }}
+                  />
                 </button>
               </div>
             </div>
diff --git a/src/styles/InputBox.css b/src/styles/InputBox.css
index 5b9cd2c..94d87d7 100644
--- a/src/styles/InputBox.css
+++ b/src/styles/InputBox.css
@@ -26,7 +26,7 @@
 }
 
 .add-method-container input {
-    margin-right: 6px;
+  margin-right: 6px;
 }
 
 .individual-input {
@@ -34,8 +34,48 @@
   flex-direction: column;
 }
 
+.individual-input input[type="number"] {
+  width: 20%;
+}
+
+.individual-input-inner {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+}
+
 .text-box {
   padding: 4px;
   margin-right: 5px;
 }
 
+.icon-class {
+  width: 24px;
+  height: 24px;
+}
+
+button {
+  padding: 10px 15px;
+  font-size: 16px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+}
+
+button:hover {
+  transform: translateY(-3px); /* Smooth upward movement */
+  background-color: #8e44ad; /* Transition to a lighter purple */
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Highlighted shadow */
+}
+
+button:active {
+  transform: translateY(0); /* Reset the position on click */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Lower shadow on click */
+}
+
+