diff --git a/backend/flask_session/2029240f6d1128be89ddc32729463129 b/backend/flask_session/2029240f6d1128be89ddc32729463129
index 7f5741f1..ffb2cd9b 100644
Binary files a/backend/flask_session/2029240f6d1128be89ddc32729463129 and b/backend/flask_session/2029240f6d1128be89ddc32729463129 differ
diff --git a/backend/flask_session/679eaac484e8efec851e5d02a21b12ac b/backend/flask_session/679eaac484e8efec851e5d02a21b12ac
index 6b00d6ac..cf3196bc 100644
Binary files a/backend/flask_session/679eaac484e8efec851e5d02a21b12ac and b/backend/flask_session/679eaac484e8efec851e5d02a21b12ac differ
diff --git a/backend/flask_session/7a973a1ecebb180f9fe7c30101047a60 b/backend/flask_session/7a973a1ecebb180f9fe7c30101047a60
new file mode 100644
index 00000000..f1074ec4
Binary files /dev/null and b/backend/flask_session/7a973a1ecebb180f9fe7c30101047a60 differ
diff --git a/backend/flask_session/d809bf2dcbe2110e634be9cd9bce2102 b/backend/flask_session/d809bf2dcbe2110e634be9cd9bce2102
index 3ab4dca6..25891979 100644
Binary files a/backend/flask_session/d809bf2dcbe2110e634be9cd9bce2102 and b/backend/flask_session/d809bf2dcbe2110e634be9cd9bce2102 differ
diff --git a/backend/timesheets/routes.py b/backend/timesheets/routes.py
index 348e9b5f..4eff8972 100644
--- a/backend/timesheets/routes.py
+++ b/backend/timesheets/routes.py
@@ -23,6 +23,22 @@ class HomeView(MethodView):
     def get(self):
         return "Done", 200
 
+class ListConsultantsView(MethodView):
+    def get(self):
+        user_id = session.get("user_id")
+        line_manager = LineManager.query.filter_by(id=user_id)
+        
+        if line_manager != None:
+            consultants = Consultant.query.filter_by(line_manager_id=user_id)
+        else:
+            return jsonify({"Error": "Unauthorized"}), 400
+        
+        json_dict = {}
+        for consultant in consultants:
+            json_dict[consultant.username] = {"username": consultant.username, "consultant_id": consultant.id}
+            
+        return jsonify(json_dict), 200
+        
 
 class CurrentUserView(MethodView):
     def get(self):
@@ -139,13 +155,14 @@ def get(self):
         json_dict = {}
         timesheet_ids = [timesheet.id for timesheet in timesheets]
         for timesheet in timesheets:
-            json_dict[timesheet.id] = {"name": timesheet.consultant_name, "status": timesheet.status}
+            json_dict[timesheet.id] = {"id": timesheet.id, "name": timesheet.consultant_name, "status": timesheet.status}
         return jsonify(json_dict), 200
 
 class ListWeeklyTimesheetsView(MethodView):
     def get(self):
         user_id = session.get("user_id")
         consultant = Consultant.query.filter_by(id=user_id).first()
+        # line_manager = LineManager.query.filter_by(username=consultant.line_manager.username).first()
         print(consultant)
         
         if consultant == None:
@@ -160,18 +177,34 @@ def get(self):
         for timesheet in timesheets:
             hours_worked = str(timedelta(seconds=timesheet.hours_worked))
             day = f"{timesheet.day.day}/{timesheet.day.month}/{timesheet.day.year}"
-            json_dict[timesheet.id] = {"start_work": timesheet.start_work_time, "end_work": timesheet.end_work_time, "week_start": week_start, "hours_worked": hours_worked, "day": day}
+            json_dict[timesheet.id] = {"start_work": timesheet.start_work_time, "end_work": timesheet.end_work_time, 
+                                       "week_start": week_start, "hours_worked": hours_worked, "day": day, 
+                                       "consultant_name": f"{consultant.firstname} {consultant.lastname}", 
+                                       "line_manager_name": f"{consultant.line_manager.firstname} {consultant.line_manager.lastname}"}
         return jsonify(json_dict), 200
     
 
-class ListConsultantsView(MethodView):
-    def get(self):
+class WeeklyTimesheetsApprovalView(MethodView):
+    def post(self, consultant_username, flag):
         user_id = session.get("user_id")
-        consultants = Consultant.query.filter_by(line_manager_id=user_id)
-        json_dict = {}
-        for consultant in consultants:
-            json_dict[consultant.id] = consultant.username 
-        return jsonify(json_dict), 200
+        line_manager = LineManager.query.filter_by(id=user_id)
+        consultant = Consultant.query.filter_by(username=consultant_username)
+        
+        week_start = datetime.today()  - timedelta(days=datetime.today().weekday() % 7)
+        week_start = datetime(week_start.year, week_start.month, week_start.day)
+        week_start = f"{week_start.day}/{week_start.month}/{week_start.year}"
+        timesheets = Timesheet.query.filter_by(week_start_date=week_start, username=consultant_username).all()
+        
+        for timesheet in timesheets :
+            if flag == "approve":
+                timesheet.status = "approved"
+                db.session.commit()
+            elif flag == "disapprove":
+                timesheet.status = "disapproved"
+            else:
+                return jsonify({"Error": "Invalid flag"}), 400
+        
+        return jsonify("Success"), 200
 
 class ListConsultantTimesheetsView(MethodView):
     def get(self, consultant_id):
@@ -369,7 +402,8 @@ def post(self, consultant_username,):
 app.add_url_rule("/delete_timesheet/<timesheet_id>", view_func=timesheets_view, methods=["DELETE"])
 app.add_url_rule("/list_timesheets", view_func=ListTimesheetsView.as_view("list_timesheets_view"), methods=["GET"])
 app.add_url_rule("/list_weekly_timesheets", view_func=ListWeeklyTimesheetsView.as_view("list_weekly_timesheets_view"), methods=["GET"])
-app.add_url_rule("/list_timesheets/<consultant_id>", view_func=ListConsultantTimesheetsView.as_view("list_consultant_timesheets_view"), methods=["GET"])
+app.add_url_rule("/list_weekly_timesheets/<consultant_username>/<flag>", view_func=WeeklyTimesheetsApprovalView.as_view("list_weekly_timesheets_approval"), methods=["POST"])
+app.add_url_rule("/list_timesheets/<consultant_id>", view_func=ListConsultantTimesheetsView.as_view("list_consultant_timesheets_viewpost"), methods=["GET"])
 app.add_url_rule("/approve_timesheet/<timesheet_id>", view_func=TimesheetApprovalView.as_view("timesheet_approval_view"), methods=["POST"])
 app.add_url_rule("/disapprove_timesheet/<timesheet_id>", view_func=TimesheetDisapprovalView.as_view("timesheet_disapproval_view"), methods=["POST"])
 
diff --git a/frontend/public/Home_Page_Icons/Consultant/record_timesheet.svg b/frontend/public/Home_Page_Icons/Consultant/record_timesheet.svg
new file mode 100644
index 00000000..2df374ff
--- /dev/null
+++ b/frontend/public/Home_Page_Icons/Consultant/record_timesheet.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/Home_Page_Icons/Consultant/view_saved_timesheets.svg b/frontend/public/Home_Page_Icons/Consultant/view_saved_timesheets.svg
new file mode 100644
index 00000000..ea97d652
--- /dev/null
+++ b/frontend/public/Home_Page_Icons/Consultant/view_saved_timesheets.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M88.7 223.8L0 375.8V96C0 60.7 28.7 32 64 32H181.5c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7H416c35.3 0 64 28.7 64 64v32H144c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224H544c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480H32c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/Home_Page_Icons/Consultant/view_timesheet.svg b/frontend/public/Home_Page_Icons/Consultant/view_timesheet.svg
new file mode 100644
index 00000000..7d0b03ac
--- /dev/null
+++ b/frontend/public/Home_Page_Icons/Consultant/view_timesheet.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/Home_Page_Icons/house-solid.svg b/frontend/public/Home_Page_Icons/house-solid.svg
new file mode 100644
index 00000000..c6bbed4b
--- /dev/null
+++ b/frontend/public/Home_Page_Icons/house-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/Home_Page_Icons/logout.svg b/frontend/public/Home_Page_Icons/logout.svg
new file mode 100644
index 00000000..1b6b9710
--- /dev/null
+++ b/frontend/public/Home_Page_Icons/logout.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 4f8a892b..5350f792 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -15,9 +15,12 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      rel="stylesheet"
+    />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/frontend/src/App.js b/frontend/src/App.js
index a2ce494e..fd917946 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,8 +1,10 @@
-import { HashRouter, Routes, Route} from "react-router-dom";
+import { HashRouter, Routes, Route } from "react-router-dom";
 import MainHome from "./Pages/Main/main_home";
 import LoginPage from "./Pages/Main/login_page";
 import ConsultantHomePage from "./Pages/Consultant/consultant_home_page";
 import FinanceTeamMemberHomePage from "./Pages/Finance_Team/finance_team_mem_home_page";
+import SetHourlyRate from "./Components/Finance_Team_Page/SetHourlyRate";
+import ViewTimesheet from "./Components/Finance_Team_Page/ViewTimesheet";
 import ITTechnicianHomePage from "./Pages/IT_Technician/it_technician_home_page";
 import LineManagerHomePage from "./Pages/Line_Manager/line_manager_home_page";
 import TimesheetRecordingPage from "./Pages/Consultant/timesheet_recording_page";
@@ -12,11 +14,42 @@ import TimesheetEditRequestsPage from "./Pages/IT_Technician/timesheet_edit_requ
 import ItUserCreationPage from "./Pages/IT_Technician/it_user_creation_page";
 import ViewCurrentTimesheetPage from "./Pages/Consultant/view_current_timesheet_page";
 
