From cc93517b9cfabf8da5594f21d8c437cdc038b3c2 Mon Sep 17 00:00:00 2001
From: Amir Hamzan <62345746+amirhamzan@users.noreply.github.com>
Date: Thu, 18 Nov 2021 12:14:00 +0800
Subject: [PATCH] update color css, fix profile ui

---
 public/css/material-kit.css                   | 200 +++++++++---------
 .../views/includes/main/header.blade.php      | 166 ++++++++++-----
 resources/views/includes/profile.blade.php    | 181 +++++++++++-----
 3 files changed, 335 insertions(+), 212 deletions(-)

diff --git a/public/css/material-kit.css b/public/css/material-kit.css
index f09532c..20824bf 100644
--- a/public/css/material-kit.css
+++ b/public/css/material-kit.css
@@ -27,7 +27,7 @@
   --bs-gray-700: #495057;
   --bs-gray-800: #343a40;
   --bs-gray-900: #212529;
-  --bs-primary: #e91e63;
+  --bs-primary: #005CA7;
   --bs-secondary: #7b809a;
   --bs-success: #4CAF50;
   --bs-info: #1A73E8;
@@ -36,7 +36,7 @@
   --bs-light: #f0f2f5;
   --bs-dark: #344767;
   --bs-white: #fff;
-  --bs-primary-rgb: 233, 30, 99;
+  --bs-primary-rgb: 0, 92, 167;
   --bs-secondary-rgb: , 128, 154;
   --bs-success-rgb: 76, 175, 80;
   --bs-info-rgb: 26, 115, 232;
@@ -261,12 +261,12 @@ sup {
 }
 
 a {
-  color: #e91e63;
+  color: #005CA7;
   text-decoration: none;
 }
 
 a:hover {
-  color: #e91e63;
+  color: #005CA7;
   text-decoration: none;
 }
 
