diff --git a/.idea/SARBase.iml b/.idea/SARBase.iml
index 02d2170..1a680f9 100644
--- a/.idea/SARBase.iml
+++ b/.idea/SARBase.iml
@@ -10,6 +10,9 @@
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
+  <component name="PackageRequirementsSettings">
+    <option name="modifyBaseFiles" value="true" />
+  </component>
   <component name="TemplatesService">
     <option name="TEMPLATE_CONFIGURATION" value="Jinja2" />
     <option name="TEMPLATE_FOLDERS">
diff --git a/admin.py b/admin.py
index c2632d8..02442d0 100644
--- a/admin.py
+++ b/admin.py
@@ -1,9 +1,10 @@
 from flask_admin import Admin
 from flask_admin.contrib.sqla import ModelView
 from app import app, db
-from  models import User, SARCall, SARCategory
+from models import User, SARCall, SARCategory, GPSTrack
 
 admin = Admin(app, name='SAR Admin', template_mode='bootstrap3')
 admin.add_view(ModelView(User, db.session))
 admin.add_view(ModelView(SARCall, db.session))
 admin.add_view(ModelView(SARCategory, db.session))
+admin.add_view(ModelView(GPSTrack, db.session))
diff --git a/app.py b/app.py
index 1a0e936..d25c2d9 100644
--- a/app.py
+++ b/app.py
@@ -1,14 +1,13 @@
-from flask import Flask
+from flask import Flask, redirect, url_for
 from flask_sqlalchemy import SQLAlchemy
 from flask_migrate import Migrate
 from flask_login import LoginManager
 
-
 app = Flask(__name__)
 app.config['SECRET_KEY'] = 'secret_key'
 app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///db.sqlite3'
 db = SQLAlchemy(app)
-migrate = Migrate(app,db)
+migrate = Migrate(app, db)
 login_manager = LoginManager(app)
 
 import models
@@ -17,9 +16,10 @@ import login
 import sar_calls
 import dashboard
 
+
 @app.route('/')
 def hello_world():  # put application's code here
-    return 'Hello World!'
+    return  redirect(url_for('dashboard'))
 
 
 if __name__ == '__main__':
diff --git a/create_db.py b/create_db.py
index a41d77c..ce675d5 100644
--- a/create_db.py
+++ b/create_db.py
@@ -5,7 +5,7 @@ app = Flask(__name__)
 app.config['SECRET_KEY'] = 'secret_key'
 app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///db.sqlite3'
 db = SQLAlchemy(app)
-from  models import User, SARCall, SARCategory
+from models import User, SARCall, SARCategory
 
 if __name__ == '__main__':
     db.create_all()
diff --git a/dashboard.py b/dashboard.py
index eaaf0af..789d0b0 100644
--- a/dashboard.py
+++ b/dashboard.py
@@ -1,8 +1,9 @@
 from app import app
 from flask import render_template
 from flask_login import login_required, current_user
+
+
 @app.route('/dashboard')
 @login_required
 def dashboard():
     return render_template('dashboard.html', name=current_user.full_name)
-
diff --git a/login.py b/login.py
index 33163ab..3c04f9e 100644
--- a/login.py
+++ b/login.py
@@ -2,10 +2,13 @@ from flask import Flask, render_template, redirect, url_for, request, flash
 from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user, current_user
 from app import app, db, login_manager
 from models import User
+
+
 @login_manager.user_loader
 def load_user(user_id):
     return User.query.get(int(user_id))
 
+
 @app.route('/login', methods=['GET', 'POST'])
 def login():
     if request.method == 'POST':
@@ -17,6 +20,7 @@ def login():
             return redirect(url_for('dashboard'))
     return render_template('login.html')
 
+
 @app.route('/register', methods=['GET', 'POST'])
 def register():
     if request.method == 'POST':
@@ -26,12 +30,14 @@ def register():
         full_name = request.form.get('full_name')
         phone_number = request.form.get('phone_number')
 
