Index: music/views.py
===================================================================
--- music/views.py	(revision 611686e81670ba9e8f1d5a0aaffcb2d604f86584)
+++ music/views.py	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
@@ -79,5 +79,5 @@
         rows = cursor.fetchall()
 
-    data = [{'name': row[0], 'num_invoices': row[1]} for row in rows]
+    data = [{'name': row[0], 'num_invoices': row[1], 'money_earned': row[2]} for row in rows]
 
     return render(request, 'rank_list_artists.html', {'data': data})
Index: music/views/rank_list_artists.sql
===================================================================
--- music/views/rank_list_artists.sql	(revision 611686e81670ba9e8f1d5a0aaffcb2d604f86584)
+++ music/views/rank_list_artists.sql	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
@@ -1,11 +1,11 @@
 CREATE VIEW rank_list_artists AS
-    SELECT
-            (ar.name),
-            count(il.invoice_line_id)
-as num_invoices
-    FROM artist ar
-    left join album al on ar.artist_id = al.album_id
-    left join track tr on al.album_id = tr.album_id
-    left join invoice_line il on tr.track_id = il.track_id
-    group by ar.name
-    order by num_invoices desc
+SELECT ar.name,
+       count(il.invoice_line_id) AS num_invoices,
+       COALESCE(SUM(i.total), 0) AS money_earned
+FROM artist ar
+         LEFT JOIN album al ON ar.artist_id = al.album_id
+         LEFT JOIN track tr ON al.album_id = tr.album_id
+         LEFT JOIN invoice_line il ON tr.track_id = il.track_id
+         LEFT JOIN invoice i on il.invoice_id = i.invoice_id
+GROUP BY ar.name
+ORDER BY money_earned DESC;
Index: templates/avg_price_per_artist.html
===================================================================
--- templates/avg_price_per_artist.html	(revision 611686e81670ba9e8f1d5a0aaffcb2d604f86584)
+++ templates/avg_price_per_artist.html	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
@@ -1,17 +1,47 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Average Track Price per Artist</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq"
+            crossorigin="anonymous"></script>
 </head>
-<body>
-<h1>Average Track Price per Artist</h1>
-<ol>
-    <h4>Name&emsp;-&emsp;Avg. track price</h4>
+<body class="d-flex bg-light">
 
-    {% for row in data %}
-        <li>{{ row.name }}&emsp;-&emsp;{{ row.avg_price_per_track }}</li>
-    {% endfor %}
-</ol>
+{% include 'sidebar.html' %}
+
+<div class="container mt-5">
+    <h1 class="mb-4 text-center">Average Track Price per Artist</h1>
+
+    <h4 class="mb-4 text-center">Name - Average Track Price</h4>
+
+    {% if not data %}
+        <div class="alert alert-warning" role="alert">
+            No data available.
+        </div>
+    {% else %}
+        <ul class="list-group">
+            {% for row in data %}
+                <li class="list-group-item d-flex justify-content-between align-items-center">
+                    <div class="col-6">
+                        <strong>{{ row.name }}</strong>
+                    </div>
+                    <div class="col-6 text-end">
+                        {% if row.avg_price_per_track == 'not enogu data' %}
+                            <span class="badge bg-danger rounded-pill">No data available</span>
+                        {% else %}
+                            <span class="badge bg-success rounded-pill">${{ row.avg_price_per_track|floatformat:2 }}</span>
+                        {% endif %}
+                    </div>
+                </li>
+            {% endfor %}
+        </ul>
+    {% endif %}
+</div>
+
 </body>
 </html>
-
Index: templates/avg_track_duration.html
===================================================================
--- templates/avg_track_duration.html	(revision 611686e81670ba9e8f1d5a0aaffcb2d604f86584)
+++ templates/avg_track_duration.html	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
@@ -2,13 +2,28 @@
 <html>
 <head>
-    <title>Average track duration per artist</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq"
+            crossorigin="anonymous"></script>
+    <title>Average Track Duration per Artist</title>
 </head>
