diff --git a/README.md b/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..56edf6214766642903612617300f9fe91434aae5
--- /dev/null
+++ b/README.md
@@ -0,0 +1,3 @@
+# README
+
+Write an overview of your project here...
diff --git a/coworking_spaces.csv b/coworking_spaces.csv
index d2b3226d204c8810552a7972c4cf111447af1be8..0ed6e3e492957232c7fc5f1518811ba8ea86d043 100644
--- a/coworking_spaces.csv
+++ b/coworking_spaces.csv
@@ -1,6 +1,6 @@
-Name,Address,Main_Photo,Additional_Photos,Description,Website,Email,Phone_Number,Opening_Hours,Checkin_Instructions
+Name,Address,Main_Photo,Additional_Photos,Description,Website,Email,Phone_Number,Opening_Hours,Checkin_Instructions
 Codebase,"CodeBase Edinburgh , 37a Castle Terrace, Edinburgh, EH1 2EL",https://images.squarespace-cdn.com/content/v1/55439320e4b0f92b5d6c4c8b/1646867535415-4JI39H286BUMT26H4FHN/C36A1915.jpg?format=2500w,"https://images.squarespace-cdn.com/content/v1/55439320e4b0f92b5d6c4c8b/1646868533510-J1OT4PEG5VM9FCBF8BJE/15.10.19_-_CREATIVE_BRIDGE_C02_-_DAY01_-_LQ-19+%281%29.jpg?format=2500w,https://images.squarespace-cdn.com/content/v1/55439320e4b0f92b5d6c4c8b/1646868421127-07KQ4N1OHTDDKQME686A/15.10.19_-_CREATIVE_BRIDGE_C02_-_DAY01_-_LQ-52+%281%29.jpg?format=2500w","Hi. We’re CodeBase. We've been exploring the world of startups and innovation for over five years now. We're not really sure how to best describe what we do, but we think the words ""tech cluster"" probably do it best. Please get in touch! We’re friendly people who are geeky about building tech startups, managing disruption and innovation.",https://www.thisiscodebase.com,info@thisiscodebase.com,(+44) 0131 560 2003,08:00 - 17:00,"Use the email address or phone number to call ahead and book a desk, let them know you're a Tramshed member"
 Catalyst,"Titanic Quarter, Queens Road, Belfast, BT3 9DT",https://wearecatalyst.org/wp-content/uploads/2022/05/Catalyst03.jpg,"https://wearecatalyst.org/wp-content/uploads/2022/03/DSC07673-scaled-2048x1570.jpg,https://wearecatalyst.org/wp-content/uploads/2021/01/2F6A1513.jpg","We are an independent, not-for-profit organisation working together for the greater good, enabling a connected community of like-minded innovators in an entrepreneurial eco-system that is the key driver of the knowledge economy in Northern Ireland.",https://wearecatalyst.org,enquiries@wearecatalyst.org,+44(0)28 9073 7800,08:00 - 18:00,"Use the email address or phone number to call ahead and book a desk, let them know you're a Tramshed member"
 C4DI,"C4DI Campus, 31-38 Queen Street, Hull, HU1 1UU",https://images.squarespace-cdn.com/content/v1/5709040420c647579532dbb4/1594914119071-OWI9G22S295OCMSWL0VL/_K5L1162.jpg?format=2500w,"https://images.squarespace-cdn.com/content/v1/5709040420c647579532dbb4/1588346951023-V0QWKQI35IDUACMOJ0WM/_MKL2718.jpg?format=750w,https://images.squarespace-cdn.com/content/v1/5709040420c647579532dbb4/1588346977833-LGY6P9473H2C5JF6I2UG/_K5M5505.jpg?format=750w","C4DI is an incubator that helps tech companies grow, and traditional businesses innovate.",http://www.c4di.co.uk,lc@c4di.net,+44 1482 304244,9am - 5pm,"Use the email address or phone number to call ahead and book a desk, let them know you're a Tramshed member"
 Dogpatch Labs,"Custom House Quay, Dublin, D01 Y6H7",https://dogpatchlabs.wpenginepowered.com/wp-content/uploads/2022/09/ian_browne.jpg,"https://dogpatchlabs.wpenginepowered.com/wp-content/uploads/2021/07/bordered.jpg,https://dogpatchlabs.com/wp-content/uploads/2020/03/UG_3-1.jpg","Dogpatch Labs is a startup hub, located in the heart of Dublin’s Digital Docklands.",https://dogpatchlabs.com,info@dogpatchlabs.com,,8:30 - 5:30,"Use the email address or phone number to call ahead and book a desk, let them know you're a Tramshed member"
-Stafion F,"5 Parvis Alan Turing, Paris",https://stationf.co/img/misc/create-zone.jpg,",https://stationf.co/img/flatmates/coffee-restaurant.jpg","Based in central Paris, STATION F gathers a whole entrepreneurial ecosystem under one roof. We help entrepreneurs bring their ambitious ideas to life.",https://stationf.co,,,0:00 - 0:00,Book through the Tramshed Tech app
+Stafion F,"5 Parvis Alan Turing, Paris",https://stationf.co/img/misc/create-zone.jpg,",https://stationf.co/img/flatmates/coffee-restaurant.jpg","Based in central Paris, STATION F gathers a whole entrepreneurial ecosystem under one roof. We help entrepreneurs bring their ambitious ideas to life.",https://stationf.co,,,0:00 - 0:00,Book through the Tramshed Tech app
\ No newline at end of file
diff --git a/project_server.py b/project_server.py
index d5abe52e2e1f0cc754c8d6cd332dd520074e4734..33dda74ecc13f18f519566e86460ad94285e2036 100644
--- a/project_server.py
+++ b/project_server.py
@@ -1,114 +1,216 @@
 import os
 import sqlite3
-from flask import Flask, redirect, request, render_template, jsonify
+from flask import Flask, redirect, request, render_template, jsonify, url_for, flash, session
 
 app = Flask(__name__)
 DATABASE = "project_db.db"
+app.secret_key = "hello"
 
 ALLOWED_EXTENSIONS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'])
 
+#Error handling for common database connection.
+#Parameter optional. Defaults to DATABASE.
+def connect_db(db_file=DATABASE):
+    conn = None
+    try:
+        conn = sqlite3.connect(db_file)
+    except:
+        print("Error connecting to database.")
+    return conn
 
 @app.route("/", methods=['GET'])
