add image upload, fix styles

src/app/styles/login.module.scss

@@ -65,6 +65,10 @@
 	font-size: 16px;
 	transition: all 0.3s;
 	background: #f9fafb;
+
+	&[type="password"]::-ms-reveal {
+		display: none;
+	}
 }
 
 .form-options {
@@ -74,6 +78,12 @@
 	margin-bottom: 20px;
 }
 
+.form-error {
+	color: #fb2c36;
+	font-size: .875rem;
+	margin-bottom: 15px;
+}
+
 .form-checkbox {
 	display: flex;
 	align-items: center;

src/app/styles/marking-pages.scss

@@ -66,13 +66,65 @@
 			margin-bottom: 10px;
 		}
 
-		p {
+		.description {
 			color: #6b7280;
 			margin-bottom: 20px;
 		}
 
 		.btn-primary {
 			background: linear-gradient(45deg, #6566f1, #01579b);
+			margin-bottom: 20px;
+		}
+	}
+
+	.selected-file {
+		border-radius: 15px;
+		background: #fff;
+		padding: 10px;
+
+		&-file-info {
+			text-align: left;
+		}
+
+		.uploaded-image {
+			border-radius: 0.25rem;
+			max-height: calc(4px * 40);
+			margin-inline: auto;
+			margin-bottom: 20px;
+			border: 1px solid #d1d5db;
+		}
+
+		.btn-confirm {
+			background: linear-gradient(45deg, #6566f1, #01579b);
+			color: white;
+			border: none;
+			padding: 5px 15px;
+			border-radius: 12px;
+			cursor: pointer;
+			font-weight: 600;
+			font-size: 16px;
+			transition: 0.3s;
+			min-width: 160px;
+			transform: translateY(0px);
+			box-shadow: none;
+		}
+
+		.btn-cancel {
+			background: #fff;
+			color: rgb(99, 102, 241);
+			border: 2px solid rgb(99, 102, 241);
+			padding: 5px 15px;
+			border-radius: 12px;
+			cursor: pointer;
+			font-weight: 600;
+			font-size: 16px;
+			transition: 0.3s;
+			min-width: 120px;
+		}
+
+		.btn:hover {
+			transform: translateY(-2px);
+			box-shadow: 0 8px 25px #6366f14d;
 		}
 	}
 }

src/app/styles/page.module.scss

@@ -0,0 +1,7 @@
+.main-containter {
+	margin-left: 280px;
+	flex: 1;
+	padding: 30px;
+	background: #f8f9ff;
+	min-height: 100vh;
+}

src/app/styles/ui.module.scss

@@ -0,0 +1,106 @@
+.sidebar {
+	width: 280px;
+	background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
+	padding: 30px 0;
+	border-radius: 0 30px 30px 0;
+	position: fixed;
+	height: 100vh;
+	overflow-y: auto;
+	z-index: 100;
+}
+
+.nav-link {
+	display: flex;
+	align-items: center;
+	padding: 15px 30px;
+	color: rgba(255, 255, 255, 0.8);
+	text-decoration: none;
+	transition: all 0.3s;
+	border-radius: 0 25px 25px 0;
+	margin-right: 20px;
+	margin-bottom: 8px;
+	font-weight: 500;
+	text-transform: uppercase;
+
+	&:hover {
+		background: rgba(255, 255, 255, 0.15);
+		color: white;
+	}
+
+	svg {
+		margin-right: 15px;
+		width: 20px;
+		height: 20px;
+	}
+}
+
+.sub-link {
+	padding: 12px 50px;
+	font-size: 14px;
+	border-radius: 0;
+	margin-right: 0;
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+.nav-dropdown {
+	.dropdown-arrow {
+		margin-left: auto;
+		transition: transform 0.3s;
+	}
+
+	&.expanded {
+		.dropdown-arrow {
+			transform: rotate(180deg);
+		}
+	}
+}
+
+.sub-menu.expanded {
+	max-height: 400px;
+}
+
+.sub-menu {
+	list-style: none;
+	max-height: 0;
+	overflow: hidden;
+	transition: max-height 0.3s ease;
+	background: rgba(255, 255, 255, 0.1);
+	margin-right: 20px;
+	border-radius: 0 15px 15px 0;
+}
+
+.logo {
+	display: flex;
+	align-items: center;
+	padding: 0 30px 40px;
+	color: white;
+	font-size: 24px;
+	font-weight: 600;
+	text-transform: uppercase;
+
+	svg {
+		width: 32px;
+		height: 32px;
+		margin-right: 15px;
+	}
+}
+
+.logo-icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 60px;
+	height: 60px;
+	background: linear-gradient(135deg, #6366f1, #8b5cf6);
+	border-radius: 15px;
+	margin-bottom: 15px;
+
+	svg {
+		width: 30px;
+		height: 30px;
+		fill: white;
+	}
+}