diff --git a/app/resources/css/style.css b/app/resources/css/style.css
index 2f8c7dc..d608501 100644
--- a/app/resources/css/style.css
+++ b/app/resources/css/style.css
@@ -9,54 +9,77 @@ body {
   font-size: 16px;
   min-height: 100vh;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
   background: url('/resources/main.jpg') center center / cover no-repeat fixed;
 }
 
-.card {
-  background: rgba(255, 248, 220, 0.92);
-  border-radius: 12px;
-  padding: 3rem 4rem;
+header {
   text-align: center;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
-  max-width: 520px;
-  width: 90%;
+  padding: 3rem 1rem 2rem;
 }
 
 h1 {
-  font-size: 2rem;
+  font-size: 3rem;
   font-weight: 600;
-  color: #3b2a0e;
-  margin-bottom: 2rem;
+  color: #fdf5e0;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
   letter-spacing: 0.02em;
 }
 
-.buttons {
+h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #fdf5e0;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
+  letter-spacing: 0.02em;
+}
+
+.cards-row {
+  display: flex;
+  gap: 8vw;
+  justify-content: center;
+  align-items: flex-end;
+  padding: 0 2rem 3rem;
+  flex-wrap: wrap;
+}
+
+.action-card {
+  background: rgba(255, 248, 220, 0.92);
+  border-radius: 12px;
+  padding: 1.5rem;
+  width: 220px;
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  text-align: center;
+  cursor: pointer;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
+  transition: transform 0.2s, box-shadow 0.2s;
 }
 
-button {
-  font-family: inherit;
+.action-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
+}
+
+.card-icon {
+  height: 80px;
+  background: rgba(107, 90, 42, 0.15);
+  border-radius: 8px;
+  border: 2px dashed rgba(107, 90, 42, 0.3);
+}
+
+.card-title {
   font-size: 1rem;
   font-weight: 600;
-  padding: 0.75rem 1.5rem;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  background-color: #6b5a2a;
-  color: #fdf5e0;
-  transition: background-color 0.2s, transform 0.1s;
+  color: #3b2a0e;
 }
 
-button:hover {
-  background-color: #8b6914;
-}
-
-button:active {
-  transform: scale(0.97);
+.card-text {
+  font-size: 0.875rem;
+  color: #5c4a2a;
+  line-height: 1.5;
 }
 
 /* Modal */
@@ -96,11 +119,12 @@ button:active {
   border-radius: 4px;
   cursor: pointer;
   font-weight: 400;
+  border: none;
+  font-family: inherit;
 }
 
 .modal-close:hover {
   background: rgba(255, 255, 255, 0.15);
-  transform: none;
 }
 
 #modal-video {
diff --git a/app/templates/index.html b/app/templates/index.html
index 0defb73..2dbe6de 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -1,28 +1,42 @@
 <!DOCTYPE html>
-<html lang="es">
+<html lang="it">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Bienvenido</title>
+  <title>3a sviluppi agro-tech</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
 </head>
 <body>
-  <div class="card">
-    <h1>Bienvenido</h1>
-    <div class="buttons">
-      <button data-action="video" data-src="/resources/videos/video1.mp4">Quaderno di campagna digitale</button>
-      <button data-action="video" data-src="/resources/videos/video2.mp4">Assistente virtuale</button>
-      <button data-action="iframe" data-src="http://localhost:3000/viewer?userId=1398&lang=it-IT">Reconoscimento fenologico</button>
+  <header>
+    <h1>3a sviluppi agro-tech</h1>
+    <h2>Innovazione digitale per l'agricoltura</h2>
+  </header>
+
+  <div class="cards-row">
+    <div class="action-card" data-action="video" data-src="/resources/videos/video1.mp4">
+      <div class="card-icon"></div>
+      <h3 class="card-title">Quaderno di campagna digitale</h3>
+      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula arcu vel ligula fermentum.</p>
+    </div>
+    <div class="action-card" data-action="video" data-src="/resources/videos/video2.mp4">
+      <div class="card-icon"></div>
+      <h3 class="card-title">Assistente virtuale per la difesa fitopatologica</h3>
+      <p class="card-text">Pellentesque habitant morbi tristique senectus et netus malesuada fames ac turpis egestas.</p>
+    </div>
+    <div class="action-card" data-action="iframe" data-src="http://localhost/viewer?userId=1398&lang=it-IT">
+      <div class="card-icon"></div>
+      <h3 class="card-title">Riconoscimento fenologico</h3>
+      <p class="card-text">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
     </div>
   </div>
 
   <!-- Shared modal overlay -->
   <div id="modal" class="modal hidden" role="dialog" aria-modal="true">
     <div class="modal-box">
-      <button class="modal-close" id="modal-close" aria-label="Cerrar">&times;</button>
+      <button class="modal-close" id="modal-close" aria-label="Chiudi">&times;</button>
       <video id="modal-video" controls></video>
       <iframe id="modal-iframe" src="" allowfullscreen></iframe>
     </div>
