diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index ebfa8b1..7b42ab3 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -2,58 +2,168 @@
 
 @section('content')
 <style>
-	.error{
-		color: red;
+	html,
+	body {
+		height: 100%;
+		background: #ffffff;
+		margin: 0;
+		overflow: hidden;
 	}
-	.form-wrapper{
-		margin-top: 20%;
+
+	.navbar-custom {
+		display: block;
+		margin-bottom: 0;
+	}
+
+	.login-wrapper {
+		height: calc(100vh - 100px);
+		height: calc(100dvh - 100px);
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 16px;
+	}
+
+	.login-card {
+		width: 100%;
+		max-width: 380px;
+		background: #ffffff;
+		border: 1px solid #eceff3;
+		border-radius: 12px;
+		padding: 28px;
+	}
+
+	.login-title {
+		font-size: 24px;
+		font-weight: 600;
+		line-height: 1.2;
+		margin: 0 0 8px;
+		color: #111827;
+	}
+
+	.login-subtitle {
+		font-size: 14px;
+		margin: 0 0 24px;
+		color: #6b7280;
+	}
+
+	.login-card .form-group {
+		margin-bottom: 16px;
+	}
+
+	.login-card label {
+		display: block;
+		font-size: 13px;
+		font-weight: 500;
+		margin-bottom: 6px;
+		color: #374151;
+	}
+
+	.login-card .form-control {
+		height: 42px;
+		border-radius: 8px;
+		border: 1px solid #d1d5db;
+		background: #ffffff;
+		font-size: 14px;
+		padding: 0 12px;
+		box-shadow: none;
+		transition: border-color 0.2s, box-shadow 0.2s;
+	}
+
+	.login-card .form-control:focus {
+		border-color: #9ca3af;
+		box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);
+		outline: none;
+	}
+
+	.login-remember-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin: 6px 0 18px;
+	}
+
+	.login-remember-row label {
+		margin: 0;
+		font-size: 13px;
+		font-weight: 400;
+		color: #4b5563;
+	}
+
+	.login-remember-row a {
+		font-size: 13px;
+		color: #4b5563;
+		text-decoration: none;
+	}
+
+	.login-remember-row a:hover {
+		color: #111827;
+	}
+
+	.btn-login {
+		width: 100%;
+		height: 44px;
+		border: 0;
+		border-radius: 8px;
+		background: #111827;
+		color: #ffffff;
+		font-size: 14px;
+		font-weight: 600;
+		transition: opacity 0.2s;
+	}
+
+	.btn-login:hover {
+		opacity: 0.92;
+		color: #ffffff;
+	}
+
+	.login-footer {
+		margin-top: 18px;
+		text-align: center;
+		font-size: 13px;
+		color: #6b7280;
+	}
+
+	.login-footer a {
+		color: #111827;
+		text-decoration: none;
+		font-weight: 500;
+	}
+
+	.login-footer a:hover {
+		text-decoration: underline;
+	}
+
+	#login-response-msg .alert {
+		border-radius: 8px;
+		font-size: 13px;
+		margin-bottom: 14px;
 	}
 </style>
