diff --git a/package-lock.json b/package-lock.json
index c968210..e6797b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
 			"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",
 				"@radix-ui/react-tooltip": "^1.1.3",
 				"@the-collab-lab/shopping-list-utils": "^2.2.0",
@@ -20,7 +21,8 @@
 				"react-icons": "^5.3.0",
 				"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",
@@ -3346,6 +3348,12 @@
 			"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",
@@ -3373,6 +3381,32 @@
 				}
 			}
 		},
+
+		"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",
@@ -3402,6 +3436,7 @@
 			}
 		},
 		"node_modules/@radix-ui/react-dialog": {
+
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz",
 			"integrity": "sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==",
@@ -3414,12 +3449,103 @@
 				"@radix-ui/react-focus-scope": "1.1.0",
 				"@radix-ui/react-id": "1.1.0",
 				"@radix-ui/react-portal": "1.1.1",
-				"@radix-ui/react-presence": "1.1.0",
+
+			"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.5.7"
+				"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": "*",
@@ -3436,6 +3562,44 @@
 				}
 			}
 		},
+		"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",
@@ -3575,6 +3739,9 @@
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.0.tgz",
 			"integrity": "sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==",
+			"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"
@@ -3616,6 +3783,48 @@
 				}
 			}
 		},
+		"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",
@@ -3814,6 +4023,20 @@
 				}
 			}
 		},
+		"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",
@@ -12294,6 +12517,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 eb853ac..cc46e04 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
 	},
 	"dependencies": {
 		"@radix-ui/react-dialog": "^1.1.1",
+		"@radix-ui/react-select": "^2.1.1",
 		"@radix-ui/react-slot": "^1.1.0",
 		"@radix-ui/react-tooltip": "^1.1.3",
 		"@the-collab-lab/shopping-list-utils": "^2.2.0",
@@ -21,7 +22,8 @@
 		"react-icons": "^5.3.0",
 		"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..5409e3f 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,72 @@ 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}
+				<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-xl w-full hover:bg-pink hover:bg-opacity-75 text-sm"
 				>
-					<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>
+					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
index 8751f6a..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 p-6 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-4 w-4" />
-					<span className="sr-only">Close</span>
+				<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>
@@ -49,10 +49,7 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({ className, ...props }) => (
 	<div
-		className={cn(
-			'flex flex-col space-y-1.5 text-center sm:text-left',
-			className,
-		)}
+		className={cn('flex flex-col space-y-1.5 sm:text-left', className)}
 		{...props}
 	/>
 );
@@ -84,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
new file mode 100644
index 0000000..88fe0ac
--- /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-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}
+			{...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..0cb7bb9
--- /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-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}
+		>
+			{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-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,
+				)}
+				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 b23f644..90cb823 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,4 +4,15 @@
 
 * {
 	@apply transition-colors duration-50;
+
+/* 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..1633e9d 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 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>
+						<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 4a5f936..f6d33da 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -23,6 +23,13 @@ export default {
 			transitionDuration: {
 				50: '50ms',
 				25: '25ms',
+
+				'main-green': '#2EBB4B',
+				'light-green': '#79D8AC',
+				pink: '#F55A99',
+				black: '#1F1E26',
+				grey: '#757575',
+				'light-grey': '#F3F3F3',
 			},
 		},
 	},