diff --git a/app/components/Footer.vue b/app/components/Footer.vue
index 840bc91..fc5f51a 100644
--- a/app/components/Footer.vue
+++ b/app/components/Footer.vue
@@ -1,43 +1,58 @@
 <script setup lang="ts">
-import MemberDot from "~/components/MemberDot.vue";
 import { useMembers } from "~/composables/useMembers";
 
 const { sortedMembers } = useMembers();
+
+const footerLinks = [
+  { label: "Home", path: "/" },
+  { label: "Esplora i dati", path: "/open-data" },
+  { label: "Come funziona", path: "/info" },
+];
+
+const supportItems = [
+  { label: "E-mail", value: "supporto@visionebari.it", href: "mailto:supporto@visionebari.it" },
+  { label: "Telefono", value: "+39 080 468 2010", href: "tel:+390804682010" },
+  { label: "Supporto", value: "Lun - Ven, 9:00 - 18:00" },
+];
 </script>
 
 <template>
   <footer class="it-footer">
     <div class="it-footer-main">
-      <div class="container">
-        <section>
-          <div class="row clearfix">
-            <div class="col-sm-12">
-              <div class="it-brand-wrapper">
-                <a href="#" data-focus-mouse="false" class="d-flex align-items-center">
-                  <img alt="Logo Visione" src="/logo-light.svg" style="width: 42px; height: 42px; margin-right: 12px;"/>
-                  
-                  <div class="it-brand-text">
-                    <h2>Visione</h2>
-                    <h3 class="d-none d-md-block">Segnalazioni anonime e sicure</h3>
-                  </div>
-                </a>
+      <div class="container footer-main-content">
+        <section class="footer-brand-section">
+          <div class="it-brand-wrapper">
+            <NuxtLink to="/" data-focus-mouse="false" class="footer-brand-link">
+              <img alt="Logo Visione" class="footer-brand-logo" src="/logo-light.svg"/>
+              <div class="it-brand-text">
+                <h2>Visione</h2>
+                <h3>Un occhio per la sicurezza di Bari</h3>
               </div>
-            </div>
+            </NuxtLink>
           </div>
         </section>
-        <section class="py-4 border-white border-top">
-          <div class="row">
-            <div class="col-12 pb-2">
-              <div class="pb-2">
-                <h4>Progetto di</h4>
-                <div class="members-list d-flex justify-content-center align-items-center gap-5 flex-wrap w-100">
-                  <MemberDot
-                      v-for="member in sortedMembers"
-                      :key="member.name"
-                      :name="member.name"
-                      :image="member.image"
-                  />
-                </div>
+
+        <section class="footer-content-section">
+          <div class="footer-support">
+            <h4>Assistenza per i cittadini</h4>
+            <ul class="footer-support-list">
+              <li v-for="item in supportItems" :key="item.label">
+                <span class="footer-support-label">{{ item.label }}:</span>
+                <a v-if="item.href" :href="item.href">{{ item.value }}</a>
+                <span v-else>{{ item.value }}</span>
+              </li>
+            </ul>
+          </div>
+
+          <div class="footer-members">
+            <div class="footer-members-grid">
+              <div
+                v-for="member in sortedMembers"
+                :key="member.name"
+                class="footer-member-card"
+              >
+                <img :src="member.image" :alt="member.name" class="footer-member-image">
+                <div class="footer-member-name">{{ member.name }}</div>
               </div>
             </div>
           </div>
@@ -46,12 +61,225 @@ const { sortedMembers } = useMembers();
     </div>
     <div class="it-footer-small-prints clearfix">
       <div class="container">
-          <ul class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">
+        <div class="footer-lower-bar">
+          <ul class="footer-primary-menu list-inline mb-0">
+            <li v-for="link in footerLinks" :key="link.path" class="list-inline-item">
+              <NuxtLink :to="link.path">{{ link.label }}</NuxtLink>
+            </li>
+          </ul>
+          <ul class="it-footer-small-prints-list list-inline mb-0">
             <li class="list-inline-item"><a href="/note-legali">Note legali</a></li>
             <li class="list-inline-item"><a href="/privacy">Privacy policy</a></li>
             <li class="list-inline-item"><a href="/sitemap.xml">Mappa del sito</a></li>
           </ul>
+        </div>
       </div>
     </div>
   </footer>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+.footer-main-content {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
+.footer-brand-section {
+  padding-bottom: 1.75rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
+}
+
+.footer-brand-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 1rem;
+  text-decoration: none;
+}
+
+.footer-brand-logo {
+  width: 52px;
+  height: 52px;
+  flex-shrink: 0;
+}
+
+.footer-brand-section .it-brand-text h2 {
+  margin-bottom: 0.25rem;
+  font-size: 1.75rem;
+}
+
+.footer-brand-section .it-brand-text h3 {
+  margin-bottom: 0;
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+.footer-content-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
+  padding-top: 2rem;
+}
+
+.footer-support {
+  max-width: 30rem;
+}
+
+.footer-support h4 {
+  margin-bottom: 1.25rem;
+  font-size: 1.3rem;
+  text-transform: uppercase;
+}
+
+.footer-support-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 0.75rem;
+  font-size: 1.05rem;
+}
+
+.footer-support-label {
+  font-weight: 700;
+  margin-right: 0.35rem;
+}
+
+.footer-members {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.footer-members-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(110px, 140px));
+  gap: 1rem;
+  align-items: start;
+}
+
+.footer-member-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  text-align: center;
+}
+
+.footer-member-image {
+  width: 100%;
+  max-width: 126px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  object-fit: cover;
+  background: rgba(255, 255, 255, 0.16);
+  border: 2px solid rgba(255, 255, 255, 0.2);
+}
+
+.footer-member-name {
+  font-size: 0.95rem;
+  line-height: 1.25;
+  font-weight: 600;
+}
+
+.footer-lower-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1.5rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.footer-primary-menu,
+.it-footer-small-prints-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem 1.5rem;
+  align-items: center;
+}
+
+.footer-primary-menu .list-inline-item,
+.it-footer-small-prints-list .list-inline-item {
+  margin: 0;
+}
+
+.footer-primary-menu a,
+.it-footer-small-prints-list a {
+  text-decoration: none;
+}
+
+.footer-primary-menu a:hover,
+.footer-primary-menu a:focus,
+.it-footer-small-prints-list a:hover,
+.it-footer-small-prints-list a:focus {
+  text-decoration: underline;
+}
+
+@media (max-width: 991.98px) {
+  .footer-content-section {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .footer-support {
+    max-width: none;
+  }
+
+  .footer-members {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .footer-lower-bar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .footer-main-content {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  .footer-brand-link {
+    align-items: flex-start;
+  }
+
+  .footer-brand-section .it-brand-text h2 {
+    font-size: 1.45rem;
+  }
+
+  .footer-brand-section .it-brand-text h3 {
+    font-size: 0.95rem;
+  }
+
+  .footer-support h4 {
+    font-size: 1.1rem;
+  }
+
+  .footer-support-list {
+    font-size: 1rem;
+  }
+
+  .footer-members-grid {
+    width: 100%;
+    grid-template-columns: repeat(2, minmax(110px, 1fr));
+  }
+
+  .footer-primary-menu,
+  .it-footer-small-prints-list {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+}
+
+@media (max-width: 479.98px) {
+  .footer-members-grid {
+    grid-template-columns: 1fr;
+    max-width: 150px;
+  }
+}
+</style>
diff --git a/footer.png b/footer.png
new file mode 100644
index 0000000..dc3fc09
Binary files /dev/null and b/footer.png differ