diff --git a/src/App.jsx b/src/App.jsx
index 38f7126..7e9ac82 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -59,7 +59,7 @@ export function App() {
 					/>
 					<Route
 						path="/list/:path/:path"
-						element={<List listPath={listPath} data={data} />}
+						element={<List data={data} lists={lists} listPath={listPath} />}
 					/>
 					<Route
 						path="/manage-list"
diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx
index 5b1b123..3ef5ff6 100644
--- a/src/api/useAuth.jsx
+++ b/src/api/useAuth.jsx
@@ -21,7 +21,13 @@ export const SignInButton = () => (
  * A button that signs the user out of the app using Firebase Auth.
  */
 export const SignOutButton = () => (
-	<button type="button" onClick={() => auth.signOut()}>
+	<button
+		type="button"
+		onClick={() => {
+			auth.signOut();
+			localStorage.clear();
+		}}
+	>
 		Sign Out
 	</button>
 );
diff --git a/src/pictures/addFirstItem.png b/src/pictures/addFirstItem.png
new file mode 100644
index 0000000..65fb455
Binary files /dev/null and b/src/pictures/addFirstItem.png differ
diff --git a/src/views/List.css b/src/views/List.css
new file mode 100644
index 0000000..84621a0
--- /dev/null
+++ b/src/views/List.css
@@ -0,0 +1,17 @@
+.containerAddItem {
+	display: flex;
+	flex-direction: column;
+}
+
+.addItemGif {
+	border: 1px solid #ddd;
+	border-radius: 4px;
+	padding: 5px;
+	box-shadow: 0 0 2px 1px rgba(66, 69, 70, 0.5);
+	width: 500px;
+}
+
+#addFirstItem {
+	margin-top: 10px;
+	width: fit-content;
+}
diff --git a/src/views/List.jsx b/src/views/List.jsx
index a7d544f..1131911 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -1,13 +1,16 @@
 import { useState, useEffect } from 'react';
 import { ListItem } from '../components';
 import SearchList from '../components/SearchList';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { updateItem } from '../api/firebase';
 import { isMoreThanADayAgo } from '../utils';
+import './List.css';
+import addFirstItem from '../pictures/addFirstItem.png';
 
-export function List({ data, listPath }) {
+export function List({ data, lists, listPath }) {
 	const [newList, setNewList] = useState([]);
 	const { path } = useParams();
+	const navigate = useNavigate();
 
 	useEffect(() => {
 		setNewList(data);
@@ -29,21 +32,57 @@ export function List({ data, listPath }) {
 			<h2>
 				You are on the <code>{path}</code> list!
 			</h2>
-			<SearchList data={data} setNewList={setNewList} />
-			<ul>
-				{newList.map((item) => (
-					<ListItem
-						dateLastPurchased={item.dateLastPurchased}
-						isRecentlyPurchased={wasRecentlyPurchased(item)}
-						itemId={item.id}
-						key={item.id}
-						listPath={listPath}
-						name={item.name}
-						purchaseDate={item.dateLastPurchased}
-						updatePurchaseDate={updatePurchaseDate}
+			{data.length === 0 && lists.length === 1 && (
+				<div className="containerAddItem">
+					<p>Well done! You have created your very first list!</p>
+					<p>
+						You can now add some items and specify when you need to purchase
+						them. In the box for "Add item" you put the item you need to
+						purchase and then select how soon you need it on "When do I need it"
+					</p>
+					<img
+						className="addItemPNG"
+						src={addFirstItem}
+						alt="add item example"
 					/>
-				))}
-			</ul>
+
+					<button id="addFirstItem" onClick={() => navigate('/manage-list')}>
+						Start adding items!
+					</button>
+				</div>
+			)}
+			{data.length === 0 && lists.length > 1 && (
+				<div className="containerAddItem">
+					<p>Well done! You have created a new list!</p>
+					<p>
+						You can now add some items and specify when you need to purchase
+						them.
+					</p>
+
+					<button id="addFirstItem" onClick={() => navigate('/manage-list')}>
+						Start adding items!
+					</button>
+				</div>
+			)}
+			{data.length > 0 && (
+				<div>
+					<SearchList data={data} setNewList={setNewList} />
+					<ul>
+						{newList.map((item) => (
+							<ListItem
+								dateLastPurchased={item.dateLastPurchased}
+								isRecentlyPurchased={wasRecentlyPurchased(item)}
+								itemId={item.id}
+								key={item.id}
+								listPath={listPath}
+								name={item.name}
+								purchaseDate={item.dateLastPurchased}
+								updatePurchaseDate={updatePurchaseDate}
+							/>
+						))}
+					</ul>
+				</div>
+			)}
 		</>
 	);
 }
diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx
index a0cdc87..bf45752 100644
--- a/src/views/ManageList.jsx
+++ b/src/views/ManageList.jsx
@@ -83,13 +83,13 @@ export function ManageList({ listPath, userId, userEmail }) {
 				</label>
 				<label htmlFor="time-select">When do I need it?</label>
 				<select name="time" id="time-select">
-					<option value="soon">Soon</option>
-					<option value="soonIsh">Soon-ish</option>
-					<option value="notSoon">Not soon</option>
+					<option value="soon">Soon (within 7 days)</option>
+					<option value="soonIsh">Soon-ish (in 14 days)</option>
+					<option value="notSoon">Not soon (in 30 days)</option>
 				</select>
 				<button type="submit">Submit</button>
 			</form>
-			<hr />
+			<hr></hr>
 			<form method="post" onSubmit={sendInvite}>
 				<label htmlFor="email">
 					Share List with another user