-<div class="container">
-	<div class="col-md-4 col-md-offset-4">
-		<div class="form-wrapper">
-			<div class="panel panel-default">
-				<div class="panel-heading">
-					<h3 class="text-center">S I G N - I N</h3>
-				</div>
-				<div class="panel-body">
-					<div class="row">
-						<div class="col-xs-12">
-							<div id="login-response-msg"></div>
-							<form  role="form" id="frm-login">
-								<input type="hidden" name="_token" value="{{ csrf_token() }}">
-								<div class="form-group">
-									<label for="username" class="control-label">Email Address</label>
-									<input type="email" class="form-control" name="email"  value="{{ old('email') }}"  title="Please enter your email address" placeholder="example@gmail.com">
-									<span class="help-block"></span>
-								</div>
-								<div class="form-group">
-									<label for="password" class="control-label">Password</label>
-									<input type="password" class="form-control" name="password" placeholder="Password" title="Please enter your password">
-									<span class="help-block"></span>
-								</div>
-								<div class="checkbox">
-									<label>
-										<input type="checkbox" name="remember"> Remember login
-									</label>
-									<p class="help-block">(if this is a private computer)</p>
-								</div>
-								<button type="submit" id="btn-login" class="btn btn-success btn-block"><i class="fa fa-sign-in"></i> &nbsp; Sign in</button>
-								<a href="{{ url('/password/email') }}" class="btn btn-link btn-block">Forgot Your Password?</a>
-							</form>
-							
-						</div>
-					</div>
-					<div class="row">
-						<div class="col-xs-12">
-							<hr />
-							<p class="text-center">Don't have an account? Register Now!</p>
-							<a href="{{ url('/auth/register') }}" type="submit" id="btn-login" class="btn btn-primary btn-block">Register</a>
-						</div>
-					</div>
-				</div>
+
+<div class="login-wrapper">
+	<div class="login-card">
+		<h1 class="login-title">Sign in</h1>
+		<p class="login-subtitle">Welcome back. Please enter your details.</p>
+		<div id="login-response-msg"></div>
+		<form role="form" id="frm-login">
+			<input type="hidden" name="_token" value="{{ csrf_token() }}">
+			<div class="form-group">
+				<label for="email">Email Address</label>
+				<input type="email" class="form-control" name="email" id="email" value="{{ old('email') }}" placeholder="you@example.com" title="Please enter your email address">
 			</div>
-		</div>
+			<div class="form-group">
+				<label for="password">Password</label>
+				<input type="password" class="form-control" name="password" id="password" placeholder="Enter your password" title="Please enter your password">
+			</div>
+			<div class="login-remember-row">
+				<label><input type="checkbox" name="remember"> Remember me</label>
+				<a href="{{ url('/password/email') }}">Forgot password?</a>
+			</div>
+			<button type="submit" id="btn-login" class="btn-login">Sign in</button>
+		</form>
+		<p class="login-footer">Don’t have an account? <a href="{{ url('/auth/register') }}">Create one</a></p>
 	</div>
 </div>
 @endsection
diff --git a/resources/views/auth/password.blade.php b/resources/views/auth/password.blade.php
index 539d4d2..7f3b5b5 100644
--- a/resources/views/auth/password.blade.php
+++ b/resources/views/auth/password.blade.php
@@ -2,54 +2,154 @@
 
 @section('content')
 <style>
