diff --git a/src/pages/Settings/Settings.tsx b/src/pages/Settings/Settings.tsx
index b4ee2c0..c5fb5c0 100644
--- a/src/pages/Settings/Settings.tsx
+++ b/src/pages/Settings/Settings.tsx
@@ -1,5 +1,50 @@
+import { useNavigate } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faClose, faSave } from "@fortawesome/free-solid-svg-icons";
+import styles from "./settings.module.scss";
+
 const Settings = () => {
-	return <div>Settings</div>;
+	const navigate = useNavigate();
+
+	const closeSettingPage = () => {
+		navigate("/");
+	};
+
+	const getHeaderDom = () => {
+		return (
+			<div className={styles.headerWrapper}>
+				<div className={styles.header}>
+					<p className={styles.headerText}>Settings</p>
+					<FontAwesomeIcon
+						icon={faClose}
+						size="2xl"
+						className={styles.closeIcon}
+						onClick={closeSettingPage}
+					/>
+				</div>
+			</div>
+		);
+	};
+
+	const getFooterDom = () => {
+		return (
+			<div className={styles.footer}>
+				<button className={styles.saveBtn}>
+					<FontAwesomeIcon icon={faSave} />
+					<span className={styles.saveBtnText}>Save</span>
+				</button>
+			</div>
+		);
+	};
+
+	return (
+		<div className={styles.mainWrapper}>
+			<div className={styles.settings}>
+				{getHeaderDom()}
+				{getFooterDom()}
+			</div>
+		</div>
+	);
 };
 
 export default Settings;
diff --git a/src/pages/Settings/settings.module.scss b/src/pages/Settings/settings.module.scss
new file mode 100644
index 0000000..f6dd54a
--- /dev/null
+++ b/src/pages/Settings/settings.module.scss
@@ -0,0 +1,53 @@
+@import "/src/styles/variables.scss";
+@import "/src/styles/mixins.scss";
+
+.mainWrapper {
+	height: 100%;
+	padding: 20px 0;
+	.settings {
+		@include font-poppins;
+		color: $clockColor;
+		width: 70%;
+		margin: auto;
+		padding: 40px;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+
+		.headerWrapper {
+			flex: 1;
+
+			.header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.headerText {
+					font-size: 46px;
+					font-weight: 800;
+				}
+				.closeIcon {
+					cursor: pointer;
+				}
+			}
+		}
+		.footer {
+			display: flex;
+			justify-content: flex-end;
+
+			.saveBtn {
+				display: flex;
+				gap: 6px;
+				align-items: center;
+				background-color: $clockColor;
+				padding: 16px;
+				border-radius: 6px;
+				cursor: pointer;
+
+				.saveBtnText {
+					font-weight: 600;
+				}
+			}
+		}
+	}
+}