-<body>
-<h1>Average track duration per artist</h1>
-<ul>
-    {% for row in data %}
-        <li>{{ row.artist }} - {{ row.avg }}</li>
-    {% endfor %}
-</ul>
+<body class="d-flex bg-light">
+    {% include 'sidebar.html' %}
+
+    <div class="container mt-5">
+        <h1 class="text-center mb-4">Average Track Duration per Artist</h1>
+
+        <div class="list-group">
+            {% for row in data %}
+                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+                    <div>
+                        <strong>{{ row.artist }}</strong>
+                    </div>
+                    <span class="badge bg-primary rounded-pill">{{ row.avg }}</span>
+                </a>
+            {% endfor %}
+        </div>
+    </div>
 </body>
 </html>
Index: templates/genres_per_customer.html
===================================================================
--- templates/genres_per_customer.html	(revision 611686e81670ba9e8f1d5a0aaffcb2d604f86584)
+++ templates/genres_per_customer.html	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
@@ -2,31 +2,64 @@
 <html>
 <head>
-    <title>Number of tracks from each genre per Customer</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq"
+            crossorigin="anonymous"></script>
+    <title>Number of Tracks from Each Genre per Customer</title>
 </head>
-<body>
-<h1>Number of tracks from each genre per Customer</h1>
+<body class="d-flex bg-light">
+{% include 'sidebar.html' %}
+<div class="container mt-5">
+    <h1 class="mb-4 text-center">Number of Tracks from Each Genre per Customer</h1>
 
-<form method="GET" action="">
-    <label for="customer_id">Select Customer:</label>
-    <select name="customer_id" id="customer_id">
-        <option value="">All Customers</option>
-        {% for customer in customers %}
-            <option value="{{ customer.customer_id }}"
-                    {% if request.GET.customer_id == customer.0|stringformat:'s' %}selected{% endif %}>
-                {{ customer.first_name }} {{ customer.last_name }}
-            </option>
-        {% endfor %}
-    </select>
-    <button type="submit">Filter</button>
-</form>
+    <form method="GET" action="" class="row g-3 mb-4">
+        <div class="col-md-4">
+            <label for="customer_id" class="form-label">Select Customer:</label>
+            <select name="customer_id" id="customer_id" class="form-select">
+                <option value="">All Customers</option>
+                {% for customer in customers %}
+                    <option value="{{ customer.customer_id }}"
+                            {% if request.GET.customer_id == customer.0|stringformat:'s' %}selected{% endif %}>
+                        {{ customer.first_name }} {{ customer.last_name }}
+                    </option>
+                {% endfor %}
+            </select>
+        </div>
 
+        <div class="col-md-4 d-flex align-items-end">
+            <button type="submit" class="btn btn-primary w-100">Filter</button>
+        </div>
+    </form>
 
