diff --git a/app/models/listing_images.py b/app/models/listing_images.py
index fc505e2cb6a2ddac40a307853ae26a9da9fa0a15..5429614e112aacc9b631440cd2fe141531bfc11c 100644
--- a/app/models/listing_images.py
+++ b/app/models/listing_images.py
@@ -9,6 +9,8 @@ class ListingImages(db.Model):
     image_location = db.Column(db.String(255), nullable=False)
     image_description = db.Column(db.String(255), nullable=True)
     main_image = db.Column(db.SmallInteger(), nullable=False)
+    listings_id = mapped_column(ForeignKey("listings.id"))
+    listings = relationship("Listings", back_populates="listing_images")
 
     @classmethod
     def get_selected_main_images(cls, listing_ids):
diff --git a/app/models/listings.py b/app/models/listings.py
index 3a51845608f4c391273f3f7690a665a2c1899756..a04b2fb92d0c9ad026b929c6ec485dd750384c06 100644
--- a/app/models/listings.py
+++ b/app/models/listings.py
@@ -13,6 +13,7 @@ class Listings(db.Model):
     transport_type = db.Column(db.String(255), nullable=False)
     business_tickets = db.Column(db.Integer(), nullable=False)
     economy_tickets = db.Column(db.Integer(), nullable=False)
+    listing_images = relationship("ListingImages", back_populates="listing_images")
 
     @classmethod
     def get_all_listings(cls):
diff --git a/app/static/base.css b/app/static/base.css
index 717de312bc4e927b00ea074e8ffba79e05f72650..fa23b772afbe97ae1ea88983c8b6f1d1bc074cbc 100644
--- a/app/static/base.css
+++ b/app/static/base.css
@@ -13,18 +13,26 @@ html, body {
     color: #FBE9D0;
     margin-top: 40px;
     padding: 20px 0;
-    
+    align-items: center;
 }
