diff --git a/public/img/Home-cover2.jpg b/public/img/Home-cover2.jpg
new file mode 100644
index 0000000..c8c44d4
Binary files /dev/null and b/public/img/Home-cover2.jpg differ
diff --git a/src/App.jsx b/src/App.jsx
index dc3067e..578ed79 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -54,6 +54,7 @@ export function App() {
 							<Home
 								data={lists}
 								setListPath={setListPath}
+								listPath={listPath}
 								userId={userId}
 								userEmail={userEmail}
 							/>
diff --git a/src/api/firebase.js b/src/api/firebase.js
index 216b1d2..9081001 100644
--- a/src/api/firebase.js
+++ b/src/api/firebase.js
@@ -8,6 +8,7 @@ import {
 	updateDoc,
 	addDoc,
 	increment,
+	arrayRemove,
 	deleteDoc,
 } from 'firebase/firestore';
 import { useEffect, useState } from 'react';
@@ -224,6 +225,18 @@ export async function deleteItem(listPath, itemId) {
 	const docRef = doc(db, listPath, 'items', itemId);
 	await deleteDoc(docRef);
 }
+// delete collection path
+export async function deleteList(listPath, email) {
+	const docRef = doc(db, listPath);
+
+	const userDocRef = doc(db, 'users', email);
+
+	await deleteDoc(docRef);
+
+	await updateDoc(userDocRef, {
+		sharedLists: arrayRemove(docRef),
+	});
+}
 
 export async function comparePurchaseUrgency(dataset) {
 	dataset.sort((a, b) => {
diff --git a/src/components/SingleList.css b/src/components/SingleList.css
index 1e528f0..1dc5ead 100644
--- a/src/components/SingleList.css
+++ b/src/components/SingleList.css
@@ -8,3 +8,7 @@
 .SingleList-label {
 	margin-left: 0.2em;
 }
+.selected {
+	background-color: #000000;
+	color: #e69500;
+}
diff --git a/src/components/SingleList.jsx b/src/components/SingleList.jsx
index dcbbb17..8eb20bc 100644
--- a/src/components/SingleList.jsx
+++ b/src/components/SingleList.jsx
@@ -1,26 +1,35 @@
+import React from 'react';
 import './SingleList.css';
+import { MdOutlineDeleteForever } from 'react-icons/md';
+import { deleteList } from '../api';
 import { Button } from '@mui/material';
 
-export function SingleList({ name, path, setListPath }) {
-	function handleClick() {
+export function SingleList({ name, path, setListPath, listPath, email }) {
+	// Function to handle selecting a list
+	const handleClick = () => {
 		setListPath(path);
-		localStorage.setItem('list', name);
-	}
+	};
+
+	// Function to handle deleting a list
+	const handleDelete = async () => {
+		const listPath = '/' + path;
+		await deleteList(listPath, email);
+		localStorage.setItem('tcl-shopping-list-path', '');
+		window.location.reload();
+	};
 
 	return (
-		<li className="SingleList">
-			<Button
-				style={{
-					color: ' #113f67',
-					backgroundColor: '#e7eaf6',
-					margin: '10px',
-					textTransform: 'capitalize',
-				}}
-				variant="contained"
-				onClick={handleClick}
-			>
-				<span className="text-lg font-bold">{name}</span>
-			</Button>
-		</li>
+		<div
+			className={`flex items-center justify-between ${path === listPath ? 'selected' : ''}`}
+		>
+			<li className="SingleList">
+				<button onClick={handleClick}>{name}</button>
+			</li>
+			<hr />
+			<MdOutlineDeleteForever
+				className="text-red-700 cursor-pointer"
+				onClick={handleDelete}
+			/>
+		</div>
 	);
 }
diff --git a/src/views/Home.css b/src/views/Home.css
index e69de29..1d6331e 100644
--- a/src/views/Home.css
+++ b/src/views/Home.css
@@ -0,0 +1,34 @@
+.home {
+	background: rgba(255, 255, 255, 0.24);
+	border-radius: 16px;
+	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+	backdrop-filter: blur(4.7px);
+	-webkit-backdrop-filter: blur(4.7px);
+	border: 1px solid rgba(255, 255, 255, 0.3);
+	@apply rounded-2xl shadow-2xl px-4 md:px-24 text-black mt-8;
+}
+#list {
+	@apply mt-8 flex flex-col justify-center items-center;
+}
+.input {
+	@apply border border-blue-700 text-black bg-white p-3 rounded-xl;
+	width: 70%;
+}
+.btn {
+	background-color: #113767;
+	@apply text-white p-3 rounded-xl shadow-md mb-8 cursor-pointer;
+}
+:hover .btn {
+	background-color: #38598b;
+}
+
+/* ..........................small screen................ */
+@media only screen and (max-width: 600px) {
+	.btn,
+	.singleList {
+		font-size: 14px !important;
+	}
+	.input {
+		width: 100%;
+	}
+}
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
index 474acf2..851729b 100644
--- a/src/views/Home.jsx
+++ b/src/views/Home.jsx
@@ -1,31 +1,25 @@
+import React, { useState } from 'react';
 import { SingleList } from '../components/SingleList';
 import './Home.css';
 import { createList } from '../api/firebase';
-import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Button } from '@mui/material';
 
-export function Home({ data, setListPath, userId, userEmail }) {
+export function Home({ data, listPath, setListPath, userId, userEmail }) {
 	const [name, setName] = useState('');
 	const navigate = useNavigate();
 
 	const handleSubmit = async (event) => {
-		event.preventDefault(); // Prevent the default form submission behavior.
+		event.preventDefault();
 
 		try {
 			const newList = await createList(userId, userEmail, name);
-			setListPath(newList); // creates a new list and automatically creates the userId
-			// that tracks the purchased item and also saves it to local storage
-
-			setName(''); //refreshes the form after submission place takes it back to the default state
-
-			alert('The item has been added.'); //alert message
-
-			navigate('/list'); // navigate to list page
+			setListPath(newList);
+			setName('');
+			alert('The item has been added.');
+			navigate('/list');
 		} catch (err) {
 			console.error(err);
-
-			alert('item not created'); //alert message if there is an error with creating the item
+			alert('Item not created');
 		}
 	};
 
@@ -34,34 +28,35 @@ export function Home({ data, setListPath, userId, userEmail }) {
 	};
 
 	return (
-		<div className="Home flex flex-col items-center">
+		<div className="home">
 			<form id="list" onSubmit={handleSubmit}>
-				<div className="flex">
-					<label htmlFor="listName">Name of shopping list: </label>
-					<br />
-					<input
-						type="text"
-						id="listName"
-						value={name}
-						onChange={handleChange}
-						required
-					/>
-				</div>
+				<label htmlFor="listName" className="pt-8 font-bold text-center">
+					Kindly generate a shopping List
+				</label>
+				<br />
+				<input
+					type="text"
+					id="listName"
+					value={name}
+					onChange={handleChange}
+					className="input"
+					placeholder="Type Here..."
+					required
+				/>
 				<br />
-				<div className="flex items-center justify-center">
-					<Button type="submit" variant="contained">
-						{' '}
-						<span className="text-lg font-bold">Create list</span>
-					</Button>
+				<div className="btn">
+					<button type="submit">Register List</button>
 				</div>
 			</form>
-			<ul className="flex flex-col justify-start w-full pt-9">
+			<ul>
 				{data?.map((item) => (
 					<SingleList
 						key={item.path}
 						name={item.name}
+						email={userEmail}
 						path={item.path}
 						setListPath={setListPath}
+						listPath={listPath} // Pass listPath to SingleList
 					/>
 				))}
 			</ul>
diff --git a/src/views/Layout.css b/src/views/Layout.css
index c35138b..1310348 100644
--- a/src/views/Layout.css
+++ b/src/views/Layout.css
@@ -11,6 +11,10 @@
 	display: flex;
 	flex-direction: column;
 	height: 100dvh;
+	background-image: url('/img/Home-cover2.jpg') !important;
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
 }
 
 .Layout > * {
@@ -19,7 +23,9 @@
 .Layout-header {
 	background-color: var(--color-bg);
 	text-align: center;
-	background-color: #e7eaf6;
+
+	@apply flex flex-col justify-center items-center;
+
 }
 
 .Layout-header > .login-user {
@@ -85,3 +91,8 @@
 	text-decoration-thickness: 0.22em;
 	text-underline-offset: 0.1em;
 }
+.btn1 {
+	background-color: #a2a8d3;
+	width: 10%;
+	@apply p-1 lg:p-3 rounded-xl shadow-md font-bold text-black ml-4;
+}
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
index e0458cc..41030be 100644
--- a/src/views/Layout.jsx
+++ b/src/views/Layout.jsx
@@ -1,5 +1,4 @@
 import { Outlet } from 'react-router-dom';
-
 import './Layout.css';
 import { FaShoppingBag, FaUser, FaUserMinus } from 'react-icons/fa';
 import { auth } from '../api/config.js';
@@ -21,6 +20,7 @@ export function Layout() {
 		<>
 			<div className="Layout">
 				<header className="Layout-header">
+
 					<div className="login-user">
 						{!user ? (
 							<div className="flex justify-end gap-5 items-center">
@@ -41,6 +41,7 @@ export function Layout() {
 						<FaShoppingBag />
 						<h1>Smart Shopping List</h1>
 					</div>
+
 				</header>
 				<nav className="Nav">
 					<div className="Nav-container">