-	.error{
-		color: red;
+	body {
+		background: #ffffff;
+		margin: 0;
 	}
-	.form-wrapper{
-		margin-top: 20%;
+
+	.navbar-custom {
+		margin-bottom: 0;
+	}
+
+	.auth-wrapper {
+		min-height: calc(100vh - 100px);
+		min-height: calc(100dvh - 100px);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 24px 16px;
+		box-sizing: border-box;
+	}
+
+	.auth-card {
+		width: 100%;
+		max-width: 380px;
+		background: #ffffff;
+		border: 1px solid #eceff3;
+		border-radius: 12px;
+		padding: 28px;
+	}
+
+	.auth-title {
+		font-size: 24px;
+		font-weight: 600;
+		line-height: 1.2;
+		margin: 0 0 8px;
+		color: #111827;
+	}
+
+	.auth-subtitle {
+		font-size: 14px;
+		margin: 0 0 20px;
+		color: #6b7280;
+	}
+
+	.auth-card .form-group {
+		margin-bottom: 14px;
+	}
+
+	.auth-card label {
+		display: block;
+		font-size: 13px;
+		font-weight: 500;
+		margin-bottom: 6px;
+		color: #374151;
+	}
+
+	.auth-card .form-control {
+		height: 42px;
+		border-radius: 8px;
+		border: 1px solid #d1d5db;
+		background: #ffffff;
+		font-size: 14px;
+		padding: 0 12px;
+		box-shadow: none;
+		transition: border-color 0.2s, box-shadow 0.2s;
+	}
+
+	.auth-card .form-control:focus {
+		border-color: #9ca3af;
+		box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);
+		outline: none;
+	}
+
+	.btn-auth {
+		width: 100%;
+		height: 44px;
+		border: 0;
+		border-radius: 8px;
+		background: #111827;
+		color: #ffffff;
+		font-size: 14px;
+		font-weight: 600;
+		transition: opacity 0.2s;
+	}
+
+	.btn-auth:hover {
+		opacity: 0.92;
+		color: #ffffff;
+	}
+
+	.auth-footer {
+		margin-top: 16px;
+		text-align: center;
+		font-size: 13px;
+		color: #6b7280;
+	}
+
+	.auth-footer a {
+		color: #111827;
+		text-decoration: none;
+		font-weight: 500;
+	}
+
+	.auth-footer a:hover {
+		text-decoration: underline;
+	}
+
+	.auth-card .alert {
+		border-radius: 8px;
+		font-size: 13px;
+	}
+
+	.auth-card .alert ul {
+		padding-left: 18px;
+		margin-bottom: 0;
 	}
 </style>
-<div class="container">
-	<div class="col-md-4 col-md-offset-4">
-		<div class="form-wrapper">
-			<div class="panel panel-default">
-				<div class="panel-heading">
-					<h3 class="text-center">R E S E T  &nbsp; P A S S W O R D</h3>
-				</div>
-				<div class="panel-body">
-					<div class="row">
-						<div class="col-xs-12">
-							@if (session('status'))
-								<div class="alert alert-success">
-									{{ session('status') }}
-								</div>
-							@endif
 
-							@if (count($errors) > 0)
-								<div class="alert alert-danger">
-									<strong>Whoops!</strong> There were some problems with your input.<br><br>
-									<ul>
-										@foreach ($errors->all() as $error)
-											<li>{{ $error }}</li>
-										@endforeach
-									</ul>
-								</div>
-							@endif
-							<form role="form" method="POST" action="{{ url('/password/email') }}">
-								<input type="hidden" name="_token" value="{{ csrf_token() }}">
-								<div class="form-group">
-									<label for="username" class="control-label">Email Address</label>
-									<input type="email" class="form-control" name="email"  value="{{ old('email') }}"  title="Please enter your email address" placeholder="example@gmail.com">
-									<span class="help-block"></span>
-								</div>
-								<button type="submit" class="btn btn-default btn-block">Send Password Reset Link</button>
-							</form>
-							<br><br>
-						</div>
-					</div>
-				</div>
+<div class="auth-wrapper">
+	<div class="auth-card">
+		<h1 class="auth-title">Forgot password</h1>
+		<p class="auth-subtitle">Enter your email and we’ll send you a reset link.</p>
+
+		@if (session('status'))
+			<div class="alert alert-success">
+				{{ session('status') }}
 			</div>
-		</div>
+		@endif
+
+		@if (count($errors) > 0)
+			<div class="alert alert-danger">
+				<strong>Whoops!</strong> There were some problems with your input.<br><br>
+				<ul>
+					@foreach ($errors->all() as $error)
+						<li>{{ $error }}</li>
+					@endforeach
+				</ul>
+			</div>
+		@endif
+
+		<form role="form" method="POST" action="{{ url('/password/email') }}">
+			<input type="hidden" name="_token" value="{{ csrf_token() }}">
+			<div class="form-group">
+				<label for="email">Email Address</label>
+				<input type="email" class="form-control" name="email" id="email" value="{{ old('email') }}" title="Please enter your email address" placeholder="you@example.com">
+			</div>
+			<button type="submit" class="btn-auth">Send reset link</button>
+		</form>
+
+		<p class="auth-footer"><a href="{{ url('/auth/login') }}">Back to sign in</a></p>
 	</div>
 </div>
 @endsection
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index b01e9f2..caa6ceb 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -2,136 +2,242 @@
 
 @section('content')
 <style>
-	.error {
-		color: red;
+	body {
+		background: #ffffff;
+		margin: 0;
+	}
+
+	.navbar-custom {
+		margin-bottom: 0;
+	}
+
+	.auth-wrapper {
+		min-height: calc(100vh - 100px);
+		min-height: calc(100dvh - 100px);
+		display: flex;
+		align-items: flex-start;
+		justify-content: center;
+		padding: 24px 16px;
+		box-sizing: border-box;
+	}
+
+	.auth-card {
+		width: 100%;
+		max-width: 560px;
+		background: #ffffff;
+		border: 1px solid #eceff3;
+		border-radius: 12px;
+		padding: 28px;
+	}
+
+	.auth-title {
+		font-size: 24px;
+		font-weight: 600;
+		line-height: 1.2;
+		margin: 0 0 8px;
+		color: #111827;
+	}
+
+	.auth-subtitle {
+		font-size: 14px;
+		margin: 0 0 20px;
+		color: #6b7280;
+	}
+
+	.auth-section-title {
+		font-size: 12px;
+		font-weight: 600;
+		color: #6b7280;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+		margin: 8px 0 12px;
+	}
+
+	.auth-card .form-group {
+		margin-bottom: 14px;
+	}
+
+	.auth-card label {
+		display: block;
+		font-size: 13px;
+		font-weight: 500;
+		margin-bottom: 6px;
+		color: #374151;
+	}
+
+	.auth-card .form-control {
+		height: 42px;
+		border-radius: 8px;
+		border: 1px solid #d1d5db;
+		background: #ffffff;
+		font-size: 14px;
+		padding: 0 12px;
+		box-shadow: none;
+		transition: border-color 0.2s, box-shadow 0.2s;
+	}
+
+	.auth-card .form-control:focus {
+		border-color: #9ca3af;
+		box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);
+		outline: none;
+	}
+
+	.auth-card select.form-control {
+		padding-right: 28px;
 	}
 
 	.g-recaptcha {
 		width: 100%;
 	}
+
+	.auth-terms {
+		font-size: 13px;
+		color: #6b7280;
+		margin-bottom: 14px;
+	}
+
+	.auth-terms a {
+		color: #111827;
+		text-decoration: none;
+	}
+
+	.auth-terms a:hover {
+		text-decoration: underline;
+	}
+
+	.btn-register-modern {
+		width: 100%;
+		height: 44px;
+		border: 0;
+		border-radius: 8px;
+		background: #111827;
+		color: #ffffff;
+		font-size: 14px;
+		font-weight: 600;
+		transition: opacity 0.2s;
+	}
+
+	.btn-register-modern:hover {
+		opacity: 0.92;
+		color: #ffffff;
+	}
+
+	.auth-footer {
+		margin-top: 16px;
+		text-align: center;
+		font-size: 13px;
+		color: #6b7280;
+	}
+
+	.auth-footer a {
+		color: #111827;
+		text-decoration: none;
+		font-weight: 500;
+	}
+
+	.auth-footer a:hover {
+		text-decoration: underline;
+	}
+
+	#register-response-msg .alert {
+		border-radius: 8px;
+		font-size: 13px;
+		margin-bottom: 14px;
+	}
 </style>
