diff --git a/src/App.jsx b/src/App.jsx
index f72f01e..67a849a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -57,7 +57,7 @@ export function App() {
 					className: '',
 					duration: 5000,
 					style: {
-						marginBottom: '33px',
+						marginBottom: '9rem',
 						background: '#FEFAE0',
 						color: '#13310D',
 					},
diff --git a/src/components/ListItem.css b/src/components/ListItem.css
index c244c95..84e1c88 100644
--- a/src/components/ListItem.css
+++ b/src/components/ListItem.css
@@ -1,5 +1,5 @@
 .ListItem {
-	width: 400px;
+	width: 100%;
 	align-items: center;
 	display: flex;
 	flex-direction: row;
@@ -8,6 +8,12 @@
 	background-color: var(--color-accent-primary-alt);
 	padding: 1em 0.5em;
 	border-radius: 7px;
+	transition: transform 0.2s ease-in-out;
+}
+
+.ListItem:hover {
+	transform: scale(1.05);
+	transition: transform 0.2s ease-in-out;
 }
 
 .ListItem-checkbox {
@@ -17,7 +23,7 @@
 
 .ListItem-label {
 	margin-left: 0.2em;
-	width: 360px;
+	width: 80%;
 }
 label {
 	padding-inline: 0.3em;
@@ -31,12 +37,31 @@ label {
 	background-color: var(--color-accent-primary);
 }
 
+.ListItem:has(input[type='checkbox']:focus-visible) {
+	text-decoration: line-through;
+	color: var(--color-accent-primary);
+	border: 2px solid var(--color-text);
+}
+
+.list-item-name {
+	display: block;
+}
+.list-item-urgency {
+	display: block;
+	text-transform: uppercase;
+	font-size: 1.4rem;
+}
+
 .bin {
 	cursor: pointer;
 	margin-left: auto;
 	min-width: 24px;
 }
 
+.bin:hover {
+	color: red;
+}
+
 input[type='checkbox'] {
 	position: relative;
 	appearance: none;
@@ -49,7 +74,7 @@ input[type='checkbox'] {
 	cursor: pointer;
 }
 /* modal.css */
-
+/*
 .btns {
 	display: flex;
 	justify-content: center;
@@ -66,4 +91,50 @@ input[type='checkbox'] {
 
 .btns button:nth-child(2) {
 	margin-left: 2em;
+} */
+.modal-delete {
+	text-align: center;
+	color: #11310d;
+	width: 80vw;
+	max-width: 400px;
+	height: 50vh;
+	max-height: 270px;
+	margin: auto;
+	position: absolute;
+	top: 40px;
+	left: 40px;
+	right: 40px;
+	bottom: 40px;
+	border: 2px solid #3f5b37;
+	background: #eef1d8;
+	overflow: auto;
+	-webkit-overflow-scrolling: touch;
+	border-radius: 4px;
+	outline: none;
+	padding: 20px;
+}
+
+.modal-delete button {
+	background-color: #3f5b37;
+	color: #fefae0;
+	padding: 0.8rem 1.5rem;
+	border: 2px solid transparent;
+	border-radius: 7px;
+	font-size: 1.5rem;
+	letter-spacing: 0.1rem;
+	text-transform: uppercase;
+	outline: none;
+	margin-right: 20px;
+}
+.modal-delete button:hover,
+.modal-delete button:active {
+	background-color: #11310d;
+	cursor: pointer;
+}
+
+.modal-delete button:focus-visible {
+	background-color: #fefae0;
+	color: #11310d;
+	border: 2px solid #11310d;
+	font-weight: bold;
 }
diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
index 9e584ba..d301184 100644
--- a/src/components/ListItem.jsx
+++ b/src/components/ListItem.jsx
@@ -51,17 +51,6 @@ export function ListItem({ name, itemId, dateLastPurchased, urgency }) {
 		}
 	};
 
-	const modalStyle = {
-		content: {
-			textAlign: 'center',
-			color: '#11310d',
-			width: '400px',
-			height: '270px',
-			margin: 'auto',
-		},
-		overlay: {},
-	};
-
 	return (
 		<li className={`ListItem ${checked ? 'checked' : ''}`}>
 			<input
@@ -74,14 +63,15 @@ export function ListItem({ name, itemId, dateLastPurchased, urgency }) {
 			/>
 
 			<label className="ListItem-label" htmlFor={name}>
-				{name} - {urgency}
+				<span class="list-item-name">{name}</span>
+				<span class="list-item-urgency">{urgency}</span>
 			</label>
 
 			<ImBin className="bin" onClick={openModal} />
 
 			{/* modal  */}
 			<Modal
-				style={modalStyle}
+				className="modal-delete"
 				isOpen={modalStatus}
 				onRequestClose={closeModal}
 			>
diff --git a/src/index.css b/src/index.css
index 93c1ca6..996c899 100644
--- a/src/index.css
+++ b/src/index.css
@@ -99,23 +99,6 @@ button:focus-visible {
 	font-weight: bold;
 }
 
-.switch-btn {
-	background: none;
-	margin-top: 0;
-	text-transform: none;
-	color: var(--color-text);
-	font-family: Poppins, arial, sans-serif;
-	font-size: 1.45em;
-	flex: 0 1 auto;
-	padding: 0.8rem;
-	text-align: center;
-	text-decoration: none;
-	outline: none;
-}
-.switch-btn:hover {
-	background-color: initial;
-}
-
 input[type='text'] {
 	border: 2px solid var(--color-accent-primary);
 	border-radius: 7px;
@@ -129,5 +112,5 @@ input[type='text'] {
 input[type='text']:focus,
 input[type='text']:active {
 	border: 2px solid var(--color-text);
-	background-color: var(--lm-light-green);
+	background-color: var(--color-accent-secondary-alt);
 }
diff --git a/src/views/Layout.css b/src/views/Layout.css
index 58036e7..1f209d9 100644
--- a/src/views/Layout.css
+++ b/src/views/Layout.css
@@ -22,16 +22,22 @@
 .Layout-header {
 	background-color: var(--color-accent-primary);
 	position: sticky;
-	text-align: center;
 	top: 0;
+	min-height: 7rem;
+	display: flex;
+	align-items: center;
+	text-align: left;
+	width: 100%;
 }
 .Layout-header h1 {
 	color: var(--color-text);
-	margin: 1rem 0;
+	margin: 1rem;
+	font-size: 2rem;
 }
+
 #dark-mode-switcher {
 	position: absolute;
-	right: 20px;
+	right: 10px;
 	top: 8px;
 }
 
@@ -44,20 +50,21 @@
 }
 
 .Nav {
-	align-items: stretch;
 	background-color: var(--color-accent-primary);
 	bottom: 0;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-around;
+	align-items: center;
 	margin-top: auto;
 	position: sticky;
-	padding: 1rem;
+	padding: 0;
+	min-height: 7rem;
 }
 
 .Nav-link {
 	color: var(--color-text);
-	font-size: 1.45em;
+	font-size: 1.2em;
 	flex: 0 1 auto;
 	padding: 0.8rem;
 	text-align: center;
@@ -68,6 +75,50 @@
 .Nav-link.active {
 	font-weight: bold;
 }
-.Nav-link:focus-visible {
+.switch-btn {
+	background: none;
+	margin-top: 0;
+	text-transform: none;
+	color: var(--color-text);
+	text-decoration: none;
+	outline: none;
+}
+.switch-btn:hover {
+	background-color: initial;
+}
+
+.Nav-link:focus-visible,
+.switch-btn:focus-visible {
 	text-decoration: underline;
+	background-color: initial;
+	border: none;
+	font-weight: bold;
+}
+
+@media (min-width: 400px) {
+	.Layout-header h1 {
+		font-size: 2.5rem;
+		margin: 1rem 1.5rem;
+	}
+	.Nav-link {
+		font-size: 1.45em;
+	}
+	.Nav {
+		align-items: stretch;
+		padding: 1rem;
+	}
+}
+@media (min-width: 600px) {
+	.Layout-header {
+		justify-content: center;
+	}
+	.Layout-header h1 {
+		font-size: 3rem;
+	}
+}
+@media (min-width: 768px) {
+	.Layout-header h1 {
+		text-align: center;
+		font-size: 3rem;
+	}
 }
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
index 6458bd3..55a7299 100644
--- a/src/views/Layout.jsx
+++ b/src/views/Layout.jsx
@@ -4,18 +4,17 @@ import './Layout.css';
 import { DarkMode } from '../components/DarkModeToggle';
 
 export function Layout({ token }) {
-
 	const handleSwitchToken = () => {
 		localStorage.removeItem('tcl-shopping-list-token');
 		window.location.replace('/');
-  }
-  
+	};
+
 	const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
 	const [isChecked, setChecked] = useState(prefersDarkMode.matches);
 	const onChange = () => {
 		setChecked((prevChecked) => !prevChecked);
 	};
-  
+
 	return (
 		<>
 			<div className="Layout" id={isChecked ? 'theme-dark' : 'theme-light'}>
@@ -31,7 +30,10 @@ export function Layout({ token }) {
 				<nav className="Nav">
 					{token ? (
 						<>
-							<button className="switch-btn" onClick={handleSwitchToken}>
+							<button
+								className="switch-btn Nav-link"
+								onClick={handleSwitchToken}
+							>
 								Switch List
 							</button>
 							<NavLink to="/list" className="Nav-link">
diff --git a/src/views/List.css b/src/views/List.css
index bf6bd99..9a56de8 100644
--- a/src/views/List.css
+++ b/src/views/List.css
@@ -1,8 +1,7 @@
 .list-container {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
+	width: 95vw;
+	margin: auto;
+	max-width: 600px;
 }
 
 .search-bar {
@@ -13,7 +12,7 @@
 	justify-content: space-between;
 	align-items: center;
 	padding: 0.5rem 0.8rem;
-	width: 350px;
+	width: 100%;
 	border-radius: 7px;
 }
 
@@ -35,12 +34,19 @@
 	width: 100%;
 }
 
+.token-copy {
+	text-align: center;
+}
 .token-copy p {
 	margin-bottom: 0;
 }
 
+.paste-icon:hover {
+	cursor: pointer;
+}
+
 ul {
-	width: 80%;
+	width: 100%;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
diff --git a/src/views/List.jsx b/src/views/List.jsx
index 0d6af50..c76464a 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -3,6 +3,7 @@ import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { FiSearch } from 'react-icons/fi';
+import { ImPaste } from 'react-icons/im';
 import './List.css';
 
 export function List({ data, token }) {
@@ -56,7 +57,10 @@ export function List({ data, token }) {
 									{token}
 								</em>
 							</CopyToClipboard>{' '}
-							to share your shopping list
+							<CopyToClipboard text={token}>
+								<ImPaste className="paste-icon" />
+							</CopyToClipboard>{' '}
+							to share your shopping list{' '}
 						</p>
 					</div>
 					<ul>