diff --git a/src/App.jsx b/src/App.jsx
index cdd5299..1228c19 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,6 +5,7 @@ import { Loading } from './components/Loading';
 import { ProtectedRoute } from './components/ProtectedRoute';
 import { useAuth, useShoppingListData, useShoppingLists } from './api';
 import { useStateWithStorage } from './utils';
+import { ThemeProvider } from './context/ThemeContext';
 
 export function App() {
 	/**
@@ -41,42 +42,44 @@ export function App() {
 	const data = useShoppingListData(listPath);
 
 	return (
-		<Router>
-			<Routes>
-				<Route path="/" element={<Layout />}>
-					<Route
-						index
-						element={
-							<ProtectedRoute>
-								<Home
-									data={data}
-									lists={lists}
-									listPath={listPath}
-									setListPath={setListPath}
-									user={user}
-								/>
-							</ProtectedRoute>
-						}
-					/>
-					<Route
-						path="add-item"
-						element={
-							<ProtectedRoute>
-								<AddItem listPath={listPath} user={user} data={data} />
-							</ProtectedRoute>
-						}
-					/>
-					<Route
-						path="developers"
-						element={
-							<Suspense fallback={<Loading />}>
-								<Team />
-							</Suspense>
-						}
-					/>
-				</Route>
-			</Routes>
-		</Router>
+		<ThemeProvider>
+			<Router>
+				<Routes>
+					<Route path="/" element={<Layout />}>
+						<Route
+							index
+							element={
+								<ProtectedRoute>
+									<Home
+										data={data}
+										lists={lists}
+										selectedListPath={listPath}
+										setListPath={setListPath}
+										user={user}
+									/>
+								</ProtectedRoute>
+							}
+						/>
+						<Route
+							path="add-item"
+							element={
+								<ProtectedRoute>
+									<AddItem listPath={listPath} user={user} data={data} />
+								</ProtectedRoute>
+							}
+						/>
+						<Route
+							path="developers"
+							element={
+								<Suspense fallback={<Loading />}>
+									<Team />
+								</Suspense>
+							}
+						/>
+					</Route>
+				</Routes>
+			</Router>
+		</ThemeProvider>
 	);
 }
 
diff --git a/src/components/IconButton.jsx b/src/components/IconButton.jsx
index 9fd548b..29807c4 100644
--- a/src/components/IconButton.jsx
+++ b/src/components/IconButton.jsx
@@ -1,4 +1,4 @@
-import '../views/Layout.css';
+// import '../views/Layout.css';
 
 export function IconButton({
 	as: Component = 'button',
@@ -10,10 +10,10 @@ export function IconButton({
 			{...props}
 			className={`flex items-center justify-center px-4 py-4 rounded-md shadow-md transition duration-200 ease-in-out 
 			${props.className} 
-			${props.disabled ? 'bg-[#184E77] text-black cursor-not-allowed' : 'bg-[#184E77] text-white hover:bg-[#1E6091]'}`}
+			${props.disabled ? 'bg-btnPrimary text-black cursor-not-allowed' : 'bg-btnPrimary text-white hover:bg-[#1E6091]'}`}
 			disabled={props.disabled}
 		>
-			{IconComponent && <IconComponent className="mr-4 text-2xl" />}
+			{IconComponent && <IconComponent className={`mr-2 ml-2 text-2xl  `} />}
 			{props.label && <span className="text-2xl">{props.label}</span>}
 		</Component>
 	);
diff --git a/src/components/ListItem.css b/src/components/ListItem.css
deleted file mode 100644
index e42a39c..0000000
--- a/src/components/ListItem.css
+++ /dev/null
@@ -1,46 +0,0 @@
-.duesoon {
-	color: orange;
-	font-weight: bold;
-}
-
-.duekindofsoon {
-	color: yellow;
-	font-weight: bold;
-}
-
-.notduesoon {
-	color: green;
-	font-weight: bold;
-}
-
-.nolongeractive {
-	color: gray;
-	font-weight: bold;
-}
-
-.overdue {
-	color: red;
-	font-weight: bold;
-}
-.ListItem {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 10px 15px;
-	font-size: 16px;
-	margin-bottom: 10px;
-	border-radius: 8px;
-	transition: background-color 0.3s;
-}
-
-.ListItem button {
-	border: none;
-	border-radius: 4px;
-	padding: 8px 12px;
-	cursor: pointer;
-}
-
-.ListItem button:hover {
-	transform: scale(1.02);
-	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-}
diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
index 380c14c..a31538e 100644
--- a/src/components/ListItem.jsx
+++ b/src/components/ListItem.jsx
@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 import { useToggle } from '@uidotdev/usehooks';
 import { Toggle } from './Toggle.jsx';
 import { notify } from '../utils/notifications';
-import './ListItem.css';
 import { updateItem, deleteItem } from '../api/firebase.js';
 import { FaTrashAlt } from 'react-icons/fa';
 import { IconButton } from './IconButton.jsx';
@@ -20,6 +19,17 @@ export function ListItem({
 	const [purchased, setPurchased] = useToggle(false);
 	const [isDisabled, setIsDisabled] = useState(false);
 
+	// const formatDateLastPurchased = (dateLastPurchased) => {
+	// 	if (dateLastPurchased) {
+	// 		const date = dateLastPurchased.toDate();
+	// 		const year = date.getFullYear();
+	// 		const month = date.getMonth() + 1;
+	// 		const day = date.getDate();
+	// 		return `${month}/${day}/${year}`;
+	// 	}
+	// 	return 'n/a';
+	// };
+
 	useEffect(() => {
 		if (dateLastPurchased) {
 			const checkExpiration = () => {
@@ -79,29 +89,63 @@ export function ListItem({
 		}
 	};
 
-	const urgencyClass = sortCriteria.tag.toLowerCase().replace(/\s/g, '');
+	const urgencyMap = {
+		'Due soon': {
+			light: 'text-duesoon',
+			dark: 'dark:text-duesoondark',
+		},
+		'Due kind of soon': {
+			light: 'text-duekindofsoon',
+			dark: 'dark:text-duekindofsoondark',
+		},
+		'Not due soon': {
+			light: 'text-notduesoon',
+			dark: 'dark:text-notduesoondark',
+		},
+		Overdue: {
+			light: 'text-overdue',
+			dark: 'dark:text-overduedark',
+		},
+		'No longer active': {
+			light: 'text-nolongeractive',
+			dark: 'dark:text-nolongeractivedark',
+		},
+	};
+
+	const mode = localStorage.getItem('theme');
 
 	return (
 		<>
-			<div className="ListItem">
-				<Toggle
-					toggle={handleToggle}
-					on={purchased}
-					name={name}
-					isDisabled={isDisabled}
-					dateLastPurchased={dateLastPurchased}
-				/>
-				{name}
-
-				<div className={urgencyClass}>{sortCriteria.tag}</div>
+			<div className=" w-full relative flex  text-2xl items-center p-[10px] mb-[10px] rounded-lg transition-colors duration-300 min-w-0 ">
+				<div className="w-[30px]">
+					<Toggle
+						toggle={handleToggle}
+						on={purchased}
+						name={name}
+						isDisabled={isDisabled}
+						dateLastPurchased={dateLastPurchased}
+					/>
+				</div>
+				<div className="flex items-center justify-between w-full">
+					<div className=" grow mr-3">
+						<div className="break-all font-semibold">{name}</div>
+					</div>
 
-				<IconButton
-					aria-label={`Delete ${name}`}
-					as="button"
-					className="p-1"
-					IconComponent={FaTrashAlt}
-					onClick={handleDelete}
-				/>
+					<div className="flex items-center gap-4">
+						<div
+							className={`${urgencyMap[sortCriteria.tag][mode]} text-2xl inline-flex items-center rounded-md p-2 text-2xl font-semibold ring-1 ring-inset mr-6`}
+						>
+							{sortCriteria.tag}{' '}
+						</div>
+						<IconButton
+							aria-label={`Delete ${name}`}
+							as="button"
+							className="p-1  hover:scale-105 hover:shadow-md hover:shadow-black/20 transition-transform "
+							IconComponent={FaTrashAlt}
+							onClick={handleDelete}
+						/>
+					</div>
+				</div>
 			</div>
 		</>
 	);
diff --git a/src/components/ModalDialog.jsx b/src/components/ModalDialog.jsx
index cf6dda4..7c83411 100644
--- a/src/components/ModalDialog.jsx
+++ b/src/components/ModalDialog.jsx
@@ -24,12 +24,12 @@ export default function ModalDialog({ isOpen, onClose, children, title }) {
 								<div className="mt-3 text-center sm:mt-0 sm:text-left w-full">
 									<DialogTitle
 										as="h3"
-										className="text-2xl font-bold leading-6 text-gray-900"
+										className="text-3xl m-1 py-1 font-bold leading-6 text-txtPrimary"
 									>
 										{title}
 									</DialogTitle>
 									<div className="mt-2">
-										<p className="text-lg text-gray-500">{children}</p>
+										<p className="text-xl text-gray-500">{children}</p>
 									</div>
 								</div>
 							</div>
diff --git a/src/components/SingleList.css b/src/components/SingleList.css
deleted file mode 100644
index 1e528f0..0000000
--- a/src/components/SingleList.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.SingleList {
-	align-items: baseline;
-	display: flex;
-	flex-direction: row;
-	font-size: 1.2em;
-}
-
-.SingleList-label {
-	margin-left: 0.2em;
-}
diff --git a/src/components/SingleList.jsx b/src/components/SingleList.jsx
deleted file mode 100644
index 49d1885..0000000
--- a/src/components/SingleList.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import './SingleList.css';
-
-export function SingleList({ name, path, setListPath }) {
-	function handleClick() {
-		setListPath(path);
-	}
-
-	return (
-		<li className="SingleList">
-			<button onClick={handleClick}>{name}</button>
-		</li>
-	);
-}
diff --git a/src/components/Toggle.css b/src/components/Toggle.css
deleted file mode 100644
index f034b1b..0000000
--- a/src/components/Toggle.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.Toggle {
-	margin-right: 10px;
-	display: flex;
-	align-items: center;
-}
-
-.Toggle-checkbox {
-	accent-color: var(--color-accent);
-	margin-right: 10px;
-	cursor: pointer;
-}
-
-.Toggle-label {
-	font-size: 1em;
-}
-
-.Toggle-text {
-	margin-left: 5px;
-}
diff --git a/src/components/Toggle.jsx b/src/components/Toggle.jsx
index bc63351..a1ee278 100644
--- a/src/components/Toggle.jsx
+++ b/src/components/Toggle.jsx
@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import './Toggle.css';
 
 export function Toggle({ on, toggle, name, isDisabled }) {
 	const [message, setMessage] = useState('');
@@ -23,20 +22,20 @@ export function Toggle({ on, toggle, name, isDisabled }) {
 		}
 	};
 	return (
-		<div className="Toggle">
-			<label className="Toggle-label" htmlFor={name}>
+		<div className="flex items-center mr-2">
+			<label className="text-base" htmlFor={name}>
 				<input
 					type="checkbox"
 					id={name}
 					checked={on}
 					onChange={handleToggle}
 					onClick={handleClick}
-					className="Toggle-checkbox"
+					className="mr-2 cursor-pointer"
 					disabled={isDisabled}
 					aria-label={`Toggle purchase status for ${name}`}
 				/>
 			</label>
-			{message && <p className="Toggle-message">{message}</p>}
+			{message && <p className="ml-2">{message}</p>}
 		</div>
 	);
 }
diff --git a/src/components/index.js b/src/components/index.js
index 561a06a..c851539 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,2 +1 @@
 export * from './ListItem';
-export * from './SingleList';
diff --git a/src/context/ThemeContext.jsx b/src/context/ThemeContext.jsx
new file mode 100644
index 0000000..8daaa9e
--- /dev/null
+++ b/src/context/ThemeContext.jsx
@@ -0,0 +1,21 @@
+import { createContext, useContext, useState } from 'react';
+
+export const ThemeContext = createContext(null);
+
+export const useTheme = () => {
+	const context = useContext(ThemeContext);
+	return context;
+};
+
+export const ThemeProvider = ({ children }) => {
+	const initialTheme = localStorage.getItem('theme');
+	const [theme, setTheme] = useState(initialTheme || 'light');
+
+	return (
+		<ThemeContext.Provider value={{ theme, setTheme }}>
+			{children}
+		</ThemeContext.Provider>
+	);
+};
+
+//To do : Move Theme toggle logic from Layout jsx to here
diff --git a/src/views/AddItem.jsx b/src/views/AddItem.jsx
index 2a0b23f..5d4ac2a 100644
--- a/src/views/AddItem.jsx
+++ b/src/views/AddItem.jsx
@@ -60,7 +60,7 @@ export function AddItem({ listPath, data }) {
 	return (
 		<div className="container p-6 rounded-lg shadow-md">
 			<ToastContainer />
-			<h1 className="text-4xl text-txtPrimary font-semibold my-6 text-center">
+			<h1 className="text-4xl text-txtPrimary dark:text-txtPrimaryDark font-semibold my-6 text-center">
 				Manage Your Shopping List for{' '}
 				<span className="text-txtSecondary font-bold">{extractedListName}</span>
 			</h1>
@@ -68,7 +68,7 @@ export function AddItem({ listPath, data }) {
 				<div className="flex flex-col mb-4 items-center">
 					<label
 						htmlFor="itemName"
-						className="text-3xl text-txtPrimary font-semibold"
+						className="text-3xl text-txtPrimary dark:text-txtPrimaryDark font-semibold p-5"
 					>
 						Please enter an item name
 					</label>
@@ -78,11 +78,11 @@ export function AddItem({ listPath, data }) {
 						value={itemName}
 						onChange={(e) => setItemName(e.target.value)}
 						placeholder="Add an item name"
-						className="border border-gray-300 rounded-lg p-2 w-full focus:ring focus:ring-blue-300 focus:outline-none transition duration-150 ease-in-out hover:shadow-md"
+						className="border text-black border-gray-300 rounded-lg p-2 w-3/4 focus:ring focus:ring-blue-300 focus:outline-none transition duration-150 ease-in-out hover:shadow-md dark:border-gray-600 dark:placeholder-gray-400 dark:bg-gray-700 dark:text-white"
 					/>
 				</div>
 				<fieldset className="border border-gray-200 p-8 m-6 rounded-lg shadow-md">
-					<legend className="text-3xl text-txtPrimary mb-4 font-semibold">
+					<legend className="text-3xl text-txtPrimary dark:text-txtPrimaryDark mb-4 font-semibold">
 						How soon will you need to buy this item again?
 					</legend>
 					<div className="grid grid-cols-1 md:grid-cols-3 gap-10 justify-items-center items-center">
diff --git a/src/views/CreateList.jsx b/src/views/CreateList.jsx
index 359008e..e0aa6aa 100644
--- a/src/views/CreateList.jsx
+++ b/src/views/CreateList.jsx
@@ -43,7 +43,7 @@ export function CreateList({
 			onClose={() => setIsCreateListModalOpen(false)}
 			title={`Please enter a List Name`}
 			titleClassName="text-3xl font-bold"
-			className="p-8 rounded-lg shadow-lg bg-white max-w-lg mx-auto"
+			className="p-5 rounded-lg shadow-lg bg-white max-w-lg mx-auto"
 		>
 			<form onSubmit={handleSubmit}>
 				<input
@@ -51,7 +51,7 @@ export function CreateList({
 					type="text"
 					value={listName}
 					onChange={handleChange}
-					className="m-6 block w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-lg py-3 px-4"
+					className="m-6 block w-[90%] rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-lg py-3 px-4"
 					placeholder="Add a list"
 				></input>
 
diff --git a/src/views/Disclosure.css b/src/views/Disclosure.css
deleted file mode 100644
index f7128dd..0000000
--- a/src/views/Disclosure.css
+++ /dev/null
@@ -1,34 +0,0 @@
-/* .Accordion {
-	border: 1px solid #ccc;
-	border-radius: 4px;
-	margin-bottom: 10px;
-	width: 70%;
-	margin-left: auto;
-	margin-right: auto;
-}
-
-.Disclosure-header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	cursor: pointer;
-	padding: 10px;
-	border: none;
-	border-bottom: 1px solid #ccc;
-	width: 100%;
-	position: relative;
-}
-.Disclosure-header span {
-	flex-grow: 1;
-	text-align: center;
-}
-
-.list-item .share-icon {
-	margin-left: auto;
-	padding: 8px;
-	cursor: pointer;
-}
-
-.share-icon:hover {
-	transform: scale(1.2);
-} */
diff --git a/src/views/Disclosure.jsx b/src/views/Disclosure.jsx
index 4e7940f..2654ddb 100644
--- a/src/views/Disclosure.jsx
+++ b/src/views/Disclosure.jsx
@@ -1,29 +1,29 @@
-// Allows users to expand and collapse content sections.
-//key features: toggles visibility of child elements based on open/closed
-// Uses a button to trigger the toggle(responds to both mouse and keyboard clicks)
-// Displays icon to indicate expand/colapsed (feel free to change icon if u like)
-// Manages accessibitity through aria attributes
-
+import { FaShareAlt } from 'react-icons/fa';
+import { NavLink } from 'react-router-dom';
 import { useEffect, useState } from 'react';
-import './Disclosure.css';
+import { IconButton } from '../components/IconButton';
+import { Share } from './Share';
 
 export function Disclosure({
 	id,
 	children,
+	currentUserId,
 	listofNames,
 	iconExpanded,
 	iconCollapsed,
-	currentListPath,
+	selectedListPath,
 	listpath,
 	setListPath,
 }) {
-	const [isOpen, setIsOpen] = useState(listpath === currentListPath);
+	const [isOpen, setIsOpen] = useState(listpath === selectedListPath);
+	const [isShareModalOpen, setIsShareModalOpen] = useState(false);
+	console.log({ selectedListPath, listpath });
 
 	useEffect(() => {
-		if (currentListPath !== listpath) {
+		if (selectedListPath !== listpath) {
 			setIsOpen(false);
 		}
-	}, [currentListPath]);
+	}, [selectedListPath]);
 
 	const toggleDisclosure = (e) => {
 		e.preventDefault();
@@ -44,13 +44,17 @@ export function Disclosure({
 		}
 	};
 
+	const handleShareClick = () => {
+		setIsShareModalOpen(true);
+	};
+
 	return (
 		<div
-			className="border border-gray-300 rounded-md mb-2 w-[70%] mx-auto"
+			className="border border-gray-500 rounded-lg m-2 w-[90%] mx-auto shadow-md hover:shadow-lg"
 			id={id}
 		>
 			<button
-				className="flex items-center justify-between cursor-pointer p-2 border-b border-gray-300 w-full relative"
+				className="flex bg-list-gradient dark:bg-list-gradient-dark items-center gap-4 justify-between cursor-pointer p-2 border-b border-gray-500 w-full relative break-all rounded-lg "
 				id={`${id}-button`}
 				onClick={toggleDisclosure}
 				onKeyDown={handleKeyDown}
@@ -58,10 +62,30 @@ export function Disclosure({
 				aria-expanded={isOpen}
 			>
 				{isOpen ? iconExpanded : iconCollapsed}
-				<span className="flex-grow text-center">{listofNames}</span>
+				<span className="flex-grow text-center">{listofNames} </span>
+				<IconButton
+					aria-label="share list"
+					as={NavLink}
+					className="flex min-w-[87px] items-center justify-center cursor-pointer p-2 border border-gray-300 rounded-md transition-transform duration-200 ease-in-out hover:scale-110"
+					label="Share"
+					key={`icon-${listpath}`}
+					IconComponent={FaShareAlt}
+					onClick={() => handleShareClick(listpath)}
+				/>
 			</button>
+			{isShareModalOpen && (
+				<Share
+					isModalOpen={isShareModalOpen}
+					setIsModalOpen={setIsShareModalOpen}
+					listPath={selectedListPath}
+					currentUserId={currentUserId}
+				/>
+			)}
 			{isOpen && (
-				<div id={`${id}-content`} hidden={!isOpen}>
+				<div
+					id={`${id}-content`}
+					className={`overflow-hidden ${isOpen ? 'animate-slideDown' : 'animate-slideUp'}`}
+				>
 					{children}
 				</div>
 			)}
diff --git a/src/views/Home.css b/src/views/Home.css
deleted file mode 100644
index d9ac710..0000000
--- a/src/views/Home.css
+++ /dev/null
@@ -1,53 +0,0 @@
-.Home button {
-	border-radius: 5px;
-	padding: 8px 12px;
-	cursor: pointer;
-	border: 1px solid #ccc;
-	box-sizing: border-box;
-}
-
-input[type='text'] {
-	padding: 10px;
-	width: 70%;
-	margin-right: 10px;
-	font-size: 16px;
-	border: 1px solid #ccc;
-	border-radius: 5px;
-	box-sizing: border-box;
-	margin-top: 10px;
-}
-
-h1,
-h2,
-h3 {
-	margin-bottom: 20px;
-}
-
-label {
-	font-size: 20px;
-	font-weight: bold;
-	margin-bottom: 10px;
-	margin-top: 20px;
-}
-
-.list-container {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 10px 0;
-}
-
-.share-icon {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-	padding: 10px;
-	border: 1px solid #ccc;
-	border-radius: 4px;
-	transition: transform 0.2s ease-in-out;
-}
-
-.share-icon:hover {
-	transform: scale(1.2);
-}
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
index 1a7d583..9fb8c5e 100644
--- a/src/views/Home.jsx
+++ b/src/views/Home.jsx
@@ -1,31 +1,21 @@
-import { FaPlusSquare, FaShareAlt } from 'react-icons/fa';
+import { FaPlusSquare } from 'react-icons/fa';
 import { FaAngleRight, FaAngleDown } from 'react-icons/fa6';
-import { NavLink } from 'react-router-dom';
 import { useState } from 'react';
 import { Disclosure } from './Disclosure';
 import { List } from './List';
 import { IconButton } from '../components/IconButton';
-//import './Home.css';
-import { Share } from './Share';
 import { CreateList } from './CreateList';
 import { ToastContainer } from 'react-toastify';
 
-export function Home({ data, lists, listPath, setListPath, user }) {
+export function Home({ data, lists, selectedListPath, setListPath, user }) {
 	const userId = user?.uid;
 
 	const [isCreateListModalOpen, setIsCreateListModalOpen] = useState(false);
-	const [isShareModalOpen, setIsShareModalOpen] = useState(false);
-	const [currentListPath, setCurrentListPath] = useState('');
 
 	const handleCreateListClick = () => {
 		setIsCreateListModalOpen(true);
 	};
 
-	const handleShareClick = (listPath) => {
-		setCurrentListPath(listPath);
-		setIsShareModalOpen(true);
-	};
-
 	return (
 		<div className="Home flex flex-col space-y-2 p-4">
 			<ToastContainer />
@@ -62,33 +52,17 @@ export function Home({ data, lists, listPath, setListPath, user }) {
 									iconExpanded={<FaAngleDown />}
 									iconCollapsed={<FaAngleRight />}
 									listpath={list.path}
-									currentListPath={listPath}
+									selectedListPath={selectedListPath}
 									setListPath={setListPath}
+									currentUserId={userId}
 								>
 									<List data={data} listPath={list.path} />
 								</Disclosure>
 							</div>
-							<IconButton
-								aria-label="share list"
-								as={NavLink}
-								className="flex items-center justify-center cursor-pointer p-2 border border-gray-300 rounded-md transition-transform duration-200 ease-in-out hover:scale-110"
-								label="Share"
-								key={`icon-${list.path}`}
-								IconComponent={FaShareAlt}
-								onClick={() => handleShareClick(list.path)}
-							/>
 						</div>
 					))}
 				</ul>
 			)}
-			{isShareModalOpen && (
-				<Share
-					isModalOpen={isShareModalOpen}
-					setIsModalOpen={setIsShareModalOpen}
-					listPath={currentListPath}
-					currentUserId={userId}
-				/>
-			)}
 		</div>
 	);
 }
diff --git a/src/views/Layout.css b/src/views/Layout.css
deleted file mode 100644
index 5492ae8..0000000
--- a/src/views/Layout.css
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * The `env()` function used in this block of code
- * allows us to reference special variables that might be defined
- * by certain browsers. In this case, we are making sure that
- * the app stays within the 'safe' viewable area of a mobile phone,
- * and isn't covered up by the phone's UI.
- *
- * @see: https://developer.mozilla.org/en-US/docs/Web/CSS/env
- */
-.Layout {
-	display: flex;
-	flex-direction: column;
-	height: 100dvh;
-}
-
-.Layout > * {
-	padding-inline: min(5dvw, 3.2rem);
-}
-
-.Layout-header {
-	background-color: var(--color-bg);
-	padding-bottom: 0.5rem;
-	padding-top: max(env(safe-area-inset-top), 1rem);
-	text-align: center;
-}
-
-.Layout-header > h1 {
-	margin: 0;
-}
-
-.Layout-main {
-	margin: 0 auto;
-	padding-block: 0;
-	padding-block-end: 6.26rem;
-	width: min(72ch, 100%);
-}
-
-.Nav {
-	background-color: var(--color-bg);
-	border-top: 1px solid var(--color-border);
-	bottom: 0;
-	display: flex;
-	flex-direction: row;
-	padding-bottom: max(env(safe-area-inset-bottom), 1rem);
-	padding-top: 1rem;
-	place-content: center;
-	position: fixed;
-	width: 100%;
-}
-
-.Nav-container {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-evenly;
-	width: min(72ch, 100%);
-}
-
-.Nav-link {
-	--color-text: var(--color-accent);
-	background: none;
-	border: none;
-	color: var(--color-text);
-	font-size: 1.4em;
-	flex: 0 1 auto;
-	line-height: 1;
-	padding: 0.8rem;
-	text-align: center;
-	text-underline-offset: 0.1em;
-}
-
-.Nav-link.active {
-	text-decoration-thickness: 0.22em;
-	text-underline-offset: 0.1em;
-	background-color: var(--color-border);
-}
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
index f4860bd..ec6be22 100644
--- a/src/views/Layout.jsx
+++ b/src/views/Layout.jsx
@@ -13,7 +13,7 @@ import { useAuth, SignOutButton, SignInButton } from '../api/useAuth.jsx';
 import { auth } from '../api/config.js';
 import logo from '../assets/logo.png';
 import { useEffect } from 'react';
-//import './Layout.css';
+import { useTheme } from '../context/ThemeContext';
 
 /**
  * TODO: The links defined in this file don't work!
@@ -25,14 +25,16 @@ import { useEffect } from 'react';
 
 export function Layout() {
 	const { user } = useAuth();
+	const { theme, setTheme } = useTheme();
 
 	//Toggle dark/light mode
 	const toggleTheme = () => {
-		const currentTheme = localStorage.getItem('theme') || 'light';
+		const currentTheme = theme;
 		const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
 
 		//Toggle the dark class on the html element
 		document.documentElement.classList.toggle('dark', newTheme === 'dark');
+		setTheme(newTheme);
 		localStorage.setItem('theme', newTheme);
 	};
 
@@ -43,7 +45,7 @@ export function Layout() {
 	}, []);
 	return (
 		<>
-			<div className="flex flex-col min-h-screen">
+			<div className="flex flex-col min-h-screen bg-bgPrimary dark:bg-bgPrimaryDark ">
 				<header className="bg-bgPrimary dark:bg-bgPrimaryDark pb-4 pt-[max(env(safe-area-inset-top),1rem)] text-center">
 					{!!user && (
 						<div className="flex flex-col items-center justify-center">
@@ -53,7 +55,6 @@ export function Layout() {
 								className="w-64 sm:w-72 md:w-80 lg:w-96 h-auto mb-6 max-w-full rounded-lg shadow-sm transform hover:scale-105 transition-all duration-300 ease-in-out"
 							/>
 							<span className="text-txtPrimary dark:text-txtPrimaryDark">
-
 								Signed in as {auth.currentUser.displayName}
 							</span>
 						</div>
@@ -82,6 +83,7 @@ export function Layout() {
 								<IconButton
 									aria-label="View Lists"
 									as={NavLink}
+									className="aria-[current=page]:font-bold aria-[current=page]:underline"
 									IconComponent={FaList}
 									label="View Lists"
 									to="/"
@@ -89,6 +91,7 @@ export function Layout() {
 								<IconButton
 									aria-label="Add Item"
 									as={NavLink}
+									className="aria-[current=page]:font-bold aria-[current=page]:underline"
 									IconComponent={FaCartPlus}
 									label="Add Item"
 									to="/add-item"
@@ -104,6 +107,7 @@ export function Layout() {
 							<>
 								<IconButton
 									as={NavLink}
+									className="aria-[current=page]:font-bold aria-[current=page]:underline"
 									IconComponent={FaInfoCircle}
 									label="Developers"
 									to="/developers"
diff --git a/src/views/List.jsx b/src/views/List.jsx
index d0a355d..9ee7be9 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -1,3 +1,4 @@
+import { FaSearch } from 'react-icons/fa';
 import { useState } from 'react';
 import { ListItem } from '../components';
 import { comparePurchaseUrgency } from '../utils/dates.js';
@@ -23,23 +24,32 @@ export function List({ data, listPath }) {
 
 	return (
 		<>
-			<div>
-				<label htmlFor="search">Search Items </label>
-				<input
-					type="text"
-					id="search"
-					value={searchInput}
-					onChange={handleInputChange}
-					placeholder="Type to search..."
-				/>
-				{searchInput && (
-					<button onClick={clearSearchInput} aria-label="clear search">
-						X
-					</button>
-				)}
+			<div className="mx-auto max-w-lg ">
+				<label
+					htmlFor="default-search"
+					className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
+				>
+					Search dark:border-gray-600 dark:placeholder-gray-400 dark:text-white
+				</label>
+				<div className="relative flex items-center  border-gray-300  px-2 rounded-lg bg-gray-50 dark:bg-gray-700 focus:outline-none dark:border-gray-600 mt-6 dark:placeholder-gray-400 dark:text-white has-[input:focus-visible]:outline has-[input:focus-visible]:outline-blue-300">
+					<FaSearch className="  w-5 h-5 mt-[3px] text-gray-500" />
+					<input
+						className=" border border-none bg-transparent grow focus:outline-0 p-2 "
+						id="default-search"
+						onChange={handleInputChange}
+						type="text"
+						placeholder="Search Items"
+						value={searchInput}
+					/>
+					{searchInput && (
+						<button onClick={clearSearchInput} aria-label="clear search">
+							x
+						</button>
+					)}
+				</div>
 			</div>
 			{filterList.length ? (
-				<div>
+				<div className="w-[100%]">
 					{filterList.map((item) => (
 						<ListItem
 							key={item.id}
@@ -55,7 +65,9 @@ export function List({ data, listPath }) {
 					))}
 				</div>
 			) : (
-				<p>No items to display</p>
+				<p className="flex items-center justify-center m-10">
+					No items to display
+				</p>
 			)}
 		</>
 	);
diff --git a/src/views/Share.jsx b/src/views/Share.jsx
index 0417b9d..dc2fcdc 100644
--- a/src/views/Share.jsx
+++ b/src/views/Share.jsx
@@ -41,7 +41,7 @@ export function Share({
 					<div className="mb-10">
 						<label
 							htmlFor="recipientEmail"
-							className="block text-2xl font-medium text-gray-800"
+							className="block text-2xl font-medium text-gray-800 mb-6"
 						>
 							{' '}
 							Please enter the email to share your list:{' '}
diff --git a/tailwind.config.js b/tailwind.config.js
index 6c40c6b..e24bf9d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,8 +5,9 @@ export default {
 	theme: {
 		extend: {
 			colors: {
+				bgAccent: '#D9ED92', //Accent color for disclosures
 				btnPrimary: '#184E77', // Primary color for Buttons
-				bgPrimary: '#99D98C', // Primary color for Backgrounds
+				bgPrimary: '#daf7dc', // Primary color for Backgrounds
 				bgSecondary: '#34A0A4', // Accent color for NavBar
 				txtPrimary: '#184E77', // Primary color Text
 				txtSecondary: '#34A0A4', // Secondary color Text
@@ -15,10 +16,38 @@ export default {
 				bgSecondaryDark: '#2C2C2C', // Dark secondary color
 				txtPrimaryDark: '#FFFFFF', // Light text color
 				txtSecondaryDark: '#A0A0A0', // Secondary light text color
+				//Purchase Urgency Colors
+				duesoondark: '#F79720',
+				duekindofsoondark: '#E3DB02',
+				notduesoondark: '#4ED91C',
+				nolongeractivedark: '#A0A0A0',
+				overduedark: '#DB1212',
+				duesoon: ' #C76D00',
+				duekindofsoon: '#A29B00',
+				notduesoon: ' #2C5E02',
+				nolongeractive: ' #6B6B6B',
+				overdue: '#9C0F0F',
 			},
 			backgroundImage: {
 				'radio-gradient':
 					'linear-gradient(to top, #34A0A4, #168AAD, #1A759F, #1E6091, #184E77)',
+				'list-gradient': 'radial-gradient(circle, #daf7dc, #A4D7E1)',
+				'list-gradient-dark':
+					'radial-gradient(circle, #184E77, #1A759F, #168AAD)',
+			},
+			keyframes: {
+				slideDown: {
+					'0%': { maxHeight: '0px', opacity: '0' },
+					'100%': { maxHeight: '1000px', opacity: '2' },
+				},
+				slideUp: {
+					'0%': { maxHeight: '1000px', opacity: '2' },
+					'100%': { maxHeight: '0px', opacity: '0' },
+				},
+			},
+			animation: {
+				slideDown: 'slideDown 0.5s ease-in-out forwards',
+				slideUp: 'slideUp 0.5s ease-in-out forwards',
 			},
 		},
 	},