-<div class="container">
-	<div class="row">
-		<div class="col-md-4 col-md-offset-4">
-			<div class="form-wrapper">
-				<div class="panel panel-default">
-					<div class="panel-heading">
-						<h3 class="text-center">R E G I S T E R</h3>
-					</div>
-					<div class="panel-body">
-						<div class="row">
-							<div class="col-xs-12">
-								<div id="register-response-msg"></div>
-								<form role="form" id="frm-register">
-									<div class="form-group text-center">
-										<h5>Personal Information</h5>
-									</div>
-									<input type="hidden" name="redirect" value="{{ Request::get('redirectUrl')  }}">
-									<input type="hidden" name="_token" value="{{ csrf_token() }}">
 
-									<div class="form-group">
-										<label class="control-label">First name</label>
-										<input type="text" class="form-control" name="firstname" placeholder="First name">
-									</div>
+<div class="auth-wrapper">
+	<div class="auth-card">
+		<h1 class="auth-title">Create account</h1>
+		<p class="auth-subtitle">Fill in your details to get started.</p>
+		<div id="register-response-msg"></div>
+		<form role="form" id="frm-register">
+			<div class="auth-section-title">Personal Information</div>
+			<input type="hidden" name="redirect" value="{{ Request::get('redirectUrl')  }}">
+			<input type="hidden" name="_token" value="{{ csrf_token() }}">
 
