Index: MuiscOrganizationSystem/settings.py
===================================================================
--- MuiscOrganizationSystem/settings.py	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
+++ MuiscOrganizationSystem/settings.py	(revision 59b2e9cdcf9053e1764ec21a504c56b5f7ef7aba)
@@ -16,5 +16,4 @@
 BASE_DIR = Path(__file__).resolve().parent.parent
 
-
 # Quick-start development settings - unsuitable for production
 # See https://docs.djangoproject.com/en/5.1/howto/deployment/checklist/
@@ -27,5 +26,4 @@
 
 ALLOWED_HOSTS = []
-
 
 # Application definition
@@ -49,4 +47,5 @@
     "django.contrib.messages.middleware.MessageMiddleware",
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
+    'music.middleware.Redirect404ToHomeMiddleware',
 ]
 
@@ -72,5 +71,4 @@
 WSGI_APPLICATION = "MuiscOrganizationSystem.wsgi.application"
 
-
 # Database
 # https://docs.djangoproject.com/en/5.1/ref/settings/#databases
@@ -94,5 +92,4 @@
 }
 
-
 # Password validation
 # https://docs.djangoproject.com/en/5.1/ref/settings/#auth-password-validators
@@ -113,5 +110,4 @@
 ]
 
-
 # Internationalization
 # https://docs.djangoproject.com/en/5.1/topics/i18n/
@@ -125,5 +121,4 @@
 USE_TZ = True
 
-
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/5.1/howto/static-files/
Index: music/middleware.py
===================================================================
--- music/middleware.py	(revision 59b2e9cdcf9053e1764ec21a504c56b5f7ef7aba)
+++ music/middleware.py	(revision 59b2e9cdcf9053e1764ec21a504c56b5f7ef7aba)
@@ -0,0 +1,13 @@
+from django.shortcuts import redirect
+from django.http import Http404
+
+class Redirect404ToHomeMiddleware:
+    def __init__(self, get_response):
+        self.get_response = get_response
+
+    def __call__(self, request):
+        try:
+            response = self.get_response(request)
+            return response
+        except Http404:
+            return redirect('homepage')
Index: music/urls.py
===================================================================
--- music/urls.py	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
+++ music/urls.py	(revision 59b2e9cdcf9053e1764ec21a504c56b5f7ef7aba)
@@ -1,6 +1,9 @@
 from django.urls import path
+from django.views.generic import RedirectView
+
 from . import views
 
 urlpatterns = [
+    path('', views.home_page, name='homepage'),
     path('album/', views.album_list, name='album_list'),
     path('artist/', views.artist_list, name='artist_list'),
@@ -10,6 +13,10 @@
     path('track/', views.track_list, name='track_list'),
     path('customer/genres-per-customer', views.genres_per_customer, name='genres_per_customer'),
-    path('customer/invoices-per-customer', views.invoice_per_customer_after_date, name='invoice_per_customer_after_date'),
-    path('customer/most-popular-genre-per-customer', views.most_listened_genre_per_customer, name='most_listened_genre_per_customer'),
+    path('customer/invoices-per-customer', views.invoice_per_customer_after_date,
+         name='invoice_per_customer_after_date'),
+    path('customer/artist-per-genre', views.most_popular_artist_per_customer_per_genre,
+         name='most_popular_artist_per_customer_per_genre'),
+    path('customer/most-popular-genre-per-customer', views.most_listened_genre_per_customer,
+         name='most_listened_genre_per_customer'),
     path('media-type/percentage', views.media_type_percentage, name='media_type_percentage'),
     path('track/per-genre', views.tracks_count_per_genre, name='track_count_per_genre'),
Index: music/views.py
===================================================================
--- music/views.py	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
+++ music/views.py	(revision 59b2e9cdcf9053e1764ec21a504c56b5f7ef7aba)
@@ -3,4 +3,5 @@
 import django
 from django.db import connection
+from django.shortcuts import redirect
 
 os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'MuiscOrganizationSystem.settings')
@@ -11,4 +12,10 @@
 
 # Create your views here.
+
+def home_page(request):
+    return render(request, 'home.html')
+
+def redirect_to_home(request, exception):
+    return redirect('home_page')
 
 def album_list(request):
@@ -27,5 +34,5 @@
     heading = request.GET.get('model', 'All Artists')
     data = Artist.objects.values_list('name', flat=True)
-    print(data)
+
     return render(request, 'list.html', {'data': data, 'heading': heading})
 
@@ -38,5 +45,4 @@
 
     data = [{'genre': row[0], 'count': row[1]} for row in rows]
-    print(data)
 
     return render(request, 'track_count_per_genre.html', {'data': data})
@@ -49,5 +55,4 @@
 
     data = [{'artist': row[0], 'avg': row[1]} for row in rows]
-    print(data)
 
     return render(request, 'avg_track_duration.html', {'data': data})
@@ -108,6 +113,8 @@
     selected_customer_id = request.GET.get('customer_id')
     data = []
+    customer = None
 
     if selected_customer_id:
