diff --git a/src/components/NavigationBarSingleList.jsx b/src/components/NavigationBarSingleList.jsx
index 3177cb0..e298ed8 100644
--- a/src/components/NavigationBarSingleList.jsx
+++ b/src/components/NavigationBarSingleList.jsx
@@ -22,16 +22,19 @@ export function NavigationBarSingleList({
 		window.location.pathname.substring(
 			window.location.pathname.lastIndexOf('/') + 1,
 		) === 'list';
-	const localStorageListName = localStorage
-		.getItem('tcl-shopping-list-path')
-		.substring(
-			localStorage.getItem('tcl-shopping-list-path').lastIndexOf('/') + 1,
-		);
+
+	const localStorageListName =
+		localStorage
+			?.getItem('tcl-shopping-list-path')
+			?.substring(
+				localStorage.getItem('tcl-shopping-list-path').lastIndexOf('/') + 1,
+			) || '';
 
 	return (
 		<li
-			className={`flex-grow justify-between xsm:px-2 sm:pl-4 mx-1 h-12 xsm:bg-appBg sm:bg-list rounded-lg shadow-sm mt-4 hover:bg-[#EBF5FF] hover:bg-opacity-85 ${windowLocationListPath && localStorageListName === name ? 'bg-[#EBF5FF] bg-opacity-85' : null}`}
+			className={`flex-grow justify-between px-6 h-12 bg-list rounded-lg shadow-sm mt-4 hover:bg-[#ebf5ff] hover:bg-opacity-85 ${windowLocationListPath && localStorageListName === name ? 'bg-[#ebf5ff] bg-opacity-85' : null}`}
 		>
+			{/*The above hex code (#ebf5ff) only worked in the ternary operator in lowercase format, not uppercase.*/}
 			{/* Using Link instead of button */}
 			<Link
 				to="/list"
@@ -48,5 +51,3 @@ export function NavigationBarSingleList({
 		</li>
 	);
 }
-
-// <... className={`flex items-center space-x-2 px-4 py-5 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 border-l-4 border-white ${window.location.pathname === '/' ? 'border-red-200' : ''}`}>