-									<div class="form-group">
-										<label class="control-label">Last name</label>
-										<input type="text" class="form-control" name="lastname" placeholder="Last name">
-									</div>
-
-									<!-- <div class="form-group">
-										<label class="control-label">Username</label>
-										<input type="text" class="form-control" name="username" value="{{ old('username') }}" placeholder="Username">
-									</div> -->
-
-									<div class="form-group">
-										<label class="control-label">Email Address</label>
-										<input type="email" class="form-control" name="email" value="{{ old('email') }}" placeholder="Email Address">
-									</div>
-
-									<div class="form-group">
-										<label class="control-label">Phone Number</label>
-										<input type="text" class="form-control" name="mobilenumber" placeholder="Phone Number">
-									</div>
-
-									<div class="form-group">
-										<label class="control-label">Password</label>
-										<input type="password" class="form-control" name="password" id="password" required placeholder="Password">
-									</div>
-
-									<div class="form-group">
-										<label class="control-label">Confirm Password</label>
-										<input type="password" class="form-control" name="password_confirmation" placeholder="Confirm Password" data-rule-equalTo="#password" required>
-									</div>
-
-									<div class="form-group text-center">
-										<h5>Address Information</h5>
-									</div>
-
-									<div class="form-group">
-										<label class="control-label">Select Country</label>
-										<select name="countryCode" id="select_country" class="form-control" onchange="selectCountry(this)">
-											<option value="">Select Country</option>
-											<option value="US">United States</option>
-											<option value="CA">Canada</option>
-										</select>
-									</div>
-
-									<div class="form-group">
-										<label class="control-label">State / Province</label>
-										<label></label>
-										<select class="form-control" name="state" id="lst-states">
-											<option value="">Select State</option>
-										</select>
-									</div>
-
-									<div class="form-group">
-										<label class="control-label">City</label>
-										<select class="form-control" name="city" id="lst-cities">
-											<option value="">Select City</option>
-										</select>
-									</div>
-
-									<div class="form-group">
-										<label class="control-label">Address 1</label>
-										<input type="text" class="form-control" name="address" placeholder="Address 1">
-									</div>
-
-									<div class="form-group">
-										<label class="control-label">Address 2</label>
-										<input type="text" class="form-control" name="address2" placeholder="Address 2">
-									</div>
-
-									<div class="form-group">
-										<label class="control-label">Zip Code</label>
-										<input type="text" class="form-control" name="zipcode" placeholder="Please enter your zip code">
-									</div>
-
-
-									<div class="form-group">
-										<div class="g-recaptcha text-center" data-sitekey="{{ env('CAPTCHA_SITE_KEY') }}"></div>
-									</div>
-									<div class="form-group">
-										<p>By clicking Register, you agree to our <a href="#">Terms of Use</a> and that you have read our <a href="#">Privacy Policy</a>.</p>
-									</div>
-									<div class="form-group">
-										<button type="submit" id="btn-register" class="btn btn-primary btn-block">Register</button>
-									</div>
-
-								</form>
-							</div>
-						</div>
-						<div class="row">
-							<div class="col-xs-12">
-								<hr />
-								<p class="text-center">Have already an account?</p>
-								<a href="{{ url('/auth/login') }}" type="submit" id="btn-login" class="btn btn-success btn-block">Login here</a>
-							</div>
-						</div>
-					</div>
-				</div>
+			<div class="form-group">
+				<label>First name</label>
+				<input type="text" class="form-control" name="firstname" placeholder="First name">
 			</div>