-        new_user = User(username=username, password=password, email=email, full_name=full_name, phone_number=phone_number)
+        new_user = User(username=username, password=password, email=email, full_name=full_name,
+                        phone_number=phone_number)
         db.session.add(new_user)
         db.session.commit()
         return redirect(url_for('login'))
     return render_template('register.html')
 
+
 @app.route('/logout')
 @login_required
 def logout():
diff --git a/models.py b/models.py
index 961adf3..823f842 100644
--- a/models.py
+++ b/models.py
@@ -1,6 +1,7 @@
 from flask_login import UserMixin
 from app import db
 
+
 class User(UserMixin, db.Model):
     id = db.Column(db.Integer, primary_key=True)
     username = db.Column(db.String(150), unique=True, nullable=False)
@@ -23,4 +24,12 @@ class SARCall(db.Model):
 
 class SARCategory(db.Model):
     id = db.Column(db.Integer, primary_key=True)
-    name = db.Column(db.String(150), unique=True, nullable=False)
\ No newline at end of file
+    name = db.Column(db.String(150), unique=True, nullable=False)
+
+
+class GPSTrack(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    data = db.Column(db.Text, nullable=False)
+    color = db.Column(db.String(7))  # Stores the color as a HEX code like #FF5733
+    sar_call_id = db.Column(db.Integer, db.ForeignKey('sar_call.id'), nullable=False)
+    sar_call = db.relationship('SARCall', backref=db.backref('gps_tracks', lazy=True))
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..7a926c7
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,9 @@
+alembic==1.12.1
+Flask==3.0.0
+Flask_Admin==1.6.1
+Flask_Login==0.6.2
+Flask_Migrate==4.0.5
+flask_sqlalchemy==3.1.1
+python_dateutil==2.8.2
+SQLAlchemy==2.0.22
+Werkzeug==2.3.7
diff --git a/sar_calls.py b/sar_calls.py
index 104d08a..03df702 100644
--- a/sar_calls.py
+++ b/sar_calls.py
@@ -2,7 +2,9 @@ from app import app, db
 from flask import request, redirect, flash, render_template, url_for
 from flask_login import login_required, current_user
 from dateutil import parser
-from models import SARCall
+from models import SARCall, GPSTrack
+
+
 @app.route('/create_sar', methods=['GET', 'POST'])
 @login_required
 def create_sar():
@@ -12,7 +14,12 @@ def create_sar():
         category = request.form.get('category')
         latitude = request.form.get('latitude')
         longitude = request.form.get('longitude')
-        gpx_data = request.form.get('gpx_data')
+        gpx_data_list = request.form.getlist('gpx_data[]')
+        gpx_color_list = request.form.getlist('gpx_color[]')
+
+        for data, color in zip(gpx_data_list, gpx_color_list):
+            track = GPSTrack(data=data, color=color, sar_call=new_sar_call)
+            db.session.add(track)
 
         new_sar_call = SARCall(
             start_date=start_date,
@@ -21,7 +28,8 @@ def create_sar():
             latitude=latitude,
             longitude=longitude,
             search_manager_id=current_user.id,
-            gpx_data=gpx_data
+            gpx_data=gpx_data_list,
+            gpx_color_list=gpx_color_list,
         )
         db.session.add(new_sar_call)
         db.session.commit()
@@ -53,6 +61,7 @@ def edit_sar(id):
         return redirect(url_for('list_sar'))
     return render_template('edit_sar.html', sar_call=sar_call)
 
+
 @app.route('/delete_sar/<int:id>')
 @login_required
 def delete_sar(id):
@@ -61,4 +70,3 @@ def delete_sar(id):
     db.session.commit()
     flash('SAR call deleted successfully!', 'success')
     return redirect(url_for('list_sar'))
-
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..f05d6b7
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- ... meta tags, styles, etc. ... -->
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <title>{% block title %}Default Title{% endblock %}</title>
+</head>
+<body>
+
+<!-- Navbar/Header -->
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <a class="navbar-brand" href="#">SAR App</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
+            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav mr-auto">
+            <!-- Nav items go here -->
+            <li class="nav-item">
+                <a class="nav-link" href="/list_sar">SAR records</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="/create_sar">New record</a>
+            </li>
+        </ul>
+
+        <!-- Display user info and logout link if user is authenticated -->
+        <ul class="navbar-nav ml-auto">
+            {% if current_user.is_authenticated %}
+                <li class="nav-item">
+                    <a class="nav-link" href="#">Logged in as: {{ current_user.username }}</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for('logout') }}">Logout</a>
+                </li>
+            {% else %}
+                <!-- Display login link if user is not authenticated -->
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for('login') }}">Login</a>
+                </li>
+            {% endif %}
+        </ul>
+    </div>
+</nav>
+
+
+<!-- Main Content -->
+<div class="container">
+
+    {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+            {% for category, message in messages %}
+                <div class="alert alert-{{ category }}">{{ message }}</div>
+            {% endfor %}
+        {% endif %}
+    {% endwith %}
+
+    {% block content %}
+        <!-- Default content can be placed here. It will be overridden by child templates. -->
+    {% endblock %}
+</div>
+
+<!-- Footer -->
+<footer>
+    <!-- ... footer content ... -->
+</footer>
+
+<!-- Scripts -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+</body>
+</html>
diff --git a/templates/create_sar.html b/templates/create_sar.html
index f8988c0..4c4a7e8 100644
--- a/templates/create_sar.html
+++ b/templates/create_sar.html
@@ -1,39 +1,60 @@
-<!DOCTYPE html>
-<html>
-<head>
+{% extends "base.html" %}
+
+{% block title %}
+    Create SAR Record
+{% endblock %}
+
+{% block content %}
+
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
     <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
-    <title>Create SAR Call</title>
-</head>
-<body>
-<h2>Create SAR Call</h2>
-<form action="/create_sar" method="post">
-    <div>
-        <label for="start_date">Start Date:</label>
-        <input type="date" name="start_date" required>
-    </div>
-    <div>
-        <label for="finish_date">Finish Date:</label>
-        <input type="date" name="finish_date" required>
-    </div>
-    <div>
-        <label for="category">Category:</label>
-        <input type="text" name="category" required>
-    </div>
-    <div>
-        <label for="latitude">Latitude:</label>
-        <input type="text" name="latitude" required>
-    </div>
-    <div>
-        <label for="longitude">Longitude:</label>
-        <input type="text" name="longitude" required>
-    </div>
-    <div>
-        <label for="gpx_data">GPX Data:</label>
-        <textarea name="gpx_data"></textarea>
-    </div>
-    <div>
-        <input type="submit" value="Create">
+
+    <div class="container mt-5">
+        <h2>Create SAR Call</h2>
+        <form action="{{ url_for('create_sar') }}" method="post" enctype="multipart/form-data">
+            <div class="form-group">
+                <label for="start_date">Start Date:</label>
+                <input type="date" name="start_date" class="form-control" required>
+            </div>
+
+            <div class="form-group">
+                <label for="finish_date">Finish Date:</label>
+                <input type="date" name="finish_date" class="form-control" required>
+            </div>
+
+            <div class="form-group">
+                <label for="category">Category:</label>
+                <select name="category" class="form-control">
+                    {% for cat in categories %}
+                        <option value="{{ cat }}">{{ cat }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+
+            <div class="form-group">
+                <label for="coordinates">Geographical Coordinates:</label>
+                <input type="text" name="coordinates" class="form-control" placeholder="e.g. 40.7128, -74.0060"
+                       required>
+            </div>
+
+            <div class="form-group">
+                <label for="description">Description:</label>
+                <textarea name="description" class="form-control"></textarea>
+            </div>
+
+            <div class="form-group">
+                <label for="hidden_description">Hidden Description:</label>
+                <textarea name="hidden_description" class="form-control"></textarea>
+            </div>
+
+            <!-- GPX Track Fields (You can expand upon this based on the previous discussions about multiple tracks) -->
+            <div class="form-group">
+                <label for="gpx_file">Upload GPX Track:</label>
+                <input type="file" name="gpx_file">
+            </div>
+
+            <button type="submit" class="btn btn-primary">Create</button>
+        </form>
     </div>
     <div id="map" style="width: 600px; height: 400px;"></div>
     <script>
@@ -54,6 +75,15 @@
             document.querySelector('input[name="longitude"]').value = e.latlng.lng;
         });
 
