diff --git a/ProjectSourceCode/src/resources/js/homepage/create-league-routes.js b/ProjectSourceCode/src/resources/js/homepage/create-league-routes.js
deleted file mode 100644
index ec5b351..0000000
--- a/ProjectSourceCode/src/resources/js/homepage/create-league-routes.js
+++ /dev/null
@@ -1,25 +0,0 @@
-// create-league-routes.js
-
-const express = require('express');
-const exphbs = require('express-handlebars');
-
-const app = express();
-
-app.engine('hbs', exphbs({ extname: '.hbs' }));
-app.set('view engine', 'hbs');
-
-// Define the redirectToLeaguePage function
-function redirectToLeaguePage(leagueName) {
-    window.location.href = '/views/pages/league-page/league-page.hbs?leagueName=' + encodeURIComponent(leagueName);
-}
-
-// Define a route to render the league-page.hbs template
-app.get('/league-page/:leagueName', (req, res) => {
-  const leagueName = req.params.leagueName;
-  // Here you might fetch data related to the clicked league
-  // Pass the data to the template and render it
-  res.render('league-page/league-page', { leagueName });
-});
-
-// Export the app and redirectToLeaguePage function
-module.exports = { app, redirectToLeaguePage };
diff --git a/ProjectSourceCode/src/resources/js/homepage/generate-league-routes.js b/ProjectSourceCode/src/resources/js/homepage/generate-league-routes.js
new file mode 100644
index 0000000..4a6883b
--- /dev/null
+++ b/ProjectSourceCode/src/resources/js/homepage/generate-league-routes.js
@@ -0,0 +1,12 @@
+const express = require('express');
+const app = express();
+
+// Define a route to handle requests to "/league/:leagueName"
+app.get('/league/:leagueName', (req, res) => {
+    // Extract the league name from the URL parameters
+    const leagueName = req.params.leagueName;
+
+    // Render the league page template using Handlebars
+    res.render('partials/league-page/league-page', { leagueName: leagueName });
+});
+
diff --git a/ProjectSourceCode/src/resources/js/homepage/redirect-to-league-url.js b/ProjectSourceCode/src/resources/js/homepage/redirect-to-league-url.js
new file mode 100644
index 0000000..a9445ef
--- /dev/null
+++ b/ProjectSourceCode/src/resources/js/homepage/redirect-to-league-url.js
@@ -0,0 +1,7 @@
+function redirectToLeaguePage(leagueName) {
+  // Append the league name to the URL
+  var url = "/league/" + leagueName.toLowerCase().replace(/\s+/g, '-');
+  
+  // Redirect to the league page
+  window.location.href = url;
+}
\ No newline at end of file
diff --git a/ProjectSourceCode/src/views/pages/home.hbs b/ProjectSourceCode/src/views/pages/home.hbs
index 06ffb2d..3659c87 100644
--- a/ProjectSourceCode/src/views/pages/home.hbs
+++ b/ProjectSourceCode/src/views/pages/home.hbs
@@ -4,32 +4,32 @@
         <div class="row g-3" id="card-row">
             <!-- 🇬🇧 Premier League -->
             <a href="#" onclick="redirectToLeaguePage('Premier League')" class="card-link" id="league-card">
-                {{> homepage/league-card leaguename="Premier League" logo="./img/homepage/premier-league/icon.png" title="./img/homepage/premier-league/title.png"}}
+                {{> homepage/league-card leagueName="Premier League" logo="./img/homepage/premier-league/icon.png" title="./img/homepage/premier-league/title.png"}}
             </a>
 
             <!-- 🇪🇸 La Liga -->
             <a href="#" onclick="redirectToLeaguePage('La Liga')" class="card-link" id="league-card">
-              {{> homepage/league-card leagueName="La Liga" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
+                {{> homepage/league-card leagueName="La Liga" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
             </a>
 
             <!-- 🇩🇪 Bundesliga -->
             <a href="#" onclick="redirectToLeaguePage('Bundesliga')" class="card-link" id="league-card">
-              {{> homepage/league-card leagueName="Bundesliga" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
+                {{> homepage/league-card leagueName="Bundesliga" logo="./img/homepage/bundesliga/icon.png" title="./img/homepage/bundesliga/title.png"}}
             </a>
 
             <!-- 🇮🇹 Serie A -->
             <a href="#" onclick="redirectToLeaguePage('Serie A')" class="card-link" id="league-card">
-              {{> homepage/league-card leagueName="Serie A" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
+                {{> homepage/league-card leagueName="Serie A" logo="./img/homepage/serie-a/icon.png" title="./img/homepage/serie-a/title.png"}}
             </a>
 
             <!-- 🇫🇷 Ligue 1 -->
             <a href="#" onclick="redirectToLeaguePage('Ligue 1')" class="card-link" id="league-card">
-              {{> homepage/league-card leagueName="Ligue 1" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
+                {{> homepage/league-card leagueName="Ligue 1" logo="./img/homepage/ligue-1/icon.png" title="./img/homepage/ligue-1/title.png"}}
             </a>
 
             <!-- 🇧🇷 Brasileirao -->
             <a href="#" onclick="redirectToLeaguePage('Brasileirao')" class="card-link" id="league-card">
-              {{> homepage/league-card leagueName="Brasileirao" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
+                {{> homepage/league-card leagueName="Brasileirao" logo="./img/homepage/brasileirao/icon.png" title="./img/homepage/brasileirao/title.png"}}
             </a>
 
         </div>
diff --git a/ProjectSourceCode/src/views/partials/footer.hbs b/ProjectSourceCode/src/views/partials/footer.hbs
index 0d41229..b02583a 100644
--- a/ProjectSourceCode/src/views/partials/footer.hbs
+++ b/ProjectSourceCode/src/views/partials/footer.hbs
@@ -10,6 +10,10 @@
         <script src="js/navigation-bar/navigation-bar-follow.js"></script>
         <script src="js/navigation-bar/user/login.js"></script>
 
+        <!-- Homepage Scripts -->
+        <script src="js/homepage/redirect-to-league-url.js"></script>
+        <script src="js/homepage/generate-league-routes.js"></script>
+
         <!-- Include Bootstrap JavaScript -->
         <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
diff --git a/ProjectSourceCode/src/views/partials/head.hbs b/ProjectSourceCode/src/views/partials/head.hbs
index 9dd1052..6d5a0ea 100644
--- a/ProjectSourceCode/src/views/partials/head.hbs
+++ b/ProjectSourceCode/src/views/partials/head.hbs
@@ -1,6 +1,9 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
   <meta name="description" content="" />
+  <!-- Set the Content-Security-Policy header to allow inline scripts -->
+  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';">
+
 
   <!-- Linking forms.css -->
   <link rel="stylesheet" type="text/css" href="css/login_and_registration.css">