-def returnTemplate():
-    return render_template("test.html")
-
-@app.route("/SearchRecord", methods=['POST'])
+def returnIndex():
+    if (request.method == 'GET'):
+        return render_template("test.html")
+
+@app.route("/Manage_Coworking_Spaces", methods=['GET'])
+def returnManageCoworkingSpaces():
+    if (request.method == 'GET'):
+        return render_template("Manage_Coworking_Spaces.html")
+
+@app.route("/Locations", methods=['GET'])
+def returnListLocations():
+    if (request.method =='GET'):
+        conn = connect_db()
+        cur = conn.cursor()
+        cur.execute("SELECT Name, Main_Photo FROM coworking_spaces")
+        locationData = cur.fetchall()
+        conn.close()
+        return render_template("Locations.html", data = locationData)
+
+@app.route("/Load/CodeBase")
+def Load():
+			Name = "Codebase";
+			conn = sqlite3.connect(DATABASE)
+			cur = conn.cursor()
+			print(Name)
+		#	getAddress(Name)
+			cur.execute("SELECT * FROM 'coworking_spaces' WHERE Name =?;", [Name])
+			data = cur.fetchall()
+			print(data)
+		#	cur.execute("SELECT Address FROM coworking_spaces WHERE Name =? ;", [Name])
+		#	Address = cur.fetchall()
+		#	print(Address)
+		#	cur.execute("SELECT Main_Photo FROM coworking_spaces WHERE Name =? ;", [Name])
+		#	Main_Photo = cur.fetchall()
+		#	print(Main_Photo)
+		#	cur.execute("SELECT Additional_photos FROM coworking_spaces WHERE Name =? ;", [Name])
+		#	Additional_photos = cur.fetchall()
+		#	print(Additional_photos)
+		#	cur.execute("SELECT Description FROM coworking_spaces WHERE Name =? ;", [Name])
+		#	Description = cur.fetchall()
+		#	print(Description)
+		#	cur.execute("SELECT Website FROM coworking_spaces WHERE Name =? ;", [Name])
+		#	Website = cur.fetchall()
+		#	print(Website)
+		#	cur.execute("SELECT Opening_Hours FROM coworking_spaces WHERE Name =? ;", [Name])
+		#	Opening_Hours = cur.fetchall()
+		#	print(Opening_Hours)
+			conn.close()
+			return render_template('Space.html', data = data)
+			# pageAddress = Address, pageMain_Photo = Main_Photo, pageAdditional_photos = Additional_photos, pageDescription = Description, pageWebsite = Website, pageOpening_Hours = Opening_Hours  )
+
+@app.route("/SearchRecord", methods=['POST', 'GET'])
 def searchRecord():
 
-    if request.method =='POST':
+    if (request.method =='POST'):
+        recordName = request.form.get('recordName', default="Error")
+        print(f"Searching for '{recordName}' in the database.")
+
         try:
-            recordName = request.form.get('recordName', default="Error")
-            conn = sqlite3.connect(DATABASE)
+            conn = connect_db()
             cur = conn.cursor()
             cur.execute("SELECT * FROM coworking_spaces WHERE Name=?;", [recordName])
             recordData = cur.fetchall()
+
         except:
-            print(f"Error: {recordData}")
-            conn.close()
+            print(f"Encountered an error whilst searching for record.")
+
         finally:
             conn.close()
-            print(f"{str(recordData)} Record found.")
-            return str(recordData)
 
-# Adds a record to the CSV file.
-@app.route("/AddRecord", methods=['POST'])
-def addRecord():
+            if not recordData: #If recordData is an empty list...
+                print(f"'{recordName}' not found.")
+                return (f"'{recordName}' not found.")
 
-    print('Processing record.')
-    infoMessage = ('Add record failed.')
+            else:
+                print(f"Found: {recordData}")
+                return (recordData)
+
+@app.route('/AddRecord', methods=['POST'])
+def addRecord():
 
     if (request.method == 'POST'):
-        recordName = request.form['recordName']
-        recordAddress = request.form['recordAddress']
-        recordMainPhotos = request.form['recordMainPhotos']
-        recordAdditionalPhotos = request.form['recordAdditionalPhotos']
-        recordDescription = request.form['recordDescription']
-        recordWebsite = request.form['recordWebsite']
-        recordEmail = request.form['recordEmail']
-        recordPhoneNumber = request.form['recordPhoneNumber']
-        recordOpeningHours = request.form['recordOpeningHours']
-        recordCheckinInstructions = request.form['recordCheckinInstructions']
+        recordName = request.form.get('recordName', default="Error")
+        recordAddress = request.form.get('recordAddress', default="Error")
+        recordMainPhotos = request.form.get('recordMainPhotos', default="Error")
+        recordAdditionalPhotos = request.form.get('recordAdditionalPhotos', default="Error")
+        recordDescription = request.form.get('recordDescription', default="Error")
+        recordWebsite = request.form.get('recordWebsite', default="Error")
+        recordEmail = request.form.get('recordEmail', default="Error")
+        recordPhoneNumber = request.form.get('recordPhoneNumber', default="Error")
+        recordOpeningHours = request.form.get('recordOpeningHours', default="Error")
+        recordCheckinInstructions = request.form.get('recordCheckinInstructions', default="Error")
         recordData = [recordName, recordAddress, recordMainPhotos, recordAdditionalPhotos, recordDescription, recordWebsite, recordEmail, recordPhoneNumber, recordOpeningHours, recordCheckinInstructions]
+        print(f"Adding '{recordName}' to the database.")
 
-        conn = sqlite3.connect(DATABASE)
-        cur = conn.cursor()
-        cur.execute("INSERT INTO coworking_spaces ('Name', 'Address', 'Main_Photo', 'Additional_Photos', 'Description', 'Website', 'Email', 'Phone_Number', 'Opening_Hours', 'Checkin_Instructions')\
-                    VALUES (?,?,?,?,?,?,?,?,?,?)", (recordName, recordAddress, recordMainPhotos, recordAdditionalPhotos, recordDescription, recordWebsite, recordEmail, recordPhoneNumber, recordOpeningHours, recordCheckinInstructions))
-        conn.commit()
-        conn.close()
+        try:
+            conn = connect_db()
+            cur = conn.cursor()
+            cur.execute("INSERT INTO coworking_spaces ('Name', 'Address', 'Main_Photo', 'Additional_Photos', 'Description', 'Website', 'Email', 'Phone_Number', 'Opening_Hours', 'Checkin_Instructions')\
+                        VALUES (?,?,?,?,?,?,?,?,?,?)", (recordName, recordAddress, recordMainPhotos, recordAdditionalPhotos, recordDescription, recordWebsite, recordEmail, recordPhoneNumber, recordOpeningHours, recordCheckinInstructions))
+            conn.commit()
+            infoMessage = (f"Added: {recordData}")
 
-        infoMessage = (f'{recordData} Record added.')
+        except:
+            conn.rollback()
+            infoMessage = (f"Error adding record.")
 
-    print(infoMessage)
-    return (infoMessage)
+        finally:
+            conn.close()
+            print(infoMessage)
+            return (infoMessage)
 
-@app.route("/DeleteRecord", methods=['POST'])
+@app.route('/DeleteRecord', methods=['POST'])
 def deleteRecord():
 
-    if request.method =='POST':
+    if (request.method =='POST'):
+        recordName = request.form.get('recordName', default="Error")
+        print(f"Deleting '{recordName}' from the database.")
+
         try:
-            recordName = request.form.get('recordName', default="Error")
             conn = sqlite3.connect(DATABASE)
             cur = conn.cursor()
             cur.execute("DELETE FROM coworking_spaces WHERE Name=?;", [recordName])
             conn.commit()
+            infoMessage = (f"Deleted: '{recordName}'.")
+
         except:
-            print(f"Error: {recordData}")
-            conn.close()
+            conn.rollback()
+            infoMessage = (f"Error deleting record.")
+
         finally:
             conn.close()
