diff --git a/src/views/AddItem.jsx b/src/views/AddItem.jsx
index d1abbda..3bd6ef2 100644
--- a/src/views/AddItem.jsx
+++ b/src/views/AddItem.jsx
@@ -119,7 +119,7 @@ export function AddItem({ listId, data }) {
 					)}
 				</div>
 			</div>
-			<form onSubmit={handleSubmit}>
+			<form onSubmit={handleSubmit} className="pb-20">
 				<div className="flex flex-col justify-center items-center">
 					<label htmlFor="item" className="px-3 mt-2 font-semibold">
 						Item:
@@ -131,7 +131,7 @@ export function AddItem({ listId, data }) {
 							className="text-gray-500 mr-2 sm:mr-4"
 						/>
 						<input
-							className="pl-2 flex-grow border-none bg-transparent placeholder-light dark:placeholder-dark"
+							className="pl-2 w-full border-none bg-transparent placeholder-light dark:placeholder-dark"
 							type="text"
 							id="item"
 							name="item"
@@ -143,8 +143,8 @@ export function AddItem({ listId, data }) {
 						/>
 					</div>
 				</div>
-				<p className="mt-3 pt-10">How soon will you buy this item?</p>
-				<div className="flex flex-col sm:flex-row sm:gap-6 justify-center mb-10 sm:py-44">
+				<p className="mt-3 pt-5 sm:pt-20">How soon will you buy this item?</p>
+				<div className="flex flex-col sm:flex-row sm:gap-6 justify-center mb-10 sm:py-10">
 					<UrgencyTag
 						color={'bg-light-blue'}
 						value={'soon'}
@@ -173,14 +173,12 @@ export function AddItem({ listId, data }) {
 						order={'3'}
 					/>
 				</div>
-				<div className="pb-10">
-					<Button
-						text="ADD ITEM"
-						withIcon={true}
-						onClick={handleSubmit}
-						className="mb-5 sm:m-16"
-					/>
-				</div>
+				<Button
+					text="ADD ITEM"
+					withIcon={true}
+					onClick={handleSubmit}
+					className="mb-5 sm:m-16"
+				/>
 			</form>
 		</div>
 	);
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
index c0d80b5..4bcef84 100644
--- a/src/views/Home.jsx
+++ b/src/views/Home.jsx
@@ -38,7 +38,7 @@ export function Home({ createToken, setListToken }) {
 					<input
 						type="text"
 						id="tokenInput"
-						className="flex-grow border-none bg-transparent dark:text-black text-center text-2xl mr-14 dark:placeholder:text-green"
+						className="w-full border-none bg-transparent dark:text-black text-center text-2xl dark:placeholder:text-green"
 						value={tokenInput}
 						onChange={handleTokenInputChange}
 						placeholder="my list token"
@@ -104,8 +104,8 @@ export function Home({ createToken, setListToken }) {
 
 	return (
 		<div className="Home">
-			<div className="mt-48 flex items-center justify-center">
-				<div className="flex flex-col items-center gap-10">
+			<div className="mt-24 flex-col items-center justify-center">
+				<div className="flex flex-col h-10 items-center gap-10">
 					<div>
 						{existingListMessage && (
 							<RoughNotation
diff --git a/src/views/List.jsx b/src/views/List.jsx
index a39a55f..0e3a9b5 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -154,7 +154,7 @@ export function List({ data, listId }) {
 								className="text-gray-500 mr-2 sm:mr-4"
 							/>
 							<input
-								className="flex-grow border-none bg-transparent placeholder-light dark:placeholder-dark"
+								className="w-full border-none bg-transparent placeholder-light dark:placeholder-dark"
 								type="text"
 								name="filter"
 								id="filter"