+        customer = Customer.objects.filter(customer_id=selected_customer_id).first()
         query = """
             SELECT c.first_name as first_name, c.last_name as last_name, g.name as genre, COUNT(tr.track_id) as track_count
@@ -130,4 +137,50 @@
         'customers': customers,
         'data': data,
+        'customer': customer,
+        'selected_customer_id': selected_customer_id,
+    })
+
+def most_popular_artist_per_customer_per_genre(request):
+    customers = Customer.objects.all()
+    selected_customer_id = request.GET.get('customer_id')
+    data = []
+    customer = []
+    if selected_customer_id:
+        query = """WITH PlayCounts AS (
+                SELECT
+                    g.genre_id,
+                    g.name AS genre_name,
+                    ar.name AS artist_name,
+                    COUNT(*) AS play_count
+                FROM customer c
+                JOIN invoice i ON c.customer_id = i.customer_id
+                JOIN invoice_line il ON i.invoice_id = il.invoice_id
+                JOIN track tr ON il.track_id = tr.track_id
+                JOIN genre g ON tr.genre_id = g.genre_id
+                JOIN album a ON tr.album_id = a.album_id
+                JOIN artist ar ON a.artist_id = ar.artist_id
+                WHERE c.customer_id = %s
+                GROUP BY g.genre_id, g.name, ar.name
+            ),
+            MaxPlayCounts AS (
+                SELECT genre_id, MAX(play_count) AS max_count
+                FROM PlayCounts
+                GROUP BY genre_id
+            )
+            SELECT pc.genre_name, pc.artist_name, pc.play_count
+            FROM PlayCounts pc
+            JOIN MaxPlayCounts mpc ON pc.genre_id = mpc.genre_id AND pc.play_count = mpc.max_count;
+        """
+        customer = Customer.objects.filter(customer_id=selected_customer_id).first()
+
+        with connection.cursor() as cursor:
+            cursor.execute(query, [selected_customer_id])
+            rows = cursor.fetchall()
+            data = [{'genre': row[0], 'arist': row[1]} for row in rows]
+
+    return render(request, 'most_popular_artist_per_customer_per_genre.html', {
+        'customers': customers,
+        'customer': customer,
+        'data': data,
         'selected_customer_id': selected_customer_id,
     })
@@ -140,6 +193,8 @@
     data = []
     sum = 0
+    customer = None
 
     if selected_customer_id:
+        customer = Customer.objects.filter(customer_id=selected_customer_id).first()
         if selected_date:
             query = """
@@ -180,4 +235,5 @@
         'total_sum': sum,
         'data': data,
+        'customer': customer,
         'selected_customer_id': selected_customer_id,
     })
Index: templates/avg_price_per_artist.html
===================================================================
--- templates/avg_price_per_artist.html	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
+++ templates/avg_price_per_artist.html	(revision 59b2e9cdcf9053e1764ec21a504c56b5f7ef7aba)
@@ -29,5 +29,5 @@
                 <li class="list-group-item d-flex justify-content-between align-items-center">
                     <div class="col-6">
-                        <strong>{{ row.name }}</strong>
+                       {{ row.name }}
                     </div>
                     <div class="col-6 text-end">
Index: templates/avg_track_duration.html
===================================================================
--- templates/avg_track_duration.html	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
+++ templates/avg_track_duration.html	(revision 59b2e9cdcf9053e1764ec21a504c56b5f7ef7aba)
@@ -19,5 +19,5 @@
                 <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                     <div>
-                        <strong>{{ row.artist }}</strong>
+                        {{ row.artist }}
                     </div>
                     <span class="badge bg-primary rounded-pill">{{ row.avg }}</span>
Index: templates/genres_per_customer.html
===================================================================
--- templates/genres_per_customer.html	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
+++ templates/genres_per_customer.html	(revision 59b2e9cdcf9053e1764ec21a504c56b5f7ef7aba)
@@ -32,5 +32,11 @@
         </div>
     </form>
-
+    {% if customer %}
+        <div class="row display-5">
+            <div class="col-3 bg-light-subtle m-1 pb-3 border border-secondary-subtle rounded-3">
+                {{ customer }}
+            </div>
+        </div>
+    {% endif %}
     {% if not data %}
         <div class="alert alert-warning" role="alert">
@@ -38,25 +44,27 @@
         </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>