-            print("Record deleted.")
-            return ("Record deleted.")
+            print(infoMessage)
+            return (infoMessage)
 
-@app.route("/EditRecord", methods=['POST'])
-def editRecord():
-
-    print('Processing record.')
-    infoMessage = ('Add record failed.')
+@app.route('/UpdateRecord', methods=['POST'])
+def updateRecord():
 
     if (request.method == 'POST'):
-        recordName = request.form['recordName']
-        recordAddress = request.form['recordAddress']
-        recordMainPhotos = request.form['recordMainPhotos']
-        recordAdditionalPhotos = request.form['recordAdditionalPhotos']
-        recordDescription = request.form['recordDescription']
-        recordWebsite = request.form['recordWebsite']
-        recordEmail = request.form['recordEmail']
-        recordPhoneNumber = request.form['recordPhoneNumber']
-        recordOpeningHours = request.form['recordOpeningHours']
-        recordCheckinInstructions = request.form['recordCheckinInstructions']
+        recordName = request.form.get('recordName', default="Error")
+        recordAddress = request.form.get('recordAddress', default="Error")
+        recordMainPhotos = request.form.get('recordMainPhotos', default="Error")
+        recordAdditionalPhotos = request.form.get('recordAdditionalPhotos', default="Error")
+        recordDescription = request.form.get('recordDescription', default="Error")
+        recordWebsite = request.form.get('recordWebsite', default="Error")
+        recordEmail = request.form.get('recordEmail', default="Error")
+        recordPhoneNumber = request.form.get('recordPhoneNumber', default="Error")
+        recordOpeningHours = request.form.get('recordOpeningHours', default="Error")
+        recordCheckinInstructions = request.form.get('recordCheckinInstructions', default="Error")
         recordData = [recordName, recordAddress, recordMainPhotos, recordAdditionalPhotos, recordDescription, recordWebsite, recordEmail, recordPhoneNumber, recordOpeningHours, recordCheckinInstructions]
+        print(f"Updating '{recordName}' in the database.")
+
+        try:
+            conn = sqlite3.connect(DATABASE)
+            cur = conn.cursor()
+            cur.execute("UPDATE coworking_spaces SET 'Name' = ?, 'Address' = ?, 'Main_Photo' = ?, 'Additional_Photos' = ?, 'Description' = ?, 'Website' = ?, 'Email' = ?, 'Phone_Number' = ?, 'Opening_Hours' = ?, 'Checkin_Instructions' = ? WHERE Name=?;", [recordName, recordAddress, recordMainPhotos, recordAdditionalPhotos, recordDescription, recordWebsite, recordEmail, recordPhoneNumber, recordOpeningHours, recordCheckinInstructions, recordName])
+            conn.commit()
+            infoMessage = (f"Updated: '{recordName}'.")
+
+        except:
+            conn.rollback()
+            infoMessage = (f"Error updating record.")
+
+        finally:
+            conn.close()
+            print(infoMessage)
+            return (infoMessage)
+
+@app.route("/locations", methods=["POST" , "GET"])
+def Locations():
+
+    print('Processing location')
+
+    if request.method == "POST":
+        session.permanent = True
+        locationsName = request.form['name']
+        locationPic = request.form['image']
+
 
         conn = sqlite3.connect(DATABASE)
         cur = conn.cursor()
-        cur.execute("UPDATE coworking_spaces SET 'Name' = ?, 'Address' = ?, 'Main_Photo' = ?, 'Additional_Photos' = ?, 'Description' = ?, 'Website' = ?, 'Email' = ?, 'Phone_Number' = ?, 'Opening_Hours' = ?, 'Checkin_Instructions' = ? WHERE Name=?;", [recordName, recordAddress, recordMainPhotos, recordAdditionalPhotos, recordDescription, recordWebsite, recordEmail, recordPhoneNumber, recordOpeningHours, recordCheckinInstructions, recordName])
+        cur.execute("SELECT Name, Main_photo FROM coworking_spaces WHERE Name= ?;", [locationsName])
         conn.commit()
         conn.close()
 
-        infoMessage = (f'{recordData} Record amended.')
+        msg= " Location added successfuly!"
+
+    return render_template('locations.html')
+
+
+
 
-    print(infoMessage)
-    return (infoMessage)
 
 if __name__ == "__main__":
     app.run(debug=True)
diff --git a/static/CSS/Manage_Coworking_Spaces.css b/static/CSS/Manage_Coworking_Spaces.css
index b9b1e4a439d856607d7bba1fe3a0af72c13b3a42..b0975c4d5dfcf38ea42148d5876c4220a06c9ca8 100644
--- a/static/CSS/Manage_Coworking_Spaces.css
+++ b/static/CSS/Manage_Coworking_Spaces.css
@@ -19,6 +19,11 @@ overflow, float, display
 body {
   margin: 0;
   padding: 0;
+
+  /* Below styling used for footer position. */
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
 }
 
 ul, li {
@@ -48,6 +53,7 @@ a {
 
 header #pageHeader
   div #headerDiv
+    a #headerText #headerImg
   nav #headerNav .navBar
     ul .Right, ul .Left
       li a
@@ -71,11 +77,11 @@ header #pageHeader
 
 #headerText {
   width: 100%;
-  margin-left: -220px;
+  margin-left: -240px;
 }
 
 #headerImg {
-  width: 180px;
+  width: 200px;
   height: 65px;
   margin-top: -10px;
   margin-right: 20px;
@@ -93,11 +99,6 @@ header #pageHeader
   padding: 7.5px 10px;
 }
 
-#headerNav img {
-  width: 55px;
-  height: 20px;
-}
-
 /* [#2] Page navigation styling. Used in [#1] and [#4]. */
 
 .navBar {
@@ -124,21 +125,49 @@ header #pageHeader
 
 main #pageMain
   form #recordForm
-    label
-    input .formTextInput
-    button #addButton
+    label .smallLabel
+    input textarea .smallInput
+    button
 
  */
 
-#pageMain {}
-
-#recordForm {
-  margin-left: 5px;
+#pageMain {
+  /* Below styling used for footer position. */
+  flex: 1;
 }
 
-#recordForm .formTextInput {
+#recordForm label, #recordForm input, #recordForm textarea {
+  margin-left: 1.25px;
   margin-top: 5px;
+}
+
+#recordForm label {
+  display: inline-block;
+  min-width: 27.5%;
+  text-align: right;
+  font-weight: bold;
+  vertical-align: top;
+}
+
+#recordForm input {
+  width: 50%;
+  min-width: 550px;
+}
+
+#recordForm textarea {
   width: 50%;