@@ -3001,16 +3001,16 @@ textarea.form-control-lg {
 }
 
 .form-check-input:checked[type="checkbox"] {
-  background-image: linear-gradient(195deg, #EC407A 0%, #D81B60 100%);
+  background-image: linear-gradient(195deg, #0062B3 0%, #003866 100%);
 }
 
 .form-check-input:checked[type="radio"] {
-  background-image: linear-gradient(195deg, #EC407A 0%, #D81B60 100%);
+  background-image: linear-gradient(195deg, #0062B3 0%, #003866 100%);
 }
 
 .form-check-input[type="checkbox"]:indeterminate {
-  background-color: #e91e63;
-  border-color: #e91e63;
+  background-color: #005CA7;
+  border-color: #005CA7;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
 }
 
@@ -3099,7 +3099,7 @@ textarea.form-control-lg {
   width: 1rem;
   height: 1rem;
   margin-top: -0.25rem;
-  background-color: #e91e63;
+  background-color: #005CA7;
   border: 0;
   border-radius: 1rem;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@@ -3129,7 +3129,7 @@ textarea.form-control-lg {
 .form-range::-moz-range-thumb {
   width: 1rem;
   height: 1rem;
-  background-color: #e91e63;
+  background-color: #005CA7;
   border: 0;
   border-radius: 1rem;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@@ -3580,21 +3580,21 @@ fieldset:disabled .btn {
 
 .btn-primary {
   color: #000;
-  background-color: #e91e63;
-  border-color: #e91e63;
+  background-color: #005CA7;
+  border-color: #005CA7;
 }
 
 .btn-primary:hover {
   color: #000;
-  background-color: #ec407a;
-  border-color: #eb3573;
+  background-color: #0062B3;
+  border-color: #004D8C;
 }
 
 .btn-check:focus+.btn-primary,
 .btn-primary:focus {
   color: #000;
-  background-color: #ec407a;
-  border-color: #eb3573;
+  background-color: #0062B3;
+  border-color: #004D8C;
   box-shadow: 0 0 0 0.2rem rgba(198, 26, 84, 0.5);
 }
 
@@ -3604,8 +3604,8 @@ fieldset:disabled .btn {
 .btn-primary.active,
 .show>.btn-primary.dropdown-toggle {
   color: #000;
-  background-color: #ed4b82;
-  border-color: #eb3573;
+  background-color: #0085F2;
+  border-color: #004D8C;
 }
 
 .btn-check:checked+.btn-primary:focus,
@@ -3619,8 +3619,8 @@ fieldset:disabled .btn {
 .btn-primary:disabled,
 .btn-primary.disabled {
   color: #000;
-  background-color: #e91e63;
-  border-color: #e91e63;
+  background-color: #005CA7;
+  border-color: #005CA7;
 }
 
 .btn-secondary {
@@ -3984,19 +3984,19 @@ fieldset:disabled .btn {
 }
 
 .btn-outline-primary {
-  color: #e91e63;
-  border-color: #e91e63;
+  color: #005CA7;
+  border-color: #005CA7;
 }
 
 .btn-outline-primary:hover {
   color: #000;
-  background-color: #e91e63;
-  border-color: #e91e63;
+  background-color: #005CA7;
+  border-color: #005CA7;
 }
 
 .btn-check:focus+.btn-outline-primary,
 .btn-outline-primary:focus {
-  box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(0, 92, 167, 0.5);
 }
 
 .btn-check:checked+.btn-outline-primary,
@@ -4005,8 +4005,8 @@ fieldset:disabled .btn {
 .btn-outline-primary.active,
 .btn-outline-primary.dropdown-toggle.show {
   color: #000;
-  background-color: #e91e63;
-  border-color: #e91e63;
+  background-color: #005CA7;
+  border-color: #005CA7;
 }
 
 .btn-check:checked+.btn-outline-primary:focus,
@@ -4014,12 +4014,12 @@ fieldset:disabled .btn {
 .btn-outline-primary:active:focus,
 .btn-outline-primary.active:focus,
 .btn-outline-primary.dropdown-toggle.show:focus {
-  box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(0, 92, 167, 0.5);
 }
 
 .btn-outline-primary:disabled,
 .btn-outline-primary.disabled {
-  color: #e91e63;
+  color: #005CA7;
   background-color: transparent;
 }
 
@@ -4345,12 +4345,12 @@ fieldset:disabled .btn {
 
 .btn-link {
   font-weight: 400;
-  color: #e91e63;
+  color: #005CA7;
   text-decoration: none;
 }
 
 .btn-link:hover {
-  color: #e91e63;
+  color: #005CA7;
   text-decoration: none;
 }
 
@@ -4892,7 +4892,7 @@ fieldset:disabled .btn {
 .nav-link {
   display: block;
   padding: 0.5rem 1rem;
-  color: #e91e63;
+  color: #005CA7;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }
 
@@ -4904,7 +4904,7 @@ fieldset:disabled .btn {
 
 .nav-link:hover,
 .nav-link:focus {
-  color: #e91e63;
+  color: #005CA7;
 }
 
 .nav-link.disabled {
@@ -5899,7 +5899,7 @@ fieldset:disabled .btn {
 .page-link {
   position: relative;
   display: block;
-  color: #e91e63;
+  color: #005CA7;
   background-color: #fff;
   border: 1px solid #dee2e6;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@@ -5913,17 +5913,17 @@ fieldset:disabled .btn {
 
 .page-link:hover {
   z-index: 2;
-  color: #e91e63;
+  color: #005CA7;
   background-color: #f0f2f5;
   border-color: #dee2e6;
 }
 
 .page-link:focus {
   z-index: 3;
-  color: #e91e63;
+  color: #005CA7;
   background-color: #f0f2f5;
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.25);
+  box-shadow: 0 0 0 0.2rem rgba(0, 92, 167, 0.25);
 }
 
 .page-item:not(:first-child) .page-link {
@@ -5933,8 +5933,8 @@ fieldset:disabled .btn {
 .page-item.active .page-link {
   z-index: 3;
   color: #fff;
-  background-color: #e91e63;
-  border-color: #e91e63;
+  background-color: #005CA7;
+  border-color: #005CA7;
 }
 
 .page-item.disabled .page-link {
@@ -6151,7 +6151,7 @@ fieldset:disabled .btn {
   color: #fff;
   text-align: center;
   white-space: nowrap;
-  background-color: #e91e63;
+  background-color: #005CA7;
   transition: width 0.6s ease;
 }
 
@@ -6242,8 +6242,8 @@ fieldset:disabled .btn {
 .list-group-item.active {
   z-index: 2;
   color: #fff;
-  background-color: #e91e63;
-  border-color: #e91e63;
+  background-color: #005CA7;
+  border-color: #005CA7;
 }
 
 .list-group-item+.list-group-item {
@@ -6618,7 +6618,7 @@ fieldset:disabled .btn {
 
 .btn-close:focus {
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.25);
+  box-shadow: 0 0 0 0.2rem rgba(0, 92, 167, 0.25);
   opacity: 1;
 }
 
@@ -7730,12 +7730,12 @@ fieldset:disabled .btn {
 }
 
 .link-primary {
-  color: #e91e63;
+  color: #005CA7;
 }
 
 .link-primary:hover,
 .link-primary:focus {
-  color: #ed4b82;
+  color: #0085F2;
 }
 
 .link-secondary {
@@ -8396,7 +8396,7 @@ fieldset:disabled .btn {
 }
 
 .border-primary {
-  border-color: #e91e63 !important;
+  border-color: #005CA7 !important;
 }
 
 .border-secondary {
@@ -10185,7 +10185,7 @@ fieldset:disabled .btn {
 
 /* rtl:end:remove */
 .text-primary {
-  color: #e91e63 !important;
+  color: #005CA7 !important;
 }
 
 .text-new {
@@ -10229,7 +10229,7 @@ fieldset:disabled .btn {
 }
 
 .text-rose {
-  color: #e91e63 !important;
+  color: #005CA7 !important;
 }
 
 .text-muted {
@@ -10265,7 +10265,7 @@ fieldset:disabled .btn {
 }
 
 .bg-primary {
-  background-color: #e91e63 !important;
+  background-color: #005CA7 !important;
 }
 
 .bg-secondary {
@@ -10478,7 +10478,7 @@ fieldset:disabled .btn {
 }
 
 .shadow-primary {
-  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4) !important;
+  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 92, 167, 0.4) !important;
 }
 
 .shadow-secondary {
@@ -10506,7 +10506,7 @@ fieldset:disabled .btn {
 }
 
 .shadow-light {
-  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4) !important;
+  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 92, 167, 0.4) !important;
 }
 
 .transform-scale-5 {
@@ -19847,7 +19847,7 @@ fieldset:disabled .btn {
 
 */
 .alert-primary {
-  background-image: linear-gradient(195deg, #EC407A 0%, #D81B60 100%);
+  background-image: linear-gradient(195deg, #0062B3 0%, #003866 100%);
 }
 
 .alert-secondary {
@@ -19982,7 +19982,7 @@ fieldset:disabled .btn {
 }
 
 .badge.bg-primary {
-  background: #e91e63;
+  background: #005CA7;
 }
 
 .badge.bg-secondary {
@@ -20134,19 +20134,19 @@ fieldset:disabled .btn {
 
 .btn-primary,
 .btn.bg-gradient-primary {
-  box-shadow: 0 3px 3px 0 rgba(233, 30, 99, 0.15), 0 3px 1px -2px rgba(233, 30, 99, 0.2), 0 1px 5px 0 rgba(233, 30, 99, 0.15);
+  box-shadow: 0 3px 3px 0 rgba(0, 92, 167, 0.15), 0 3px 1px -2px rgba(0, 92, 167, 0.2), 0 1px 5px 0 rgba(0, 92, 167, 0.15);
 }
 
 .btn-primary:hover,
 .btn.bg-gradient-primary:hover {
-  background-color: #e91e63;
-  border-color: #e91e63;
-  box-shadow: 0 14px 26px -12px rgba(233, 30, 99, 0.4), 0 4px 23px 0 rgba(233, 30, 99, 0.15), 0 8px 10px -5px rgba(233, 30, 99, 0.2);
+  background-color: #005CA7;
+  border-color: #005CA7;
+  box-shadow: 0 14px 26px -12px rgba(0, 92, 167, 0.4), 0 4px 23px 0 rgba(0, 92, 167, 0.15), 0 8px 10px -5px rgba(0, 92, 167, 0.2);
 }
 
 .btn-primary .btn.bg-outline-primary,
 .btn.bg-gradient-primary .btn.bg-outline-primary {
-  border: 1px solid #e91e63;
+  border: 1px solid #005CA7;
 }
 
 .btn-primary:not(:disabled):not(.disabled).active,
@@ -20155,8 +20155,8 @@ fieldset:disabled .btn {
 .btn.bg-gradient-primary:not(:disabled):not(.disabled).active,
 .btn.bg-gradient-primary:not(:disabled):not(.disabled):active,
 .show>.btn.bg-gradient-primary.dropdown-toggle {
-  color: color-yiq(#e91e63);
-  background-color: #e91e63;
+  color: color-yiq(#005CA7);
+  background-color: #005CA7;
 }
 
 .btn-primary.focus,
@@ -20174,7 +20174,7 @@ fieldset:disabled .btn {
   background-color: transparent;
   opacity: .75;
   box-shadow: none;
-  color: #e91e63;
+  color: #005CA7;
 }
 
 .btn-secondary,
@@ -20766,7 +20766,7 @@ fieldset:disabled .btn {
 }
 
 .card.card-background.card-background-mask-primary:after {
-  background-image: linear-gradient(195deg, #EC407A 0%, #D81B60 100%);
+  background-image: linear-gradient(195deg, #0062B3 0%, #003866 100%);
   opacity: .85;
 }
 
@@ -20925,7 +20925,7 @@ fieldset:disabled .btn {
   top: 0;
   content: "";
   border-radius: 0.5rem;
-  background-image: linear-gradient(195deg, #EC407A, #D81B60);
+  background-image: linear-gradient(195deg, #0062B3, #003866);
   opacity: .85;
 }
 
@@ -21118,7 +21118,7 @@ fieldset:disabled .btn {
 
 .dark-version .input-group.input-group-dynamic .form-control,
 .dark-version .input-group.input-group-static .form-control {
-  background-image: linear-gradient(0deg, #e91e63 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, rgba(210, 210, 210, 0.6) 1px, rgba(209, 209, 209, 0) 0) !important;
+  background-image: linear-gradient(0deg, #005CA7 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, rgba(210, 210, 210, 0.6) 1px, rgba(209, 209, 209, 0) 0) !important;
   background-size: 0 100%, 100% 100%;
 }
 
@@ -21688,7 +21688,7 @@ body.dark-version {
 .input-group.input-group-dynamic .form-control:focus,
 .input-group.input-group-static .form-control,
 .input-group.input-group-static .form-control:focus {
-  background-image: linear-gradient(0deg, #e91e63 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, rgba(209, 209, 209, 0) 0);
+  background-image: linear-gradient(0deg, #005CA7 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, rgba(209, 209, 209, 0) 0);
   border-radius: 0 !important;
 }
 
@@ -21700,7 +21700,7 @@ body.dark-version {
 .input-group.input-group-dynamic .form-control[disabled],
 .input-group.input-group-static .form-control[disabled] {
   cursor: not-allowed;
-  background-image: linear-gradient(0deg, #e91e63 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #f0f2f5 1px, rgba(209, 209, 209, 0) 0) !important;
+  background-image: linear-gradient(0deg, #005CA7 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #f0f2f5 1px, rgba(209, 209, 209, 0) 0) !important;
 }
 
 .input-group.input-group-dynamic .input-group-text,
@@ -21722,7 +21722,7 @@ body.dark-version {
 
 .input-group.input-group-dynamic.is-focused label,
 .input-group.input-group-static.is-focused label {
-  color: #e91e63;
+  color: #005CA7;
 }
 
 .input-group.input-group-dynamic.is-focused.is-valid label,
@@ -21836,9 +21836,9 @@ body.dark-version {
 
 .input-group.input-group-outline.is-focused .form-label+.form-control,
 .input-group.input-group-outline.is-filled .form-label+.form-control {
-  border-color: #e91e63 !important;
+  border-color: #005CA7 !important;
   border-top-color: transparent !important;
-  box-shadow: inset 1px 0 #e91e63, inset -1px 0 #e91e63, inset 0 -1px #e91e63;
+  box-shadow: inset 1px 0 #005CA7, inset -1px 0 #005CA7, inset 0 -1px #005CA7;
 }
 
 .input-group.input-group-outline.is-focused .form-label,
@@ -21846,7 +21846,7 @@ body.dark-version {
   width: 100%;
   height: 100%;
   font-size: 0.6875rem !important;
-  color: #e91e63;
+  color: #005CA7;
   display: flex;
   line-height: 1.25 !important;
 }
@@ -21862,8 +21862,8 @@ body.dark-version {
 .input-group.input-group-outline.is-focused .form-label:after,
 .input-group.input-group-outline.is-filled .form-label:before,
 .input-group.input-group-outline.is-filled .form-label:after {
-  border-top-color: #e91e63;
-  box-shadow: inset 0 1px #e91e63;
+  border-top-color: #005CA7;
+  box-shadow: inset 0 1px #005CA7;
 }
 
 .input-group.input-group-outline.is-valid .form-control {
@@ -21961,7 +21961,7 @@ body.dark-version {
 
 .form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked,
 .form-check:not(.form-switch) .form-check-input[type="radio"]:checked {
-  border-color: #e91e63;
+  border-color: #005CA7;
 }
 
 .form-check:not(.form-switch) .form-check-input[type="checkbox"] {
@@ -21984,7 +21984,7 @@ body.dark-version {
 }
 
 .form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked {
-  background: #e91e63;
+  background: #005CA7;
 }
 
 .form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked:after {
@@ -22003,7 +22003,7 @@ body.dark-version {
   width: 0.8375rem;
   height: 0.8375rem;
   border-radius: 50%;
-  background-image: linear-gradient(195deg, #EC407A 0%, #D81B60 100%), var(--bs-gradient);
+  background-image: linear-gradient(195deg, #0062B3 0%, #003866 100%), var(--bs-gradient);
   opacity: 0;
   left: 0;
   right: 0;
@@ -22164,7 +22164,7 @@ label,
 }
 
 .bg-gradient-primary {
-  background-image: linear-gradient(195deg, #EC407A 0%, #D81B60 100%);
+  background-image: linear-gradient(195deg, #0062B3 0%, #003866 100%);
 }
 
 .bg-gradient-secondary {
@@ -22196,7 +22196,7 @@ label,
 }
 
 .bg-gradient-faded-primary {
-  background-image: radial-gradient(370px circle at 80% 50%, rgba(233, 30, 99, 0.6) 0, #c1134e 100%);
+  background-image: radial-gradient(370px circle at 80% 50%, rgba(0, 92, 167, 0.6) 0, #c1134e 100%);
 }
 
 .bg-gradient-faded-secondary {
@@ -22232,7 +22232,7 @@ label,
 }
 
 .bg-gradient-faded-primary-vertical {
-  background-image: radial-gradient(200px circle at 50% 70%, rgba(233, 30, 99, 0.3) 0, #e91e63 100%);
+  background-image: radial-gradient(200px circle at 50% 70%, rgba(0, 92, 167, 0.3) 0, #005CA7 100%);
 }
 
 .bg-gradient-faded-secondary-vertical {
@@ -22417,11 +22417,11 @@ label,
 }
 
 svg.text-primary .color-foreground {
-  fill: #EC407A;
+  fill: #0062B3;
 }
 
 svg.text-primary .color-background {
-  fill: #D81B60;
+  fill: #003866;
 }
 
 svg.text-secondary .color-foreground {
@@ -22539,7 +22539,7 @@ svg.text-dark .color-background {
 }
 
 *.gradient-animation {
-  background: linear-gradient(-45deg, #49a3f1, #F44335, #fb8c00, #EC407A, #344767);
+  background: linear-gradient(-45deg, #49a3f1, #F44335, #fb8c00, #0062B3, #344767);
   background-size: 400% 400% !important;
   animation: gradient 10s ease infinite;
 }
@@ -22785,7 +22785,7 @@ hr.horizontal.gray-light {
 
 .choices .choices__list.choices__list--single,
 .choices .choices__list.choices__list--single:focus {
-  background-image: linear-gradient(0deg, #e91e63 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, rgba(209, 209, 209, 0) 0);
+  background-image: linear-gradient(0deg, #005CA7 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, rgba(209, 209, 209, 0) 0);
 }
 
 .choices .choices__list.choices__list--dropdown {
@@ -23112,7 +23112,7 @@ hr.horizontal.gray-light {
 .navbar-vertical.navbar-expand-xs .lavalamp-object {
   width: calc(100% - 1rem) !important;
   background: theme-color("primary");
-  color: color-yiq(#e91e63);
+  color: color-yiq(#005CA7);
   margin-right: 0.5rem;
   margin-left: 0.5rem;
   padding-left: 1rem;
@@ -23209,7 +23209,7 @@ hr.horizontal.gray-light {
   .navbar-vertical.navbar-expand-sm .lavalamp-object {
     width: calc(100% - 1rem) !important;
     background: theme-color("primary");
-    color: color-yiq(#e91e63);
+    color: color-yiq(#005CA7);
     margin-right: 0.5rem;
     margin-left: 0.5rem;
     padding-left: 1rem;
@@ -23307,7 +23307,7 @@ hr.horizontal.gray-light {
   .navbar-vertical.navbar-expand-md .lavalamp-object {
     width: calc(100% - 1rem) !important;
     background: theme-color("primary");
-    color: color-yiq(#e91e63);
+    color: color-yiq(#005CA7);
     margin-right: 0.5rem;
     margin-left: 0.5rem;
     padding-left: 1rem;
@@ -23405,7 +23405,7 @@ hr.horizontal.gray-light {
   .navbar-vertical.navbar-expand-lg .lavalamp-object {
     width: calc(100% - 1rem) !important;
     background: theme-color("primary");
-    color: color-yiq(#e91e63);
+    color: color-yiq(#005CA7);
     margin-right: 0.5rem;
     margin-left: 0.5rem;
     padding-left: 1rem;
@@ -23503,7 +23503,7 @@ hr.horizontal.gray-light {
   .navbar-vertical.navbar-expand-xl .lavalamp-object {
     width: calc(100% - 1rem) !important;
     background: theme-color("primary");
-    color: color-yiq(#e91e63);
+    color: color-yiq(#005CA7);
     margin-right: 0.5rem;
     margin-left: 0.5rem;
     padding-left: 1rem;
@@ -23601,7 +23601,7 @@ hr.horizontal.gray-light {
   .navbar-vertical.navbar-expand-xxl .lavalamp-object {
     width: calc(100% - 1rem) !important;
     background: theme-color("primary");
-    color: color-yiq(#e91e63);
+    color: color-yiq(#005CA7);
     margin-right: 0.5rem;
     margin-left: 0.5rem;
     padding-left: 1rem;
@@ -23627,7 +23627,7 @@ hr.horizontal.gray-light {
 
 .sidenav[data-color="primary"] .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item.active .nav-link.active,
 .sidenav[data-color="primary"] .navbar-nav>.nav-item .nav-link.active+.collapsing .nav-item.active .nav-link.active {
-  background-image: linear-gradient(195deg, #e91e63 0%, #e91e63 100%);
+  background-image: linear-gradient(195deg, #005CA7 0%, #005CA7 100%);
 }
 
 .sidenav[data-color="primary"] .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item .nav-link.active,
@@ -23637,7 +23637,7 @@ hr.horizontal.gray-light {
 
 .sidenav[data-color="primary"] .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item .nav-link.active+.collapse .nav-item .nav-link.active,
 .sidenav[data-color="primary"] .navbar-nav>.nav-item .nav-link.active+.collapsing .nav-item .nav-link.active+.collapse .nav-item .nav-link.active {
-  background-image: linear-gradient(195deg, #e91e63 0%, #e91e63 100%);
+  background-image: linear-gradient(195deg, #005CA7 0%, #005CA7 100%);
 }
 
 .sidenav[data-color="secondary"] .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item.active .nav-link.active,
@@ -23880,7 +23880,7 @@ hr.horizontal.gray-light {
 
 .navbar-vertical .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item.active .nav-link.active,
 .navbar-vertical .navbar-nav>.nav-item .nav-link.active+.collapsing .nav-item.active .nav-link.active {
-  background-image: linear-gradient(195deg, #e91e63 0%, #e91e63 100%);
+  background-image: linear-gradient(195deg, #005CA7 0%, #005CA7 100%);
 }
 
 .navbar-vertical .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item.active .nav-link.active span,
@@ -23895,7 +23895,7 @@ hr.horizontal.gray-light {
 
 .navbar-vertical .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item .nav-link.active+.collapse .nav-item .nav-link.active,
 .navbar-vertical .navbar-nav>.nav-item .nav-link.active+.collapsing .nav-item .nav-link.active+.collapse .nav-item .nav-link.active {
-  background-image: linear-gradient(195deg, #e91e63 0%, #e91e63 100%);
+  background-image: linear-gradient(195deg, #005CA7 0%, #005CA7 100%);
 }
 
 .navbar-main {
@@ -24206,8 +24206,8 @@ hr.horizontal.gray-light {
 }
 
 .nav.nav-pills.nav-pills-primary .moving-tab .nav-link.active {
-  background: #EC407A;
-  color: #EC407A;
+  background: #0062B3;
+  color: #0062B3;
 }
 
 .nav.nav-pills.nav-pills-info {
@@ -24327,7 +24327,7 @@ hr.horizontal.gray-light {
 .pagination.pagination-primary .page-item.active>.page-link,
 .pagination.pagination-primary .page-item.active>.page-link:focus,
 .pagination.pagination-primary .page-item.active>.page-link:hover {
-  background-image: linear-gradient(195deg, #EC407A 0%, #D81B60 100%);
+  background-image: linear-gradient(195deg, #0062B3 0%, #003866 100%);
   border: none;
 }
 
@@ -25530,7 +25530,7 @@ p {
 }
 
 .text-gradient.text-primary {
-  background-image: linear-gradient(195deg, #EC407A, #D81B60);
+  background-image: linear-gradient(195deg, #0062B3, #003866);
 }
 
 .text-gradient.text-info {
@@ -26587,7 +26587,7 @@ span.flatpickr-weekday {
 .flatpickr-calendar .flatpickr-day.selected,
 .flatpickr-calendar .flatpickr-day.startRange,
 .flatpickr-calendar .flatpickr-day.endRange {
-  background: #e91e63 !important;
+  background: #005CA7 !important;
   color: #fff;
   border: none;
 }
@@ -26619,7 +26619,7 @@ span.flatpickr-weekday {
 .flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)),
 .flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),
 .flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)) {
-  box-shadow: -10px 0 0 #e91e63;
+  box-shadow: -10px 0 0 #005CA7;
 }
 
 /*! nouislider - 14.6.3 - 11/19/2020 */
@@ -26772,7 +26772,7 @@ span.flatpickr-weekday {
 }
 
 .noUi-connect {
-  background: #e91e63;
+  background: #005CA7;
 }
 
 /* Handles and cursors;
@@ -26786,7 +26786,7 @@ span.flatpickr-weekday {
 }
 
 .noUi-handle {
-  border: 1px solid #e91e63;
+  border: 1px solid #005CA7;
   border-radius: 3px;
   background: #fff;
   cursor: default;
diff --git a/resources/views/includes/main/header.blade.php b/resources/views/includes/main/header.blade.php
index 2ac5ba5..549794c 100644
--- a/resources/views/includes/main/header.blade.php
+++ b/resources/views/includes/main/header.blade.php
@@ -1,60 +1,118 @@
-<nav class="navbar navbar-expand-lg position-absolute top-0 z-index-3 w-100 shadow-none my-3  navbar-transparent ">
-    <div class="container">
-        <a class="navbar-brand  text-white " href="#home" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom">
-            MOHAMAD HAFIZUDDIN BIN HANAFI
-        </a>
-        <button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon mt-2">
-                <span class="navbar-toggler-bar bar1"></span>
-                <span class="navbar-toggler-bar bar2"></span>
-                <span class="navbar-toggler-bar bar3"></span>
-            </span>
-        </button>
-        <div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0 ms-lg-12 ps-lg-5" id="navigation">
-            <ul class="navbar-nav navbar-nav-hover ms-auto">
-                <li class="nav-item ms-lg-auto">
-                    <a class="nav-link nav-link-icon me-2" href="#rekodpembelian">
-                        <i class="fa fa-list-alt me-1"></i>
-                        <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Senarai Rekod Gadaian & Tebusan">Rekod Pembelian</p>
+<!-- <div class="container position-sticky z-index-sticky top-0">
+    <div class="row">
+        <div class="col-12">
+            <nav class="navbar navbar-expand-lg position-absolute top-0 z-index-3 w-100 shadow-none my-3  navbar-transparent ">
+                <div class="container">
+                    <a class="navbar-brand  text-white " href="#home" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom">
+                        MOHAMAD HAFIZUDDIN BIN HANAFI
                     </a>
-                </li>
-                <li class="nav-item ms-lg-auto">
-                    <a class="nav-link nav-link-icon me-2" href="#pemabayaran">
-                        <i class="fa fa-money me-1"></i>
-                        <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Transaksi Pembayaran Upah">Pembayaran</p>
-                    </a>
-                </li>
-                <li class="nav-item ms-lg-auto">
-                    <a class="nav-link nav-link-icon me-2" href="#tebus">
-                        <i class="fa fa-exchange me-1"></i>
-                        <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tebus Marhun">Tebus</p>
-                    </a>
-                </li>
-                <li class="nav-item ms-lg-auto">
-                    <a class="nav-link nav-link-icon me-2" href="#analisa">
-                        <i class="fa fa-line-chart me-1"></i>
-                        <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Analisa Marhun">Analisa</p>
-                    </a>
-                </li>
-                <li class="nav-item ms-lg-auto">
-                    <a class="nav-link nav-link-icon me-2" href="#analisa">
-                        <i class="fa fa-microchip me-1"></i>
-                        <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Function Seterusnya">Next</p>
-                    </a>
-                </li>
-                <li class="nav-item ms-lg-auto">
-                    <a class="nav-link nav-link-icon me-2" href="portalprofile">
-                        <i class="fa fa-user me-1"></i>
-                        <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tetapan Profile">Profil</p>
-                    </a>
-                </li>
-                <li class="nav-item my-auto ms-3 ms-lg-0">
-                    <a href="loginportal" class="btn btn-sm  bg-white  mb-0 me-1 mt-2 mt-md-0">Log out</a>
-                </li>
-            </ul>
+                    <button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
+                        <span class="navbar-toggler-icon mt-2">
+                            <span class="navbar-toggler-bar bar1"></span>
+                            <span class="navbar-toggler-bar bar2"></span>
+                            <span class="navbar-toggler-bar bar3"></span>
+                        </span>
+                    </button>
+                    <div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0 ms-lg-12 ps-lg-5" id="navigation">
+                        <ul class="navbar-nav navbar-nav-hover ms-auto">
+                            <li class="nav-item ms-lg-auto">
+                                <a class="nav-link nav-link-icon me-2" href="#rekodpembelian">
+                                    <i class="fa fa-list-alt me-1"></i>
+                                    <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Senarai Rekod Gadaian & Tebusan">Rekod Pembelian</p>
+                                </a>
+                            </li>
+                            <li class="nav-item ms-lg-auto">
+                                <a class="nav-link nav-link-icon me-2" href="#pemabayaran">
+                                    <i class="fa fa-money me-1"></i>
+                                    <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Transaksi Pembayaran Upah">Pembayaran</p>
+                                </a>
+                            </li>
+                            <li class="nav-item ms-lg-auto">
+                                <a class="nav-link nav-link-icon me-2" href="#tebus">
+                                    <i class="fa fa-exchange me-1"></i>
+                                    <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tebus Marhun">Tebus</p>
+                                </a>
+                            </li>
+                            <li class="nav-item ms-lg-auto">
+                                <a class="nav-link nav-link-icon me-2" href="#analisa">
+                                    <i class="fa fa-line-chart me-1"></i>
+                                    <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Analisa Marhun">Analisa</p>
+                                </a>
+                            </li>
+                            <li class="nav-item ms-lg-auto">
+                                <a class="nav-link nav-link-icon me-2" href="#analisa">
+                                    <i class="fa fa-microchip me-1"></i>
+                                    <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Function Seterusnya">Next</p>
+                                </a>
+                            </li>
+                            <li class="nav-item ms-lg-auto">
+                                <a class="nav-link nav-link-icon me-2" href="portalprofile">
+                                    <i class="fa fa-user me-1"></i>
+                                    <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tetapan Profile">Profil</p>
+                                </a>
+                            </li>
+                            <li class="nav-item my-auto ms-3 ms-lg-0">
+                                <a href="loginportal" class="btn btn-sm  bg-white  mb-0 me-1 mt-2 mt-md-0">Log out</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </nav>
         </div>
     </div>
-</nav>
+</div> -->
+<div class="container position-sticky z-index-sticky top-0">
+    <div class="row">
+        <div class="col-12">
+            <nav class="navbar navbar-expand-lg  blur border-radius-xl top-0 z-index-fixed shadow position-absolute my-3 py-2 start-0 end-0 mx-4">
+                <div class="container-fluid px-0">
+                    <a class="navbar-brand font-weight-bolder ms-sm-3" href="portalhome" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom">
+                        CUSTOMER PORTAL
+                    </a>
+                    <button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
+                        <span class="navbar-toggler-icon mt-2">
+                            <span class="navbar-toggler-bar bar1"></span>
+                            <span class="navbar-toggler-bar bar2"></span>
+                            <span class="navbar-toggler-bar bar3"></span>
+                        </span>
+                    </button>
+                    <div class="collapse navbar-collapse pt-3 pb-2 py-lg-0 w-100" id="navigation">
+                        <ul class="navbar-nav navbar-nav-hover ms-auto">
+                            <li class="nav-item ms-lg-auto">
+                                <a class="nav-link nav-link-icon me-2" href="#rekodpembelian">
+                                    <i class="fa fa-list-alt me-1"></i>
+                                    <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Senarai Rekod Gadaian & Tebusan">Rekod Pembelian</p>
+                                </a>
+                            </li>
+                            <li class="nav-item ms-lg-auto">
+                                <a class="nav-link nav-link-icon me-2" href="#pemabayaran">
+                                    <i class="fa fa-money me-1"></i>
+                                    <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Transaksi Pembayaran Upah">Pembayaran</p>
+                                </a>
+                            </li>
+                            <li class="nav-item ms-lg-auto">
+                                <a class="nav-link nav-link-icon me-2" href="#analisa">
+                                    <i class="fa fa-line-chart me-1"></i>
+                                    <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Analisa Marhun">Analisa</p>
+                                </a>
+                            </li>
+                            <li class="nav-item ms-lg-auto">
+                                <a class="nav-link nav-link-icon me-2" href="portalprofile">
+                                    <i class="fa fa-user me-1"></i>
+                                    <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tetapan Profile">Mohamad Hafizuddin Hanafi Bin Hanafi</p>
+                                </a>
+                            </li>
+                            <li class="nav-item my-auto ms-3 ms-lg-0">
+                                <a href="loginportal" class="btn btn-sm  bg-white  mb-0 me-1 mt-2 mt-md-0">Log out</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </nav>
+            <!-- End Navbar -->
+        </div>
+    </div>
+</div>
 
 <header class="bg-gradient-dark">
     <div class="page-header min-vh-75" style="background-image: url('assets/img/material-kit/internal/building.jpg');">
diff --git a/resources/views/includes/profile.blade.php b/resources/views/includes/profile.blade.php
index cc9ad8f..521dfae 100644
--- a/resources/views/includes/profile.blade.php
+++ b/resources/views/includes/profile.blade.php
@@ -2,7 +2,9 @@
 
 @section('content')
 
-<div class="col-xl-5 col-lg-6 col-md-7 d-flex flex-column ms-auto me-auto ms-lg-auto me-lg-5">
+<title>Profil | Customer Portal</title>
+
+<div class="col-xl-12">
     <div class="card d-flex blur justify-content-center shadow-lg my-sm-0 my-sm-6 mt-8 mb-5">
         <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2 bg-transparent">
             <div class="bg-gradient-primary shadow-primary border-radius-lg p-3">
@@ -10,72 +12,135 @@
             </div>
         </div>
         <div class="card-body">
-            <p class="pb-3">
-                For further questions, including partnership opportunities, please email hello@creative-tim.com
-                or contact using our contact form.
-            </p>
-            <form id="contact-form" method="post" autocomplete="off">
-                <div class="card-body p-0 my-3">
-                    <div class="row">
-                        <div class="col-md-6">
-                            <div class="input-group input-group-static mb-4">
-                                <label>Nama</label>
-                                <input type="email" class="form-control" placeholder="Full Name">
+
+            <section>
+                <div class="container">
+                    <div class="row justify-space-between py-2">
+                        <div class="col-lg-6 mx-auto">
+                            <div class="nav-wrapper position-relative end-0">
+                                <ul class="nav nav-pills nav-fill p-1" role="tablist">
+                                    <li class="nav-item">
+                                        <a class="nav-link mb-0 px-0 py-1 d-flex align-items-center justify-content-center active" data-bs-toggle="tab" href="#maklumatperibadi" role="tab" aria-controls="preview" aria-selected="true">
+                                            <i class="material-icons text-sm me-2">person</i> Maklumat Peribadi
+                                        </a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a class="nav-link mb-0 px-0 py-1 d-flex align-items-center justify-content-center" data-bs-toggle="tab" href="#katalaluan" role="tab" aria-controls="code" aria-selected="false">
+                                            <i class="material-icons text-sm me-2">dashboard</i> Kata Laluan
+                                        </a>
+                                    </li>
+                                </ul>
                             </div>
                         </div>
-                        <div class="col-md-6 ps-md-2">
-                            <div class="input-group input-group-static mb-4">
-                                <label>Email</label>
-                                <input type="email" class="form-control" placeholder="hello@creative-tim.com">
-                            </div>
-                        </div>
-                        <div class="col-md-6">
-                            <div class="input-group input-group-static mb-4">
-                                <label>IC</label>
-                                <input type="email" class="form-control" placeholder="Full Name">
-                            </div>
-                        </div>
-                        <div class="col-md-6 ps-md-2">
-                            <div class="input-group input-group-static mb-4">
-                                <label>No Telefon</label>
-                                <input type="email" class="form-control" placeholder="hello@creative-tim.com">
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form-group mb-0 mt-md-0 mt-4">
-                        <div class="input-group input-group-static mb-4">
-                            <label>Alamat</label>
-                            <textarea name="message" class="form-control" id="message" rows="6" placeholder="Describe your problem in at least 250 characters"></textarea>
-                        </div>
                     </div>
 
-                    <div class="row">
-                        <div class="col-md-4">
-                            <div class="input-group input-group-static mb-4">
-                                <label>Poskod</label>
-                                <input type="email" class="form-control" placeholder="Full Name">
+                    <div class="tab-content tab-space">
+                        <div class="tab-pane active" id="maklumatperibadi">
+                            <form id="contact-form" method="#" autocomplete="off">
+                                <div class="card-body p-0 my-3 mt-5">
+                                    <div class="row">
+                                        <div class="col-md-6">
+                                            <div class="input-group input-group-static mb-4">
+                                                <label>Nama</label>
+                                                <input type="email" class="form-control" placeholder="Mohamad Hafizuddin Hanafi Bin Hanafi" readonly>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6 ps-md-2">
+                                            <div class="input-group input-group-static mb-4">
+                                                <label>Email</label>
+                                                <input type="email" class="form-control" placeholder="hafizudiin@google.com" readonly>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="input-group input-group-static mb-4">
+                                                <label>IC</label>
+                                                <input type="email" class="form-control" placeholder="901203035858" readonly>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6 ps-md-2">
+                                            <div class="input-group input-group-static mb-4">
+                                                <label>No Telefon</label>
+                                                <input type="email" class="form-control" placeholder="0168989052" readonly>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="form-group mb-0 mt-md-0 mt-4">
+                                        <div class="input-group input-group-static mb-4">
+                                            <label>Alamat</label>
+                                            <input type="email" class="form-control" placeholder="Lot 1934, Seksyen 47, Jalan Bunut Payong" readonly>
+                                        </div>
+                                    </div>
+
+                                    <div class="row">
+                                        <div class="col-md-4">
+                                            <div class="input-group input-group-static mb-4">
+                                                <label>Poskod</label>
+                                                <input type="email" class="form-control" placeholder="15200" readonly>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-4 ps-md-2">
+                                            <div class="input-group input-group-static mb-4">
+                                                <label>Daerah</label>
+                                                <input type="email" class="form-control" placeholder="Kota Bharu" readonly>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-4 ps-md-2">
+                                            <div class="input-group input-group-static mb-4">
+                                                <label>Negeri</label>
+                                                <input type="email" class="form-control" placeholder="Kelantan" readonly>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </form>
+                            <div class="row justify-space-between py-2">
+                                <p class="text-xs">Maklumat ini telah disahkan oleh pelanggan semasa membuat gadaian dicawangan. Sila hubungi cawangan jika terdapat perubahan.</p>
                             </div>
                         </div>
-                        <div class="col-md-4 ps-md-2">
-                            <div class="input-group input-group-static mb-4">
-                                <label>Daerah</label>
-                                <input type="email" class="form-control" placeholder="hello@creative-tim.com">
-                            </div>
-                        </div>
-                        <div class="col-md-4 ps-md-2">
-                            <div class="input-group input-group-static mb-4">
-                                <label>Negeri</label>
-                                <input type="email" class="form-control" placeholder="hello@creative-tim.com">
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-md-12 text-center">
-                            <button type="submit" class="btn bg-gradient-primary mt-3 mb-0">Send Message</button>
+                        <div class="tab-pane" id="katalaluan">
+                            <form id="contact-form" method="#" autocomplete="off">
+                                <div class="card-body p-0 my-3 mt-5">
+                                    <div class="row justify-content-center">
+                                        <div class="col-lg-8 col-md-12">
+                                            <div class="col-12">
+                                                <div class="input-group input-group-static mb-4">
+                                                    <label>Current Password</label>
+                                                    <input type="password" class="form-control" placeholder="Kata laluan sekarang">
+                                                </div>
+                                            </div>
+                                            <div class="col-12">
+                                                <div class="input-group input-group-static mb-4">
+                                                    <label>New Passord</label>
+                                                    <input type="password" class="form-control" placeholder="Masukkan kata laluan baharu">
+                                                </div>
+                                            </div>
+                                            <div class="col-12">
+                                                <div class="input-group input-group-static mb-4">
+                                                    <label>Confirm New Passord</label>
+                                                    <input type="password" class="form-control" placeholder="Mengesahkan kata laluan baharu">
+                                                </div>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col-md-12 text-center">
+                                                    <button type="submit" class="btn bg-gradient-primary mt-3 mb-0">Simpan</button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </form>
                         </div>
                     </div>
+
+
+
                 </div>
-            </form>
+            </section>
+
+
+
+
+
         </div>
     </div>
 </div>