-		</div>
+
+			<div class="form-group">
+				<label>Last name</label>
+				<input type="text" class="form-control" name="lastname" placeholder="Last name">
+			</div>
+
+			<div class="form-group">
+				<label>Email Address</label>
+				<input type="email" class="form-control" name="email" value="{{ old('email') }}" placeholder="you@example.com">
+			</div>
+
+			<div class="form-group">
+				<label>Phone Number</label>
+				<input type="text" class="form-control" name="mobilenumber" placeholder="Phone Number">
+			</div>
+
+			<div class="form-group">
+				<label>Password</label>
+				<input type="password" class="form-control" name="password" id="password" required placeholder="Password">
+			</div>
+
+			<div class="form-group">
+				<label>Confirm Password</label>
+				<input type="password" class="form-control" name="password_confirmation" placeholder="Confirm Password" data-rule-equalTo="#password" required>
+			</div>
+
+			<div class="auth-section-title">Address Information</div>
+
+			<div class="form-group">
+				<label>Select Country</label>
+				<select name="countryCode" id="select_country" class="form-control" onchange="selectCountry(this)">
+					<option value="">Select Country</option>
+					<option value="US">United States</option>
+					<option value="CA">Canada</option>
+				</select>
+			</div>
+
+			<div class="form-group">
+				<label>State / Province</label>
+				<select class="form-control" name="state" id="lst-states">
+					<option value="">Select State</option>
+				</select>
+			</div>
+
+			<div class="form-group">
+				<label>City</label>
+				<select class="form-control" name="city" id="lst-cities">
+					<option value="">Select City</option>
+				</select>
+			</div>
+
+			<div class="form-group">
+				<label>Address 1</label>
+				<input type="text" class="form-control" name="address" placeholder="Address 1">
+			</div>
+
+			<div class="form-group">
+				<label>Address 2</label>
+				<input type="text" class="form-control" name="address2" placeholder="Address 2">
+			</div>
+
+			<div class="form-group">
+				<label>Zip Code</label>
+				<input type="text" class="form-control" name="zipcode" placeholder="Please enter your zip code">
+			</div>
+
+			<div class="form-group">
+				<div class="g-recaptcha text-center" data-sitekey="{{ env('CAPTCHA_SITE_KEY') }}"></div>
+			</div>
+
+			<p class="auth-terms">By clicking Register, you agree to our <a href="#">Terms of Use</a> and that you have read our <a href="#">Privacy Policy</a>.</p>
+
+			<div class="form-group">
+				<button type="submit" id="btn-register" class="btn-register-modern">Register</button>
+			</div>
+		</form>
+
+		<p class="auth-footer">Already have an account? <a href="{{ url('/auth/login') }}">Sign in</a></p>
 	</div>
 </div>
 @endsection
\ No newline at end of file
diff --git a/resources/views/auth/reset.blade.php b/resources/views/auth/reset.blade.php
index 66e14db..22ab10a 100644
--- a/resources/views/auth/reset.blade.php
+++ b/resources/views/auth/reset.blade.php
@@ -3,60 +3,158 @@
 @section('content')
 
 <style>