+  min-width: 550px;
+  font-size: 14.25px;
+}
+
+#recordForm .smallLabel {
+  width: 10%;
+  min-width: 125px;
+}
+
+#recordForm .smallInput {
+  width: 19.2%;
+  min-width: 200px;
 }
 
 /* [#4] Page footer styling. Uses [#2].
diff --git a/static/CSS/OurSpaces.css b/static/CSS/OurSpaces.css
new file mode 100644
index 0000000000000000000000000000000000000000..9ba04b852cfc40f3680ca8b103a8b05980f7634f
--- /dev/null
+++ b/static/CSS/OurSpaces.css
@@ -0,0 +1,78 @@
+header{
+  background-color: black;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  height: 10%;
+  float: center;
+  text-align: center;
+  margin: auto;
+  color: white;
+
+}
+body{
+
+  font-family: 'Sora', sans-serif;
+}
+
+#ImageBox{
+  border-radius: 7px;
+  width: 810px;
+  height: 610px;
+  border: 15px solid Black ;
+  padding: 5px;
+  margin: 20px;
+  float: right;
+
+}
+#AddImageBox{
+  border-radius: 7px;
+  width: 810px;
+  height: 610px;
+  border: 15px solid Black ;
+  padding: 5px;
+  margin: 20px;
+  float: Left;
+
+}
+
+#DescriptionBox{
+  border-radius: 7px;
+  width: 640px;
+  height: 490px;
+  border: 15px solid Black ;
+  padding: 5px;
+  margin: 20px;
+  float: left;
+
+}
+
+#AddressBox{
+  border-radius: 7px;
+  width: 640px;
+  height: 630px;
+  border: 15px solid Black ;
+  padding: 5px;
+  margin: 20px;
+  float: Right;
+}
+
+#timesBox{
+  border-radius: 7px;
+  width: 480px;
+  height: 120px;
+  border: 15px solid Black ;
+  padding: 5px;
+  margin: 20px;
+  float: left;
+}
+#WebsiteBox{
+  border-radius: 7px;
+  width: 320px;
+  height: 80px;
+  border: 15px solid Black ;
+  padding: 5px;
+  margin: 20px;
+  float: right;
+}
diff --git a/static/CSS/locations.css b/static/CSS/locations.css
index 93d42136e3814df9aec333e95adacfbf243a23f5..7388f166b927700d63f7b7ed8f2d3b9e4c80cdad 100644
--- a/static/CSS/locations.css
+++ b/static/CSS/locations.css
@@ -1,173 +1,243 @@
-body{
-background-color: white;
-color: black;
+/* #iD and .Class
+
+font, color, text
+padding, background, border, margin
+width, height,
+position, top/right/bottom/left
+overflow, float, display
+
+
+.my-class {
+    width: calc(100% - 20px);
+    height: calc(50% + 10px);
+} */
+
+* {
+  font-family: Helvetica, Verdana, Arial, sans-serif;
 }
 
+body {
+  margin: 0;
+  padding: 0;
 
-.container {
-position: relative;
-padding: 5px;
-width: 50%;
-height: 70%;
-background-color: white;
-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-margin-bottom: 25px;
+  /* Below styling used for footer position. */
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
 }
 
+ul, li {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
 
-.image {
-opacity: 1;
-display: block;
-width: 100%;
-height: 75%;
-transition: .5s ease;
-backface-visibility: hidden;
+a {
+  text-decoration: none;
+}
 
+.Left {
+  margin-right: auto;
 }
 
-.middle {
-transition: .5s ease;
-opacity: 0;
-position: absolute;
-top: 50%;
-left: 50%;
-transform: translate(-50%, -50%);
--ms-transform: translate(-50%, -50%)
+.Center {
+  margin-left: auto;
+  margin-right: auto;
+}
 
+.Right {
+  margin-left: auto;
 }
 
-.container:hover .image {
-opacity: 0.3;
+/* [#1] Page header styling. Uses [#2].
+
+header #pageHeader
+  div #headerDiv
+    a #headerText #headerImg
+  nav #headerNav .navBar
+    ul .Right, ul .Left
+      li a
+
+*/
+
+#headerDiv {
+  text-align: center;
+  background-color: white;
+  padding: 20px 0px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
 }
 
-.container:hover .middle {
-opacity: 1;
+#headerDiv a {
+  font-size: 30px;
+  font-weight: bold;
+  color: black;
 }
 
-.text {
-background-color: black;
-color: white;
-font-size: 16px;
-padding: 16px 32px;
+#headerText {
+  width: 100%;
+  margin-left: -240px;
+}
+
+#headerImg {
+  width: 200px;
+  height: 65px;
+  margin-top: -10px;
+  margin-right: 20px;
+  margin-bottom: -17.5px;
+  margin-left: 20px;
+}
+
+#headerNav {
+  width: 100%;
+  position: absolute;
+}
+
+#headerNav a {
+  font-size: 20px;
+  padding: 7.5px 10px;
+}
+
+/* [#2] Page navigation styling. Used in [#1] and [#4]. */
+
+.navBar {
+  background-color: #282A35;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.navBar ul, .navBar li {
+  display: flex;
+  align-items: center;
+}
+
+.navBar a {
+  color: white;
+}
+
+.navBar a:hover {
+  background-color: #0B0C0F;
+}
+
+/* [#3] Page main styling.
+
+main #pageMain
+  form #recordForm
+    label
+    input .formTextInput
+    button #addButton
+
+ */
+
+#pageMain {
+  /* Below styling used for footer position. */
+  flex: 1;
+}
+
+#recordForm {
+  margin-left: 5px;
+}
+
+#recordForm .formTextInput {
+  margin-top: 5px;
+  width: 50%;
 }
 
+/* [#4] Page footer styling. Uses [#2].
+
+footer #pageFooter
+  nav #footerNav .navBar
+    ul .Center
+      li a
 
+*/
 
+#footerNav a {
+  font-size: 15px;
+  padding: 5px 10px;
+}
 div.contain {
 text-align: center;
 }
 
 ul.list {
 display: inline-block;
-text-align: center;
 list-style-type: none;
-margin-left: 350px;
+margin: 0;
 }
