From 53f9c1dc01b2a5e53bf394fe37727c9995138b9a Mon Sep 17 00:00:00 2001
From: Huda Mabkhoot <hudamabkhoot@gmail.com>
Date: Thu, 3 Oct 2024 13:42:39 +0300
Subject: [PATCH 1/2] Relocated add item to list, implemented add item modal,
 and added item quantity

---
 package-lock.json                             | 767 +++++++++++++++++-
 package.json                                  |   5 +-
 src/api/firebase.js                           |   6 +-
 src/components/ListItem.css                   |  14 -
 src/components/ListItem.jsx                   |  40 +-
 .../ManageListForms/AddItemForm.jsx           | 100 ++-
 src/components/SearchBar.jsx                  |  16 +-
 src/components/ui/dialog.jsx                  | 101 +++
 src/components/ui/input.jsx                   |  20 +
 src/components/ui/select.jsx                  | 147 ++++
 src/index.css                                 |  11 +
 src/views/List.jsx                            |  83 +-
 src/views/ManageList.jsx                      |   4 +-
 tailwind.config.js                            |   9 +-
 14 files changed, 1242 insertions(+), 81 deletions(-)
 delete mode 100644 src/components/ListItem.css
 create mode 100644 src/components/ui/dialog.jsx
 create mode 100644 src/components/ui/input.jsx
 create mode 100644 src/components/ui/select.jsx

