diff --git a/frontend/Web/admin.html b/frontend/Web/admin.html
index 1760d8c..f4aa041 100644
--- a/frontend/Web/admin.html
+++ b/frontend/Web/admin.html
@@ -3,122 +3,8 @@
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Admin Panel - ZYM's Book Store</title>
+  <link rel="stylesheet" href="basic.css">
   <style>
-    body {
-      margin: 0;
-      font-family: Arial, sans-serif;
-    }
-
-    header {
-      background-color: #333;
-      color: #fff;
-      padding: 10px 0;
-      text-align: center;
-    }
-
-    .user-bar {
-      float: right;
-      padding: 10px;
-      background-color: #007bff;
-    }
-
-    .user-bar span {
-      margin-right: 20px; /* Add spacing between "Welcome, Guest" and "Actions" */
-    }
-
-    .user-bar a {
-      color: #fff;
-      margin-right: 10px;
-      text-decoration: none;
-    }
-
-    .user-bar a:hover {
-      text-decoration: underline;
-    }
-
-    .action-button-container {
-      display: inline-block;
-    }
-
-    .action-button {
-      padding: 10px 15px;
-      background-color: #007bff;
-      color: #fff;
-      border: 2px solid #0056b3; /* Dark blue border */
-      border-radius: 5px; /* Rounded corners */
-      cursor: pointer;
-      display: inline-block;
-    }
-
-    .action-button:hover,
-    .dropdown-content:hover {
-      background-color: #87CEFA; /* Light blue background on hover */
-    }
-
-    .dropdown {
-      position: relative;
-      display: inline-block;
-    }
-
-    .dropdown-content {
-      display: none;
-      position: absolute;
-      background-color: #87CEFA; /* Light blue background */
-      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
-      z-index: 1;
-      max-width: 150px;
-      right: 0;
-      top: 100%; /* Position below the action button */
-    }
-
-    .dropdown-content a {
-      display: block;
-      padding: 10px;
-      text-decoration: none;
-      color: #333;
-      text-align: center; /* Horizontally center the text */
-      width: 100%; /* Make the width 100% */
-      box-sizing: border-box; /* Include padding in the width */
-    }
-
-    .dropdown-content a:hover {
-      background-color: #ddd;
-    }
-
-    .dropdown:hover .dropdown-content {
-      display: block;
-    }
-
-    .main-content {
-      height: 80vh;
-      display: flex;
-    }
-
-    nav {
-      width: 200px;
-      background-color: #f4f4f4;
-      padding: 20px;
-      height: 80vh;
-    }
-
-    nav a {
-      display: block;
-      padding: 10px;
-      margin-bottom: 10px;
-      text-decoration: none;
-      color: #333;
-      border-radius: 5px;
-      transition: background-color 0.3s ease;
-    }
-
-    nav a:hover {
-      background-color: #ddd;
-    }
-
-    .content {
-      flex: 1;
-      padding: 20px;
-    }
     .passwd-box {
             width: 300px;
             padding: 20px;
diff --git a/frontend/Web/basic.css b/frontend/Web/basic.css
new file mode 100644
index 0000000..cfc1b08
--- /dev/null
+++ b/frontend/Web/basic.css
@@ -0,0 +1,121 @@
+body {
+  margin: 0;
+  font-family: Arial, sans-serif;
+}
+
+header {
+  background-color: #333;
+  color: #fff;
+  padding: 10px 0;
+  text-align: center;
+  position: relative;
+}
+
+.user-bar {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  transform: translateY(-100%);
+  padding: 10px;
+  background-color: #007bff;
+  z-index: 1000;
+}
+
+.user-bar span {
+  margin-right: 20px; /* Add spacing between "Welcome, Guest" and "Actions" */
+}
+
+.user-bar a {
+  color: #fff;
+  margin-right: 10px;
+  text-decoration: none;
+}
+
+.user-bar a:hover {
+  text-decoration: underline;
+}
+
+.action-button-container {
+  display: inline-block;
+}
+
+.action-button {
+  padding: 10px 15px;
+  background-color: #007bff;
+  color: #fff;
+  border: 2px solid #0056b3; /* Dark blue border */
+  border-radius: 5px; /* Rounded corners */
+  cursor: pointer;
+  display: inline-block;
+}
+
+.action-button:hover,
+.dropdown-content:hover {
+  background-color: #87CEFA; /* Light blue background on hover */
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #87CEFA; /* Light blue background */
+  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
+  z-index: 1;
+  max-width: 150px;
+  right: 0;
+  top: 100%; /* Position below the action button */
+}
+
+.dropdown-content a {
+  display: block;
+  padding: 10px;
+  text-decoration: none;
+  color: #333;
+  text-align: center; /* Horizontally center the text */
+  width: 100%; /* Make the width 100% */
+  box-sizing: border-box; /* Include padding in the width */
+}
+
+.dropdown-content a:hover {
+  background-color: #ddd;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.main-content {
+  /*margin-top: 40px; /* Adjust margin to account for the fixed user-bar */
+  height: 80vh;
+  display: flex;
+}
+
+nav {
+  width: 200px;
+  background-color: #f4f4f4;
+  padding: 20px;
+  height: 80vh;
+}
+
+nav a {
+  display: block;
+  padding: 10px;
+  margin-bottom: 10px;
+  text-decoration: none;
+  color: #333;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}
+
+nav a:hover {
+  background-color: #ddd;
+}
+
+.content {
+  flex: 1;
+  padding: 20px;
+}
\ No newline at end of file
diff --git a/frontend/Web/index.html b/frontend/Web/index.html
index 6aeed3d..fc9430e 100644
--- a/frontend/Web/index.html
+++ b/frontend/Web/index.html
@@ -3,123 +3,7 @@
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>ZYM's Book Store</title>
-  <style>
-    body {
-      margin: 0;
-      font-family: Arial, sans-serif;
-    }
-
-    header {
-      background-color: #333;
-      color: #fff;
-      padding: 10px 0;
-      text-align: center;
-    }
-
-    .user-bar {
-      float: right;
-      padding: 10px;
-      background-color: #007bff;
-    }
-
-    .user-bar span {
-      margin-right: 20px; /* Add spacing between "Welcome, Guest" and "Actions" */
-    }
-
-    .user-bar a {
-      color: #fff;
-      margin-right: 10px;
-      text-decoration: none;
-    }
-
-    .user-bar a:hover {
-      text-decoration: underline;
-    }
-
-    .action-button-container {
-      display: inline-block;
-    }
-
-    .action-button {
-      padding: 10px 15px;
-      background-color: #007bff;
-      color: #fff;
-      border: 2px solid #0056b3; /* Dark blue border */
-      border-radius: 5px; /* Rounded corners */
-      cursor: pointer;
-      display: inline-block;
-    }
-
-    .action-button:hover,
-    .dropdown-content:hover {
-      background-color: #87CEFA; /* Light blue background on hover */
-    }
-
-    .dropdown {
-      position: relative;
-      display: inline-block;
-    }
-
-    .dropdown-content {
-      display: none;
-      position: absolute;
-      background-color: #87CEFA; /* Light blue background */
-      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
-      z-index: 1;
-      max-width: 150px;
-      right: 0;
-      top: 100%; /* Position below the action button */
-    }
-
-    .dropdown-content a {
-      display: block;
-      padding: 10px;
-      text-decoration: none;
-      color: #333;
-      text-align: center; /* Horizontally center the text */
-      width: 100%; /* Make the width 100% */
-      box-sizing: border-box; /* Include padding in the width */
-    }
-
-    .dropdown-content a:hover {
-      background-color: #ddd;
-    }
-
-    .dropdown:hover .dropdown-content {
-      display: block;
-    }
-
-    .main-content {
-      height: 80vh;
-      display: flex;
-    }
-
-    nav {
-      width: 200px;
-      background-color: #f4f4f4;
-      padding: 20px;
-      height: 80vh;
-    }
-
-    nav a {
-      display: block;
-      padding: 10px;
-      margin-bottom: 10px;
-      text-decoration: none;
-      color: #333;
-      border-radius: 5px;
-      transition: background-color 0.3s ease;
-    }
-
-    nav a:hover {
-      background-color: #ddd;
-    }
-
-    .content {
-      flex: 1;
-      padding: 20px;
-    }
-  </style>
+  <link rel="stylesheet" href="basic.css">
 </head>
 <body>
 
diff --git a/frontend/Web/index.js b/frontend/Web/index.js
index 0f31f72..b0d92a9 100644
--- a/frontend/Web/index.js
+++ b/frontend/Web/index.js
@@ -110,6 +110,10 @@ app.get('/sessioninit.js', (req, res) => {
   res.sendFile(join(__dirname, 'sessioninit.js'));
 });
 
+app.get('/basic.css', (req, res) => {
+  res.sendFile(join(__dirname, 'basic.css'));
+});
+
 io.on('connection', async (socket) => {
   console.log('a user connected');
   socket.on('disconnect', () => {
diff --git a/frontend/Web/login.html b/frontend/Web/login.html
index bf8b3de..47d9dda 100644
--- a/frontend/Web/login.html
+++ b/frontend/Web/login.html
@@ -3,122 +3,8 @@
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>login - ZYM's Book Store</title>
+  <link rel="stylesheet" href="basic.css">
   <style>
-    body {
-      margin: 0;
-      font-family: Arial, sans-serif;
-    }
-
-    header {
-      background-color: #333;
-      color: #fff;
-      padding: 10px 0;
-      text-align: center;
-    }
-
-    .user-bar {
-      float: right;
-      padding: 10px;
-      background-color: #007bff;
-    }
-
-    .user-bar span {
-      margin-right: 20px; /* Add spacing between "Welcome, Guest" and "Actions" */
-    }
-
-    .user-bar a {
-      color: #fff;
-      margin-right: 10px;
-      text-decoration: none;
-    }
-
-    .user-bar a:hover {
-      text-decoration: underline;
-    }
-
-    .action-button-container {
-      display: inline-block;
-    }
-
-    .action-button {
-      padding: 10px 15px;
-      background-color: #007bff;
-      color: #fff;
-      border: 2px solid #0056b3; /* Dark blue border */
-      border-radius: 5px; /* Rounded corners */
-      cursor: pointer;
-      display: inline-block;
-    }
-
-    .action-button:hover,
-    .dropdown-content:hover {
-      background-color: #87CEFA; /* Light blue background on hover */
-    }
-
-    .dropdown {
-      position: relative;
-      display: inline-block;
-    }
-
-    .dropdown-content {
-      display: none;
-      position: absolute;
-      background-color: #87CEFA; /* Light blue background */
-      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
-      z-index: 1;
-      max-width: 150px;
-      right: 0;
-      top: 100%; /* Position below the action button */
-    }
-
-    .dropdown-content a {
-      display: block;
-      padding: 10px;
-      text-decoration: none;
-      color: #333;
-      text-align: center; /* Horizontally center the text */
-      width: 100%; /* Make the width 100% */
-      box-sizing: border-box; /* Include padding in the width */
-    }
-
-    .dropdown-content a:hover {
-      background-color: #ddd;
-    }
-
-    .dropdown:hover .dropdown-content {
-      display: block;
-    }
-
-    .main-content {
-      height: 80vh;
-      display: flex;
-    }
-
-    nav {
-      width: 200px;
-      background-color: #f4f4f4;
-      padding: 20px;
-      height: 80vh;
-    }
-
-    nav a {
-      display: block;
-      padding: 10px;
-      margin-bottom: 10px;
-      text-decoration: none;
-      color: #333;
-      border-radius: 5px;
-      transition: background-color 0.3s ease;
-    }
-
-    nav a:hover {
-      background-color: #ddd;
-    }
-
-    .content {
-      flex: 1;
-      padding: 20px;
-    }
     .login-box {
             width: 300px;
             padding: 20px;
diff --git a/frontend/Web/passwd.html b/frontend/Web/passwd.html
index 9bab664..cfb7085 100644
--- a/frontend/Web/passwd.html
+++ b/frontend/Web/passwd.html
@@ -3,122 +3,8 @@
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>change password - ZYM's Book Store</title>
+  <link rel="stylesheet" href="basic.css">
   <style>
-    body {
-      margin: 0;
-      font-family: Arial, sans-serif;
-    }
-
-    header {
-      background-color: #333;
-      color: #fff;
-      padding: 10px 0;
-      text-align: center;
-    }
-
-    .user-bar {
-      float: right;
-      padding: 10px;
-      background-color: #007bff;
-    }
-
-    .user-bar span {
-      margin-right: 20px; /* Add spacing between "Welcome, Guest" and "Actions" */
-    }
-
-    .user-bar a {
-      color: #fff;
-      margin-right: 10px;
-      text-decoration: none;
-    }
-
-    .user-bar a:hover {
-      text-decoration: underline;
-    }
-
-    .action-button-container {
-      display: inline-block;
-    }
-
-    .action-button {
-      padding: 10px 15px;
-      background-color: #007bff;
-      color: #fff;
-      border: 2px solid #0056b3; /* Dark blue border */
-      border-radius: 5px; /* Rounded corners */
-      cursor: pointer;
-      display: inline-block;
-    }
-
-    .action-button:hover,
-    .dropdown-content:hover {
-      background-color: #87CEFA; /* Light blue background on hover */
-    }
-
-    .dropdown {
-      position: relative;
-      display: inline-block;
-    }
-
-    .dropdown-content {
-      display: none;
-      position: absolute;
-      background-color: #87CEFA; /* Light blue background */
-      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
-      z-index: 1;
-      max-width: 150px;
-      right: 0;
-      top: 100%; /* Position below the action button */
-    }
-
-    .dropdown-content a {
-      display: block;
-      padding: 10px;
-      text-decoration: none;
-      color: #333;
-      text-align: center; /* Horizontally center the text */
-      width: 100%; /* Make the width 100% */
-      box-sizing: border-box; /* Include padding in the width */
-    }
-
-    .dropdown-content a:hover {
-      background-color: #ddd;
-    }
-
-    .dropdown:hover .dropdown-content {
-      display: block;
-    }
-
-    .main-content {
-      height: 80vh;
-      display: flex;
-    }
-
-    nav {
-      width: 200px;
-      background-color: #f4f4f4;
-      padding: 20px;
-      height: 80vh;
-    }
-
-    nav a {
-      display: block;
-      padding: 10px;
-      margin-bottom: 10px;
-      text-decoration: none;
-      color: #333;
-      border-radius: 5px;
-      transition: background-color 0.3s ease;
-    }
-
-    nav a:hover {
-      background-color: #ddd;
-    }
-
-    .content {
-      flex: 1;
-      padding: 20px;
-    }
     .passwd-box {
             width: 300px;
             padding: 20px;
diff --git a/frontend/Web/register.html b/frontend/Web/register.html
index 5e5041e..eb7e52c 100644
--- a/frontend/Web/register.html
+++ b/frontend/Web/register.html
@@ -3,122 +3,8 @@
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>register - ZYM's Book Store</title>
+  <link rel="stylesheet" href="basic.css">
   <style>
-    body {
-      margin: 0;
-      font-family: Arial, sans-serif;
-    }
-
-    header {
-      background-color: #333;
-      color: #fff;
-      padding: 10px 0;
-      text-align: center;
-    }
-
-    .user-bar {
-      float: right;
-      padding: 10px;
-      background-color: #007bff;
-    }
-
-    .user-bar span {
-      margin-right: 20px; /* Add spacing between "Welcome, Guest" and "Actions" */
-    }
-
-    .user-bar a {
-      color: #fff;
-      margin-right: 10px;
-      text-decoration: none;
-    }
-
-    .user-bar a:hover {
-      text-decoration: underline;
-    }
-
-    .action-button-container {
-      display: inline-block;
-    }
-
-    .action-button {
-      padding: 10px 15px;
-      background-color: #007bff;
-      color: #fff;
-      border: 2px solid #0056b3; /* Dark blue border */
-      border-radius: 5px; /* Rounded corners */
-      cursor: pointer;
-      display: inline-block;
-    }
-
-    .action-button:hover,
-    .dropdown-content:hover {
-      background-color: #87CEFA; /* Light blue background on hover */
-    }
-
-    .dropdown {
-      position: relative;
-      display: inline-block;
-    }
-
-    .dropdown-content {
-      display: none;
-      position: absolute;
-      background-color: #87CEFA; /* Light blue background */
-      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
-      z-index: 1;
-      max-width: 150px;
-      right: 0;
-      top: 100%; /* Position below the action button */
-    }
-
-    .dropdown-content a {
-      display: block;
-      padding: 10px;
-      text-decoration: none;
-      color: #333;
-      text-align: center; /* Horizontally center the text */
-      width: 100%; /* Make the width 100% */
-      box-sizing: border-box; /* Include padding in the width */
-    }
-
-    .dropdown-content a:hover {
-      background-color: #ddd;
-    }
-
-    .dropdown:hover .dropdown-content {
-      display: block;
-    }
-
-    .main-content {
-      height: 80vh;
-      display: flex;
-    }
-
-    nav {
-      width: 200px;
-      background-color: #f4f4f4;
-      padding: 20px;
-      height: 80vh;
-    }
-
-    nav a {
-      display: block;
-      padding: 10px;
-      margin-bottom: 10px;
-      text-decoration: none;
-      color: #333;
-      border-radius: 5px;
-      transition: background-color 0.3s ease;
-    }
-
-    nav a:hover {
-      background-color: #ddd;
-    }
-
-    .content {
-      flex: 1;
-      padding: 20px;
-    }
     .register-box {
             width: 300px;
             padding: 20px;