-
-h1 {
-color: white;
-background-color: black;
-font-weight: 600;
-font-family: 'Monospace', Lucida-Console;
-position: relative;
-font-size: 36px;
+.container {
 display: flex;
-margin-right: 650px;
-margin: 1em 0 1em 0;
-line-height: 110px;
-padding: 15px 15px 15px 3%;
-border-radius: 10px 10px 10px 10px;
+position: relative;
+padding: 5px 660px 5px 5px;
+width: 40%;
+height: 50%;
+background-color: white;
+box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+margin-bottom: 25px;
+border-radius: 10px;
+margin-left: 20px;
 
 }
 
-.logo{
-width: 8%;
-height: 8%
-border: 0;
-float: left;
-display: flex;
-margin: 10px 10px;
-
-}
-
-  button{
-    width: 40px;
-    height: 30px;
-    background-color: black;
-    border: none;
-    outline: none;
-    border-radius: 4px;
-    padding: 4px;
-    position: fixed;
-    top: 65px;
-    right: 20px;
-    cursor: pointer;
-    transition: 0.4s ease-in-out;
-  }
-
-  button.active{
-      transform: translateX(-210px);
-  }
-
-  button span {
-    display: block;
-    width: 100%;
-    height: 4px;
-    background-color: white;
 
-  }
+.image {
+opacity: 1;
+display: block;
+transition: .5s ease;
+backface-visibility: hidden;
+border-radius: 10px 10px 10px 10px;
+    float: left;
+    width:  300px;
+    height: 250px;
+    object-fit: cover;
+}
 
-  button span:nth-child(2) {
-    margin: 5px 0;
+h2 {
+position: absolute;
+margin-left: 320px;
+margin-top: 30px;
   }
 
-  nav{
-    background-color: black;
-    padding: 15px;
-    height: 100vh;
-    position: fixed;
-    top: 0;
-    right: 0;
-    width: 200px;
-    transform: translateX(100%);
-    margin-top: 0.5em;
-    border-radius: 10px;
-    transition: 0.4s ease-in-out;
-  }
-  nav.active {
-    transform: translateX(0);
-  }
+p{
+  margin-top: 80px;
+  margin-left: 50px;
+}
 
-  nav ul{
-    list-style: none;
-    margin: 0;
-    padding:0;
-    width: 60px;
-  }
-  nav ul li{
-    padding: 10px 0;
-  }
-  nav ul li a{
-    color: white;
-    text-decoration: none;
-    display: block;
-  }
-  nav ul li a:hover {
-    color: white;
- JScript/locations.js  0 → 100644
-+
-10
--
-0
+.checked{
+  color: orange;
+}
 
-Viewed
-let btn = document.querySelector("button");
-let nav = document.querySelector("nav");
+.star{
+  position: absolute;
+    top: 50%;
+    left: 40%;
+    transform: translate(-50%, -50%);
+  margin-top: 80px;
+}
+.middle {
+transition: .5s ease;
+opacity: 0;
+position: absolute;
+top: 45%;
+left: 10.5%;
+transform: translate(-25%, -25%);
+-ms-transform: translate(-25%, -25%)
 
+}
 
-btn.addEventListener("click", function() {
+.container:hover .image {
+opacity: 0.3;
+}
 
-   nav.classList.toggle("active");
-   btn.classList.toggle("active");
+.container:hover .middle {
+opacity: 1;
+}
 
- } );
+.text {
+background-color: black;
+color: white;
+font-size: 16px;
+padding: 16px 32px;
+}
diff --git a/static/JS/Manage_Coworking_Spaces.js b/static/JS/Manage_Coworking_Spaces.js
index c20755b76708e03d8d46a91898f0b26f2b98ca6a..ebac1e721d853af43a970f73132718aa8a4a3735 100644
--- a/static/JS/Manage_Coworking_Spaces.js
+++ b/static/JS/Manage_Coworking_Spaces.js
@@ -2,7 +2,7 @@
 function onSubmitLoad() {
   document.getElementById('searchButton').addEventListener('click',searchRecord);
   document.getElementById('addButton').addEventListener('click',addRecord);
-  document.getElementById('editButton').addEventListener('click',editRecord);
+  document.getElementById('updateButton').addEventListener('click',updateRecord);
   document.getElementById('deleteButton').addEventListener('click',deleteRecord);
 }
 
@@ -52,6 +52,17 @@ function searchRecord(e) {
   xhttp.onreadystatechange = function() {
     if (xhttp.readyState === 4 && xhttp.status === 200) {
       console.log(xhttp.responseText);
+      serverResponse = JSON.parse(xhttp.responseText);
+      document.getElementById("recordName").value = serverResponse[0][0];
+      document.getElementById("recordAddress").value = serverResponse[0][1];
+      document.getElementById("recordMainPhotos").value = serverResponse[0][2];
+      document.getElementById("recordAdditionalPhotos").value = serverResponse[0][3];
+      document.getElementById("recordDescription").value = serverResponse[0][4];
+      document.getElementById("recordWebsite").value = serverResponse[0][5];
+      document.getElementById("recordEmail").value = serverResponse[0][6];
+      document.getElementById("recordPhoneNumber").value = serverResponse[0][7];
+      document.getElementById("recordOpeningHours").value = serverResponse[0][8];
+      document.getElementById("recordCheckinInstructions").value = serverResponse[0][9];
       document.getElementById("DEBUGserverMessage").innerHTML = xhttp.responseText;
     } else {
       console.error(`Status Text: ${xhttp.statusText}.`);
@@ -61,7 +72,6 @@ function searchRecord(e) {
   xhttp.send(params);
 }
 
-
 // Adds a record to the database.
 function addRecord(e) {
   // Removes the standard form processing.
@@ -99,7 +109,7 @@ function addRecord(e) {
 }
 
 // Edits a record in the database.
-function editRecord(e) {
+function updateRecord(e) {
   // Removes the standard form processing.
   e.preventDefault();
   e.stopPropagation();
@@ -120,7 +130,7 @@ function editRecord(e) {
   var params = 'recordName='+recordName+'&recordAddress='+recordAddress+'&recordMainPhotos='+recordMainPhotos+'&recordAdditionalPhotos='+recordAdditionalPhotos+'&recordDescription='+recordDescription+'&recordWebsite='+recordWebsite+'&recordEmail='+recordEmail+'&recordPhoneNumber='+recordPhoneNumber+'&recordOpeningHours='+recordOpeningHours+'&recordCheckinInstructions='+recordCheckinInstructions;
 
   var xhttp = new XMLHttpRequest();
-  xhttp.open("POST", '/EditRecord', true);
+  xhttp.open("POST", '/UpdateRecord', true);
   xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   xhttp.onreadystatechange = function() {
     if (xhttp.readyState === 4 && xhttp.status === 200) {
diff --git a/static/JS/spaces.js b/static/JS/spaces.js
new file mode 100644
index 0000000000000000000000000000000000000000..9e28dc1d63e067f863308752506a903ad563c2bd
--- /dev/null
+++ b/static/JS/spaces.js
@@ -0,0 +1,67 @@
+function loadSpaceInfo() {
+  var xhttp = new XMLHttpRequest();
+  xhttp.open('/Load/CodeBase', true);
+  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+  xhttp.onreadystatechange = getAddress() {
+    if (this.readyState == 4 && this.status == 200) {
+
+       document.getElementById("AddressText").innerHTML = xhttp.responseText;
+       console.log(xhttp.responseText);
+    }
+
+
+  xhttp.onreadystatechange = getMain_Photo() {
+    if (this.readyState == 4 && this.status == 200) {
+
+        document.getElementById("Main_PhotoText").innerHTML = xhttp.responseText;
+        console.log(xhttp.responseText);
+    }
+
+
+  xhttp.onreadystatechange = getAdditional_photos() {
+    if (this.readyState == 4 && this.status == 200) {
+
+        document.getElementById("Additional_photosText").innerHTML = xhttp.responseText;
+        console.log(xhttp.responseText);
+    }
+
+
+  xhttp.onreadystatechange = getWebsite() {
+    if (this.readyState == 4 && this.status == 200) {
+
+        document.getElementById("WebsiteText").innerHTML = xhttp.responseText;
+        console.log(xhttp.responseText);
+    }
+
+
+  xhttp.onreadystatechange = getDescription() {
+    if (this.readyState == 4 && this.status == 200) {
+
+        document.getElementById("DescriptionText").innerHTML = xhttp.responseText;
+        console.log(xhttp.responseText);
+    }
+
+
+  xhttp.onreadystatechange = getOpening_Hours() {
+      if (this.readyState == 4 && this.status == 200) {
+
+        document.getElementById("Opening_HoursText").innerHTML = xhttp.responseText;
+        console.log(xhttp.responseText);
+    }
+
+
+
+  xhttp.onreadystatechange = function() {
+    if (xhttp.readyState === 4 && xhttp.status === 200) {
+      console.log(xhttp.responseText);
+      // Below is the message to output onto the workspace page,
+
+      document.getElementById("loadText").innerHTML = xhttp.responseText;
+      console.log(xhttp.responseText);
+    } else {
+//      console.error(`Status Text: ${xhttp.statusText}.`);
+//      console.error(`Ready State: ${xhttp.readyState}.`);
+    }
+  };
+  xhttp.send();
+}
diff --git a/static/Manage_Coworking_Spaces.html b/static/Manage_Coworking_Spaces.html
deleted file mode 100644
index 26908ef8108f7b8ae8876a4f7d7e9018dadee7bc..0000000000000000000000000000000000000000
--- a/static/Manage_Coworking_Spaces.html
+++ /dev/null
@@ -1,94 +0,0 @@
-<!DOCTYPE html>
-<html lang="EN" dir="ltr">
-  <head>
-    <meta charSet="UTF-8">
-    <title> Manage Coworking Spaces </title>
-    <link rel="stylesheet" href="CSS/Manage_Coworking_Spaces.css">
-
-  </head>
-  <body onLoad="pageLoad()">
-
-    <header id="pageHeader" class="pageHeader">
-      <div id="headerDiv">
-        <a href="Manage_Coworking_Spaces.html">
-          <img id="headerImg" class="headerImg"
-          src="Media/Tramshed-Logo-Main-Black.png"></img></a>
-        <a id="headerText" class="headerText"
-        href="Manage_Coworking_Spaces.html">
-          Manage Coworking Spaces</a>
-      </div>
-      <nav id="headerNav" class="navBar">
-        <ul class="Left">
-          <li><a href="Manage_Coworking_Spaces.html">
-            <img id="navImg" class="navImg"
-            src="Media/Tramshed-Logo-Main-White.png"></img></a></li>
-          <li><a href="Manage_Coworking_Spaces.html">Home</a></li>
-          <li><a href="Manage_Coworking_Spaces.html">Locations</a></li>
-        </ul>
-        <ul class="Right">
-          <li><a href="Manage_Coworking_Spaces.html">Manage</a></li>
-          <li><a href="Manage_Coworking_Spaces.html">Login</a></li>
-          <li><div class="navHamburger">
-              <span></span>
-              <span></span>
-              <span></span>
-          </div></li>
-        </ul>
-      </nav>
-    </header>
-
-    <main id="pageMain">
-      <form id="recordForm" title="Record Form">
-        <label>Name: <input id="recordName" class="formTextInput"
-          name="record_name" type="text"></label><br>
-        <label>Address: <input id="recordAddress" class="formTextInput"
-          name="record_address" type="text"></label><br>
-        <label>Main Photograph: <input id="recordMainPhotos" class="formTextInput"
-          name="record_MP" type="text"></label><br>
-        <label>Additional Photographs: <input id="recordAdditionalPhotos" class="formTextInput"
-          name="record_AP" type="text"></label><br>
-        <label>Description: <input id="recordDescription" class="formTextInput"
-          name="record_description" type="text"></label><br>
-        <label>Website: <input id="recordWebsite" class="formTextInput"
-          name="record_website" type="text"></label><br>
-          <label>Email: <input id="recordEmail" class="formTextInput"
-          name="record_email" type="text"></label><br>
-        <label>Phone Number: <input id="recordPhoneNumber" class="formTextInput"
-          name="record_PN" type="text"></label><br>
-        <label>Opening Hours: <input id="recordOpeningHours" class="formTextInput"
-          name="record_OH" type="text"></label><br>
-        <label>Checkin Instructions: <input id="recordCheckinInstructions" class="formTextInput"
-          name="record_CI" type="text"></label>
-
-        <br><br>
-        <button id="searchButton" type="submit">Search</button>
-        <button id="addButton" type="submit">Add</button>
-        <button id="editButton" type="submit">Edit</button>
-        <button id="deleteButton" type="submit">Delete</button>
-      </form>
-      <br>
-      <span id="DEBUGserverMessage"> </span>
-
-      <br><br><br><br><br><br><br><br><br><br><br><br>
-      <br><br><br><br><br><br><br><br><br><br><br><br>
-      <br><br><br><br><br><br><br><br><br><br><br><br>
-      <br><br><br><br><br><br><br><br><br><br><br><br>
-    </main>
-
-    <footer id="pageFooter">
-      <nav id="footerNav" class="navBar">
-        <ul class="Center">
-          <li><a href="Manage_Coworking_Spaces.html">Left</a></li>
-        </ul>
-        <ul class="Center">
-          <li><a href="Manage_Coworking_Spaces.html">Center</a></li>
-        </ul>
-        <ul class="Center">
-          <li><a href="Manage_Coworking_Spaces.html">Right</a></li>
-        </ul>
-      </nav>
-    </footer>
-
-    <script src="JS/Manage_Coworking_Spaces.js"></script>
-  </body>
-</html>
diff --git a/static/landingpage.html b/static/landingpage.html
index cc325be3feb9eb530c86f7f133f36e970c2ef94c..fca729848a41a620680e438f5ae7728876e074c1 100644
--- a/static/landingpage.html
+++ b/static/landingpage.html
@@ -12,7 +12,7 @@
           <a class="nav-link" href="locations.html">Coworking locations</a>
         </li>
        <li class="nav-item">
-          <a class="nav-link" href="Manage_Coworking_Spaces.html">Manage locations</a>
+          <a class="nav-link" href="/Manage_Coworking_Spaces">Manage locations</a>
         </li>
       </ul>
     </div>
diff --git a/static/locations.html b/static/locations.html
deleted file mode 100644
index b2d35675eb5ad782b154eddb1550a1ef5de6cb9f..0000000000000000000000000000000000000000
--- a/static/locations.html
+++ /dev/null
@@ -1,79 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <link rel="stylesheet" href= "CSS/locations.css">
-    <title> Locations </title>
-  </head>
-  <body>
-    <section>
-      <h1><img src="https://www.4piproductions.com/wp-content/uploads/2017/04/tramshed_.png" class="logo"> Our Locations </h1>
-          <button>
-             <span></span>
-             <span></span>
-             <span></span>
-          </button>
-          <nav>
-             <ul>
-               <li><a href="#"> Home </a></li>
-                 <li><a href="#"> ### </a></li>
-                   <li><a href="#"> ### </a></li>
-                </ul>
-          </nav>
-
-        <div class="contain">
-          <ul class= "list">
-        <li>
-      <div class="container">
-          <img src="https://images.squarespace-cdn.com/content/v1/55439320e4b0f92b5d6c4c8b/1646867535415-4JI39H286BUMT26H4FHN/C36A1915.jpg?format=2500w" class="image"  >
-
-          <div class="middle">
-              <div class="text"> Codebase </div>
-            </div>
-          </div>
-        </li>
-
-        <li>
-          <div class="container">
-          <img src="https://wearecatalyst.org/wp-content/uploads/2022/05/Catalyst03.jpg" class="image"  >
-
-          <div class="middle">
-              <div class="text"> Catalyst </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="container">
-          <img src="https://images.squarespace-cdn.com/content/v1/5709040420c647579532dbb4/1594914119071-OWI9G22S295OCMSWL0VL/_K5L1162.jpg?format=2500w" Class="image"  >
-
-          <div class="middle">
-              <div class="text"> C4DI </div>
-            </div>
-          </div>
-        </li>
-
-        <li>
-          <div class="container">
-          <img src="https://dogpatchlabs.wpenginepowered.com/wp-content/uploads/2022/09/ian_browne.jpg" class="image" >
-
-          <div class="middle">
-              <div class="text"> Dogpatch </div>
-            </div>
-          </div>
-        </li>
-
-          <li>
-            <div class="container">
-            <img src="https://stationf.co/img/misc/create-zone.jpg" class="image"  >
-
-            <div class="middle">
-                <div class="text"> Station F </div>
-              </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-
-    </section>
-  <script src="JS/locations.js"> </script>
-
-  </body>
diff --git a/templates/Locations.html b/templates/Locations.html
new file mode 100644
index 0000000000000000000000000000000000000000..9945f324443a2409af0993c7ba25217dddc92256
--- /dev/null
+++ b/templates/Locations.html
@@ -0,0 +1,45 @@
+{%extends "base_template.html"%}
+
+{%block headblock%}
+  <title> Locations </title>
+  <link rel="stylesheet" href="/static/CSS/Locations.css">
+{%endblock%}
+{%block headerblock%}
+    <a id="headerText"
+    href="ListLocations">
+      Locations</a>
+{%endblock%}
+
+{%block mainblock%}
+<br><br>
+{%if data%}
+  {%for x in range(data|length)%}
+
+    <br><br>
+    <div class="contain">
+      <ul class= "list">
+    <li>
+  <div class="container">
+      <img src= "{{data[x][1]}}" class="image"  >
+       <h2> {{data[x][0]}} </h2>
+       <p>hhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
+       <div class= star>
+       <span class="fa fa-star fa-3x checked" ></span>
+  <span class="fa fa-star fa-3x checked"></span>
+  <span class="fa fa-star fa-3x checked"></span>
+  <span class="fa fa-star fa-3x" ></span>
+  <span class="fa fa-star fa-3x" ></span>
+  </div>
+      <div class="middle">
+          <div class="text">{{data[x][0]}}</div>
+      </div>
+  </div>
+    </li>
+  {%endfor%}
+
+{%endif%}
+
+{%endblock%}
+
+{%block jsblock%}
+{%endblock%}
diff --git a/templates/Manage_Coworking_Spaces.html b/templates/Manage_Coworking_Spaces.html
new file mode 100644
index 0000000000000000000000000000000000000000..9c3cd6bc00e9c1e55147c60be93ba83abbf8ab3b
--- /dev/null
+++ b/templates/Manage_Coworking_Spaces.html
@@ -0,0 +1,78 @@
+{%extends "base_template.html"%}
+
+{%block headblock%}
+  <title> Manage Coworking Spaces </title>
+  <link rel="stylesheet" href="/static/CSS/Manage_Coworking_Spaces.css">
+{%endblock%}
+
+{%block headerblock%}
+    <a id="headerText" class="headerText"
+    href="Manage_Coworking_Spaces">
+      Manage Coworking Spaces</a>
+{%endblock%}
+
+{%block mainblock%}
+  <form id="recordForm" title="Record Form">
+    <label for="recordName">Name:</label>
+    <input id="recordName" class="formTextInput"
+      name="record_name" type="text"><br>
+    <label for="recordAddress">Address:</label>
+    <textarea id="recordAddress" class="formTextInput"
+      name="record_address" type="text"></textarea><br>
+    <label for="recordMainPhotos">Main Photograph:</label>
+    <input id="recordMainPhotos" class="formTextInput"
+      name="record_MP" type="text"><br>
+    <label for="recordAdditionalPhotos">Additional Photographs:</label>
+    <input id="recordAdditionalPhotos" class="formTextInput"
+      name="record_AP" type="text"><br>
+    <label for="recordDescription">Description:</label>
+    <textarea id="recordDescription" class="formTextInput"
+      name="record_description" type="text"></textarea><br>
+    <label for="recordWebsite">Website:</label>
+    <input id="recordWebsite" class="smallInput"
+      name="record_website" type="text">
+    <label for="recordEmail" class="smallLabel">Email:</label>
+    <input id="recordEmail" class="smallInput"
+      name="record_email" type="text"><br>
+    <label for="recordPhoneNumber">Phone Number:</label>
+    <input id="recordPhoneNumber" class="smallInput"
+      name="record_PN" type="text">
+    <label for="recordOpeningHours" class="smallLabel">Opening Hours:</label>
+    <input id="recordOpeningHours" class="smallInput"
+      name="record_OH" type="text"><br>
+    <label for="recordCheckinInstructions">Checkin Instructions:</label>
+    <textarea id="recordCheckinInstructions" class="formTextInput"
+      name="record_CI" type="text"></textarea>
+
+    <br><br>
+    <button id="searchButton" type="submit">Search</button>
+    <button id="addButton" type="submit">Add</button>
+    <button id="updateButton" type="submit">Update</button>
+    <button id="deleteButton" type="submit">Delete</button>
+  </form>
+  <br>
+  <span id="DEBUGserverMessage"> </span>
+
+  <br><br><br><br><br><br><br><br><br><br><br><br>
+  <br><br><br><br><br><br><br><br><br><br><br><br>
+  <br><br><br><br><br><br><br><br><br><br><br><br>
+  <br><br><br><br><br><br><br><br><br><br><br><br>
+{%endblock%}
+
+{%block footerblock%}
+  <nav id="footerNav" class="navBar">
+    <ul class="Center">
+      <li><a href="Manage_Coworking_Spaces.html">Left</a></li>
+    </ul>
+    <ul class="Center">
+      <li><a href="Manage_Coworking_Spaces.html">Center</a></li>
+    </ul>
+    <ul class="Center">
+      <li><a href="Manage_Coworking_Spaces.html">Right</a></li>
+    </ul>
+  </nav>
+{%endblock%}
+
+{%block jsblock%}
+  /static/JS/Manage_Coworking_Spaces.js
+{%endblock%}
diff --git a/templates/OurSpaces.html b/templates/OurSpaces.html
new file mode 100644
index 0000000000000000000000000000000000000000..9beece50aa357def580f7bc53f3215b05c658dda
--- /dev/null
+++ b/templates/OurSpaces.html
@@ -0,0 +1,41 @@
+<head>
+<link rel="stylesheet" href="/static/CSS/OurSpaces.css">
+</head>
+
+<body class="body">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
+<header>
+	<h1>{% block titleBlock%}	{%endblock%}</h1>
+</header>
+
+<div id = "ImageBox"class="ImageBox">
+	<img src="{% block imageBlock%}{%endblock%}"width="770" height="570" style="border:3;" class="img-rounded" allowfullscreen="" loading="lazy">
+</div>
+
+<div id= "DescriptionBox" class="DescriptionBox">
+<h2>About us</h2>
+<h3>{% block descriptionBlock%}  {%endblock%}</h3>
+</div>
+
+<div id= "AddImageBox"class="AddImageBox">
+	<img src="{% block addimageBlock%}{%endblock%}"width="770" height="570" style="border:3;" class="img-rounded" allowfullscreen="" loading="lazy">
+</div>
+
+<div id= "AddressBox"class="AddressBox">
+{% block addressBlock%}
+{%endblock%}
+</div>
+
+<div id= "timesBox"class="timesBox">
+	<h2>When are we Open?</h2>
+	<h3>{% block timeBlock%}  {%endblock%}</h3>
+</div>
+
+<div id= "WebsiteBox"class="WebsiteBox">
+	<h2><a href="{% block WebsiteBlock%}{%endblock%}">Get More Info here</a><h2>
+  <h3></h3>
+</div>
+
+</body>
diff --git a/templates/Space.html b/templates/Space.html
new file mode 100644
index 0000000000000000000000000000000000000000..91910c694e59e89fcfe4c2220284bac781e4a8ff
--- /dev/null
+++ b/templates/Space.html
@@ -0,0 +1,62 @@
+{%extends 'OurSpaces.html'%}
+<form id='myForm' action='/Load/CodeBase>' method ='post'>
+  {% block titleBlock%}
+  {%if data%}
+    {{data[0][0]}} <br>
+  {%endif%}
+  {%endblock%}
+
+  {% block addressBlock%}
+  <h2>Address info</h2>
+  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4957.954181608377!2d-2.999839445369478!3d51.58698324808131!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4871e6cc3bd82553%3A0x684c1227f14b4a15!2sNational%20Software%20Academy%20(Cardiff%20University)!5e0!3m2!1sen!2suk!4v1669722978098!5m2!1sen!2suk"
+   width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+   <br>
+  <h3>
+  {%if data%}
+    {{data[0][1]}}
+  {%endif%}
+</h3>
+  {%endblock%}
+
+
+
+  {% block descriptionBlock%}{%if data%}{{data[0][4]}}{%endif%}{%endblock%}
+
+  {% block imageBlock%}{%if data%}{{data[0][2]}}{%endif%}{%endblock%}
+
+  {% block addimageBlock%}{%if data%}{{data[0][3]}}{%endif%}{%endblock%}
+
+  {% block timeBlock%}{%if data%}{{data[0][8]}}{%endif%}{%endblock%}
+
+  {% block WebsiteBlock%}{%if data%}{{data[0][5]}}{%endif%}{%endblock%}
+<span id='txt'></span>
+
+<script>
+  function loadSpace() {
+    var Name = document.forms["coworking_spaces"]["Name"].value;
+    var Address = document.forms["coworking_spaces"]["Address"].value;
+    var Main_Photo = document.forms["coworking_spaces"]["Main_Photo"].value;
+    var Additional_photos = document.forms["coworking_spaces"]["Main_Photo"].value;
+    var Description = document.forms["coworking_spaces"]["Description"].value;
+    var Website = document.forms["coworking_spaces"]["Website"].value;
+    var Opening_Hours = document.forms["coworking_spaces"]["Opening_Hours"].value;
+
+    var xhttp = new XMLHttpRequest();
+
+    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    xhttp.onload = function() {
+      if (xhttp.readyState === 4 && xhttp.status === 200) {
+        console.log(xhttp.responseText);
+        document.getElementById("txt").innerHTML = xhttp.responseText;
+      } else {
+        console.error(xhttp.statusText);
+      }
+    };
+    xhttp.send(params);
+    return false;
+  }
+
+</script>
+
+
+</form>
diff --git a/templates/base_template.html b/templates/base_template.html
index 0b285b1ecc1f90b004c53bc499cf740df1758916..480dbb778dbf0c5c105d27a92186e3846d53a99f 100644
--- a/templates/base_template.html
+++ b/templates/base_template.html
@@ -2,9 +2,8 @@
 <html lang="EN" dir="ltr">
   <head>
     <meta charSet="UTF-8">
-    <title> Manage Coworking Spaces </title>
-    <link rel="stylesheet" href="/static/CSS/Manage_Coworking_Spaces.css">
-
+    {%block headblock%}
+    {%endblock%}
   </head>
   <body onLoad="pageLoad()">
 
@@ -12,22 +11,18 @@
       <div id="headerDiv">
         <a href="Manage_Coworking_Spaces.html">
           <img id="headerImg" class="headerImg"
-          src="Media/Tramshed-Logo-Main-Black.png"></img></a>
-        <a id="headerText" class="headerText"
-        href="Manage_Coworking_Spaces.html">
-          Manage Coworking Spaces</a>
+          src="/static/Media/Tramshed-Logo-Main-Black.png"></img></a>
+        {%block headerblock%}
+        {%endblock%}
       </div>
       <nav id="headerNav" class="navBar">
         <ul class="Left">
-          <li><a href="Manage_Coworking_Spaces.html">
-            <img id="navImg" class="navImg"
-            src="Media/Tramshed-Logo-Main-White.png"></img></a></li>
-          <li><a href="Manage_Coworking_Spaces.html">Home</a></li>
-          <li><a href="Manage_Coworking_Spaces.html">Locations</a></li>
+          <li><a href="/static/landingpage.html">Home</a></li>
+          <li><a href="/static/locations.html">Locations</a></li>
         </ul>
         <ul class="Right">
-          <li><a href="Manage_Coworking_Spaces.html">Manage</a></li>
-          <li><a href="Manage_Coworking_Spaces.html">Login</a></li>
+          <li><a href="Manage_Coworking_Spaces">Manage</a></li>
+          <li><a href="/static/login.html">Login</a></li>
           <li><div class="navHamburger">
               <span></span>
               <span></span>
@@ -38,7 +33,6 @@
     </header>
 
     <main id="pageMain">
-      <br><br>
       {%block mainblock%}
       {%endblock%}
     </main>
@@ -46,17 +40,17 @@
     <footer id="pageFooter">
       <nav id="footerNav" class="navBar">
         <ul class="Center">
-          <li><a href="Manage_Coworking_Spaces.html">Left</a></li>
+          <li><a href="Manage_Coworking_Spaces">Left</a></li>
         </ul>
         <ul class="Center">
-          <li><a href="Manage_Coworking_Spaces.html">Center</a></li>
+          <li><a href="Manage_Coworking_Spaces">Center</a></li>
         </ul>
         <ul class="Center">
-          <li><a href="Manage_Coworking_Spaces.html">Right</a></li>
+          <li><a href="Manage_Coworking_Spaces">Right</a></li>
         </ul>
       </nav>
     </footer>
 
-    <script src="/static/JS/Manage_Coworking_Spaces.js"></script>
+    <script src="{%block jsblock%}{%endblock%}"></script>
   </body>
 </html>
diff --git a/templates/test.html b/templates/test.html
deleted file mode 100644
index 1a4bf463bb740559d292fedbe9529176cd2c941e..0000000000000000000000000000000000000000
--- a/templates/test.html
+++ /dev/null
@@ -1,4 +0,0 @@
-{%extends "base_template.html"%}
-{%block mainblock%}
-  test
-{%endblock%}