diff --git a/src/components/CreateList.tsx b/src/components/CreateList.tsx
index 673c4f2..9a651c9 100644
--- a/src/components/CreateList.tsx
+++ b/src/components/CreateList.tsx
@@ -48,8 +48,9 @@ export function CreateList({ user, setListPath }: Props) {
 	return (
 		<>
 			<Form onSubmit={handleSubmit}>
-				<h3>Create New Shopping List</h3>
-				<Form.Label htmlFor="newListName">Name Your List</Form.Label>
+				<h3 className="heading-text">
+					<Form.Label htmlFor="newListName">Create A New List</Form.Label>
+				</h3>
 				<InputGroup>
 					<br />
 					<Form.Control
@@ -62,7 +63,11 @@ export function CreateList({ user, setListPath }: Props) {
 						aria-required="true" // Indicates that this field is required
 					/>
 					<br />
-					<Button aria-label="Create new shopping list">Create List</Button>
+					<div className="custom-button-wrapper">
+						<Button aria-label="Create new shopping list" type="submit">
+							Create List
+						</Button>
+					</div>
 				</InputGroup>
 			</Form>
 		</>
diff --git a/src/components/SingleList.scss b/src/components/SingleList.scss
index 1e528f0..5e6a256 100644
--- a/src/components/SingleList.scss
+++ b/src/components/SingleList.scss
@@ -1,10 +1,15 @@
+@use "../styles/mixins.scss" as *;
+@import "../views/unauthenticated/UnauthenticatedHome.scss";
+
 .SingleList {
-	align-items: baseline;
-	display: flex;
-	flex-direction: row;
-	font-size: 1.2em;
+	@extend .custom-button-wrapper;
+	list-style-type: none;
 }
 
-.SingleList-label {
-	margin-left: 0.2em;
+.SingleList button {
+	width: 100%;
+	margin: 5px;
+	@include tablet {
+		margin: 5px;
+	}
 }
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
new file mode 100644
index 0000000..a7823c2
--- /dev/null
+++ b/src/styles/_mixins.scss
@@ -0,0 +1,12 @@
+// ====== MEDIA ========
+@mixin tablet {
+	@media (min-width: 768px) {
+		@content;
+	}
+}
+
+@mixin mobile {
+	@media (min-width: 375px) {
+		@content;
+	}
+}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 3843aba..d313fbd 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -2,3 +2,4 @@
 $primary-beige: #f1e6cc;
 $primary-blue: #3f6476;
 $secondary-blue: #001f3f;
+$light-blue: #356481;
diff --git a/src/views/Home.scss b/src/views/Home.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/views/Home.tsx b/src/views/Home.tsx
index 76de1d7..3a8c9e8 100644
--- a/src/views/Home.tsx
+++ b/src/views/Home.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import "./Home.scss";
 import { List, User } from "../api";
 import { AuthenticatedHome, UnauthenticatedHome } from "../views";
 
diff --git a/src/views/Layout.scss b/src/views/Layout.scss
index de8cbbd..3b233f1 100644
--- a/src/views/Layout.scss
+++ b/src/views/Layout.scss
@@ -13,9 +13,9 @@
 	height: 100dvh;
 }
 
-.Layout > * {
-	padding-inline: min(5dvw, 3.2rem);
-}
+// .Layout > * {
+// 	padding-inline: min(5dvw, 3.2rem);
+// }
 
 .Layout-header {
 	background-color: var(--color-bg);
diff --git a/src/views/authenticated/AuthenticatedHome.scss b/src/views/authenticated/AuthenticatedHome.scss
new file mode 100644
index 0000000..faa61a6
--- /dev/null
+++ b/src/views/authenticated/AuthenticatedHome.scss
@@ -0,0 +1,15 @@
+@use "../../styles/mixins.scss" as *;
+
+.lists {
+	display: block;
+	margin-top: 20px;
+	padding: 0;
+	margin: 0;
+
+	@include tablet {
+		padding: 0;
+		display: flex;
+		justify-content: space-between;
+		flex-flow: wrap;
+	}
+}
diff --git a/src/views/authenticated/AuthenticatedHome.tsx b/src/views/authenticated/AuthenticatedHome.tsx
index cb69b7b..3b7de25 100644
--- a/src/views/authenticated/AuthenticatedHome.tsx
+++ b/src/views/authenticated/AuthenticatedHome.tsx
@@ -1,6 +1,7 @@
-import React from "react";
+// import React from "react";
 import { SingleList, CreateList } from "../../components";
 import { List, User } from "../../api";
+import "./AuthenticatedHome.scss";
 
 interface Props {
 	data: List[];
@@ -10,14 +11,12 @@ interface Props {
 
 export function AuthenticatedHome({ data, setListPath, user }: Props) {
 	return (
-		<>
-			<p>
-				Hello from the home (<code>/</code>) page!
-			</p>
-
+		<div className="home">
 			{user && (
 				<>
-					<ul>
+					<CreateList user={user} setListPath={setListPath} />
+					<h3 className="heading-text">Your Lists</h3>
+					<ul className="lists">
 						{data.map((list, index) => (
 							<SingleList
 								key={index}
@@ -27,9 +26,8 @@ export function AuthenticatedHome({ data, setListPath, user }: Props) {
 							/>
 						))}
 					</ul>
-					<CreateList user={user} setListPath={setListPath} />
 				</>
 			)}
-		</>
+		</div>
 	);
 }
diff --git a/src/views/unauthenticated/UnauthenticatedHome.scss b/src/views/unauthenticated/UnauthenticatedHome.scss
new file mode 100644
index 0000000..bcc0bcc
--- /dev/null
+++ b/src/views/unauthenticated/UnauthenticatedHome.scss
@@ -0,0 +1,41 @@
+@use "../../styles/variables.scss" as *;
+
+.home {
+	background-color: rgba($primary-beige, 0.9);
+	border-radius: 5%;
+	padding: 40px;
+}
+
+.heading-text {
+	color: $secondary-blue;
+	text-align: center;
+	padding: 12px;
+}
+
+.normal-text {
+	color: $light-blue;
+	text-align: center;
+}
+
+.button {
+	background-color: $primary-blue;
+	border: none;
+	color: $primary-beige;
+	text-align: center;
+	padding: 10px 40px;
+	width: 170px;
+
+	&:hover {
+		background-color: $secondary-blue;
+	}
+}
+
+.custom-button-wrapper {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.custom-button-wrapper button {
+	@extend .button;
+}
diff --git a/src/views/unauthenticated/UnauthenticatedHome.tsx b/src/views/unauthenticated/UnauthenticatedHome.tsx
index b23874c..ec33342 100644
--- a/src/views/unauthenticated/UnauthenticatedHome.tsx
+++ b/src/views/unauthenticated/UnauthenticatedHome.tsx
@@ -1,4 +1,5 @@
-import React from "react";
+// import React from "react";
+import "./UnauthenticatedHome.scss";
 import { useNavigate } from "react-router-dom";
 import { SignInButton } from "../../api";
 import Button from "react-bootstrap/Button";
@@ -7,30 +8,34 @@ export function UnauthenticatedHome() {
 	const navigate = useNavigate();
 
 	return (
-		<div className="Home">
-			<h2>Welcome to GrocerEase</h2>
-			<p>
-				The next best thing to having someone else do the shopping for you!
+		<div className="home">
+			<h2 className="heading-text">Welcome to GrocerEase</h2>
+			<p className="normal-text">
+				The next best thing to having someone else do the shopping for you!{" "}
+				<br />
 				Create and manage smart lists, while it learns your shopping habits to
 				let you know exactly when you will need to buy that next batch of toilet
 				paper!
 			</p>
 
 			<article>
-				<p>New to GrocerEase:</p>
-				<Button
-					onClick={() => navigate("/about")}
-					aria-label="Navigate to the about application page."
-					className="m-2"
-				>
-					Learn More
-				</Button>
-				<SignInButton isSignIn={false} />
+				<h3 className="heading-text">Welcome Back:</h3>
+				<div className="custom-button-wrapper">
+					<SignInButton />
+				</div>
 			</article>
 
 			<article>
-				<p>Welcome Back:</p>
-				<SignInButton />
+				<h5 className="heading-text">New to GrocerEase?</h5>
+				<div className="custom-button-wrapper">
+					<Button
+						onClick={() => navigate("/about")}
+						aria-label="Navigate to the about application page."
+					>
+						Learn More
+					</Button>
+					<SignInButton isSignIn={false} />
+				</div>
 			</article>
 		</div>
 	);