-<ol>
-    <h4>First Name&nbsp;&nbsp;Last Name&nbsp;&nbsp;-&nbsp;&nbsp;Genre - Num of Tracks</h4>
-    {% for row in data %}
-        <li>
-            {{ row.first_name }}&emsp;-&emsp;{{ row.last_name }}&emsp;-&emsp;{{ row.genre }}&emsp;-&emsp;{{ row.track_count }}</li>
-    {% endfor %}
-</ol>
+    {% if not data %}
+        <div class="alert alert-warning" role="alert">
+            No data available for the selected customer.
+        </div>
+    {% else %}
+        <div class="table-responsive">
+            <table class="table table-striped">
+                <thead>
+                <tr>
+                    <th scope="col">First Name</th>
+                    <th scope="col">Last Name</th>
+                    <th scope="col">Genre</th>
+                    <th scope="col">Number of Tracks</th>
+                </tr>
+                </thead>
+                <tbody>
+                {% for row in data %}
+                    <tr>
+                        <td>{{ row.first_name }}</td>
+                        <td>{{ row.last_name }}</td>
+                        <td>{{ row.genre }}</td>
+                        <td>{{ row.track_count }}</td>
+                    </tr>
+                {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    {% endif %}
+</div>
 
 </body>
Index: templates/invoices_per_customer_after_date.html
===================================================================
--- templates/invoices_per_customer_after_date.html	(revision 611686e81670ba9e8f1d5a0aaffcb2d604f86584)
+++ templates/invoices_per_customer_after_date.html	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
@@ -9,6 +9,6 @@
     <title>Number of Tracks per Customer</title>
 </head>
-<body class="bg-light">
-
+<body class="d-flex bg-light">
+{% include 'sidebar.html' %}
 <div class="container mt-5">
     <h1 class="mb-4 text-center">Invoice Created by Customer</h1>
Index: templates/list.html
===================================================================
--- templates/list.html	(revision 611686e81670ba9e8f1d5a0aaffcb2d604f86584)
+++ templates/list.html	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
@@ -2,15 +2,28 @@
 <html>
 <head>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq"
+            crossorigin="anonymous"></script>
     <title>{{ heading }}</title>
 </head>
-<body>
-    <h1>{{ heading }}</h1>
-    <ul>
-        {% for d in data %}
-            <li>{{ d }}</li>
-        {% empty %}
-            <li>No data found.</li>
-        {% endfor %}
-    </ul>
+<body class="d-flex bg-light">
+    {% include 'sidebar.html' %}
+    <div class="container mt-5">
+        <h1 class="text-center mb-4">{{ heading }}</h1>
+
+        <div class="list-group">
+            {% for d in data %}
+                <a href="#" class="list-group-item list-group-item-action">
+                    {{ d }}
+                </a>
+            {% empty %}
+                <div class="alert alert-warning" role="alert">
+                    No data found.
+                </div>
+            {% endfor %}
+        </div>
+    </div>
 </body>
 </html>
Index: templates/media_type_percentage.html
===================================================================
--- templates/media_type_percentage.html	(revision 611686e81670ba9e8f1d5a0aaffcb2d604f86584)
+++ templates/media_type_percentage.html	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
@@ -2,16 +2,36 @@
 <html>
 <head>
-    <title>Most active customers</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq"
+            crossorigin="anonymous"></script>
+    <title>Most Active Customers</title>
 </head>
-<body>
-<h1>Most active customers</h1>
-<ol>
-    <h4>Media Type-&emsp;Num of tracks&emsp;-&emsp;Percentage</h4>
-
-    {% for row in data %}
-        <li>{{ row.name }}&emsp;-&emsp;{{ row.num_of_tracks }}&emsp;-&emsp;{{ row.percentage }}%</li>
-    {% endfor %}
-</ol>
+<body class="d-flex bg-light">
+    {% include 'sidebar.html' %}
+    <div class="container mt-5">
+        <h1 class="text-center mb-4">Most Active Customers</h1>
+        <div class="table-responsive">
+            <table class="table table-striped">
+                <thead>
+                    <tr>
+                        <th scope="col">Media Type</th>
+                        <th scope="col">Number of Tracks</th>
+                        <th scope="col">Percentage</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for row in data %}
+                        <tr>
+                            <td>{{ row.name }}</td>
+                            <td>{{ row.num_of_tracks }}</td>
+                            <td>{{ row.percentage }}%</td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
 </body>
 </html>
-
Index: templates/most_listened_genre_per_customer.html
===================================================================
--- templates/most_listened_genre_per_customer.html	(revision 611686e81670ba9e8f1d5a0aaffcb2d604f86584)
+++ templates/most_listened_genre_per_customer.html	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
@@ -2,16 +2,29 @@
 <html>
 <head>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq"
+            crossorigin="anonymous"></script>
     <title>Most listened Genre per Customer</title>
 </head>
-<body>
-<h1>Most listened Genre per Customer</h1>
-<ol>
-    <h4>First Name-&emsp;Last Name&emsp;-&emsp;Genre</h4>
+<body class="d-flex bg-light">
+    {% include 'sidebar.html' %}
+    <div class="container mt-5">
+        <h1 class="text-center mb-4">Most Listened Genre per Customer</h1>
 
-    {% for row in data %}
-        <li>{{ row.first_name }}&emsp;-&emsp;{{ row.last_name }}&emsp;-&emsp;{{ row.most_listened_genre }}</li>
-    {% endfor %}
-</ol>
+        <div class="list-group">
+            <h4 class="mb-3">First Name &emsp; Last Name &emsp; - &emsp; Genre</h4>
+            {% for row in data %}
+                <a href="#" class="list-group-item list-group-item-action">
+                    {{ row.first_name }} &emsp;-&emsp; {{ row.last_name }} &emsp;-&emsp; {{ row.most_listened_genre }}
+                </a>
+            {% empty %}
+                <div class="alert alert-warning" role="alert">
+                    No data found.
+                </div>
+            {% endfor %}
+        </div>
+    </div>
 </body>
 </html>
-
Index: templates/rank_list_artists.html
===================================================================
--- templates/rank_list_artists.html	(revision 611686e81670ba9e8f1d5a0aaffcb2d604f86584)
+++ templates/rank_list_artists.html	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
@@ -2,16 +2,40 @@
 <html>
 <head>
-    <title>Most popular Artist</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq"
+            crossorigin="anonymous"></script>
+    <title>Artist with Highest Earnings</title>
 </head>
-<body>
-<h1>Most popular Artist</h1>
-<ol>
-    <h4>Name&emsp;-&emsp;Total invoices</h4>
+<body class="d-flex bg-light">
+{% include 'sidebar.html' %}
+<div class="container mt-5">
+    <h1 class="text-center mb-4">Artist with Highest Earnings</h1>
 
-    {% for row in data %}
-        <li>{{ row.name }}&emsp;-&emsp;{{ row.num_invoices }}</li>
-    {% endfor %}
-</ol>
+    <div class="list-group">
+        <div class="row">
+            <div class="col-4 font-weight-bold"><strong>Name</strong></div>
+            <div class="col-4 font-weight-bold"><strong>Total Invoices</strong></div>
+            <div class="col-4 font-weight-bold"><strong>Total Money Earned</strong></div>
+        </div>
+
+        {% for row in data %}
+
+            <a href="#" class="list-group-item list-group-item-action">
+                <div class="row">
+                    <div class="col-4 font-weight-bold">{{ row.name }}</div>
+                    <div class="col-4 font-weight-bold">{{ row.num_invoices }}</div>
+                    <div class="col-4 font-weight-bold">${{ row.money_earned }}</div>
+                </div>
+            </a>
+
+        {% empty %}
+            <div class="alert alert-warning" role="alert">
+                No data found.
+            </div>
+        {% endfor %}
+    </div>
+</div>
 </body>
 </html>
-
Index: templates/rank_list_most_active_customers.html
===================================================================
--- templates/rank_list_most_active_customers.html	(revision 611686e81670ba9e8f1d5a0aaffcb2d604f86584)
+++ templates/rank_list_most_active_customers.html	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
@@ -2,16 +2,37 @@
 <html>
 <head>
-    <title>Most active customers</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq"
+            crossorigin="anonymous"></script>
+    <title>Most Active Customers</title>
 </head>
-<body>
-<h1>Most active customers</h1>
-<ol>
-    <h4>Name&emsp;-&emsp;Total orders&emsp;-&emsp;Total money spent</h4>
+<body class="d-flex bg-light">
+{% include 'sidebar.html' %}
+<div class="container mt-5">
+    <h1 class="text-center mb-4">Most Active Customers</h1>
 
-    {% for row in data %}
-        <li>{{ row.name }}&emsp;-&emsp;{{ row.total_orders }}&emsp;-&emsp;${{ row.total_money_spent }}</li>
-    {% endfor %}
-</ol>
+    <div class="list-group">
+        <div class="row">
+            <div class="col-4 font-weight-bold"><strong>Name</strong></div>
+            <div class="col-4 font-weight-bold"><strong>Total Orders</strong></div>
+            <div class="col-4 font-weight-bold"><strong>Total Money Spent</strong></div>
+        </div>
+        {% for row in data %}
+            <a href="#" class="list-group-item list-group-item-action">
+                <div class="row">
+                    <div class="col-4 font-weight-bold"> {{ row.name }}</div>
+                    <div class="col-4 font-weight-bold">{{ row.total_orders }}</div>
+                    <div class="col-4 font-weight-bold"> ${{ row.total_money_spent }}</div>
+                </div>
+            </a>
+        {% empty %}
+            <div class="alert alert-warning" role="alert">
+                No data found.
+            </div>
+        {% endfor %}
+    </div>
+</div>
 </body>
 </html>
-
Index: templates/sidebar.html
===================================================================
--- templates/sidebar.html	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
+++ templates/sidebar.html	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
@@ -0,0 +1,65 @@
+<div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 250px;">
+    <h4 class="mb-4">Navigation</h4>
+    <ul class="nav nav-pills flex-column mb-auto">
+        <li class="nav-item">
+            <a href="{% url 'album_list' %}" class="nav-link {% if request.path == '/album/' %}active{% endif %}" aria-current="page">
+                Album List
+            </a>
+        </li>
+        <li class="nav-item">
+            <a href="{% url 'artist_list' %}" class="nav-link {% if request.path == '/artist/' %}active{% endif %}">
+                Artist List
+            </a>
+        </li>
+        <li class="nav-item">
+            <a href="{% url 'avg_track_duration' %}" class="nav-link {% if request.path == '/artist/avg-track-duration' %}active{% endif %}">
+                Average Track Duration
+            </a>
+        </li>
+        <li class="nav-item">
+            <a href="{% url 'avg_track_price' %}" class="nav-link {% if request.path == '/artist/avg-track-price' %}active{% endif %}">
+                Average Track Price per Artist
+            </a>
+        </li>
+        <li class="nav-item">
+            <a href="{% url 'rank_list_artists' %}" class="nav-link {% if request.path == '/artist/most-popular' %}active{% endif %}">
+                Artist with Highest Earnings
+            </a>
+        </li>
+        <li class="nav-item">
+            <a href="{% url 'track_list' %}" class="nav-link {% if request.path == '/track/' %}active{% endif %}">
+                Track List
+            </a>
+        </li>
+        <li class="nav-item">
+            <a href="{% url 'genres_per_customer' %}" class="nav-link {% if request.path == '/customer/genres-per-customer' %}active{% endif %}">
+                Genres per Customer
+            </a>
+        </li>
+        <li class="nav-item">
+            <a href="{% url 'invoice_per_customer_after_date' %}" class="nav-link {% if request.path == '/customer/invoices-per-customer' %}active{% endif %}">
+                Invoices per Customer
+            </a>
+        </li>
+        <li class="nav-item">
+            <a href="{% url 'most_listened_genre_per_customer' %}" class="nav-link {% if request.path == '/customer/most-popular-genre-per-customer' %}active{% endif %}">
+                Most Popular Genre per Customer
+            </a>
+        </li>
+        <li class="nav-item">
+            <a href="{% url 'media_type_percentage' %}" class="nav-link {% if request.path == '/media-type/percentage' %}active{% endif %}">
+                Media Type Percentage
+            </a>
+        </li>
+        <li class="nav-item">
+            <a href="{% url 'track_count_per_genre' %}" class="nav-link {% if request.path == '/track/per-genre' %}active{% endif %}">
+                Track Count per Genre
+            </a>
+        </li>
+        <li class="nav-item">
+            <a href="{% url 'rank_list_most_active_customers' %}" class="nav-link {% if request.path == '/customer/rank-list' %}active{% endif %}">
+                Rank List of Most Active Customers
+            </a>
+        </li>
+    </ul>
+</div>
Index: templates/track_count_per_genre.html
===================================================================
--- templates/track_count_per_genre.html	(revision 611686e81670ba9e8f1d5a0aaffcb2d604f86584)
+++ templates/track_count_per_genre.html	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
@@ -2,13 +2,28 @@
 <html>
 <head>
-    <title>Track count per Genre</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq"
+            crossorigin="anonymous"></script>
+    <title>Track Count Per Genre</title>
 </head>
-<body>
-<h1>Track Count Per Genre</h1>
-<ul>
-    {% for row in data %}
-        <li>{{ row.genre }} - {{ row.count }} tracks</li>
-    {% endfor %}
-</ul>
+<body class="d-flex bg-light">
+    {% include 'sidebar.html' %}
+    <div class="container mt-5">
+        <h1 class="text-center mb-4">Track Count Per Genre</h1>
+
+        <div class="list-group">
+            {% for row in data %}
+                <a href="#" class="list-group-item list-group-item-action">
+                    {{ row.genre }} - {{ row.count }} tracks
+                </a>
+            {% empty %}
+                <div class="alert alert-warning" role="alert">
+                    No data available.
+                </div>
+            {% endfor %}
+        </div>
+    </div>
 </body>
 </html>