-function App() 
-{
-  return(
+function App() {
+  return (
     <HashRouter>
       <Routes>
+        <Route path="/" element={<MainHome />} />
+        <Route path="/login_page" element={<LoginPage />} />
+        <Route path="/consultant_home_page" element={<ConsultantHomePage />} />
+        <Route
+          path="/finance_team_member_home_page"
+          element={<FinanceTeamMemberHomePage />}
+        />
+        <Route path="/set_hourly_rate" element={<SetHourlyRate />} />
+        <Route path="/view_timesheet" element={<ViewTimesheet />} />
+
+        <Route
+          path="/it_technician_home_page"
+          element={<ITTechnicianHomePage />}
+        />
+        <Route
+          path="/line_manager_home_page"
+          element={<LineManagerHomePage />}
+        />
+        <Route
+          path="/timesheet_recording_page"
+          element={<TimesheetRecordingPage />}
+        />
+        <Route
+          path="/consultant_finder_page"
+          element={<ConsultantFinderPage />}
+        />
+        <Route path="/it_difficulties" element={<ItDifficultiesPage />} />
+        <Route
+          path="/timesheet_edit_requests"
+          element={<TimesheetEditRequestsPage />}
+        />
+        <Route path="/it_user_creation" element={<ItUserCreationPage />} />
         <Route path="/" element={<MainHome/>}/>
         <Route path="/login_page" element={<LoginPage/>}/>
         <Route path="/consultant_home_page" element={<ConsultantHomePage/>}/>
@@ -31,7 +64,7 @@ function App()
         <Route path="/current_timesheet_viewer" element={<ViewCurrentTimesheetPage/>}/>
       </Routes>
     </HashRouter>
-  )
+  );
 }
 
 export default App;
diff --git a/frontend/src/Components/Finance_Team_Page/SetHourlyRate.js b/frontend/src/Components/Finance_Team_Page/SetHourlyRate.js
new file mode 100644
index 00000000..eca79ab5
--- /dev/null
+++ b/frontend/src/Components/Finance_Team_Page/SetHourlyRate.js
@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import styles from "./SetHourlyRate.module.css"; // Import the CSS file
+import Navbar from "../../Components/Global/Navbar";
+
+function SetHourlyRate() {
+  let links = [{ pageName: "Set Hourly Rate Page", pageLink: "/set_hourly_rate", iconPath: "./Home_Page_Icons/Consultant/record_timesheet.svg" },
+  { pageName: "View Timesheet Page", pageLink: "/view_timesheet", iconPath: "./Home_Page_Icons/Consultant/view_timesheet.svg" }]
+
+  const [consultantName, setConsultantName] = useState("");
+  const [hourlyRate, setHourlyRate] = useState("");
+
+  const handleConsultantNameChange = (event) => {
+    setConsultantName(event.target.value);
+  };
+
+  const handleHourlyRateChange = (event) => {
+    setHourlyRate(event.target.value);
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    // Here, you can send the data to the backend
+    // For now, let's just log the data to the console
+    console.log("Consultant Name:", consultantName);
+    console.log("Hourly Rate:", hourlyRate);
+  };
+
+  return (
+    <>
+      <Navbar homePageTitle="Finance Team Home Page" homePageLink="/finance_team_member_home_page" links={links} />
+      <div className={styles.setHourlyRateContainer}>
+        <h2 className={styles.setHourlyRateTitle}>Set Hourly Rate</h2>
+        <form className={styles.formContainer} onSubmit={handleSubmit}>
+          <div className={styles.inputGroup}>
+            <p className={styles.setHourlyRateLabel}>Consultant Name:</p>
+              <input
+                type="text"
+                value={consultantName}
+                onChange={handleConsultantNameChange}
+                className={styles.setHourlyRateInput}
+                placeholder="Enter consultant's name"
+              />
+          </div>
+          <div className={styles.inputGroup}>
+            <p className={styles.setHourlyRateLabel}>Hourly Rate:</p>
+              <input
+                type="number"
+                value={hourlyRate}
+                onChange={handleHourlyRateChange}
+                className={styles.setHourlyRateInput}
+                placeholder="Enter hourly rate"
+              />
+          </div>
+          <button type="submit" className={styles.setHourlyRateButton}>
+            Set Hourly Rate
+          </button>
+        </form>
+      </div>
+    </>
+  );
+}
+
+export default SetHourlyRate;
diff --git a/frontend/src/Components/Finance_Team_Page/SetHourlyRate.module.css b/frontend/src/Components/Finance_Team_Page/SetHourlyRate.module.css
new file mode 100644
index 00000000..06fa379b
--- /dev/null
+++ b/frontend/src/Components/Finance_Team_Page/SetHourlyRate.module.css
@@ -0,0 +1,104 @@
+/* SetHourlyRate.module.css */
+
+/* Container styles */
+.setHourlyRateContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  height: 100%; /* Set the container height to viewport height */
+  padding: 20px; /* Add padding */
+  margin-left: 5rem;
+  font-family: "Roboto", sans-serif;
+}
+
+/* Title styles */
+.setHourlyRateTitle {
+  letter-spacing: 3px;
+  text-align: center;
+  font-size: 30pt;
+  margin-bottom: 50px; /* Add margin at the bottom */
+  font-weight: bolder;
+}
+
+/* Label styles */
+.setHourlyRateLabel {
+  font-size: 18px; /* Increase font size */
+  color: white; /* Change text color */
+}
+
+.inputGroup {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.setHourlyRateInput {
+  font-weight: 500;
+  font-size: 11pt;
+  color: #fff;
+  background-color: rgb(28,28,30);
+  box-shadow: 0 0 .4vw rgba(0,0,0,0.5), 0 0 0 .15vw transparent;
+  border-radius: 15px;
+  border: none;
+  outline: none;
+  padding: 0.4vw;
+  max-width: 100%;
+  height: 25px;
+  transition: .4s;
+  text-align: center;
+}
+
+.setHourlyRateInput::placeholder {
+  color: rgba(255, 255, 255, 0.382);
+}
+
+.setHourlyRateInput:hover {
+  box-shadow: 0 0 0 .15vw #c5ff00;
+}
+
+.setHourlyRateInput:focus {
+  box-shadow: 0 0 0 .15vw #c5ff00;
+}
+
+.formContainer {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.setHourlyRateButton {
+  font-family: "Poppins", sans-serif;
+  width: 15%;
+  padding: 1%;
+  margin: 3%;
+  border-radius: 50px;
+  cursor: pointer;
+  border: 0;
+  background-color: white;
+  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  font-size: 15px;
+  transition: all 0.5s ease;
+}
+
+.setHourlyRateButton:hover {
+  letter-spacing: 2px;
+  background-color: #1e1e1e;
+  color: hsl(0, 0%, 100%);
+  box-shadow: #c5ff00 0px 3px 29px 0px;
+}
+
+.setHourlyRateButton:active {
+  letter-spacing: 2px;
+  background-color: #1e1e1e;
+  color: white;
+  box-shadow: #c5ff00 0px 0px 0px 0px;
+  transform: translateY(10px);
+  transition: 100ms;
+}
\ No newline at end of file
diff --git a/frontend/src/Components/Finance_Team_Page/ViewTimesheet.js b/frontend/src/Components/Finance_Team_Page/ViewTimesheet.js
new file mode 100644
index 00000000..40d340f7
--- /dev/null
+++ b/frontend/src/Components/Finance_Team_Page/ViewTimesheet.js
@@ -0,0 +1,80 @@
+// ViewTimesheet.js
+
+import React, { useState } from "react";
+import styles from "./ViewTimesheet.module.css"; // Import CSS module
+import Navbar from "../../Components/Global/Navbar";
+
+function ViewTimesheet() {
+  let links = [{pageName : "Set Hourly Rate Page", pageLink : "/set_hourly_rate", iconPath : "./Home_Page_Icons/Consultant/record_timesheet.svg"},
+  {pageName : "View Timesheet Page", pageLink : "/view_timesheet", iconPath : "./Home_Page_Icons/Consultant/view_timesheet.svg"}]
+
+  // Mock data for demonstration
+  const [consultantName, setConsultantName] = useState("");
+  const [timesheetData, setTimesheetData] = useState(null);
+
+  const handleConsultantNameChange = (event) => {
+    setConsultantName(event.target.value);
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    // Here you can fetch timesheet data from the backend based on the consultant's name
+    // For demonstration, let's just log the entered consultant's name
+    console.log("Consultant Name:", consultantName);
+    // Reset the input field after submission
+    setConsultantName("");
+    // Set timesheet data retrieved from the backend (or mock data)
+    setTimesheetData({
+      date: "2024-04-01",
+      hoursWorked: 8,
+      project: "Project X",
+      task: "Task A",
+      description: "Worked on Task A for Project X",
+    });
+  };
+
+  return (
+    <>
+      <Navbar homePageTitle="Finance Team Home Page" homePageLink="/finance_team_member_home_page" links={links}/>
+      <div className={styles.timesheetContainer}>
+        <h2 className={styles.timesheetTitle}>View Timesheet</h2>
+        <form onSubmit={handleSubmit}>
+          <label>
+            Enter Consultant's Name:
+            <input
+              type="text"
+              value={consultantName}
+              onChange={handleConsultantNameChange}
+              className={styles.consultantNameInput}
+            />
+          </label>
+          <button type="submit" className={styles.searchButton}>
+            Search
+          </button>
+        </form>
+        {timesheetData && (
+          <div className={styles.timesheetBox}>
+            <p>
+              <strong>Date:</strong> {timesheetData.date}
+            </p>
+            <p>
+              <strong>Hours Worked:</strong> {timesheetData.hoursWorked}
+            </p>
+            <p>
+              <strong>Project:</strong> {timesheetData.project}
+            </p>
+            <p>
+              <strong>Task:</strong> {timesheetData.task}
+            </p>
+            <p>
+              <strong>Description:</strong> {timesheetData.description}
+            </p>
+            {/* Additional data fields as needed */}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default ViewTimesheet;
diff --git a/frontend/src/Components/Finance_Team_Page/ViewTimesheet.module.css b/frontend/src/Components/Finance_Team_Page/ViewTimesheet.module.css
new file mode 100644
index 00000000..1bf5f17c
--- /dev/null
+++ b/frontend/src/Components/Finance_Team_Page/ViewTimesheet.module.css
@@ -0,0 +1,24 @@
+/* ViewTimesheet.module.css */
+
+.timesheetContainer {
+  margin-left: 5rem;
+  width: 80%;
+  margin: 0 auto;
+}
+
+.timesheetTitle {
+  text-align: center;
+  margin-top: 0;
+}
+
+.timesheetBox {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 20px;
+  margin-top: 20px;
+}
+
+.timesheetBox p {
+  margin-bottom: 10px;
+}
diff --git a/frontend/src/Components/Global/LogoutButton.js b/frontend/src/Components/Global/LogoutButton.js
index a504b116..f775020a 100644
--- a/frontend/src/Components/Global/LogoutButton.js
+++ b/frontend/src/Components/Global/LogoutButton.js
@@ -24,8 +24,9 @@ function LogoutButton () {
         });
     };
 
-    return(<div>
-        <button className={styles.Logout} onClick={handleLogout}>Logout</button>
+    return(<div className={styles.logoutContainer}>
+        <img className={styles.Logout} src='./Home_Page_Icons/logout.svg' onClick={handleLogout}/>
+        <p className={styles.logoutText}>Logout</p>
     </div>);
 }
 
diff --git a/frontend/src/Components/Global/LogoutButton.module.css b/frontend/src/Components/Global/LogoutButton.module.css
index 9b8d8f89..31795514 100644
--- a/frontend/src/Components/Global/LogoutButton.module.css
+++ b/frontend/src/Components/Global/LogoutButton.module.css
@@ -1,11 +1,10 @@
 .Logout{
     padding: 0.7pc 0.1pc;
-    width: 100px;
+    width: 50px;
+    max-height: 35px;
     cursor: pointer;
     border: none;
-    background-image: linear-gradient(to right, blue, purple);
-    left: 20%;
-    border-radius: 25px;
+    border-radius: 10px;
     color: white;
     height: 3rem;
     text-align: center;
@@ -13,4 +12,9 @@
     padding-top: 0.5rem;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 1rem;
+    margin-left: 0.35rem;
+}
+
+.logoutText{
+    margin-left: 0.5rem;
 }
\ No newline at end of file
diff --git a/frontend/src/Components/Global/Navbar.js b/frontend/src/Components/Global/Navbar.js
new file mode 100644
index 00000000..b979d186
--- /dev/null
+++ b/frontend/src/Components/Global/Navbar.js
@@ -0,0 +1,31 @@
+import { Link } from 'react-router-dom'
+import styles from './Navbar.module.css'
+import Logout from '../Global/LogoutButton'
+
+export default function Navbar(props) {
+    let linksArray = props.links
+    console.log(linksArray)
+
+    return(<nav className={styles.navbar}>
+        <ul className={styles.navContainer}>
+            <li className={styles.navElement}>
+                <Link className={styles.navLink} to={props.homePageLink}>
+                    <img className={styles.icon} src="./Home_Page_Icons/house-solid.svg"/>
+                    <p className={styles.navText} href="/">{props.homePageTitle}</p>
+                </Link>
+            </li>
+            {linksArray.map( (navElement, index) =>(
+                <li key={index} className={styles.navElement}>
+                    <Link className={styles.navLink} to={navElement.pageLink}>
+                        <img className={styles.icon} src={navElement.iconPath}/>
+                        <p className={styles.navText}>{navElement.pageName}</p>
+                    </Link>
+                </li>
+            ))}
+
+        </ul>
+        <div className={styles.logoutButton}>
+                <Logout/>
+            </div>
+    </nav>)
+}
\ No newline at end of file
diff --git a/frontend/src/Components/Global/Navbar.module.css b/frontend/src/Components/Global/Navbar.module.css
new file mode 100644
index 00000000..7a1641f3
--- /dev/null
+++ b/frontend/src/Components/Global/Navbar.module.css
@@ -0,0 +1,61 @@
+.navbar{
+    background: linear-gradient(360deg, rgb(52, 68, 0) 0%, rgb(130, 170, 0) 100%);
+    border-right: solid 5pt #1e1e1e;
+    width: 4rem;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items:start;
+    transition: width 200ms ease;
+    overflow: hidden;
+    position: fixed;
+    font-family: "Roboto", sans-serif;
+}
+
+.navbar:hover{
+    width: 20rem;
+}
+
+.navbar:hover body{
+    margin-left: 15rem;
+}
+
+.navbar:hover .navText{
+    display: block;
+}
+
+.navElement a{
+    color: black;
+    text-decoration: none;
+}
+
+.navContainer{
+    margin-top: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.navLink{
+    display: flex;
+    align-items: center;
+    height: 4rem;
+}
+
+.navText{
+    margin-left: 0rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    display: none;
+    font-size: large;
+}
+
+.icon{
+    min-width: 1rem;
+    margin: 0 1rem;
+    width: 2rem;
+}
+
+.logoutButton{
+    margin-top: auto;
+}
\ No newline at end of file
diff --git a/frontend/src/Components/IT_Technician_Page/ITLinks.module.css b/frontend/src/Components/IT_Technician_Page/ITLinks.module.css
index 92fe3dec..cc3c0188 100644
--- a/frontend/src/Components/IT_Technician_Page/ITLinks.module.css
+++ b/frontend/src/Components/IT_Technician_Page/ITLinks.module.css
@@ -1,9 +1,9 @@
 
-
 .navbar {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: center;
     gap: 50px;
 }
 
diff --git a/frontend/src/Components/IT_Technician_Page/UserAccountCreation.js b/frontend/src/Components/IT_Technician_Page/UserAccountCreation.js
index f15f9f8d..43b0cff8 100644
--- a/frontend/src/Components/IT_Technician_Page/UserAccountCreation.js
+++ b/frontend/src/Components/IT_Technician_Page/UserAccountCreation.js
@@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom';
 function UserAccountCreation() {
     const [showPassword, setShowPassword] = useState(false);
     const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-    const [userType, setUserType] = useState("Consultant");
+    const [userType, setUserType] = useState("consultant");
     const [firstname, setFirstName] = useState("");
     const [lastname, setLastName] = useState("");
     const [username, setUsername] = useState("");
@@ -65,8 +65,10 @@ function UserAccountCreation() {
         e.preventDefault();
 
         var accountDetails;
-        if (userType=="Consultant") {
+        console.log(userType)
+        if (userType=="consultant") {
             accountDetails = { userType, firstname, lastname, username, line_manager_username, email, password };
+            console.log(accountDetails)
         } else {
             accountDetails = { userType, firstname, lastname, username, email, password };
         }
@@ -114,9 +116,9 @@ function UserAccountCreation() {
                         <input onChange={handleFirstNameChange} type="text" id="firstname" name="firstname" placeholder="First Name" required className={styles.input} />
 
                         <input onChange={handleLastNameChange} type="text" id="lastname" name="lastname" placeholder="Last Name" required className={styles.input} />
-
-                        {userType == "Consultant" &&
-                            <input onChange={handleLineManagerUserNameChange} type="text" id="line_manager_username" name="line_manager_username" placeholder="Manager Username" required className={styles.input} />
+                          
+                        {userType == "consultant" &&
+                            <input onChange={handleLineManagerUserNameChange} type="text" id="managername" name="line_manager_username" placeholder="Manager Username" required className={styles.input} />
                         }
                         <input onChange={handleUserNameChange} type="text" id="uname" name="username" placeholder="Username" required className={styles.input} />
                         <input onChange={handleEmailChange} type="email" id="email" name="email" placeholder="Email" required className={styles.input} />
diff --git a/frontend/src/Components/IT_Technician_Page/UserAccountCreation.module.css b/frontend/src/Components/IT_Technician_Page/UserAccountCreation.module.css
index f08a5784..def5cc38 100644
--- a/frontend/src/Components/IT_Technician_Page/UserAccountCreation.module.css
+++ b/frontend/src/Components/IT_Technician_Page/UserAccountCreation.module.css
@@ -13,10 +13,10 @@
     justify-content: center;
     align-items: center;
     text-align: center;
-    background-color: white;
+    background-color: #1e1e1e;
     border-top-right-radius: 15px;
     border-bottom-right-radius: 15px;
-    box-shadow: 0 0 15px white;
+    box-shadow: 0 0 15px #c5ff00;
     width: 30%;
     height: 85%;
     padding-left: 2%;
@@ -25,7 +25,7 @@
 
 .userAccountForm label, .userAccountForm h2 {
     font-family: "Poppins", serif;
-    color: #012E6E;
+    color: white;
 }
 
 .userAccountForm p {
@@ -37,7 +37,7 @@
 
 .userAccountForm h2 {
     margin: 0;
-    color: #012E6E;
+    color: #8ab400;
 }
 
 .main_img {
@@ -45,8 +45,8 @@
     height: 85%;
     border-top-left-radius: 15px;
     border-bottom-left-radius: 15px;
-    background-color: #002252;
-    box-shadow: 0 0 15px white;
+    background-color: #111111;
+    box-shadow: 0 0 15px #c5ff00;
 }
 
 .input, .selectInput{
@@ -97,9 +97,8 @@
     cursor: pointer;
 }
 
-.userAccountForm input[type=submit]{
+/* .userAccountForm input[type=submit]{
     width: 70%;
-    width: 52%;
     margin-top: 5%;
     cursor: pointer;
     background: linear-gradient(to right, #012E6E 0%, #4d016e 100%);
@@ -111,9 +110,40 @@
     border-radius: 10px;
     margin-top: 5%;
     margin-bottom: 5%;
-}
+} */
 
 ::placeholder {
     color: rgba(255, 255, 255, 0.704);
   }
 
+  .userAccountForm input[type=submit] {
+    font-family: "Poppins", sans-serif;
+    width: 50%;
+    padding: 1%;
+    margin: 3%;
+    border-radius: 50px;
+    cursor: pointer;
+    border: 0;
+    background-color: white;
+    box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+    font-size: 15px;
+    transition: all 0.5s ease;
+  }
+  
+  .userAccountForm input[type=submit]:hover {
+    letter-spacing: 2px;
+    background-color: #1e1e1e;
+    color: hsl(0, 0%, 100%);
+    box-shadow: #c5ff00 0px 3px 29px 0px;
+  }
+  
+  .userAccountForm input[type=submit]:active {
+    letter-spacing: 2px;
+    background-color: #1e1e1e;
+    color: white;
+    box-shadow: #c5ff00 0px 0px 0px 0px;
+    transform: translateY(10px);
+    transition: 100ms;
+  }
diff --git a/frontend/src/Components/Line_Manager_Home_Page/ConsultantCard.js b/frontend/src/Components/Line_Manager_Home_Page/ConsultantCard.js
new file mode 100644
index 00000000..d7817028
--- /dev/null
+++ b/frontend/src/Components/Line_Manager_Home_Page/ConsultantCard.js
@@ -0,0 +1,12 @@
+import styles from './ConsultantCard.module.css';
+
+export default function ConsultantCard (props) {
+    return(
+    <div className={styles.cardContainer}>
+        <figure className={styles.iconContainer}>
+            <img className={styles.userIcon} src="/user_icon.png"/>
+        </figure>
+        <h2 className={styles.name}>{props.name}</h2>
+        <button className={styles.viewTimesheetBtn}>View Timesheet</button>
+    </div>)
+}
\ No newline at end of file
diff --git a/frontend/src/Components/Line_Manager_Home_Page/ConsultantCard.module.css b/frontend/src/Components/Line_Manager_Home_Page/ConsultantCard.module.css
new file mode 100644
index 00000000..cb4ae7a9
--- /dev/null
+++ b/frontend/src/Components/Line_Manager_Home_Page/ConsultantCard.module.css
@@ -0,0 +1,42 @@
+.cardContainer{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #AEAEAE;
+    padding: 1em; 
+    border-radius: 1.5em;
+    box-shadow: -0.2em 0.2em 0.2em hsla(0, 0%, 24%, 0.753);
+    margin: 1pc;
+    max-height: 11rem;
+    min-height: 11rem;
+    width: 50%;
+    flex-shrink: 0;
+}
+
+.userIcon{
+    width: 95%;
+}
+
+.iconContainer{
+    margin-bottom: 0;
+    margin-top: 0;
+}
+
+.name{
+    color: black;
+    text-align: center;
+    margin-top: 1rem;
+    margin-bottom: 0;
+    width: 20rem;
+}
+
+.viewTimesheetBtn{
+    background-color: #D9D9D9;
+    border: none;
+    border-radius: 1.25em;
+    padding: 0.55em;
+    font-size: 1em;
+    cursor: pointer;
+    margin-top: 1rem;
+    margin-bottom: 3rem;
+}
\ No newline at end of file
diff --git a/frontend/src/Components/Line_Manager_Home_Page/ConsultantFinder.js b/frontend/src/Components/Line_Manager_Home_Page/ConsultantFinder.js
index 1dffdc08..d2452289 100644
--- a/frontend/src/Components/Line_Manager_Home_Page/ConsultantFinder.js
+++ b/frontend/src/Components/Line_Manager_Home_Page/ConsultantFinder.js
@@ -1,5 +1,6 @@
-import { useState } from "react"
-import { Link } from "react-router-dom";
+import { useState, useEffect } from "react"
+import styles from './ConsultantFinder.module.css';
+import ConsultantCard from "./ConsultantCard";
 
 //bunch of placeholder names
 const consultantPlaceholderNames = [
@@ -17,10 +18,50 @@ const consultantPlaceholderNames = [
   ];
 //a
 
+//localhost:5000/list_consultants
+
 function ConsultantFinder() {
+    const [foundConsultants, setFoundConsultants] = useState([])
     const [search, setSearch] = useState('')
     const [searchResults, setSearchResults] = useState([])
 
+
+    useEffect(() => {
+        const fetchData = async () =>{
+            try{
+                await fetch('http://127.0.0.1:5000/list_consultants', {
+                        method: "GET",
+                        headers: { "Content-Type": "application/json" },
+                        credentials: 'include',
+                    }).then(response => {
+                        if (response.ok) {
+                            return response.json();
+                        } 
+                        else {
+                            throw new Error('Fetching Consultant Failed with Status: ' + response.status);
+                        }
+                    }).then(data => {
+                        // Data fetched successfully
+                        console.log(data)
+                        setFoundConsultants(data);
+                    }).catch(error => {
+                        console.error(error);
+                    });
+            } catch(error) {
+                console.log("error fetching data")
+            }
+        };
+        fetchData();
+    }, []);
+
+    if(foundConsultants === null) {
+        return(
+            <p>Loading data</p>
+        )
+    }
+    console.log("stored stuff:",foundConsultants)
+
+
     const handleSearchChange = (e) => {
         const searchText = e.target.value;
         setSearch(searchText);
@@ -34,21 +75,28 @@ function ConsultantFinder() {
       };
 
     return(
-        <div id="search">
-            <input type="search"
-            value={search}
-            onChange={handleSearchChange}></input>
-            <p>My Consultants</p>
-            <ul>
-                {search === '' ? (
-                    consultantPlaceholderNames.map((result, index) => (
-                    <li><Link key={index}>{result}</Link></li> 
-                ))
-                ) : (
-                    searchResults.map((result, index) => (
-                    <li><Link key={index}>{result}</Link></li> 
-                )))}
-            </ul>
+        <div className={styles.pageContainer}>
+            <div className={styles.searchContainer}>
+                <h2 className={styles.searchTitle}>Search Consultant</h2>
+                <input type="search"
+                value={search}
+                onChange={handleSearchChange}
+                className={styles.searchBox}></input>
+            </div>
+
+            <div className={styles.searchResultsContainer}>
+                <p className={styles.myConsultantsTitle}>My Consultants</p>
+                <div className={styles.searchResults}>
+                    {search === '' ? (
+                        consultantPlaceholderNames.map((result, index) => (
+                        <ConsultantCard name={result} key={index}></ConsultantCard>
+                    ))
+                    ) : (
+                        searchResults.map((result, index) => (
+                        <ConsultantCard name={result} key={index}></ConsultantCard>
+                    )))}
+                </div>
+            </div>
         </div>
     )
 }
diff --git a/frontend/src/Components/Line_Manager_Home_Page/ConsultantFinder.module.css b/frontend/src/Components/Line_Manager_Home_Page/ConsultantFinder.module.css
new file mode 100644
index 00000000..2f5f6fbd
--- /dev/null
+++ b/frontend/src/Components/Line_Manager_Home_Page/ConsultantFinder.module.css
@@ -0,0 +1,61 @@
+.pageContainer{
+    display: flex;
+    flex-direction: column;
+}
+
+.searchContainer{
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    width: 25%;
+    position: absolute;
+    left: 37.5%;
+    top: 12%;
+}
+
+.searchBox{
+    background-color: #012E6E;
+    position: absolute;
+    bottom: 18%;
+    left: 15%;
+    width: 70%;
+    padding: 0.8em;
+    color: white;
+    border: none;
+}
+
+.searchTitle{
+    color: black;
+    text-align: center;
+}
+
+.searchResults{
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-template-rows: 1fr;
+    align-items: flex-start;
+    justify-items: center;
+    gap: 0px;
+    z-index: 1;
+    width: 80%;
+    max-height: 35em;
+    overflow: auto;
+    position: absolute;
+    left: 10%;
+    background-color: #D9D9D9;
+    min-height: 35em;
+}
+
+.searchResultsContainer{
+    width: 100%;
+    position: absolute;
+    top: 35%;
+}
+
+.myConsultantsTitle{
+    text-align: center;
+    position: absolute;
+    left: 38%;
+    top: -20%;
+}
+
diff --git a/frontend/src/Components/Line_Manager_Home_Page/LineManagerLinks.js b/frontend/src/Components/Line_Manager_Home_Page/LineManagerLinks.js
index 1881cbe5..c6148744 100644
--- a/frontend/src/Components/Line_Manager_Home_Page/LineManagerLinks.js
+++ b/frontend/src/Components/Line_Manager_Home_Page/LineManagerLinks.js
@@ -5,7 +5,6 @@ function LineManagerLinks(){
     return(
         <>
             <nav>
-                <Link to="/timesheet_recording_page"><p></p></Link>
                 <Link to="/consultant_finder_page"><p>View Consultants</p></Link>
                 <Link to="/"><p>Back</p></Link>
                 <LogoutButton/>
diff --git a/frontend/src/Components/LoginForm/LoginForm.module.css b/frontend/src/Components/LoginForm/LoginForm.module.css
index d63a0087..c0a7b433 100644
--- a/frontend/src/Components/LoginForm/LoginForm.module.css
+++ b/frontend/src/Components/LoginForm/LoginForm.module.css
@@ -1,12 +1,13 @@
-html{
-    background-image: none ;
-    background-color: #012E6E;
+html {
+    background-image: none;
+    background: rgb(2, 0, 36);
+    background: radial-gradient(circle, #000000 0%, rgba(24, 31, 0, 1) 100%);
 }
 
 
 
 
-.LoginForm{
+.LoginForm {
     width: 20%;
     text-align: center;
     border-radius: 0.4pc;
@@ -16,32 +17,32 @@ html{
     background-color: white;
 }
 
-.LoginFormList{
+.LoginFormList {
     display: inline;
     list-style-type: none;
     background-color: white;
 }
 
-.LoginFormListElement{
+.LoginFormListElement {
     padding: 0.4pc;
     font-family: "Roboto", sans-serif;
 }
 
-.UserIcon{
+.UserIcon {
     display: inline;
     width: 25%;
     position: relative;
     margin-left: 85px;
 }
 
-.input{
+.input {
     width: 10pc;
     padding: 0.5em;
     background-color: #012E6E;
     color: white;
 }
 
-.SelectInput{
+.SelectInput {
     background-color: #012E6E;
     padding: 0.6em;
     width: 42%;
@@ -52,12 +53,12 @@ html{
     appearance: none;
 }
 
-#ForgotPass{
+#ForgotPass {
     text-decoration: none;
     color: #012E6E;
 }
 
-.Submit{
+.Submit {
     padding: 0.7pc 0.1pc;
     width: 100px;
     cursor: pointer;
diff --git a/frontend/src/Components/Timesheet_Recording_Page/Day_Header/Day_Header.module.css b/frontend/src/Components/Timesheet_Recording_Page/Day_Header/Day_Header.module.css
index 136a2d9c..d17f4775 100644
--- a/frontend/src/Components/Timesheet_Recording_Page/Day_Header/Day_Header.module.css
+++ b/frontend/src/Components/Timesheet_Recording_Page/Day_Header/Day_Header.module.css
@@ -1,3 +1,10 @@
 .DayHeader{
     text-align: center;
+}
+
+.DayHeader h2 {
+    margin: 0;
+    font-family: "Poppins", sans-serif;
+    font-size: 14pt;
+    color: #012E6E;
 }
\ No newline at end of file
diff --git a/frontend/src/Components/Timesheet_Recording_Page/Form_At_Day/form_at_day.module.css b/frontend/src/Components/Timesheet_Recording_Page/Form_At_Day/form_at_day.module.css
index 97a69b79..50c49af7 100644
--- a/frontend/src/Components/Timesheet_Recording_Page/Form_At_Day/form_at_day.module.css
+++ b/frontend/src/Components/Timesheet_Recording_Page/Form_At_Day/form_at_day.module.css
@@ -7,8 +7,27 @@
 }
 
 .TimesheetFormContainer{
-    background-color: rgb(212, 212, 212);
-    border: solid 0.1em black;
-    width: 15%;
-    margin: 3%;
-}
\ No newline at end of file
+    background-color: #d4e5fe;
+    border-radius: 15px;
+    padding: 2%;
+    font-family: "Poppins", sans-serif;
+    font-size: 12pt;
+    color: #151515;
+}
+
+.buttons{
+    font-family: "Poppins", sans-serif;
+    cursor: pointer;
+    background: linear-gradient(to right, #012E6E 0%, #4d016e 100%);
+    border-radius: 10px;
+    color: white;
+    text-align: center;
+    width: 100%;
+    padding: 3%;
+}
+
+.buttons:disabled {
+    background: linear-gradient(to right, #012e6e94 0%, #4d016e92 100%);
+    color: rgba(255, 255, 255, 0.707);
+}
+
diff --git a/frontend/src/Components/Timesheet_Recording_Page/Form_At_Day/timesheet_form_day.js b/frontend/src/Components/Timesheet_Recording_Page/Form_At_Day/timesheet_form_day.js
index 516a1c96..679b55be 100644
--- a/frontend/src/Components/Timesheet_Recording_Page/Form_At_Day/timesheet_form_day.js
+++ b/frontend/src/Components/Timesheet_Recording_Page/Form_At_Day/timesheet_form_day.js
@@ -93,21 +93,21 @@ function TimesheetFormDay() {
         return (
             <div className={styles.TimesheetFormContainer}>
                 {/* Pass the formatted date to the DayHeader */}
-                <DayHeader day={formattedDate} />
+                <DayHeader className={styles.dayHeader} day={formattedDate} />
 
                 <div>
                     <p>Start Time: {startTime ? startTime.toLocaleTimeString() : ''}</p>
-                    <button onClick={handleStartTime} disabled={startTime !== null}>Start Time</button>
+                    <button className={styles.buttons} onClick={handleStartTime} disabled={startTime !== null}>Start Time</button>
                 </div>
                 <div>
                     <p>End Time: {endTime ? endTime.toLocaleTimeString() : ''}</p>
-                    <button onClick={handleEndTime} disabled={startTime === null || endTime !== null}>End Time</button>
+                    <button className={styles.buttons} onClick={handleEndTime} disabled={startTime === null || endTime !== null}>End Time</button>
                 </div>
                 <div>
                     <p>{duration}</p>
                 </div>
                 <div>
-                    <button onClick={handleSubmit} disabled={submitted || !duration}>Submit Timesheet</button>
+                    <button className={styles.buttons} onClick={handleSubmit} disabled={submitted || !duration}>Submit Timesheet</button>
                 </div>
             </div>
         );
diff --git a/frontend/src/Components/Timesheet_Recording_Page/Timesheet_Links/Timesheet_Links.module.css b/frontend/src/Components/Timesheet_Recording_Page/Timesheet_Links/Timesheet_Links.module.css
index 1042c85f..83e29a7d 100644
--- a/frontend/src/Components/Timesheet_Recording_Page/Timesheet_Links/Timesheet_Links.module.css
+++ b/frontend/src/Components/Timesheet_Recording_Page/Timesheet_Links/Timesheet_Links.module.css
@@ -1,6 +1,23 @@
+
+.linksContainer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    gap: 3%;
+    font-family: "Poppins", sans-serif;
+    font-size: 12pt;
+    margin-top: 3%;
+    margin-bottom: 3%;
+}
+
 .TimesheetPageLink{
-    padding: 1em;
-    margin: 1em;
-    width: 5%;
-    background-color: ghostwhite;
+    cursor: pointer;
+    background: linear-gradient(to right, #012E6E 0%, #4d016e 100%);
+    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.456); 
+    border-radius: 10px;
+    color: white;
+    text-transform: uppercase;
+    text-decoration: none;
+    text-align: center;
+    width: 10%;
 }
\ No newline at end of file
diff --git a/frontend/src/Components/Timesheet_Recording_Page/Timesheet_Links/timesheet_page_links.js b/frontend/src/Components/Timesheet_Recording_Page/Timesheet_Links/timesheet_page_links.js
index 19f087e2..40a4f8c0 100644
--- a/frontend/src/Components/Timesheet_Recording_Page/Timesheet_Links/timesheet_page_links.js
+++ b/frontend/src/Components/Timesheet_Recording_Page/Timesheet_Links/timesheet_page_links.js
@@ -4,10 +4,10 @@ import styles from "../Timesheet_Links/Timesheet_Links.module.css"
 function TimesheetPageLinks() {
     return(
         <>
-            <nav>
-                <Link to="/consultant_home_page"><button className={styles.TimesheetPageLink}>Save</button></Link>
-                <Link to="/consultant_home_page"><button className={styles.TimesheetPageLink}>Submit</button></Link>
-                <Link to="/consultant_home_page"><button className={styles.TimesheetPageLink}>Back</button></Link>
+            <nav className={styles.linksContainer}>
+                <Link className={styles.TimesheetPageLink} to="/consultant_home_page"><p>Save</p></Link>
+                <Link className={styles.TimesheetPageLink} to="/consultant_home_page"><p>Submit</p></Link>
+                <Link className={styles.TimesheetPageLink} to="/consultant_home_page"><p>Back</p></Link>
             </nav>
         </>
     )
diff --git a/frontend/src/Components/View_Timesheet_Page/ConsultantDetails.js b/frontend/src/Components/View_Timesheet_Page/ConsultantDetails.js
index 442e12fb..53271c9c 100644
--- a/frontend/src/Components/View_Timesheet_Page/ConsultantDetails.js
+++ b/frontend/src/Components/View_Timesheet_Page/ConsultantDetails.js
@@ -1,15 +1,31 @@
 import styles from './ConsultantDetails.module.css';
 
-export default function ConsultantDetails() {
+function formatName(name){
+    let newName = ""
+    for(let i=0; i<name.length; i++) {
+        if(i==0 || name.charAt(i-1) == " "){
+            newName += name.charAt(i).toUpperCase()
+        }
+        else{
+            newName += name.charAt(i)
+        }
+    }
+    return newName
+}
+
+export default function ConsultantDetails(props) {
+    let consultantName = formatName(props.consultantName)
+    let lineManagerName = formatName(props.lineManagerName)
+
     return(
     <div className={styles.consultantDetailsContainer}>
-        <div className={styles.consultantNameContainer}>
-            <h2>Consultant Name:</h2>
-            <h2 className={styles.consultantName}>John Doe</h2>
+        <div className={styles.userNameContainer}>
+            <h2 className={styles.element}>Consultant Name:</h2>
+            <h2 className={styles.element}>{consultantName}</h2>
         </div>
-        <div className={styles.lineManagerContainer}>
-            <h2>Line Manager Name:</h2>
-            <h2 className={styles.lineManagerName}>Jane Doe</h2>
+        <div className={styles.userNameContainer}>
+            <h2 className={styles.element}>Line Manager Name:</h2>
+            <h2 className={styles.element}>{lineManagerName}</h2>
         </div>
     </div>)
 }
\ No newline at end of file
diff --git a/frontend/src/Components/View_Timesheet_Page/ConsultantDetails.module.css b/frontend/src/Components/View_Timesheet_Page/ConsultantDetails.module.css
index dac65ee3..7b655a65 100644
--- a/frontend/src/Components/View_Timesheet_Page/ConsultantDetails.module.css
+++ b/frontend/src/Components/View_Timesheet_Page/ConsultantDetails.module.css
@@ -1,26 +1,22 @@
 .consultantDetailsContainer{
     display: flex;
     flex-direction: column;
-    width: 30%;
-    position: absolute;
+    width: 20%;
+    align-items: center;
     top: 5%;
     text-align: center;
+    gap: 4rem;
+    margin-top: 3rem;
+    margin-left: 5rem;
 }
 
-.consultantName{
-    position: absolute;
-    top: 25%;
-    left: 42%;
-}
+.userNameContainer{
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 
-.lineManagerContainer{
-    position: absolute;
-    top: 70%;
-    left: 31%;
 }
 
-.lineManagerName{
-    position: absolute;
-    top: 25%;
-    left: 25%;
+.element{
+    margin: 0;
 }
\ No newline at end of file
diff --git a/frontend/src/Components/View_Timesheet_Page/TimesheetTable.js b/frontend/src/Components/View_Timesheet_Page/TimesheetTable.js
index 8c429329..6fdf19de 100644
--- a/frontend/src/Components/View_Timesheet_Page/TimesheetTable.js
+++ b/frontend/src/Components/View_Timesheet_Page/TimesheetTable.js
@@ -1,52 +1,91 @@
+import ViewTimesheetHeader from "../../Components/View_Timesheet_Page/ViewTimesheetHeader";
 import styles from './TimesheetTable.module.css';
+import { useState, useEffect } from 'react';
+import ConsultantDetails from "../../Components/View_Timesheet_Page/ConsultantDetails";
 
 export default function TimesheetTable() {
-    return(
+
+    const [timesheets, setTimesheets] = useState([]);
+
+    var arrayOfDays = []
+    var daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+
+      
+    useEffect(() => {
+        const fetchData = async () =>{
+            try{
+                await fetch('http://127.0.0.1:5000/list_weekly_timesheets', {
+                        method: "GET",
+                        headers: { "Content-Type": "application/json" },
+                        credentials: 'include',
+                    }).then(response => {
+                        if (response.ok) {
+                            return response.json();
+                        } 
+                        else {
+                            throw new Error('User Creation Failed with Status: ' + response.status);
+                        }
+                    }).then(data => {
+                        // Data fetched successfully
+                        console.log(data)
+                        setTimesheets(data);
+                    }).catch(error => {
+                        console.error(error);
+                    });
+            } catch(error) {
+                console.log("error fetching data")
+            }
+        };
+        fetchData();
+    }, []);
+
+    if(timesheets === null) {
+        return(
+            <p>Loading data</p>
+        )
+    }
+    console.log("stored stuff:",timesheets)
+
+    let counter = 0
+    Object.entries(timesheets).map(entry => {
+        arrayOfDays.push(entry[1])
+        const [day, month, year] = arrayOfDays[counter].day.split('/');
+        const formattedDate = `${month}/${day}/${year}`; 
+        const currentDay = new Date(formattedDate).getDay()
+        arrayOfDays[counter].day_of_week = daysOfWeek[currentDay]
+        console.log(arrayOfDays[counter].day_of_week)
+        counter++
+    })
+
+return ( 
+    <>
+        {arrayOfDays.length > 0 && <ConsultantDetails consultantName={arrayOfDays[0].consultant_name} lineManagerName={arrayOfDays[0].line_manager_name}/>}
+        {arrayOfDays.length > 0 && <ViewTimesheetHeader currentWeek={arrayOfDays[0].week_start}/>}
         <div>
             <table className={styles.timesheetTable}>
-                <tr className={styles.tableRow}>
-                    <th className={styles.tableData}>DAY</th>
-                    <th className={styles.tableData}>DATE</th>
-                    <th className={styles.tableData}>START TIME</th>
-                    <th className={styles.tableData}>END TIME</th>
-                    <th className={styles.tableData}>HOURS WORKED</th>
-                </tr>
-                <tr className={styles.tableRow}>
-                    <td className={styles.tableData}>Monday</td>
-                    <td className={styles.tableData}>01/04/2024</td>
-                    <td className={styles.tableData}>09:05</td>
-                    <td className={styles.tableData}>17:30</td>
-                    <td className={styles.tableData}>8 Hours <br/> 25 Minutes</td>
-                </tr>
-                <tr className={styles.tableRow}>
-                    <td className={styles.tableData}>Tuesday</td>
-                    <td className={styles.tableData}>02/04/2024</td>
-                    <td className={styles.tableData}>09:05</td>
-                    <td className={styles.tableData}>17:30</td>
-                    <td className={styles.tableData}>8 Hours <br/> 25 Minutes</td>
-                </tr>
-                <tr className={styles.tableRow}>
-                    <td className={styles.tableData}>Wednesday</td>
-                    <td className={styles.tableData}>03/04/2024</td>
-                    <td className={styles.tableData}>09:05</td>
-                    <td className={styles.tableData}>17:30</td>
-                    <td className={styles.tableData}>8 Hours <br/> 25 Minutes</td>
-                </tr>
-                <tr className={styles.tableRow}>
-                    <td className={styles.tableData}>Thursday</td>
-                    <td className={styles.tableData}>04/04/2024</td>
-                    <td className={styles.tableData}>09:05</td>
-                    <td className={styles.tableData}>17:30</td>
-                    <td className={styles.tableData}>8 Hours <br/> 25 Minutes</td>
-                </tr>
-                <tr className={styles.tableRow}>
-                    <td className={styles.tableData}>Friday</td>
-                    <td className={styles.tableData}>05/04/2024</td>
-                    <td className={styles.tableData}>09:05</td>
-                    <td className={styles.tableData}>17:30</td>
-                    <td className={styles.tableData}>8 Hours <br/> 25 Minutes</td>
-                </tr>
+                <thead>
+                    <tr className={styles.tableRow}>
+                        <th className={styles.tableData}>DAY</th>
+                        <th className={styles.tableData}>DATE</th>
+                        <th className={styles.tableData}>START TIME</th>
+                        <th className={styles.tableData}>END TIME</th>
+                        <th className={styles.tableData}>HOURS WORKED</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {arrayOfDays.map((dayData, index) => (
+                        <tr key={index} className={styles.tableRow}>
+                            <td className={styles.tableData}>{dayData.day_of_week}</td>
+                            <td className={styles.tableData}>{dayData.day}</td>
+                            <td className={styles.tableData}>{dayData.start_work}</td>
+                            <td className={styles.tableData}>{dayData.end_work}</td>
+                            <td className={styles.tableData}>{dayData.hours_worked}</td>
+                        </tr>
+                    ))}
+                </tbody>
             </table>
         </div>
-    )
+    </>
+);
+
 }
\ No newline at end of file
diff --git a/frontend/src/Components/View_Timesheet_Page/ViewTimesheetHeader.js b/frontend/src/Components/View_Timesheet_Page/ViewTimesheetHeader.js
index 55fb6954..39b245c2 100644
--- a/frontend/src/Components/View_Timesheet_Page/ViewTimesheetHeader.js
+++ b/frontend/src/Components/View_Timesheet_Page/ViewTimesheetHeader.js
@@ -1,8 +1,8 @@
 import styles from './ViewTimesheetHeader.module.css';
 
-export default function ViewTimesheetHeader() {
+export default function ViewTimesheetHeader(props) {
     return(<header className={styles.headerContainer}>
         <h1>My Timesheet</h1>
-        <h2 className={styles.weekStarting}>Week starting : 01/04/2024</h2>
+        <h2 className={styles.weekStarting}>Week starting : {props.currentWeek}</h2>
     </header>)
 }
\ No newline at end of file
diff --git a/frontend/src/Components/View_Timesheet_Page/ViewTimesheetHeader.module.css b/frontend/src/Components/View_Timesheet_Page/ViewTimesheetHeader.module.css
index b78a414c..ca88b7ac 100644
--- a/frontend/src/Components/View_Timesheet_Page/ViewTimesheetHeader.module.css
+++ b/frontend/src/Components/View_Timesheet_Page/ViewTimesheetHeader.module.css
@@ -5,14 +5,14 @@
     flex-direction:column;
     width: 30%;
     position: absolute;
-    left: 35%;
+    left: 43%;
     top: 2%;
     font-family: 'Roboto', sans-serif;
 }
 
 .weekStarting{
     position: absolute;
-    left: 25%;
+    left: -5%;
     top: 60%;
     font-family: 'Roboto', sans-serif;
 }
\ No newline at end of file
diff --git a/frontend/src/Pages/Consultant/ConsultantHomePage.module.css b/frontend/src/Pages/Consultant/ConsultantHomePage.module.css
new file mode 100644
index 00000000..fbc13664
--- /dev/null
+++ b/frontend/src/Pages/Consultant/ConsultantHomePage.module.css
@@ -0,0 +1,9 @@
+.main{
+    margin-left: 5rem;
+    padding: 1rem;
+}
+
+body{
+    margin: 0;
+    padding: 0;
+}
\ No newline at end of file
diff --git a/frontend/src/Pages/Consultant/TimesheetRecordingPage.module.css b/frontend/src/Pages/Consultant/TimesheetRecordingPage.module.css
new file mode 100644
index 00000000..6944c54e
--- /dev/null
+++ b/frontend/src/Pages/Consultant/TimesheetRecordingPage.module.css
@@ -0,0 +1,30 @@
+.heading {
+    margin-top: 0;
+    padding: 3%;
+    text-align: center;
+    font-family: "Poppins", sans-serif;
+    color: white;
+}
+
+body{
+    margin: 0;
+    padding: 0;
+}
+
+.mainContainer {
+    margin-left: 5rem;
+    padding: 1rem;
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.weekContainer {
+    width: 90%;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    gap: 3%;
+}
\ No newline at end of file
diff --git a/frontend/src/Pages/Consultant/TimesheetViewPage.module.css b/frontend/src/Pages/Consultant/TimesheetViewPage.module.css
index fb7f6353..1355a5cf 100644
--- a/frontend/src/Pages/Consultant/TimesheetViewPage.module.css
+++ b/frontend/src/Pages/Consultant/TimesheetViewPage.module.css
@@ -1,5 +1,15 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 
+.main{
+    margin-left: 5rem;
+    padding: 1rem;
+}
+
+body{
+    margin: 0;
+    padding: 0;
+}
+
 .pageContainer{
     font-family: 'Roboto', sans-serif;
 }
diff --git a/frontend/src/Pages/Consultant/consultant_home_page.js b/frontend/src/Pages/Consultant/consultant_home_page.js
index 336d6fab..d84332d1 100644
--- a/frontend/src/Pages/Consultant/consultant_home_page.js
+++ b/frontend/src/Pages/Consultant/consultant_home_page.js
@@ -1,12 +1,19 @@
-import ConsultantLinks from "../../Components/Consultant_Home_Page/ConsultantLinks";
+import LogoutButton from "../../Components/Global/LogoutButton";
+import Navbar from "../../Components/Global/Navbar";
+import styles from './ConsultantHomePage.module.css'
 
 function ConsultantHomePage () {
     document.title = "Consultant Home Page";
 
-    return(
-        <>
-            <h1>Consultant Home Page</h1>
-            <ConsultantLinks/>
+    let links = [{pageName : "Create Timesheet", pageLink : "/timesheet_recording_page", iconPath : "./Home_Page_Icons/Consultant/record_timesheet.svg"}, 
+    {pageName : "View Timesheet", pageLink : "/current_timesheet_viewer", iconPath : "./Home_Page_Icons/Consultant/view_timesheet.svg"},
+    {pageName : "View Saved Timesheets", pageLink : "/", iconPath : "./Home_Page_Icons/Consultant/view_saved_timesheets.svg"}]
+
+    return(<>
+            <Navbar homePageTitle="Consultant Home Page" homePageLink="/consultant_home_page" links={links}/>
+            <main className={styles.main}>
+                <h1>Consultant Home Page</h1>
+            </main>
         </>
     )
 }
diff --git a/frontend/src/Pages/Consultant/timesheet_recording_page.js b/frontend/src/Pages/Consultant/timesheet_recording_page.js
index 15e3a3fb..0aced2b5 100644
--- a/frontend/src/Pages/Consultant/timesheet_recording_page.js
+++ b/frontend/src/Pages/Consultant/timesheet_recording_page.js
@@ -1,21 +1,23 @@
 import TimesheetFormDay from "../../Components/Timesheet_Recording_Page/Form_At_Day/timesheet_form_day"
-import TimesheetPageLinks from "../../Components/Timesheet_Recording_Page/Timesheet_Links/timesheet_page_links"
+import Navbar from "../../Components/Global/Navbar"
+import styles from "./TimesheetRecordingPage.module.css"
 
 function TimesheetRecordingPage(){
-    return(
-        <>
-            <h1>Timesheet Recording Page</h1><br/>
+    document.title = "Timesheet Recording Page"
 
-            {/*this just adds days to the timesheet form*/}
-            {/*<TimesheetFormDay day="Monday"/>*/}
-            {/*<TimesheetFormDay day="Tuesday"/>*/}
-            {/*<TimesheetFormDay day="Wednesday"/>*/}
-            {/*<TimesheetFormDay day="Thursday"/>*/}
+    let links = [{pageName : "Create Timesheet", pageLink : "/timesheet_recording_page", iconPath : "./Home_Page_Icons/Consultant/record_timesheet.svg"}, 
+    {pageName : "View Timesheet", pageLink : "/current_timesheet_viewer", iconPath : "./Home_Page_Icons/Consultant/view_timesheet.svg"},
+    {pageName : "View Saved Timesheets", pageLink : "/", iconPath : "./Home_Page_Icons/Consultant/view_saved_timesheets.svg"}]
 
-            <TimesheetFormDay day="Friday"/><br/>
-            <TimesheetPageLinks/>
+    return(
+        <>
+            <Navbar homePageTitle="Consultant Home Page" homePageLink="/consultant_home_page" links={links}/>
+            <main className={styles.mainContainer}>
+                <h1 className={styles.heading}>Timesheet Recording Page</h1><br/>
+                <TimesheetFormDay day="Friday"/><br/>
+            </main>
         </>
-    )    
+    )
 }
 
 export default TimesheetRecordingPage
\ No newline at end of file
diff --git a/frontend/src/Pages/Consultant/view_current_timesheet_page.js b/frontend/src/Pages/Consultant/view_current_timesheet_page.js
index a516adad..c1bcfd78 100644
--- a/frontend/src/Pages/Consultant/view_current_timesheet_page.js
+++ b/frontend/src/Pages/Consultant/view_current_timesheet_page.js
@@ -1,19 +1,21 @@
-import ViewTimesheetHeader from "../../Components/View_Timesheet_Page/ViewTimesheetHeader";
-import ConsultantDetails from "../../Components/View_Timesheet_Page/ConsultantDetails";
 import DailyRate from "../../Components/View_Timesheet_Page/DailyRate";
 import TimesheetTable from "../../Components/View_Timesheet_Page/TimesheetTable";
-import { Link } from "react-router-dom";
 import styles from './TimesheetViewPage.module.css';
+import Navbar from "../../Components/Global/Navbar";
 
 function ViewCurrentTimesheetPage () {
     document.title = "Current Timesheet Viewer Page";
 
+    let links = [{pageName : "Create Timesheet", pageLink : "/timesheet_recording_page", iconPath : "./Home_Page_Icons/Consultant/record_timesheet.svg"}, 
+    {pageName : "View Timesheet", pageLink : "/current_timesheet_viewer", iconPath : "./Home_Page_Icons/Consultant/view_timesheet.svg"},
+    {pageName : "View Saved Timesheets", pageLink : "/", iconPath : "./Home_Page_Icons/Consultant/view_saved_timesheets.svg"}]
+
     return(<>
-        <ViewTimesheetHeader/>
-        <ConsultantDetails/>
-        <DailyRate/>
-        <TimesheetTable/>
-        <Link to="/"><button className={styles.backButton}>Back</button></Link>
+        <Navbar homePageTitle="Consultant Home Page" homePageLink="/consultant_home_page" links={links}/>
+        <main className={styles.main}>
+            <DailyRate/>
+            <TimesheetTable/>
+        </main>
     </>)
 }
 
diff --git a/frontend/src/Pages/Finance_Team/finance_team_mem_home_page.js b/frontend/src/Pages/Finance_Team/finance_team_mem_home_page.js
index 5b909488..6189910a 100644
--- a/frontend/src/Pages/Finance_Team/finance_team_mem_home_page.js
+++ b/frontend/src/Pages/Finance_Team/finance_team_mem_home_page.js
@@ -1,11 +1,24 @@
-function FinanceTeamMemberHomePage () {
-    document.title = "Finance Team Member Home Page";
-
-    return(
-        <>
-            <h1>Finance Team Member Home Page</h1>
-        </>
-    )
+// FinanceTeamMemberHomePage.js
+import React from "react";
+import styles from "./finance_team_member_home_page.module.css"; // Import the CSS file
+import Navbar from "../../Components/Global/Navbar";
+
+function FinanceTeamMemberHomePage() {
+  document.title = "Finance Team Home Page"
+
+  let links = [{pageName : "Set Hourly Rate Page", pageLink : "/set_hourly_rate", iconPath : "./Home_Page_Icons/Consultant/record_timesheet.svg"},
+              {pageName : "View Timesheet Page", pageLink : "/view_timesheet", iconPath : "./Home_Page_Icons/Consultant/view_timesheet.svg"}]
+
+  return (
+    <>
+      <Navbar homePageTitle="Finance Team Home Page" homePageLink="/finance_team_member_home_page" links={links}/>
+      <div className={styles.financeTeamMemberContainer}>
+        <h1 className={styles.financeTeamMemberHeading}>
+          Finance Team Member Home Page
+        </h1>
+      </div>
+    </>
+  );
 }
 
-export default FinanceTeamMemberHomePage;
\ No newline at end of file
+export default FinanceTeamMemberHomePage;
diff --git a/frontend/src/Pages/Finance_Team/finance_team_member_home_page.module.css b/frontend/src/Pages/Finance_Team/finance_team_member_home_page.module.css
new file mode 100644
index 00000000..c8f0f5d8
--- /dev/null
+++ b/frontend/src/Pages/Finance_Team/finance_team_member_home_page.module.css
@@ -0,0 +1,35 @@
+/* FinanceTeamMemberHomePage.module.css */
+
+.financeTeamMemberContainer{
+  margin-left: 5rem;
+  padding: 1rem;
+}
+
+body{
+  margin: 0;
+  padding: 0;
+}
+
+/* Button styles */
+.financeTeamMemberButton {
+  padding: 30px 60px;
+  background-color: #ffffff;
+  color: #0a0a0a;
+  border: none;
+  border-radius: 4px;
+  font-size: 16px;
+  cursor: pointer;
+  margin: 0 10px; /* Add margin to both sides of the button */
+}
+
+.financeTeamMemberButton:first-child {
+  margin-right: 10px; /* Add margin only to the right of the first button */
+}
+
+.financeTeamMemberButton:last-child {
+  margin-left: 10px; /* Add margin only to the left of the last button */
+}
+
+.financeTeamMemberButton:hover {
+  background-color: #0056b3;
+}
diff --git a/frontend/src/Pages/IT_Technician/ITDifficultiesPage.module.css b/frontend/src/Pages/IT_Technician/ITDifficultiesPage.module.css
new file mode 100644
index 00000000..89520214
--- /dev/null
+++ b/frontend/src/Pages/IT_Technician/ITDifficultiesPage.module.css
@@ -0,0 +1,4 @@
+.main{
+    margin-left: 5rem;
+    padding: 1rem;
+}
\ No newline at end of file
diff --git a/frontend/src/Pages/IT_Technician/it_difficulties_page.js b/frontend/src/Pages/IT_Technician/it_difficulties_page.js
index 565fac31..b177ea66 100644
--- a/frontend/src/Pages/IT_Technician/it_difficulties_page.js
+++ b/frontend/src/Pages/IT_Technician/it_difficulties_page.js
@@ -1,19 +1,28 @@
 import ITDifficultyHeader from "../../Components/IT_Technician_Page/ITDifficultyHeader";
 import ITDifficulty from "../../Components/IT_Technician_Page/ITDifficulty";
+import Navbar from "../../Components/Global/Navbar";
+import styles from "./ITDifficultiesPage.module.css";
 
 function IT_Difficulties_Page () {
     document.title = "IT Difficulties";
 
+    let links = [{pageName : "View It Difficulties", pageLink : "/it_difficulties", iconPath : "./Home_Page_Icons/Consultant/record_timesheet.svg"}, 
+    {pageName : "View Timesheet Edit Requests", pageLink : "/timesheet_edit_requests", iconPath : "./Home_Page_Icons/Consultant/view_timesheet.svg"},
+    {pageName : "Create User", pageLink : "/it_user_creation", iconPath : "./Home_Page_Icons/Consultant/view_saved_timesheets.svg"}]
+
     return(
         <>
-            <h1>IT Difficulties</h1>
-            <ITDifficultyHeader/><br/>
-            <ITDifficulty difficultyNo="1" difficultyTopic="Change Password Request" difficultySolved="Unsolved" technicianName="N/A"/><br/>
-            <ITDifficulty difficultyNo="2" difficultyTopic="Create New Account Request" difficultySolved="Unsolved" technicianName="N/A"/><br/>
-            <ITDifficulty difficultyNo="3" difficultyTopic="Check Database Update" difficultySolved="Unsolved" technicianName="N/A"/><br/>
-            <ITDifficulty difficultyNo="4" difficultyTopic="Data Protection Check" difficultySolved="Unsolved" technicianName="N/A"/><br/>
-            <ITDifficulty difficultyNo="5" difficultyTopic="Change Password Request" difficultySolved="Unsolved" technicianName="N/A"/><br/>
-            <ITDifficulty difficultyNo="6" difficultyTopic="Change Password Request" difficultySolved="Unsolved" technicianName="N/A"/>
+            <Navbar homePageTitle="IT Technician Home Page" homePageLink="/it_technician_home_page" links={links}/>
+            <div className={styles.main}>
+                <h1>IT Difficulties</h1>
+                <ITDifficultyHeader/><br/>
+                <ITDifficulty difficultyNo="1" difficultyTopic="Change Password Request" difficultySolved="Unsolved" technicianName="N/A"/><br/>
+                <ITDifficulty difficultyNo="2" difficultyTopic="Create New Account Request" difficultySolved="Unsolved" technicianName="N/A"/><br/>
+                <ITDifficulty difficultyNo="3" difficultyTopic="Check Database Update" difficultySolved="Unsolved" technicianName="N/A"/><br/>
+                <ITDifficulty difficultyNo="4" difficultyTopic="Data Protection Check" difficultySolved="Unsolved" technicianName="N/A"/><br/>
+                <ITDifficulty difficultyNo="5" difficultyTopic="Change Password Request" difficultySolved="Unsolved" technicianName="N/A"/><br/>
+                <ITDifficulty difficultyNo="6" difficultyTopic="Change Password Request" difficultySolved="Unsolved" technicianName="N/A"/>
+            </div>
         </>
     )
 }
diff --git a/frontend/src/Pages/IT_Technician/it_technician_home_page.js b/frontend/src/Pages/IT_Technician/it_technician_home_page.js
index 5cd542bf..d5f8673b 100644
--- a/frontend/src/Pages/IT_Technician/it_technician_home_page.js
+++ b/frontend/src/Pages/IT_Technician/it_technician_home_page.js
@@ -1,15 +1,18 @@
-import ITLinks from "../../Components/IT_Technician_Page/ITLinks";
 import styles from "./it_technician_home_page.module.css";
+import Navbar from "../../Components/Global/Navbar";
 
 function IT_Technician_HomePage() {
     document.title = "IT Technician Home Page";
 
+    let links = [{pageName : "View It Difficulties", pageLink : "/it_difficulties", iconPath : "./Home_Page_Icons/Consultant/record_timesheet.svg"}, 
+    {pageName : "View Timesheet Edit Requests", pageLink : "/timesheet_edit_requests", iconPath : "./Home_Page_Icons/Consultant/view_timesheet.svg"},
+    {pageName : "Create User", pageLink : "/it_user_creation", iconPath : "./Home_Page_Icons/Consultant/view_saved_timesheets.svg"}]
+
     return (
         <>
-            <img className={styles.backImg} src="./it_home_bg.png"/>
+            <Navbar homePageTitle="IT Technician Home Page" homePageLink="/it_technician_home_page" links={links}/>
             <div className={styles.mainContainer}>
                 <h1>Home</h1>
-                <ITLinks />
             </div>
         </>
     )
diff --git a/frontend/src/Pages/IT_Technician/it_technician_home_page.module.css b/frontend/src/Pages/IT_Technician/it_technician_home_page.module.css
index 135829d1..0372a5de 100644
--- a/frontend/src/Pages/IT_Technician/it_technician_home_page.module.css
+++ b/frontend/src/Pages/IT_Technician/it_technician_home_page.module.css
@@ -1,21 +1,19 @@
-
-.backImg {
-    position: absolute;
-    width: 100%;
-    height: 100vh;
-    filter: brightness(50%);
-}
-
 .mainContainer {
-    position: relative;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
     height: 100vh;
+    margin-left: 5rem;
+    padding: 1rem;
 }
 
-.mainContainer h1 {
+.main h1 {
     font-family: "Poppins", sans-serif;
     font-size: 36pt;
     color: #ffffffd5;
+}
+
+body{
+    margin: 0;
+    padding: 0;
 }
\ No newline at end of file
diff --git a/frontend/src/Pages/IT_Technician/it_user_creation_page.js b/frontend/src/Pages/IT_Technician/it_user_creation_page.js
index 92001896..6cf5e6f1 100644
--- a/frontend/src/Pages/IT_Technician/it_user_creation_page.js
+++ b/frontend/src/Pages/IT_Technician/it_user_creation_page.js
@@ -1,14 +1,23 @@
 import UserAccountCreation from "../../Components/IT_Technician_Page/UserAccountCreation";
 import styles from "./it_user_creation_page.module.css";
+import Navbar from "../../Components/Global/Navbar";
 
 function IT_User_Creation_Page() {
     document.title = "IT Technician: User Creation Page";
 
+    let links = [{pageName : "View It Difficulties", pageLink : "/it_difficulties", iconPath : "./Home_Page_Icons/Consultant/record_timesheet.svg"}, 
+    {pageName : "View Timesheet Edit Requests", pageLink : "/timesheet_edit_requests", iconPath : "./Home_Page_Icons/Consultant/view_timesheet.svg"},
+    {pageName : "Create User", pageLink : "/it_user_creation", iconPath : "./Home_Page_Icons/Consultant/view_saved_timesheets.svg"}]
+
     return (
         <>
-            <div className={styles.container}>
-                <UserAccountCreation/>
-            </div>
+            <Navbar homePageTitle="IT Technician Home Page" homePageLink="/it_technician_home_page" links={links}/>
+
+            <main className={styles.main}>
+                <div className={styles.container}>
+                    <UserAccountCreation/>
+                </div>
+            </main>
         </>
     )
 }
diff --git a/frontend/src/Pages/IT_Technician/it_user_creation_page.module.css b/frontend/src/Pages/IT_Technician/it_user_creation_page.module.css
index 7b5275fc..a56bbaae 100644
--- a/frontend/src/Pages/IT_Technician/it_user_creation_page.module.css
+++ b/frontend/src/Pages/IT_Technician/it_user_creation_page.module.css
@@ -1,4 +1,5 @@
 
-.container {
-    background: #012E6E;
+body{
+    margin: 0;
+    padding: 0;
 }
\ No newline at end of file
diff --git a/frontend/src/Pages/Line_Manager/ConsultantFinderPage.module.css b/frontend/src/Pages/Line_Manager/ConsultantFinderPage.module.css
new file mode 100644
index 00000000..fbc13664
--- /dev/null
+++ b/frontend/src/Pages/Line_Manager/ConsultantFinderPage.module.css
@@ -0,0 +1,9 @@
+.main{
+    margin-left: 5rem;
+    padding: 1rem;
+}
+
+body{
+    margin: 0;
+    padding: 0;
+}
\ No newline at end of file
diff --git a/frontend/src/Pages/Line_Manager/LineManagerHomePage.module.css b/frontend/src/Pages/Line_Manager/LineManagerHomePage.module.css
new file mode 100644
index 00000000..fbc13664
--- /dev/null
+++ b/frontend/src/Pages/Line_Manager/LineManagerHomePage.module.css
@@ -0,0 +1,9 @@
+.main{
+    margin-left: 5rem;
+    padding: 1rem;
+}
+
+body{
+    margin: 0;
+    padding: 0;
+}
\ No newline at end of file
diff --git a/frontend/src/Pages/Line_Manager/consultant_finder_page.js b/frontend/src/Pages/Line_Manager/consultant_finder_page.js
index abaccdc3..c6d109ee 100644
--- a/frontend/src/Pages/Line_Manager/consultant_finder_page.js
+++ b/frontend/src/Pages/Line_Manager/consultant_finder_page.js
@@ -1,10 +1,19 @@
 import ConsultantFinder from "../../Components/Line_Manager_Home_Page/ConsultantFinder";
+import Navbar from "../../Components/Global/Navbar";
+import styles from "./ConsultantFinderPage.module.css";
 
 function ConsultantFinderPage() {
+    document.title = "Consultant Finder Page";
+
+    let links = [{pageName : "Consultant Finder", pageLink : "/consultant_finder_page", iconPath : "./Home_Page_Icons/Consultant/record_timesheet.svg"}]
+
     return(
         <>
-            <h1>Consultant Finder</h1>
-            <ConsultantFinder/>
+            <Navbar homePageTitle="Line Manager Home Page" homePageLink="/line_manager_home_page" links={links}/>
+            <main className={styles.main}>
+                <h1>Consultant Finder</h1>
+                <ConsultantFinder/>
+            </main>
         </>
     )
 }
diff --git a/frontend/src/Pages/Line_Manager/line_manager_home_page.js b/frontend/src/Pages/Line_Manager/line_manager_home_page.js
index 5aa133f8..75d54c72 100644
--- a/frontend/src/Pages/Line_Manager/line_manager_home_page.js
+++ b/frontend/src/Pages/Line_Manager/line_manager_home_page.js
@@ -1,12 +1,17 @@
-import LineManagerLinks from "../../Components/Line_Manager_Home_Page/LineManagerLinks";
+import styles from "./LineManagerHomePage.module.css";
+import Navbar from "../../Components/Global/Navbar";
 
 function LineManagerHomePage(){
     document.title = "Line Manager Home Page";
 
+    let links = [{pageName : "Consultant Finder", pageLink : "/consultant_finder_page", iconPath : "./Home_Page_Icons/Consultant/record_timesheet.svg"}]
+
     return(
         <>
-            <h1>Line Manager Home Page</h1>
-            <LineManagerLinks/>
+            <Navbar homePageTitle="Line Manager Home Page" homePageLink="/line_manager_home_page" links={links}/>
+            <main className={styles.main}>
+                <h1>Line Manager Home Page</h1>
+            </main>
         </>
     )
 }