-.footer_column {
-    float: left;
-    width: 33.33%;
-    justify-content: center;
+
+.footer_row {
+    display: flex;
+    justify-content: space-evenly; 
+    width: 100%;
 }
 
-.footer .copyright {
-    padding-top: 30px;
+.footer > .footer_column {
+    flex-grow: 1;
+    padding: 1%;
+    text-align: center;
 }
 
+.copyright {
+    margin-top: 20px;
+    width: 100%;
+    text-align: center;
+}
 
 /* MAIN CONTENT CSS */
 .main_content {
diff --git a/app/static/bootstrap_overrides.css b/app/static/bootstrap_overrides.css
index 81096e64d3c4ecc58565ad6e9096f29e05c3ff52..ae682c84848a20250b40d2f1bca3a290742c5f52 100644
--- a/app/static/bootstrap_overrides.css
+++ b/app/static/bootstrap_overrides.css
@@ -1,7 +1,11 @@
-.custom-dark-blue-text a {
-  color: #244855 !important;
+.nav_background {
+  background-color: #244855;
 }
 
-.custom-light-blue-background {
-  background-color: #90AEAD !important;
+.navbar-dark {
+  color: #FBE9D0;
+}
+
+.dropdown-menu {
+  background-color: #90AEAD;
 }
\ No newline at end of file
diff --git a/app/static/navigation.js b/app/static/navigation.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/app/templates/base.html b/app/templates/base.html
index 983c0b203890328a3c0c36361b55eb17f38a3d21..c405dd2279ffbd7901eca1b55d54968f71f7d0f2 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -3,7 +3,8 @@
 <html>
     <head>
         <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='base.css')}}">
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
         <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap_overrides.css')}}">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Horizon Travels</title>
@@ -12,31 +13,31 @@
         <div class="main_content">
             <div class="wrapper">
                 {% block navigation %}
-                <!-- Nav bar taken from https://www.w3schools.com/bootstrap/bootstrap_navbar.asp and modified -->
+                <!-- Nav bar taken from https://htmljstemplates.com/html/bootstrap-5-navbars and modified -->
                 <div class="navigation">
-                    <nav class="navbar navbar-expand-lg custom-dark-blue-text custom-light-blue-background">
+                    <nav class="navbar navbar-expand-lg navbar-dark nav_background p-3">
                         <div class="container-fluid">
-                            <a class="navbar-brand" href="#">Navbar</a>
-                            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                            <a class="navbar-brand" href="#">Horizon Travels</a>
+                            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                             <span class="navbar-toggler-icon"></span>
                             </button>
-                            <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                        
+                            <div class=" collapse navbar-collapse" id="navbarNavDropdown">
+                            <ul class="navbar-nav ms-auto ">
                                 <li class="nav-item">
-                                <a class="nav-link active" aria-current="page" href="#">Home</a>
+                                <a class="nav-link mx-2 active" aria-current="page" href="#">Home</a>
                                 </li>
                                 <li class="nav-item">
-                                <a class="nav-link" href="#">Link</a>
+                                <a class="nav-link mx-2" href="{{ url_for('bookings.index') }}">Find a booking</a>
                                 </li>
                                 <li class="nav-item dropdown">
-                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                    Dropdown
+                                <a class="nav-link mx-2 dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                    Account
                                 </a>
-                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-                                    <li><a class="dropdown-item" href="#">Action</a></li>
-                                    <li><a class="dropdown-item" href="#">Another action</a></li>
-                                    <li><hr class="dropdown-divider"></li>
-                                    <li><a class="dropdown-item" href="#">Something else here</a></li>
+                                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+                                    <li><a class="dropdown-item" href="#">Account Details</a></li>
+                                    <li><a class="dropdown-item" href="#">My Bookings</a></li>
+                                    <li><a class="dropdown-item" href="#">Log Out</a></li>
                                 </ul>
                                 </li>
                             </ul>
@@ -53,16 +54,21 @@
             {% block footer %}
             <footer>
                 <div class="footer">
-                    <div class="row">
+                    <div class="footer_row">
                         <div class="footer_column">
-                            <div><a >About Us</div>
                             <div>About Us</div>
+                            <div>Contact Us</div>
                         </div>
-                        <div class="footer_column">Contact</div>
-                        <div class="footer_column">Login</div>
+                        <div class="footer_column">
+                            <a>About Us</a>
+                            <a>Contact Us</a>
+                        </div>
+                        <div class="footer_column"><a>Login</a></div>
                     </div>
-                    <div class="copyright">
-                        <p>&copy; 2024-2025 Horizon Travels</p>
+                    <div class="footer_row">
+                        <div class="copyright">
+                            <p>&copy; 2024-2025 Horizon Travels</p>
+                        </div>
                     </div>
                 </div>
             </footer>
diff --git a/compose.yaml b/compose.yaml
index 077859bc44e4b62d0dfc0e373e0a83e3d276dc2b..781e71f26cc68bb660860bb64ea2345221573e55 100644
--- a/compose.yaml
+++ b/compose.yaml
@@ -13,20 +13,21 @@ services:
     networks:
       - network
     environment:
-      DB_HOST: database
-      DB_USER: user
-      DB_PASSWORD: userpassword
-      DB_NAME: mydatabase
-
+      DEVELOPMENT_MODE: ${DEVELOPMENT_MODE}
+      DATABASE_HOST: ${DATABASE_HOST}
+      DATABASE_USER: ${DATABASE_USER}
+      DATABASE_PASSWORD: ${DATABASE_PASSWORD}
+      DATABASE_NAME: ${DATABASE_NAME}
   database:
     image: mysql:8.3
     ports:
       - '3306:3306'
     environment:
-      MYSQL_ROOT_PASSWORD: rootpassword
-      MYSQL_DATABASE: mydatabase
-      MYSQL_USER: user
-      MYSQL_PASSWORD: userpassword
+      MYSQL_ROOT_PASSWORD: ${DATABASE_PASSWORD}
+      MYSQL_DATABASE: ${DATABASE_NAME}
+      MYSQL_USER: ${DATABASE_USER}
+      MYSQL_PASSWORD: ${DATABASE_PASSWORD}
+      
     volumes:
       - mysql_data:/var/lib/mysql
     networks: