diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml
index 4714879..9ed431d 100644
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -5,7 +5,7 @@ name: Docker Image CI for Electricity Calculator
 # Controls when the workflow will run
 on:
   push:
-    branches: [ "main" ] # Triggers on pushes to the main branch
+    branches: [ "master" ] # Triggers on pushes to the main branch
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
diff --git a/Dockerfile b/Dockerfile
index dbce16a..cef0901 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -5,7 +5,7 @@ FROM nginx:stable-alpine
 RUN rm -rf /usr/share/nginx/html/*
 
 # Copy the web application files (your index.html) to the Nginx web root directory
-COPY index.html /usr/share/nginx/html/index.html
+COPY pages/ /usr/share/nginx/html/
 
 # Expose port 80 for HTTP traffic
 EXPOSE 80
diff --git a/index.html b/index.html
deleted file mode 100644
index 473f4ea..0000000
--- a/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<!DOCTYPE html>
-<html lang="it">
-<head>
-    <meta charset="UTF-8">
-    <title>Energy Calculator - Home</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            background: #f4f6f8;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
-        }
-        header {
-            background: #2d6cdf;
-            color: #fff;
-            padding: 1.5rem 0;
-            text-align: center;
-        }
-        main {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-        }
-        .card-container {
-            display: flex;
-            gap: 2rem;
-            margin-top: 2rem;
-        }
-        .card {
-            background: #fff;
-            border-radius: 8px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-            padding: 2rem 2.5rem;
-            text-align: center;
-            transition: box-shadow 0.2s;
-        }
-        .card:hover {
-            box-shadow: 0 4px 16px rgba(45,108,223,0.15);
-        }
-        .card a {
-            display: inline-block;
-            margin-top: 1rem;
-            padding: 0.7rem 1.5rem;
-            background: #2d6cdf;
-            color: #fff;
-            border-radius: 4px;
-            text-decoration: none;
-            font-weight: bold;
-            transition: background 0.2s;
-        }
-        .card a:hover {
-            background: #1b4e9b;
-        }
-        @media (max-width: 700px) {
-            .card-container {
-                flex-direction: column;
-                gap: 1.5rem;
-            }
-        }
-    </style>
-</head>
-<body>
-    <header>
-        <h1>Energy Calculator</h1>
-        <p>Benvenuto! Scegli una funzione per iniziare:</p>
-    </header>
-    <main>
-        <div class="card-container">
-            <div class="card">
-                <h2>Calcolatore Risparmi</h2>
-                <p>Scopri quanto puoi risparmiare con il nostro calcolatore.</p>
-                <a href="savings-calculator.html">Vai al Calcolatore Risparmi</a>
-            </div>
-            <div class="card">
-                <h2>Calcolatore Costi</h2>
-                <p>Calcola i costi energetici in modo semplice e veloce.</p>
-                <a href="cost-calculator.html">Vai al Calcolatore Costi</a>
-            </div>
-        </div>
-    </main>
-</body>
-</html>
\ No newline at end of file
diff --git a/cost-calculator.html b/pages/cost-calculator.html
similarity index 100%
rename from cost-calculator.html
rename to pages/cost-calculator.html
diff --git a/pages/index.html b/pages/index.html
new file mode 100644
index 0000000..358b47d
--- /dev/null
+++ b/pages/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <title>Energy Calculator - Home</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        body { 
+            font-family: 'Inter', sans-serif; 
+            background-color: #f0f4f8; 
+        }
+        .card { 
+            background-color: white; 
+            border-radius: 12px; 
+            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); 
+            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+        }
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
+        }
+        .btn-primary { 
+            background-color: #4299e1; 
+            color: white; 
+            font-weight: 600; 
+            padding: 0.75rem 1.5rem; 
+            border-radius: 8px; 
+            transition: background-color 0.2s ease-in-out;
+            text-decoration: none;
+            display: inline-block;
+            margin-top: auto; /* Aligns button to the bottom */
+        }
+        .btn-primary:hover { 
+            background-color: #3182ce; 
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col">
+    <!-- Header Section -->
+    <header class="text-center py-8 bg-white shadow-md">
+        <h1 class="text-4xl font-bold text-gray-800">Energy Calculator Suite</h1>
+        <p class="text-gray-600 mt-2 text-lg">I tuoi strumenti per un'analisi energetica completa e consapevole.</p>
+    </header>
+    
+    <!-- Main Content with Cards -->
+    <main class="flex-grow flex items-center justify-center p-6">
+        <div class="w-full max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-8">
+            
+            <!-- Card for Advanced Cost Calculator -->
+            <div class="card p-8 flex flex-col">
+                <h2 class="text-2xl font-bold text-gray-800 mb-4">Calcolatore Costi Avanzato</h2>
+                <p class="text-gray-700 mb-6 flex-grow">
+                    Simula i consumi e i costi dell'elettricità. Include opzioni per analizzare l'impatto di un impianto fotovoltaico e di una batteria di accumulo per una stima precisa e dettagliata.
+                </p>
+                <a href="cost-calculator.html" class="btn-primary text-center">Vai al Calcolatore Costi</a>
+            </div>
+
+            <!-- Card for Photovoltaic Savings Calculator -->
+            <div class="card p-8 flex flex-col">
+                <h2 class="text-2xl font-bold text-gray-800 mb-4">Calcolatore Risparmio Fotovoltaico</h2>
+                <p class="text-gray-700 mb-6 flex-grow">
+                    Analizza in dettaglio i costi, i risparmi e i possibili guadagni derivanti dall'installazione di un impianto fotovoltaico. Ottimo per valutare il tuo investimento.
+                </p>
+                <a href="savings-calculator.html" class="btn-primary text-center">Vai al Calcolatore Risparmi</a>
+            </div>
+
+        </div>
+    </main>
+
+    <!-- Footer Section -->
+    <footer class="text-center py-6 text-sm text-gray-500 bg-white mt-8">
+        <p>&copy; 2024 Calcolatore Energetico Avanzato. Creato per scopi illustrativi.</p>
+    </footer>
+</body>
+</html>
diff --git a/savings-calculator.html b/pages/savings-calculator.html
similarity index 100%
rename from savings-calculator.html
rename to pages/savings-calculator.html