+        <div class="container">
+            <div class="row col-6 justify-content-between mb-3">
+                <div class="col-6 font-weight-bold">
+                    <strong>Genre</strong>
+                </div>
+                <div class="col-6 font-weight-bold px-4">
+                    <strong>Number of tracks</strong>
+                </div>
+            </div>
+            <ul class="row list-group col-6">
                 {% 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>
+                    <li class="list-group-item d-flex justify-content-between align-items-center">
+                        <div class="col-6">
+                            <span>{{ row.genre }}</span>
+                        </div>
+                        <div class="col-6">
+                             <span>Number of Tracks: {{ row.track_count }}</span>
+                        </div>
+                    </li>
+                {% empty %}
+                    <li class="list-group-item">No data available for this customer.</li>
                 {% endfor %}
-                </tbody>
-            </table>
+            </ul>
         </div>
     {% endif %}
Index: templates/home.html
===================================================================
--- templates/home.html	(revision 59b2e9cdcf9053e1764ec21a504c56b5f7ef7aba)
+++ templates/home.html	(revision 59b2e9cdcf9053e1764ec21a504c56b5f7ef7aba)
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<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>Number of Tracks per Customer</title>
+    <meta charset="UTF-8">
+    <title>HomePage</title>
+</head>
+<body class="d-flex bg-light">
+{% include 'sidebar.html' %}
+<div class="container mt-5">
+    <h1 class="mb-4 text-center">Home</h1>
+</div>
+</body>
+</html>
Index: templates/invoices_per_customer_after_date.html
===================================================================
--- templates/invoices_per_customer_after_date.html	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
+++ templates/invoices_per_customer_after_date.html	(revision 59b2e9cdcf9053e1764ec21a504c56b5f7ef7aba)
@@ -27,5 +27,4 @@
             </select>
         </div>
-
         <div class="col-md-4">
             <label for="invoice_date" class="form-label">Select Date:</label>
@@ -38,4 +37,12 @@
         </div>
     </form>
+
+      {% if customer %}
+            <div class="row display-5">
+                <div class="col-3 bg-light-subtle m-1 pb-3 border border-secondary-subtle rounded-3">
+                    {{ customer }}
+                </div>
+            </div>
+        {% endif %}
 
     {% if not selected_customer_id %}
Index: templates/most_listened_genre_per_customer.html
===================================================================
--- templates/most_listened_genre_per_customer.html	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
+++ templates/most_listened_genre_per_customer.html	(revision 59b2e9cdcf9053e1764ec21a504c56b5f7ef7aba)
@@ -10,21 +10,29 @@
 </head>
 <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>
+{% include 'sidebar.html' %}
+<div class="container mt-5">
+    <h1 class="text-center mb-4">Most Listened Genre per Customer</h1>
 
-        <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 class="list-group">
+        <div class="row">
+            <div class="col-4 font-weight-bold"><strong>First Name</strong></div>
+            <div class="col-4 font-weight-bold"><strong>Last Name</strong></div>
+            <div class="col-4 font-weight-bold"><strong>Genre</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.first_name }}</div>
+                    <div class="col-4 font-weight-bold">{{ row.last_name }}</div>
+                    <div class="col-4 font-weight-bold">{{ row.most_listened_genre }}</div>
                 </div>
-            {% endfor %}
-        </div>
+            </a>
+        {% empty %}
+            <div class="alert alert-warning" role="alert">
+                No data found.
+            </div>
+        {% endfor %}
     </div>
+</div>
 </body>
 </html>
Index: templates/most_popular_artist_per_customer_per_genre.html
===================================================================
--- templates/most_popular_artist_per_customer_per_genre.html	(revision 59b2e9cdcf9053e1764ec21a504c56b5f7ef7aba)
+++ templates/most_popular_artist_per_customer_per_genre.html	(revision 59b2e9cdcf9053e1764ec21a504c56b5f7ef7aba)
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<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 Artist of each Genre per Customer</title>
+</head>
+<body class="d-flex bg-light">
+{% include 'sidebar.html' %}
+<div class="container mt-5">
+    <h1 class="text-center mb-4">Most Listened Artist of each Genre per Customer</h1>
+
+    <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>
+    {% if customer %}
+        <div class="row display-5">
+            <div class="col-3 bg-light-subtle m-1 pb-3 border border-secondary-subtle rounded-3">
+                {{ customer }}
+            </div>
+        </div>
+    {% endif %}
+
+    <div class="list-group">
+        <div class="row">
+            <div class="col-4 font-weight-bold"><strong>Genre</strong></div>
+            <div class="col-4 font-weight-bold"><strong>Artist</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.genre }}</div>
+                    <div class="col-4 font-weight-bold">{{ row.arist }}</div>
+                </div>
+            </a>
+        {% empty %}
+            <div class="alert alert-warning" role="alert">
+                Select a customer.
+            </div>
+        {% endfor %}
+    </div>
+</div>
+</body>
+</html>
Index: templates/sidebar.html
===================================================================
--- templates/sidebar.html	(revision 4abe33096ad7903537ae92161eabe3110b18b4d2)
+++ templates/sidebar.html	(revision 59b2e9cdcf9053e1764ec21a504c56b5f7ef7aba)
@@ -1,4 +1,4 @@
-<div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 250px;">
-    <h4 class="mb-4">Navigation</h4>
+<div class="h-100 d-flex flex-column flex-shrink-0 p-3 bg-light-subtle border border-2 border-secondary-subtle rounded-end-5" style="width: 250px;">
+    <h4 class="mb-4">Menu</h4>
     <ul class="nav nav-pills flex-column mb-auto">
         <li class="nav-item">
@@ -62,4 +62,9 @@
             </a>
         </li>
+     <li class="nav-item">
+            <a href="{% url 'most_popular_artist_per_customer_per_genre' %}" class="nav-link {% if request.path == '/customer/artist-per-genre' %}active{% endif %}">
+                Most Popular Artists Per Customer
+            </a>
+        </li>
     </ul>
 </div>
