diff --git a/frontend/src/components/AddGame/AddGame.module.scss b/frontend/src/components/AddGame/AddGame.module.scss
index e69de29..0a456b0 100644
--- a/frontend/src/components/AddGame/AddGame.module.scss
+++ b/frontend/src/components/AddGame/AddGame.module.scss
@@ -0,0 +1,63 @@
+@import 'src/styles/variables';
+.addGameContainer {
+	border: $border;
+	border-radius:$margin-smallest;
+	display: flex;
+	flex-direction: column;
+	min-height: 20rem;
+	width: 20rem;
+	align-self: center;
+	top: $margin-medium;
+	background-color: $color-bright;
+	position:absolute;
+	z-index:3;
+	padding: 1rem;
+}
+.button {
+	border: none;
+	border-radius: 999999rem; // Pill shaped
+	background-color: $color-accent;
+	color: $text-bright;
+	padding: 0.5rem 1rem;
+	box-shadow: $shadow;
+	cursor: pointer;
+	transition: all 200ms ease-in;
+	align-self: center;
+
+	&:hover {
+		filter: brightness(1.2);
+	}
+
+	&:active {
+		box-shadow: none;
+		filter: brightness(0.8);
+	}
+
+	&:disabled {
+		filter: brightness(0.8);
+		box-shadow: none;
+		cursor: default;
+	}
+}
+
+.lightBox {
+	background-color: rgba($color-dark, 0.5);
+	position: fixed;
+	top: 0;
+	left: 0;
+	right:0;
+	bottom: 0;
+	z-index: 2;
+}
+
+.title {
+	font-size: $text-big;
+	font-weight: bold;
+	align-self: center;
+}
+
+.divider {
+	height: 1px;
+	width: 100%;
+	background-color: $color-dark;
+}
\ No newline at end of file
diff --git a/frontend/src/components/AddGame/AddGame.tsx b/frontend/src/components/AddGame/AddGame.tsx
index c0d9b7b..7f8de1e 100644
--- a/frontend/src/components/AddGame/AddGame.tsx
+++ b/frontend/src/components/AddGame/AddGame.tsx
@@ -7,9 +7,12 @@ import { FieldErrors, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import FormInput from '../Forms/FormInput/FormInput';
 import FormTextArea from '../Forms/FormTextArea/FormTextArea';
-import FormSelect from '../Forms/FromSelect/FormSelect';
+import FormSelect from '../Forms/FormSelect/FormSelect';
+import styles from './AddGame.module.scss';
 
-interface AddGameProps {}
+interface AddGameProps {
+	showSelf: (b: boolean) => void;
+}
 
 const addGameSchema = z
 	.object({
@@ -52,7 +55,7 @@ const addGameSchema = z
 
 type AddGameForm = z.infer<typeof addGameSchema>;
 
-const AddGame: FC<AddGameProps> = () => {
+const AddGame: FC<AddGameProps> = ({ showSelf }) => {
 	const { data, error, isLoading } = usePlatforms();
 
 	const {
@@ -114,7 +117,15 @@ const AddGame: FC<AddGameProps> = () => {
 
 	return (
 		<>
-			<form onSubmit={handleSubmit(submitHandler, invalidFormHandler)}>
+
+			<div className={styles.lightBox} onClick={() => {
+				showSelf(false);
+			}} />
+			<form className={styles.addGameContainer} onSubmit={() => {
+				handleSubmit(submitHandler, invalidFormHandler);
+			}}>
+				<h2 className={styles.title}>Add new game</h2>
+				<div className={styles.divider} />
 				<FormInput
 					label="Name of the game"
 					name="name"
@@ -123,15 +134,13 @@ const AddGame: FC<AddGameProps> = () => {
 					error={errors.name?.message}
 				/>
 				<br />
-
 				<FormTextArea
-					label="Description fo the game"
+					label="Description of the game"
 					register={register}
 					name="description"
 					error={errors.description?.message}
 				/>
 				<br />
-
 				<FormSelect
 					label="Platform"
 					options={data.map((platform) => {
@@ -143,7 +152,6 @@ const AddGame: FC<AddGameProps> = () => {
 					error={errors.platform?.message}
 				/>
 				<br />
-
 				<FormInput
 					label="Release date"
 					name="releaseDate"
@@ -153,7 +161,6 @@ const AddGame: FC<AddGameProps> = () => {
 					error={errors.releaseDate?.message}
 				/>
 				<br />
-
 				<FormInput
 					label="Expected playtime"
 					name="playtime"
@@ -163,7 +170,6 @@ const AddGame: FC<AddGameProps> = () => {
 					error={errors.playtime?.message}
 				/>
 				<br />
-
 				<FormInput
 					label="Minimum number of players"
 					name="playerMin"
@@ -173,7 +179,6 @@ const AddGame: FC<AddGameProps> = () => {
 					error={errors.playerMin?.message}
 				/>
 				<br />
-
 				<FormInput
 					label="Maximum number of players"
 					name="playerMax"
@@ -183,7 +188,6 @@ const AddGame: FC<AddGameProps> = () => {
 					error={errors.playerMax?.message}
 				/>
 				<br />
-
 				<FormInput
 					label="Location of the game"
 					name="location"
@@ -191,13 +195,12 @@ const AddGame: FC<AddGameProps> = () => {
 					register={register}
 					error={errors.location?.message}
 				/>
-				<br />
 
 				{errors.root ? <p>Error: {errors.root.message}</p> : null}
 
-				<input type="submit" disabled={postLoading} value="Submit" />
+				<input className={styles.button} type="submit" disabled={postLoading} value="Submit" />
 			</form>
-		</>
+		</ >
 	);
 };
 
diff --git a/frontend/src/components/AddSuggestion/AddSuggestion.tsx b/frontend/src/components/AddSuggestion/AddSuggestion.tsx
index 0ff7341..b686e4f 100644
--- a/frontend/src/components/AddSuggestion/AddSuggestion.tsx
+++ b/frontend/src/components/AddSuggestion/AddSuggestion.tsx
@@ -5,7 +5,7 @@ import * as z from 'zod';
 import { toast } from 'react-toastify';
 import FormInput from '../Forms/FormInput/FormInput';
 import FormTextArea from '../Forms/FormTextArea/FormTextArea';
-import FormSelect from '../Forms/FromSelect/FormSelect';
+import FormSelect from '../Forms/FormSelect/FormSelect';
 import { useAddGameSuggestion } from '@/src/hooks/api/useAddGameSuggestion';
 import { usePlatforms } from '@/src/hooks/api/usePlatforms';
 
diff --git a/frontend/src/components/Forms/FormInput/FormInput.module.scss b/frontend/src/components/Forms/FormInput/FormInput.module.scss
new file mode 100644
index 0000000..476fd4c
--- /dev/null
+++ b/frontend/src/components/Forms/FormInput/FormInput.module.scss
@@ -0,0 +1,23 @@
+@import 'src/styles/variables';
+.container {
+	display: flex;
+	flex-direction: column;
+	margin: 0 $margin-small;
+	padding: $margin-small 0;
+}
+
+.inputBox{
+	border:$border;
+	border-radius: $margin-smallest;
+	padding: $margin-smallest;
+	margin-top: $margin-smallest;
+	box-shadow: $shadow;
+
+}
+
+.label {
+	font-size: $text-normal;
+	font-weight: bold;
+	display:block;
+	align-self:center;
+}
diff --git a/frontend/src/components/Forms/FormInput/FormInput.tsx b/frontend/src/components/Forms/FormInput/FormInput.tsx
index 28d38c5..6ee75b7 100644
--- a/frontend/src/components/Forms/FormInput/FormInput.tsx
+++ b/frontend/src/components/Forms/FormInput/FormInput.tsx
@@ -1,5 +1,6 @@
 import React, { FC, InputHTMLAttributes } from 'react';
 import { UseFormRegister, RegisterOptions } from 'react-hook-form';
+import styles from './FormInput.module.scss';
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
 	name: string;
@@ -21,9 +22,9 @@ const FormInput: FC<InputProps> = ({
 	...rest
 }) => {
 	return (
-		<div className={wrapperClass}>
-			{label && <label htmlFor={name}>{label}</label>}
-			<input
+		<div className={styles.container}>
+			{label && <label htmlFor={name} className={styles.label} >{label}</label>}<br />
+			<input className={styles.inputBox}
 				aria-invalid={error ? 'true' : 'false'}
 				{...(register ? register(name, registerOptions) : {})}
 				{...rest}
diff --git a/frontend/src/components/Forms/FormSelect/FormSelect.module.scss b/frontend/src/components/Forms/FormSelect/FormSelect.module.scss
new file mode 100644
index 0000000..803d84f
--- /dev/null
+++ b/frontend/src/components/Forms/FormSelect/FormSelect.module.scss
@@ -0,0 +1,24 @@
+@import 'src/styles/variables';
+
+.box {
+	display: flex;
+	flex-direction: column;
+	margin: 0 $margin-small;
+	padding: $margin-small 0;
+}
+
+.inputBox{
+	border:$border;
+	border-radius: $margin-smallest;
+	padding: $margin-smallest;
+	margin-top: $margin-smallest;
+	box-shadow: $shadow;
+	resize: vertical;
+}
+
+.label {
+	font-size: $text-normal;
+	font-weight: bold;
+	display:block;
+	align-self:center;
+}
\ No newline at end of file
diff --git a/frontend/src/components/Forms/FromSelect/FormSelect.tsx b/frontend/src/components/Forms/FormSelect/FormSelect.tsx
similarity index 87%
rename from frontend/src/components/Forms/FromSelect/FormSelect.tsx
rename to frontend/src/components/Forms/FormSelect/FormSelect.tsx
index 478e806..b62a6f6 100644
--- a/frontend/src/components/Forms/FromSelect/FormSelect.tsx
+++ b/frontend/src/components/Forms/FormSelect/FormSelect.tsx
@@ -7,6 +7,7 @@ import {
 	Control
 } from 'react-hook-form';
 import Option from 'react-select/dist/declarations/src/components/Option';
+import styles from './FormSelect.module.scss';
 
 interface Option {
 	value: string;
@@ -19,7 +20,6 @@ interface SelectProps extends Props {
 	error?: string;
 	options: Option[];
 	control?: Control<any, any>;
-	wrapperClass?: string;
 	value?: Option;
 }
 
@@ -29,19 +29,19 @@ const FormSelect: FC<SelectProps> = ({
 	label,
 	control,
 	options,
-	wrapperClass,
 	value: defaultValue,
 	...rest
 }) => {
 	return (
-		<div className={wrapperClass}>
-			{label && <label htmlFor={name}>{label}</label>}
+		<div className={styles.box}>
+			{label && <label className={styles.label} htmlFor={name}>{label}</label>}
 			<Controller
 				control={control}
 				defaultValue={defaultValue}
 				name={name}
 				render={({ field: { onChange, value, ref } }) => (
 					<Select
+						className={styles.inputBox}
 						ref={ref}
 						value={
 							Array.isArray(value)
diff --git a/frontend/src/components/Forms/FormTextArea/FormTextArea.module.scss b/frontend/src/components/Forms/FormTextArea/FormTextArea.module.scss
new file mode 100644
index 0000000..803d84f
--- /dev/null
+++ b/frontend/src/components/Forms/FormTextArea/FormTextArea.module.scss
@@ -0,0 +1,24 @@
+@import 'src/styles/variables';
+
+.box {
+	display: flex;
+	flex-direction: column;
+	margin: 0 $margin-small;
+	padding: $margin-small 0;
+}
+
+.inputBox{
+	border:$border;
+	border-radius: $margin-smallest;
+	padding: $margin-smallest;
+	margin-top: $margin-smallest;
+	box-shadow: $shadow;
+	resize: vertical;
+}
+
+.label {
+	font-size: $text-normal;
+	font-weight: bold;
+	display:block;
+	align-self:center;
+}
\ No newline at end of file
diff --git a/frontend/src/components/Forms/FormTextArea/FormTextArea.tsx b/frontend/src/components/Forms/FormTextArea/FormTextArea.tsx
index 2346d7f..dc0ae9f 100644
--- a/frontend/src/components/Forms/FormTextArea/FormTextArea.tsx
+++ b/frontend/src/components/Forms/FormTextArea/FormTextArea.tsx
@@ -1,5 +1,6 @@
 import React, { FC, TextareaHTMLAttributes } from 'react';
 import { UseFormRegister, FieldValues, RegisterOptions } from 'react-hook-form';
+import styles from './FormTextArea.module.scss';
 
 interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
 	name: string;
@@ -7,7 +8,6 @@ interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
 	error?: string;
 	register?: UseFormRegister<any>;
 	registerOptions?: RegisterOptions;
-	wrapperClass?: string;
 	className?: string;
 }
 
@@ -17,13 +17,12 @@ const FormTextArea: FC<TextAreaProps> = ({
 	name,
 	error,
 	label,
-	wrapperClass,
 	...rest
 }) => {
 	return (
-		<div className={wrapperClass}>
-			{label && <label htmlFor={name}>{label}</label>}
-			<textarea
+		<div className={styles.box}>
+			{label && <label className={styles.label} htmlFor={name}>{label}</label>}
+			<textarea className={styles.inputBox}
 				aria-invalid={error ? 'true' : 'false'}
 				{...(register ? register(name, registerOptions) : {})}
 				{...rest}
diff --git a/frontend/src/components/GamesList/GamesList.tsx b/frontend/src/components/GamesList/GamesList.tsx
index 108c7ed..c1c3382 100644
--- a/frontend/src/components/GamesList/GamesList.tsx
+++ b/frontend/src/components/GamesList/GamesList.tsx
@@ -4,6 +4,8 @@ import ClockIcon from '@/src/icons/Clock';
 import PersonIcon from '@/src/icons/Person';
 import Link from 'next/link';
 import { FC, useState } from 'react';
+import AddGame from '../AddGame/AddGame';
+import Button from '../Forms/Button/Button';
 import GameCard from '../GameCard/GameCard';
 import GameFilter from '../GameFilter/GameFilter';
 import GamesSearchBar from '../Games/GamesSearchBar/GamesSearchBar';
@@ -14,6 +16,7 @@ interface GamesListProps {}
 
 const GamesList: FC<GamesListProps> = () => {
 	const [search, setSearch] = useState('');
+	const [addGame, setAddGame] = useState(false);
 	const filter = useFilterState();
 	const { data, error, isLoading } = useGamesList(search, filter.full);
 
@@ -27,7 +30,9 @@ const GamesList: FC<GamesListProps> = () => {
 			icon: ClockIcon
 		}
 	];
-
+	const changeAddGameState = () => {
+		setAddGame(!addGame);
+	}
 	return (
 		<>
 			<div className={styles.leftContainer}>
@@ -37,7 +42,7 @@ const GamesList: FC<GamesListProps> = () => {
 			<div className={styles.contentLayout}>
 				<div className={styles.searchRow}>
 					<GamesSearchBar searchValue={search} setSearch={setSearch} />
-					<AddGameButton />
+					<AddGameButton changeAddGameState={changeAddGameState} />
 				</div>
 
 				{isLoading ? <p>Loading...</p> : null}
@@ -51,20 +56,24 @@ const GamesList: FC<GamesListProps> = () => {
 						))}
 					</ul>
 				) : null}
+				{addGame ? <AddGame showSelf={setAddGame} /> : null}
 			</div>
 		</>
 	);
 };
 
-const AddGameButton: FC = () => {
+interface AddGameButtonProps {
+	changeAddGameState: () => void;
+}
+const AddGameButton: FC<AddGameButtonProps> = ({ changeAddGameState }) => {
 	const { data } = useUser();
 
 	if (!data) return null;
 
 	return (
-		<Link className={styles.addGame} href="/add">
-			Add Game
-		</Link>
+		<>
+			<Button onClick={() => changeAddGameState()} label={"Add Game"} />
+		</>
 	);
 };