-	.error{
-		color: red;
+	body {
+		background: #ffffff;
+		margin: 0;
 	}
-	.form-wrapper{
-		margin-top: 20%;
+
+	.navbar-custom {
+		margin-bottom: 0;
+	}
+
+	.auth-wrapper {
+		min-height: calc(100vh - 100px);
+		min-height: calc(100dvh - 100px);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 24px 16px;
+		box-sizing: border-box;
+	}
+
+	.auth-card {
+		width: 100%;
+		max-width: 380px;
+		background: #ffffff;
+		border: 1px solid #eceff3;
+		border-radius: 12px;
+		padding: 28px;
+	}
+
+	.auth-title {
+		font-size: 24px;
+		font-weight: 600;
+		line-height: 1.2;
+		margin: 0 0 8px;
+		color: #111827;
+	}
+
+	.auth-subtitle {
+		font-size: 14px;
+		margin: 0 0 20px;
+		color: #6b7280;
+	}
+
+	.auth-card .form-group {
+		margin-bottom: 14px;
+	}
+
+	.auth-card label {
+		display: block;
+		font-size: 13px;
+		font-weight: 500;
+		margin-bottom: 6px;
+		color: #374151;
+	}
+
+	.auth-card .form-control {
+		height: 42px;
+		border-radius: 8px;
+		border: 1px solid #d1d5db;
+		background: #ffffff;
+		font-size: 14px;
+		padding: 0 12px;
+		box-shadow: none;
+		transition: border-color 0.2s, box-shadow 0.2s;
+	}
+
+	.auth-card .form-control:focus {
+		border-color: #9ca3af;
+		box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);
+		outline: none;
+	}
+
+	.btn-auth {
+		width: 100%;
+		height: 44px;
+		border: 0;
+		border-radius: 8px;
+		background: #111827;
+		color: #ffffff;
+		font-size: 14px;
+		font-weight: 600;
+		transition: opacity 0.2s;
+	}
+
+	.btn-auth:hover {
+		opacity: 0.92;
+		color: #ffffff;
+	}
+
+	.auth-footer {
+		margin-top: 16px;
+		text-align: center;
+		font-size: 13px;
+		color: #6b7280;
+	}
+
+	.auth-footer a {
+		color: #111827;
+		text-decoration: none;
+		font-weight: 500;
+	}
+
+	.auth-footer a:hover {
+		text-decoration: underline;
+	}
+
+	.auth-card .alert {
+		border-radius: 8px;
+		font-size: 13px;
+	}
+
+	.auth-card .alert ul {
+		padding-left: 18px;
+		margin-bottom: 0;
 	}
 </style>
-<div class="container">
-	<div class="col-md-4 col-md-offset-4">
-		<div class="form-wrapper">
-			<div class="panel panel-default">
-				<div class="panel-heading">
-					<h3 class="text-center">R E S E T  &nbsp; P A S S W O R D</h3>
-				</div>
-				<div class="panel-body">
-					<div class="row">
-						<div class="col-xs-12">
-							@if (count($errors) > 0)
-								<div class="alert alert-danger">
-									<strong>Whoops!</strong> There were some problems with your input.<br><br>
-									<ul>
-										@foreach ($errors->all() as $error)
-											<li>{{ $error }}</li>
-										@endforeach
-									</ul>
-								</div>
-							@endif
-							<form role="form" method="POST" action="{{ url('/password/reset') }}">
-								<input type="hidden" name="_token" value="{{ csrf_token() }}">
-								<input type="hidden" name="token" value="{{ $token }}">
 
-								<div class="form-group">
-									<label  class="control-label">Email Address</label>
-									<input type="email" class="form-control" name="email"  value="{{ old('email') }}"  title="Please enter your email address" placeholder="example@gmail.com">
-									<span class="help-block"></span>
-								</div>
-								<div class="form-group">
-									<label class="control-label">Password</label>
-									<input type="password" class="form-control" name="password" placeholder="Password">
-									<span class="help-block"></span>
-								</div>
-								<div class="form-group">
-									<label  class="control-label">Confirm Password</label>
-									<input type="password" class="form-control" name="password_confirmation" placeholder="Confirm Password">
-									<span class="help-block"></span>
-								</div>
-								<button type="submit" class="btn btn-default btn-block">Reset Password</button>
-							</form>
-							<br><br>
-						</div>
-					</div>
-				</div>
+<div class="auth-wrapper">
+	<div class="auth-card">
+		<h1 class="auth-title">Reset password</h1>
+		<p class="auth-subtitle">Set a new password for your account.</p>
+
+		@if (count($errors) > 0)
+			<div class="alert alert-danger">
+				<strong>Whoops!</strong> There were some problems with your input.<br><br>
+				<ul>
+					@foreach ($errors->all() as $error)
+						<li>{{ $error }}</li>
+					@endforeach
+				</ul>
 			</div>
-		</div>
+		@endif
+
+		<form role="form" method="POST" action="{{ url('/password/reset') }}">
+			<input type="hidden" name="_token" value="{{ csrf_token() }}">
+			<input type="hidden" name="token" value="{{ $token }}">
+
+			<div class="form-group">
+				<label for="email">Email Address</label>
+				<input type="email" class="form-control" name="email" id="email" value="{{ old('email') }}" title="Please enter your email address" placeholder="you@example.com">
+			</div>
+			<div class="form-group">
+				<label for="password">Password</label>
+				<input type="password" class="form-control" name="password" id="password" placeholder="New password">
+			</div>
+			<div class="form-group">
+				<label for="password_confirmation">Confirm Password</label>
+				<input type="password" class="form-control" name="password_confirmation" id="password_confirmation" placeholder="Confirm password">
+			</div>
+			<button type="submit" class="btn-auth">Reset password</button>
+		</form>
+
+		<p class="auth-footer"><a href="{{ url('/auth/login') }}">Back to sign in</a></p>
 	</div>
 </div>
 @endsection