diff --git a/package-lock.json b/package-lock.json
index 14dde38..3e7980c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,8 @@
 		"": {
 			"name": "smart-shopping-list-next",
 			"dependencies": {
+				"@radix-ui/react-dialog": "^1.1.1",
+				"@radix-ui/react-select": "^2.1.1",
 				"@radix-ui/react-slot": "^1.1.0",
 				"@the-collab-lab/shopping-list-utils": "^2.2.0",
 				"class-variance-authority": "^0.7.0",
@@ -17,7 +19,8 @@
 				"react-hot-toast": "^2.4.1",
 				"react-router-dom": "^6.26.0",
 				"tailwind-merge": "^2.5.2",
-				"tailwindcss-animate": "^1.0.7"
+				"tailwindcss-animate": "^1.0.7",
+				"zod": "^3.23.8"
 			},
 			"devDependencies": {
 				"@nabla/vite-plugin-eslint": "^2.0.4",
@@ -2986,6 +2989,40 @@
 			"resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-1.0.1.tgz",
 			"integrity": "sha512-jmEnr/pk0yVkA7mIlHNnxCi+wWzOFUg0WyIotgkKAb2u1J7fAeDBcVNSTjTihbAYNusCLQdW5s9IJ5qwnEufcQ=="
 		},
+		"node_modules/@floating-ui/core": {
+			"version": "1.6.8",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+			"integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+			"dependencies": {
+				"@floating-ui/utils": "^0.2.8"
+			}
+		},
+		"node_modules/@floating-ui/dom": {
+			"version": "1.6.11",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz",
+			"integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==",
+			"dependencies": {
+				"@floating-ui/core": "^1.6.0",
+				"@floating-ui/utils": "^0.2.8"
+			}
+		},
+		"node_modules/@floating-ui/react-dom": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+			"integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+			"dependencies": {
+				"@floating-ui/dom": "^1.0.0"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
+			}
+		},
+		"node_modules/@floating-ui/utils": {
+			"version": "0.2.8",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+			"integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+		},
 		"node_modules/@grpc/grpc-js": {
 			"version": "1.9.15",
 			"resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.15.tgz",
@@ -3309,6 +3346,63 @@
 			"resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
 			"integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
 		},
+		"node_modules/@radix-ui/number": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
+			"integrity": "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ=="
+		},
+		"node_modules/@radix-ui/primitive": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+			"integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
+		},
+		"node_modules/@radix-ui/react-arrow": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
+			"integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==",
+			"dependencies": {
+				"@radix-ui/react-primitive": "2.0.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-collection": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
+			"integrity": "sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==",
+			"dependencies": {
+				"@radix-ui/react-compose-refs": "1.1.0",
+				"@radix-ui/react-context": "1.1.0",
+				"@radix-ui/react-primitive": "2.0.0",
+				"@radix-ui/react-slot": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-compose-refs": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
@@ -3323,6 +3417,392 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-context": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+			"integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-dialog": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz",
+			"integrity": "sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.0",
+				"@radix-ui/react-compose-refs": "1.1.0",
+				"@radix-ui/react-context": "1.1.1",
+				"@radix-ui/react-dismissable-layer": "1.1.1",
+				"@radix-ui/react-focus-guards": "1.1.1",
+				"@radix-ui/react-focus-scope": "1.1.0",
+				"@radix-ui/react-id": "1.1.0",
+				"@radix-ui/react-portal": "1.1.2",
+				"@radix-ui/react-presence": "1.1.1",
+				"@radix-ui/react-primitive": "2.0.0",
+				"@radix-ui/react-slot": "1.1.0",
+				"@radix-ui/react-use-controllable-state": "1.1.0",
+				"aria-hidden": "^1.1.1",
+				"react-remove-scroll": "2.6.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-context": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+			"integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-dismissable-layer": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz",
+			"integrity": "sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.0",
+				"@radix-ui/react-compose-refs": "1.1.0",
+				"@radix-ui/react-primitive": "2.0.0",
+				"@radix-ui/react-use-callback-ref": "1.1.0",
+				"@radix-ui/react-use-escape-keydown": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-guards": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
+			"integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-portal": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.2.tgz",
+			"integrity": "sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==",
+			"dependencies": {
+				"@radix-ui/react-primitive": "2.0.0",
+				"@radix-ui/react-use-layout-effect": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-dialog/node_modules/react-remove-scroll": {
+			"version": "2.6.0",
+			"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz",
+			"integrity": "sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==",
+			"dependencies": {
+				"react-remove-scroll-bar": "^2.3.6",
+				"react-style-singleton": "^2.2.1",
+				"tslib": "^2.1.0",
+				"use-callback-ref": "^1.3.0",
+				"use-sidecar": "^1.1.2"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"peerDependencies": {
+				"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-direction": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
+			"integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-dismissable-layer": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz",
+			"integrity": "sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.0",
+				"@radix-ui/react-compose-refs": "1.1.0",
+				"@radix-ui/react-primitive": "2.0.0",
+				"@radix-ui/react-use-callback-ref": "1.1.0",
+				"@radix-ui/react-use-escape-keydown": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-focus-guards": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz",
+			"integrity": "sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-focus-scope": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz",
+			"integrity": "sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==",
+			"dependencies": {
+				"@radix-ui/react-compose-refs": "1.1.0",
+				"@radix-ui/react-primitive": "2.0.0",
+				"@radix-ui/react-use-callback-ref": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-id": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+			"integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+			"dependencies": {
+				"@radix-ui/react-use-layout-effect": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-popper": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
+			"integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==",
+			"dependencies": {
+				"@floating-ui/react-dom": "^2.0.0",
+				"@radix-ui/react-arrow": "1.1.0",
+				"@radix-ui/react-compose-refs": "1.1.0",
+				"@radix-ui/react-context": "1.1.0",
+				"@radix-ui/react-primitive": "2.0.0",
+				"@radix-ui/react-use-callback-ref": "1.1.0",
+				"@radix-ui/react-use-layout-effect": "1.1.0",
+				"@radix-ui/react-use-rect": "1.1.0",
+				"@radix-ui/react-use-size": "1.1.0",
+				"@radix-ui/rect": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-portal": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.1.tgz",
+			"integrity": "sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==",
+			"dependencies": {
+				"@radix-ui/react-primitive": "2.0.0",
+				"@radix-ui/react-use-layout-effect": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-presence": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
+			"integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+			"dependencies": {
+				"@radix-ui/react-compose-refs": "1.1.0",
+				"@radix-ui/react-use-layout-effect": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-primitive": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+			"integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+			"dependencies": {
+				"@radix-ui/react-slot": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-select": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.1.tgz",
+			"integrity": "sha512-8iRDfyLtzxlprOo9IicnzvpsO1wNCkuwzzCM+Z5Rb5tNOpCdMvcc2AkzX0Fz+Tz9v6NJ5B/7EEgyZveo4FBRfQ==",
+			"dependencies": {
+				"@radix-ui/number": "1.1.0",
+				"@radix-ui/primitive": "1.1.0",
+				"@radix-ui/react-collection": "1.1.0",
+				"@radix-ui/react-compose-refs": "1.1.0",
+				"@radix-ui/react-context": "1.1.0",
+				"@radix-ui/react-direction": "1.1.0",
+				"@radix-ui/react-dismissable-layer": "1.1.0",
+				"@radix-ui/react-focus-guards": "1.1.0",
+				"@radix-ui/react-focus-scope": "1.1.0",
+				"@radix-ui/react-id": "1.1.0",
+				"@radix-ui/react-popper": "1.2.0",
+				"@radix-ui/react-portal": "1.1.1",
+				"@radix-ui/react-primitive": "2.0.0",
+				"@radix-ui/react-slot": "1.1.0",
+				"@radix-ui/react-use-callback-ref": "1.1.0",
+				"@radix-ui/react-use-controllable-state": "1.1.0",
+				"@radix-ui/react-use-layout-effect": "1.1.0",
+				"@radix-ui/react-use-previous": "1.1.0",
+				"@radix-ui/react-visually-hidden": "1.1.0",
+				"aria-hidden": "^1.1.1",
+				"react-remove-scroll": "2.5.7"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-slot": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
@@ -3340,6 +3820,143 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-use-callback-ref": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+			"integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-use-controllable-state": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+			"integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+			"dependencies": {
+				"@radix-ui/react-use-callback-ref": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-use-escape-keydown": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
+			"integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==",
+			"dependencies": {
+				"@radix-ui/react-use-callback-ref": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-use-layout-effect": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+			"integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-use-previous": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
+			"integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-use-rect": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
+			"integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==",
+			"dependencies": {
+				"@radix-ui/rect": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-use-size": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
+			"integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
+			"dependencies": {
+				"@radix-ui/react-use-layout-effect": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-visually-hidden": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz",
+			"integrity": "sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==",
+			"dependencies": {
+				"@radix-ui/react-primitive": "2.0.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/rect": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
+			"integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg=="
+		},
 		"node_modules/@remix-run/router": {
 			"version": "1.19.0",
 			"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.0.tgz",
@@ -4383,6 +5000,17 @@
 			"dev": true,
 			"license": "Python-2.0"
 		},
+		"node_modules/aria-hidden": {
+			"version": "1.2.4",
+			"resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+			"integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+			"dependencies": {
+				"tslib": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/aria-query": {
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@@ -5440,6 +6068,11 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/detect-node-es": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+			"integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+		},
 		"node_modules/didyoumean": {
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -6520,6 +7153,14 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/get-nonce": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+			"integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/get-own-enumerable-property-symbols": {
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
@@ -6912,6 +7553,14 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/invariant": {
+			"version": "2.2.4",
+			"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+			"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+			"dependencies": {
+				"loose-envify": "^1.0.0"
+			}
+		},
 		"node_modules/is-arguments": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -8960,6 +9609,51 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/react-remove-scroll": {
+			"version": "2.5.7",
+			"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
+			"integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==",
+			"dependencies": {
+				"react-remove-scroll-bar": "^2.3.4",
+				"react-style-singleton": "^2.2.1",
+				"tslib": "^2.1.0",
+				"use-callback-ref": "^1.3.0",
+				"use-sidecar": "^1.1.2"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"peerDependencies": {
+				"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/react-remove-scroll-bar": {
+			"version": "2.3.6",
+			"resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
+			"integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
+			"dependencies": {
+				"react-style-singleton": "^2.2.1",
+				"tslib": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"peerDependencies": {
+				"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/react-router": {
 			"version": "6.26.0",
 			"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.0.tgz",
@@ -8990,6 +9684,28 @@
 				"react-dom": ">=16.8"
 			}
 		},
+		"node_modules/react-style-singleton": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+			"integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+			"dependencies": {
+				"get-nonce": "^1.0.0",
+				"invariant": "^2.2.4",
+				"tslib": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"peerDependencies": {
+				"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/read-cache": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -10612,6 +11328,47 @@
 				"requires-port": "^1.0.0"
 			}
 		},
+		"node_modules/use-callback-ref": {
+			"version": "1.3.2",
+			"resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
+			"integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
+			"dependencies": {
+				"tslib": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"peerDependencies": {
+				"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/use-sidecar": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+			"integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+			"dependencies": {
+				"detect-node-es": "^1.1.0",
+				"tslib": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"peerDependencies": {
+				"@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -11611,6 +12368,14 @@
 			"funding": {
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
+		},
+		"node_modules/zod": {
+			"version": "3.23.8",
+			"resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+			"integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+			"funding": {
+				"url": "https://github.com/sponsors/colinhacks"
+			}
 		}
 	}
 }
diff --git a/package.json b/package.json
index a18ea28..88d3b4f 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,8 @@
 		"npm": ">=8.19.0"
 	},
 	"dependencies": {
+		"@radix-ui/react-dialog": "^1.1.1",
+		"@radix-ui/react-select": "^2.1.1",
 		"@radix-ui/react-slot": "^1.1.0",
 		"@the-collab-lab/shopping-list-utils": "^2.2.0",
 		"class-variance-authority": "^0.7.0",
@@ -18,7 +20,8 @@
 		"react-hot-toast": "^2.4.1",
 		"react-router-dom": "^6.26.0",
 		"tailwind-merge": "^2.5.2",
-		"tailwindcss-animate": "^1.0.7"
+		"tailwindcss-animate": "^1.0.7",
+		"zod": "^3.23.8"
 	},
 	"devDependencies": {
 		"@nabla/vite-plugin-eslint": "^2.0.4",
diff --git a/src/api/firebase.js b/src/api/firebase.js
index 02fa26b..2782f11 100644
--- a/src/api/firebase.js
+++ b/src/api/firebase.js
@@ -177,7 +177,10 @@ export async function shareList(listPath, currentUserId, recipientEmail) {
  * @param {string} itemData.itemName The name of the item.
  * @param {number} itemData.daysUntilNextPurchase The number of days until the user thinks they'll need to buy the item again.
  */
-export async function addItem(listPath, { itemName, daysUntilNextPurchase }) {
+export async function addItem(
+	listPath,
+	{ itemName, itemQuantity, daysUntilNextPurchase },
+) {
 	const listCollectionRef = collection(db, listPath, 'items');
 	return addDoc(listCollectionRef, {
 		dateCreated: new Date(),
@@ -187,6 +190,7 @@ export async function addItem(listPath, { itemName, daysUntilNextPurchase }) {
 		dateNextPurchased: getFutureDate(daysUntilNextPurchase),
 		dayInterval: daysUntilNextPurchase,
 		name: itemName,
+		quantity: itemQuantity,
 		totalPurchases: 0,
 		checked: false,
 	});
diff --git a/src/components/ListItem.css b/src/components/ListItem.css
deleted file mode 100644
index 148d3de..0000000
--- a/src/components/ListItem.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.ListItem {
-	align-items: baseline;
-	display: flex;
-	flex-direction: row;
-	font-size: 1.2em;
-}
-
-.ListItem-checkbox {
-	accent-color: var(--color-accent);
-}
-
-.ListItem-label {
-	margin-left: 0.2em;
-}
diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
index a528b6f..754878e 100644
--- a/src/components/ListItem.jsx
+++ b/src/components/ListItem.jsx
@@ -1,13 +1,14 @@
-import './ListItem.css';
 import { updateItem, deleteItem } from '../api';
 import { useEffect } from 'react';
 import { ONE_DAY_IN_MILLISECONDS } from '../utils/dates';
 import toast from 'react-hot-toast';
+import { Button } from './ui/button';
 
 export function ListItem({
 	listPath,
 	name,
 	id,
+	quantity,
 	isChecked,
 	dateLastPurchased,
 	totalPurchases,
@@ -54,20 +55,31 @@ export function ListItem({
 	}, []);
 
 	return (
-		<li className="ListItem">
-			<input
-				type="checkbox"
-				id={id}
-				onChange={handleOnChange}
-				checked={isChecked}
-				disabled={isChecked}
-			/>
-			<label htmlFor={`${id}`}>{name}</label>
+		<li className="flex justify-between">
+			<div className="flex items-center gap-2">
+				<input
+					type="checkbox"
+					id={id}
+					onChange={handleOnChange}
+					checked={isChecked}
+					disabled={isChecked}
+				/>
+				<div className="flex items-center gap-2">
+					<label htmlFor={`${id}`} className="font-medium text-lg">
+						{quantity}
+					</label>
+					<label htmlFor={`${id}`} className="font-medium text-lg">
+						{name}
+					</label>
+				</div>
+			</div>
 			{/* Add CSS to dynamically change bg-color for badges? */}
-			<p className="TimeBadge">{indicator}</p>
-			<button type="button" id={id} onClick={handleDelete}>
-				Delete
-			</button>
+			<div className="flex items-center gap-4">
+				<p className="">{indicator}</p>
+				<Button type="button" id={id} onClick={handleDelete}>
+					Delete
+				</Button>
+			</div>
 		</li>
 	);
 }
diff --git a/src/components/ManageListForms/AddItemForm.jsx b/src/components/ManageListForms/AddItemForm.jsx
index 1d937d5..151814e 100644
--- a/src/components/ManageListForms/AddItemForm.jsx
+++ b/src/components/ManageListForms/AddItemForm.jsx
@@ -1,13 +1,30 @@
 import { useState } from 'react';
 import { addItem } from '../../api/firebase';
 import toast from 'react-hot-toast';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import {
+	Select,
+	SelectTrigger,
+	SelectContent,
+	SelectItem,
+	SelectValue,
+} from '../ui/select';
 
-export default function AddItemForm({ listPath, data }) {
+export default function AddItemForm({ listPath, data, handleOpenModal }) {
 	const [formData, setFormData] = useState({
 		itemName: '',
+		itemQuantity: 1,
 		daysUntilNextPurchase: '',
 	});
 
+	const resetItemName = () => {
+		setFormData((prevFormData) => ({
+			...prevFormData,
+			itemName: '',
+		}));
+	};
+
 	const handleSubmit = async (event) => {
 		event.preventDefault();
 
@@ -17,12 +34,20 @@ export default function AddItemForm({ listPath, data }) {
 
 		const match = data.find((item) => item.name === formattedItemName);
 
+		if (formattedItemName.length === 0) {
+			toast.error(`No numbers or special characters.`);
+			resetItemName();
+			return;
+		}
+
 		try {
-			if (!match) {
+			if (!match && formattedItemName.length >= 1) {
+				handleOpenModal();
 				await addItem(listPath, { ...formData, itemName: formattedItemName });
 				toast.success(`${formattedItemName} was added to your list`);
 			} else {
 				toast.error(`${formattedItemName} is already on your list`);
+				resetItemName();
 				return;
 			}
 		} catch (error) {
@@ -35,36 +60,69 @@ export default function AddItemForm({ listPath, data }) {
 		setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
 	};
 
+	const handleSelectChange = (value) => {
+		setFormData((prevFormData) => ({
+			...prevFormData,
+			daysUntilNextPurchase: value,
+		}));
+	};
+
 	return (
-		<form onSubmit={(event) => handleSubmit(event)}>
-			<div className="item-name">
-				<label htmlFor="itemName">Enter the item name: </label>
-				<input
+		<form
+			className="flex flex-col items-center gap-8 max-w-[400px] text-black"
+			onSubmit={(event) => handleSubmit(event)}
+		>
+			<div className="flex flex-col gap-2 w-full">
+				<label htmlFor="itemName" className="text-md font-medium">
+					Item name{' '}
+				</label>
+				<Input
 					type="text"
 					name="itemName"
 					id="itemName"
+					placeholder="Enter item name"
 					required
 					value={formData.itemName}
 					onChange={handleChange}
 				/>
 			</div>
-			<div className="buy-again">
-				<label htmlFor="daysUntilNextPurchase">
-					When do you think you will need to purchase this item again?
+			<div className="flex flex-col gap-2 w-full">
+				<label htmlFor="daysUntilNextPurchase" className="text-md font-medium">
+					How soon would you like to buy this again?
 				</label>
-				<select
-					name="daysUntilNextPurchase"
-					id="daysUntilNextPurchase"
-					value={formData.daysUntilNextPurchase}
-					onChange={handleChange}
-				>
-					<option value="">Select Time</option>
-					<option value="7">Soon (7 days)</option>
-					<option value="14">Kind of soon (14 days)</option>
-					<option value="30">Not soon (30 days)</option>
-				</select>
+				<Select onValueChange={handleSelectChange}>
+					<SelectTrigger>
+						<SelectValue placeholder="Select Time" />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="7">Soon (7 days)</SelectItem>
+						<SelectItem value="14">Kind of soon (14 days)</SelectItem>
+						<SelectItem value="30">Not soon (30 days)</SelectItem>
+					</SelectContent>
+				</Select>
+			</div>
+			<div className="flex flex-col items-start gap-2 w-full">
+				<label htmlFor="quantity" className="text-md font-medium">
+					Quantity
+				</label>
+				<div className="flex items-start">
+					<Input
+						type="number"
+						name="itemQuantity"
+						id="quantity"
+						required
+						value={formData.itemQuantity}
+						onChange={handleChange}
+						min={1}
+						max={100}
+					/>
+				</div>
+			</div>
+			<div className="flex w-full">
+				<Button type="submit" className="bg-pink text-white rounded-lg w-full">
+					Add Item
+				</Button>
 			</div>
-			<button type="submit">Add Item</button>
 		</form>
 	);
 }
diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx
index d380b23..276ae1a 100644
--- a/src/components/SearchBar.jsx
+++ b/src/components/SearchBar.jsx
@@ -1,3 +1,5 @@
+import { Input } from './ui/input';
+
 export function SearchBar({ allData, setDisplayData, setSearch, search }) {
 	const handleInputChange = (e) => {
 		const searchTerm = e.target.value;
@@ -9,24 +11,16 @@ export function SearchBar({ allData, setDisplayData, setSearch, search }) {
 
 		setDisplayData(filteredData);
 	};
-	const handleClear = () => {
-		setDisplayData(allData);
-		setSearch('');
-	};
 
 	return (
-		<form>
-			<label htmlFor="item-filter">Search for an item here: </label>
-			<input
+		<form className="text-black">
+			<Input
 				type="text"
 				id="item-filter"
 				value={search}
-				placeholder="Search here"
+				placeholder="Search..."
 				onChange={handleInputChange}
 			/>
-			<button type="button" onClick={handleClear}>
-				Clear Input
-			</button>
 		</form>
 	);
 }
diff --git a/src/components/ui/dialog.jsx b/src/components/ui/dialog.jsx
new file mode 100644
index 0000000..ea55ca0
--- /dev/null
+++ b/src/components/ui/dialog.jsx
@@ -0,0 +1,101 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+	<DialogPrimitive.Overlay
+		ref={ref}
+		className={cn(
+			'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+			className,
+		)}
+		{...props}
+	/>
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef(
+	({ className, children, ...props }, ref) => (
+		<DialogPortal>
+			<DialogOverlay />
+			<DialogPrimitive.Content
+				ref={ref}
+				className={cn(
+					'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-slate-200 bg-white py-7 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-slate-800 dark:bg-slate-950',
+					'flex flex-col items-center justify-center',
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 data-[state=open]:text-slate-500 dark:ring-offset-slate-950 dark:focus:ring-slate-300 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-400">
+					<X className="h-5 w-5 bg-pink rounded-lg" />
+				</DialogPrimitive.Close>
+			</DialogPrimitive.Content>
+		</DialogPortal>
+	),
+);
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }) => (
+	<div
+		className={cn('flex flex-col space-y-1.5 sm:text-left', className)}
+		{...props}
+	/>
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({ className, ...props }) => (
+	<div
+		className={cn(
+			'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+			className,
+		)}
+		{...props}
+	/>
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+	<DialogPrimitive.Title
+		ref={ref}
+		className={cn(
+			'text-lg font-semibold leading-none tracking-tight',
+			className,
+		)}
+		{...props}
+	/>
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+	<DialogPrimitive.Description
+		ref={ref}
+		className={cn('text-sm text-slate-500 dark:text-slate-400', className)}
+		{...props}
+	/>
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+	Dialog,
+	DialogPortal,
+	DialogOverlay,
+	DialogClose,
+	DialogTrigger,
+	DialogContent,
+	DialogHeader,
+	DialogFooter,
+	DialogTitle,
+	DialogDescription,
+};
diff --git a/src/components/ui/input.jsx b/src/components/ui/input.jsx
new file mode 100644
index 0000000..0d2e530
--- /dev/null
+++ b/src/components/ui/input.jsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+	return (
+		<input
+			type={type}
+			className={cn(
+				'flex h-10 w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-base ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-slate-950 placeholder:text-slate-500 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:file:text-slate-50 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300',
+				className,
+			)}
+			ref={ref}
+			{...props}
+		/>
+	);
+});
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/src/components/ui/select.jsx b/src/components/ui/select.jsx
new file mode 100644
index 0000000..a24efe9
--- /dev/null
+++ b/src/components/ui/select.jsx
@@ -0,0 +1,147 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef(
+	({ className, children, ...props }, ref) => (
+		<SelectPrimitive.Trigger
+			ref={ref}
+			className={cn(
+				'flex h-10 w-full items-center justify-between rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus:outline-none  disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<SelectPrimitive.Icon asChild>
+				<ChevronDown className="h-4 w-4 opacity-50" />
+			</SelectPrimitive.Icon>
+		</SelectPrimitive.Trigger>
+	),
+);
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef(
+	({ className, ...props }, ref) => (
+		<SelectPrimitive.ScrollUpButton
+			ref={ref}
+			className={cn(
+				'flex cursor-default items-center justify-center py-1',
+				className,
+			)}
+			{...props}
+		>
+			<ChevronUp className="h-4 w-4" />
+		</SelectPrimitive.ScrollUpButton>
+	),
+);
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef(
+	({ className, ...props }, ref) => (
+		<SelectPrimitive.ScrollDownButton
+			ref={ref}
+			className={cn(
+				'flex cursor-default items-center justify-center py-1',
+				className,
+			)}
+			{...props}
+		>
+			<ChevronDown className="h-4 w-4" />
+		</SelectPrimitive.ScrollDownButton>
+	),
+);
+SelectScrollDownButton.displayName =
+	SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef(
+	({ className, children, position = 'popper', ...props }, ref) => (
+		<SelectPrimitive.Portal>
+			<SelectPrimitive.Content
+				ref={ref}
+				className={cn(
+					'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-light-grey text-slate-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50',
+					position === 'popper' &&
+						'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+					className,
+				)}
+				position={position}
+				{...props}
+			>
+				<SelectScrollUpButton />
+				<SelectPrimitive.Viewport
+					className={cn(
+						'p-1',
+						position === 'popper' &&
+							'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+					)}
+				>
+					{children}
+				</SelectPrimitive.Viewport>
+				<SelectScrollDownButton />
+			</SelectPrimitive.Content>
+		</SelectPrimitive.Portal>
+	),
+);
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
+	<SelectPrimitive.Label
+		ref={ref}
+		className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+		{...props}
+	/>
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef(
+	({ className, children, ...props }, ref) => (
+		<SelectPrimitive.Item
+			ref={ref}
+			className={cn(
+				'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-light-green focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50',
+				className,
+			)}
+			{...props}
+		>
+			<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+				<SelectPrimitive.ItemIndicator>
+					<Check className="h-4 w-4" />
+				</SelectPrimitive.ItemIndicator>
+			</span>
+
+			<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+		</SelectPrimitive.Item>
+	),
+);
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
+	<SelectPrimitive.Separator
+		ref={ref}
+		className={cn('-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800', className)}
+		{...props}
+	/>
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+	Select,
+	SelectGroup,
+	SelectValue,
+	SelectTrigger,
+	SelectContent,
+	SelectLabel,
+	SelectItem,
+	SelectSeparator,
+	SelectScrollUpButton,
+	SelectScrollDownButton,
+};
diff --git a/src/index.css b/src/index.css
index b5c61c9..b8103e3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,14 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Styles for number input */
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+input[type='number'] {
+	-moz-appearance: textfield; /* For Firefox */
+}
diff --git a/src/views/List.jsx b/src/views/List.jsx
index 3a63ed1..2fd26c1 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -1,14 +1,26 @@
 import { useEffect, useState } from 'react';
 import { ListItem, SearchBar } from '../components';
-import { useNavigate } from 'react-router-dom';
 import { comparePurchaseUrgency } from '../api/firebase';
 import { getIndicator } from '../utils/helpers';
+import AddItemForm from '../components/ManageListForms/AddItemForm';
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { SquarePlus } from 'lucide-react';
 
 export function List({ data, listPath }) {
 	const [search, setSearch] = useState('');
 	const [allData, setAllData] = useState([]);
 	const [displayData, setDisplayData] = useState([]);
-	const navigate = useNavigate();
+	const [isOpen, setIsOpen] = useState(false);
+	const [openItemId, setOpenItemId] = useState(null);
 
 	useEffect(() => {
 		const arrayWithIndicator = data.map((item) => ({
@@ -20,21 +32,58 @@ export function List({ data, listPath }) {
 		setDisplayData(urgencyData);
 	}, [data]);
 
+	const handleAddModal = () => {
+		if (search.length > 0) {
+			setDisplayData(allData);
+			setSearch('');
+		}
+
+		setIsOpen((prev) => !prev);
+	};
+
+	const handleEditModal = (id) => {
+		setOpenItemId((prevId) => (prevId === id ? null : id));
+	};
+
 	return (
-		<>
-			<SearchBar
-				setDisplayData={setDisplayData}
-				allData={allData}
-				setSearch={setSearch}
-				search={search}
-			/>
-			<ul>
+		<div className="flex flex-col items-center gap-4">
+			<div className="flex gap-2">
+				<SearchBar
+					setDisplayData={setDisplayData}
+					allData={allData}
+					setSearch={setSearch}
+					search={search}
+				/>
+				<Dialog open={isOpen} onOpenChange={handleAddModal}>
+					<DialogTrigger asChild>
+						<Button>
+							<SquarePlus />
+						</Button>
+					</DialogTrigger>
+					<DialogContent>
+						<DialogHeader>
+							<DialogTitle>Add New Item</DialogTitle>
+							<DialogDescription>
+								Fill in the details of the item you want to add.
+							</DialogDescription>
+						</DialogHeader>
+						<AddItemForm
+							listPath={listPath}
+							data={data}
+							handleOpenModal={handleAddModal}
+						/>
+						<DialogFooter className="sm:justify-start"></DialogFooter>
+					</DialogContent>
+				</Dialog>
+			</div>
+			<ul className="w-full max-w-[500px]">
 				{displayData.map((item) => (
 					<ListItem
 						key={item.id}
 						name={item.name}
 						listPath={listPath}
 						id={item.id}
+						quantity={item.quantity}
 						isChecked={item.checked}
 						dateLastPurchased={item.dateLastPurchased}
 						totalPurchases={item.totalPurchases}
@@ -42,17 +91,23 @@ export function List({ data, listPath }) {
 						dateCreated={item.dateCreated}
 						dateNextPurchased={item.dateNextPurchased}
 						indicator={item.indicator}
+						isOpen={openItemId === item.id}
+						handleOpenModal={handleEditModal}
 					/>
 				))}
 			</ul>
 			{data.length === 0 && (
-				<div>
+				<div className="flex flex-col gap-4">
 					<p>You currently have no shopping items. Click below to add items</p>
-					<button id="addFirstItem" onClick={() => navigate('/manage-list')}>
+					<Button
+						className="bg-main-green text-white rounded-lg w-full"
+						id="addFirstItem"
+						onClick={() => setIsOpen((prev) => !prev)}
+					>
 						Start adding items!
-					</button>
+					</Button>
 				</div>
 			)}
-		</>
+		</div>
 	);
 }
diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx
index 20cca9c..7ce73d5 100644
--- a/src/views/ManageList.jsx
+++ b/src/views/ManageList.jsx
@@ -1,10 +1,8 @@
-import AddItemForm from '../components/ManageListForms/AddItemForm';
 import ShareListForm from '../components/ManageListForms/ShareListForm';
 
-export function ManageList({ listPath, user, data }) {
+export function ManageList({ listPath, user }) {
 	return (
 		<div>
-			<AddItemForm listPath={listPath} data={data} />
 			<ShareListForm listPath={listPath} user={user} />
 		</div>
 	);
diff --git a/tailwind.config.js b/tailwind.config.js
index b913671..f177163 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,7 +9,14 @@ export default {
 				md: 'calc(var(--radius) - 2px)',
 				sm: 'calc(var(--radius) - 4px)',
 			},
-			colors: {},
+			colors: {
+				'main-green': '#2EBB4B',
+				'light-green': '#79D8AC',
+				pink: '#F55A99',
+				black: '#1F1E26',
+				grey: '#757575',
+				'light-grey': '#F3F3F3',
+			},
 		},
 	},
 	plugins: [require('tailwindcss-animate')],

From bbfd68574ac39a024f06ea398e37a8b5229678d7 Mon Sep 17 00:00:00 2001
From: Huda Mabkhoot <hudamabkhoot@gmail.com>
Date: Fri, 4 Oct 2024 18:30:56 +0300
Subject: [PATCH 2/2] applied  the design changes

---
 src/components/ManageListForms/AddItemForm.jsx |  5 ++++-
 src/components/ui/dialog.jsx                   | 10 +++++-----
 src/components/ui/input.jsx                    |  2 +-
 src/components/ui/select.jsx                   |  4 ++--
 src/views/List.jsx                             |  4 ++--
 5 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/ManageListForms/AddItemForm.jsx b/src/components/ManageListForms/AddItemForm.jsx
index 151814e..5409e3f 100644
--- a/src/components/ManageListForms/AddItemForm.jsx
+++ b/src/components/ManageListForms/AddItemForm.jsx
@@ -119,7 +119,10 @@ export default function AddItemForm({ listPath, data, handleOpenModal }) {
 				</div>
 			</div>
 			<div className="flex w-full">
-				<Button type="submit" className="bg-pink text-white rounded-lg w-full">
+				<Button
+					type="submit"
+					className="bg-pink text-white rounded-xl w-full hover:bg-pink hover:bg-opacity-75 text-sm"
+				>
 					Add Item
 				</Button>
 			</div>
diff --git a/src/components/ui/dialog.jsx b/src/components/ui/dialog.jsx
index ea55ca0..29183a7 100644
--- a/src/components/ui/dialog.jsx
+++ b/src/components/ui/dialog.jsx
@@ -16,7 +16,7 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
 	<DialogPrimitive.Overlay
 		ref={ref}
 		className={cn(
-			'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+			'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
 			className,
 		)}
 		{...props}
@@ -31,15 +31,15 @@ const DialogContent = React.forwardRef(
 			<DialogPrimitive.Content
 				ref={ref}
 				className={cn(
-					'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-slate-200 bg-white py-7 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-slate-800 dark:bg-slate-950',
+					'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-slate-200 bg-white py-7 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-xl dark:border-slate-800 dark:bg-slate-950',
 					'flex flex-col items-center justify-center',
 					className,
 				)}
 				{...props}
 			>
 				{children}
-				<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 data-[state=open]:text-slate-500 dark:ring-offset-slate-950 dark:focus:ring-slate-300 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-400">
-					<X className="h-5 w-5 bg-pink rounded-lg" />
+				<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-0 focus:ring-slate-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 data-[state=open]:text-slate-500 dark:ring-offset-slate-950 dark:focus:ring-slate-300 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-400">
+					<X className="h-7 w-7 text-grey" />
 				</DialogPrimitive.Close>
 			</DialogPrimitive.Content>
 		</DialogPortal>
@@ -81,7 +81,7 @@ DialogTitle.displayName = DialogPrimitive.Title.displayName;
 const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
 	<DialogPrimitive.Description
 		ref={ref}
-		className={cn('text-sm text-slate-500 dark:text-slate-400', className)}
+		className={cn('text-lg text-slate-500 dark:text-slate-400', className)}
 		{...props}
 	/>
 ));
diff --git a/src/components/ui/input.jsx b/src/components/ui/input.jsx
index 0d2e530..88fe0ac 100644
--- a/src/components/ui/input.jsx
+++ b/src/components/ui/input.jsx
@@ -7,7 +7,7 @@ const Input = React.forwardRef(({ className, type, ...props }, ref) => {
 		<input
 			type={type}
 			className={cn(
-				'flex h-10 w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-base ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-slate-950 placeholder:text-slate-500 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:file:text-slate-50 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300',
+				'flex h-10 w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-slate-950 placeholder:text-slate-500 focus-visible:outline-none focus:ring-1 focus:ring-light-green disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:file:text-slate-50 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300',
 				className,
 			)}
 			ref={ref}
diff --git a/src/components/ui/select.jsx b/src/components/ui/select.jsx
index a24efe9..0cb7bb9 100644
--- a/src/components/ui/select.jsx
+++ b/src/components/ui/select.jsx
@@ -15,7 +15,7 @@ const SelectTrigger = React.forwardRef(
 		<SelectPrimitive.Trigger
 			ref={ref}
 			className={cn(
-				'flex h-10 w-full items-center justify-between rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus:outline-none  disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400',
+				'flex h-10 w-full items-center justify-between rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus:outline-none  disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400',
 				className,
 			)}
 			{...props}
@@ -68,7 +68,7 @@ const SelectContent = React.forwardRef(
 			<SelectPrimitive.Content
 				ref={ref}
 				className={cn(
-					'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-light-grey text-slate-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50',
+					'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border border-slate-200 bg-light-grey text-slate-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50',
 					position === 'popper' &&
 						'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
 					className,
diff --git a/src/views/List.jsx b/src/views/List.jsx
index 2fd26c1..1633e9d 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -56,8 +56,8 @@ export function List({ data, listPath }) {
 				/>
 				<Dialog open={isOpen} onOpenChange={handleAddModal}>
 					<DialogTrigger asChild>
-						<Button>
-							<SquarePlus />
+						<Button className="bg-transparen hover:bg-transparen">
+							<SquarePlus className="h-7 w-7 text-pink dark:text-green transition-opacity hover:opacity-75" />
 						</Button>
 					</DialogTrigger>
 					<DialogContent>