+        {#var gpxTracks = {{ gpx_data | tojson }};#}
+        {#gpxTracks.forEach(function (track) {#}
+        {#    var gpxLayer = new L.GPX(track.data, {async: true, polyline_options: {color: track.color}});#}
+        {#    gpxLayer.on('loaded', function (e) {#}
+        {#        map.fitBounds(e.target.getBounds());#}
+        {#    });#}
+        {#    map.addLayer(gpxLayer);#}
+        {#});#}
+
         // If editing, set the marker to the existing coordinates
         var latInput = document.querySelector('input[name="latitude"]');
         var lngInput = document.querySelector('input[name="longitude"]');
@@ -62,9 +92,26 @@
         }
     </script>
 
-</form>
+    <script>
+        function addTrack() {
+            let trackDiv = document.createElement('div');
+            trackDiv.className = 'gpx_track';
+            trackDiv.innerHTML = `
+            <label>GPX Data:</label>
+            <textarea name="gpx_data[]"></textarea>
+            <label>Color:</label>
+            <input type="color" name="gpx_color[]" value="#ff0000">
+            <button type="button" onclick="removeTrack(this)">Remove</button>
+        `;
+            document.getElementById('gpx_tracks').appendChild(trackDiv);
+        }
+
+        function removeTrack(button) {
+            let trackDiv = button.parentElement;
+            trackDiv.remove();
+        }
+    </script>
 
 
-<a href="/dashboard">Back to Dashboard</a>
-</body>
-</html>
+
+{% endblock %}
\ No newline at end of file
diff --git a/templates/dashboard.html b/templates/dashboard.html
index a05b410..d08ff48 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -1,11 +1,12 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Dashboard</title>
-</head>
-<body>
+{% extends "base.html" %}
+
+{% block title %}
+    Dashboard
+{% endblock %}
+
+{% block content %}
+
     <h2>Welcome, {{ name }}!</h2>
     <p>This is the dashboard. More features will be added soon!</p>
-    <a href="/logout">Logout</a>
-</body>
-</html>
+
+{% endblock %}
diff --git a/templates/edit_sar.html b/templates/edit_sar.html
index 9b03c48..605f86d 100644
--- a/templates/edit_sar.html
+++ b/templates/edit_sar.html
@@ -1,39 +1,88 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
+{% extends "base.html" %}
+
+{% block title %}
+    Edit SAR record
+{% endblock %}
+
+{% block content %}
+
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
     <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
-</head>
-<body>
 
-<div id="map" style="width: 600px; height: 400px;"></div>
-<script>
-    var map = L.map('map').setView([51.505, -0.09], 13); // Default to London, adjust as needed
+    <h2>Edit SAR Call</h2>
+    <div class="container mt-5">
+        <h2>Edit SAR Call</h2>
+        <form action="{{ url_for('edit_sar', id=sar_call.id) }}" method="post" enctype="multipart/form-data">
+            <div class="form-group">
+                <label for="start_date">Start Date:</label>
+                <input type="date" name="start_date" class="form-control" value="{{ sar_call.start_date }}" required>
+            </div>
 
-    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-    }).addTo(map);
+            <div class="form-group">
+                <label for="finish_date">Finish Date:</label>
+                <input type="date" name="finish_date" class="form-control" value="{{ sar_call.finish_date }}" required>
+            </div>
 
-    var marker;
+            <div class="form-group">
+                <label for="category">Category:</label>
+                <select name="category" class="form-control">
+                    {% for cat in categories %}
+                        <option value="{{ cat }}"
+                                {% if cat == sar_call.category %}selected{% endif %}>{{ cat }}</option>
+                    {% endfor %}
+                </select>
+            </div>
 
-    map.on('click', function(e) {
-        if (marker) {
-            map.removeLayer(marker);
-        }
-        marker = L.marker(e.latlng).addTo(map);
-        document.querySelector('input[name="latitude"]').value = e.latlng.lat;
-        document.querySelector('input[name="longitude"]').value = e.latlng.lng;
-    });
+            <div class="form-group">
+                <label for="coordinates">Geographical Coordinates:</label>
+                <input type="text" name="coordinates" class="form-control" value="{{ sar_call.longitude }}" required>
+                <input type="text" name="coordinates" class="form-control" value="{{ sar_call.latitude }}" required>
+            </div>
 
-    // If editing, set the marker to the existing coordinates
-    var latInput = document.querySelector('input[name="latitude"]');
-    var lngInput = document.querySelector('input[name="longitude"]');
-    if (latInput.value && lngInput.value) {
-        marker = L.marker([latInput.value, lngInput.value]).addTo(map);
-    }
-</script>
+            <div class="form-group">
+                <label for="description">Description:</label>
+                <textarea name="description" class="form-control">{{ sar_call.description }}</textarea>
+            </div>
 
-</body>
-</html>
\ No newline at end of file
+            <div class="form-group">
+                <label for="hidden_description">Hidden Description:</label>
+                <textarea name="hidden_description" class="form-control">{{ sar_call.hidden_description }}</textarea>
+            </div>
+
+            <!-- GPX Track Fields (You can expand upon this based on the previous discussion about multiple tracks) -->
+            <div class="form-group">
+                <label for="gpx_file">Upload GPX Track:</label>
+                <input type="file" name="gpx_file">
+            </div>
+
+            <button type="submit" class="btn btn-primary">Update</button>
+        </form>
+        <div id="map" style="width: 600px; height: 400px;"></div>
+        <script>
+            var map = L.map('map').setView([51.505, -0.09], 13); // Default to London, adjust as needed
+
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            }).addTo(map);
+
+            var marker;
+
+            map.on('click', function (e) {
+                if (marker) {
+                    map.removeLayer(marker);
+                }
+                marker = L.marker(e.latlng).addTo(map);
+                document.querySelector('input[name="latitude"]').value = e.latlng.lat;
+                document.querySelector('input[name="longitude"]').value = e.latlng.lng;
+            });
+
+            // If editing, set the marker to the existing coordinates
+            var latInput = document.querySelector('input[name="latitude"]');
+            var lngInput = document.querySelector('input[name="longitude"]');
+            if (latInput.value && lngInput.value) {
+                marker = L.marker([latInput.value, lngInput.value]).addTo(map);
+            }
+        </script>
+    </div>
+
+    <{% endblock %}
diff --git a/templates/list_sar.html b/templates/list_sar.html
index d48a54e..aec2045 100644
--- a/templates/list_sar.html
+++ b/templates/list_sar.html
@@ -1,13 +1,16 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>List of SAR Calls</title>
-</head>
-<body>
-    <h2>List of SAR Calls</h2>
-    <table>
-        <thead>
+{% extends "base.html" %}
+
+{% block title %}
+    SAR Records
+{% endblock %}
+
+{% block content %}
+    <div class="container mt-5">
+        <h2>SAR Records</h2>
+        <table class="table table-bordered table-hover">
+            <thead>
             <tr>
+                <th>Id</th>
                 <th>Start Date</th>
                 <th>Finish Date</th>
                 <th>Category</th>
@@ -15,23 +18,28 @@
                 <th>Longitude</th>
                 <th>Actions</th>
             </tr>
-        </thead>
-        <tbody>
+            </thead>
+            <tbody>
             {% for sar in sar_calls %}
-            <tr>
-                <td>{{ sar.start_date }}</td>
-                <td>{{ sar.finish_date }}</td>
-                <td>{{ sar.category }}</td>
-                <td>{{ sar.latitude }}</td>
-                <td>{{ sar.longitude }}</td>
-                <td>
-                    <a href="{{ url_for('edit_sar', id=sar.id) }}">Edit</a> |
-                    <a href="{{ url_for('delete_sar', id=sar.id) }}">Delete</a>
-                </td>
-            </tr>
+                <tr>
+                    <td>{{ sar.id }}</td>
+                    <td>{{ sar.start_date }}</td>
+                    <td>{{ sar.finish_date }}</td>
+                    <td>{{ sar.category }}</td>
+                    <td>{{ sar.latitude }}</td>
+                    <td>{{ sar.longitude }}</td>
+                    <td>
+                        <a href="{{ url_for('edit_sar', id=sar.id) }}">
+                            <button type="button" class="btn btn-info">Edit</button>
+                        </a> |
+                        <a href="{{ url_for('delete_sar', id=sar.id) }}">
+                            <button type="button" class="btn btn-danger">Delete</button>
+                        </a>
+                    </td>
+                </tr>
             {% endfor %}
-        </tbody>
-    </table>
-    <a href="/dashboard">Back to Dashboard</a>
-</body>
-</html>
+            </tbody>
+        </table>
+        <a href="/dashboard">Back to Dashboard</a>
+    </div>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/login.html b/templates/login.html
index 78a9999..bef3a41 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -1,9 +1,11 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Login</title>
-</head>
-<body>
+{% extends "base.html" %}
+
+{% block title %}
+    Login
+{% endblock %}
+
+{% block content %}
+
     <h2>Login</h2>
     <form action="/login" method="post">
         <div>
@@ -21,5 +23,5 @@
     <div>
         Don't have an account? <a href="/register">Register</a>
     </div>
-</body>
-</html>
+
+{% endblock %}
diff --git a/templates/register.html b/templates/register.html
index 395f835..5ccea7f 100644
--- a/templates/register.html
+++ b/templates/register.html
@@ -1,37 +1,41 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Register</title>
-</head>
-<body>
+{% extends "base.html" %}
+
+{% block title %}
+    Register
+{% endblock %}
+
+{% block content %}
+
     <h2>Register</h2>
-    <form action="/register" method="post">
-        <div>
-            <label for="username">Username:</label>
-            <input type="text" name="username" required>
-        </div>
-        <div>
-            <label for="password">Password:</label>
-            <input type="password" name="password" required>
-        </div>
-        <div>
-            <label for="email">Email:</label>
-            <input type="email" name="email" required>
-        </div>
-        <div>
-            <label for="full_name">Full Name:</label>
-            <input type="text" name="full_name" required>
-        </div>
-        <div>
-            <label for="phone_number">Phone Number:</label>
-            <input type="tel" name="phone_number">
-        </div>
-        <div>
-            <input type="submit" value="Register">
-        </div>
-    </form>
+    <div class="form-group">
+        <form action="/register" method="post">
+            <div>
+                <label for="username">Username:</label>
+                <input type="text" name="username" class="form-control" required>
+            </div>
+            <div>
+                <label for="password">Password:</label>
+                <input type="password" name="password" class="form-control" required>
+            </div>
+            <div>
+                <label for="email">Email:</label>
+                <input type="email" name="email" class="form-control" required>
+            </div>
+            <div>
+                <label for="full_name">Full Name:</label>
+                <input type="text" name="full_name" class="form-control" required>
+            </div>
+            <div>
+                <label for="phone_number">Phone Number:</label>
+                <input type="tel" name="phone_number" class="form-control">
+            </div>
+            <div>
+                <input type="submit" value="Register" class="btn btn-primary">
+            </div>
+        </form>
+    </div>
     <div>
         Already have an account? <a href="/login">Login</a>
     </div>
-</body>
-</html>
+
+{% endblock %}