diff --git a/account/home_account.html b/account/home_account.html
index 9c3cc5b8..5328f00d 100644
--- a/account/home_account.html
+++ b/account/home_account.html
@@ -12,52 +12,14 @@
     <link rel="stylesheet" href="../css/account.css" />
 </head>
 
+<body>
+
 <header id="header-account" class="text-center text-secondary fs-4">
     This is Header
 </header>
 
 <section>
-    <style>
-       section .container {
-  background-color: #fff;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  padding: 30px;
-  box-shadow: 0 4px 8px rgba(91, 77, 77, 0.1);
-  max-width: 100%;
-}
-
-section h1 {
-  color: #1149ff;
-}
-
-section .form-group label {
-  color: #343a40;
-}
-
-section .form-control {
-  border: 1px solid #ced4da;
-}
-
-section .form-control:focus {
-  border-color: #0755ff;
-  box-shadow: 0 0 0 0.2rem rgba(12, 82, 163, 0.25);
-}
-
-section .btn-primary {
-  background-color: #007bff;
-  border-color: #007bff;
-}
-
-section .btn-primary:hover {
-  background-color: #0056b3;
-  border-color: #0056b3;
-}
-
-section .btn-primary:focus {
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
-}
-    </style>
+    
     <div class="container mt-5">
         <div class="row justify-content-center">
             <div class="col-12 col-md-8">                
@@ -110,6 +72,6 @@ <h1 class="text-center mb-4" style="display: inline-block;"><img src="../img/fli
 <script src="../js/bootstrap.bundle.min.js"></script>
 <script src="../js/account.js"></script>
 
-<body></body>
+</body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/css/account.css b/css/account.css
index e69de29b..2b79f347 100644
--- a/css/account.css
+++ b/css/account.css
@@ -0,0 +1,77 @@
+section .container {
+  background-color: #ffffff25;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 30px;
+  box-shadow: 0 4px 8px rgba(91, 77, 77, 0.1);
+  max-width: 100%;
+  transition: box-shadow 0.3s ease;
+}
+
+
+section .container:hover {
+  box-shadow: 0 8px 16px rgba(91, 77, 77, 0.2); 
+}
+
+section h1 {
+  color: #1149ff;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+section .form-group label {
+  color: #343a40;
+  font-weight: 600;
+  margin-bottom: 5px;
+  margin-top: 5px ;
+}
+
+section .form-group label:hover {
+  color: #007bff;
+}
+
+section .form-control {
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  padding: 10px;
+  transition: border-color 0.3s ease;
+}
+
+section .form-control:focus {
+  border-color: #0755ff;
+  box-shadow: 0 0 0 0.2rem rgba(12, 82, 163, 0.25);
+  outline: none;
+}
+
+section .btn-primary {
+  background-color: #007bff;
+  border-color: #007bff;
+  border-radius: 4px;
+  padding: 10px 20px;
+  font-weight: bold;
+  transition: background-color 0.3s ease;
+}
+
+section .btn-primary:hover {
+  background-color: #0056b3;
+  border-color: #0056b3;
+}
+
+section .btn-primary:focus {
+  background-color: #0056b3;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+  cursor: pointer;
+}
+
+section .btn-primary:focus {
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+}
+
+section .form-check-input {
+  margin-right: 5px;
+}
+
+section #orderHistory {
+  resize: vertical; 
+  margin-bottom: 15px;
+}
