diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/CardCalendar.jsx b/src/components/ItaliaTheme/Blocks/Listing/Commons/CardCalendar.jsx
index fcbc4dbfa..f5c6cfa91 100644
--- a/src/components/ItaliaTheme/Blocks/Listing/Commons/CardCalendar.jsx
+++ b/src/components/ItaliaTheme/Blocks/Listing/Commons/CardCalendar.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl, defineMessages } from 'react-intl';
-
+import cx from 'classnames';
 import {
   viewDate,
   getRealStartAndEndWithRecurrence,
@@ -34,48 +34,118 @@ export const CardCalendar = ({ start, end, recurrence, rrule }) => {
     intl,
   );
   if ((_start && _end) || recurrenceDates) {
-    if (!recurrenceDates && _start.isSame(_end, 'day')) {
-      return (
-        <div className="card-calendar d-flex flex-column justify-content-center">
-          <span className="card-date">{_start.format('D')}</span>
-          <span className="card-day">{_end.format('MMMM')}</span>
-        </div>
-      );
+    if (!recurrenceDates) {
+      if (_start.isSame(_end, 'day')) {
+        return (
+          <div className="card-calendar d-flex flex-column justify-content-center">
+            <span className="card-date date">{_start.format('D')}</span>
+            <span className="card-day date">{_end.format('MMMM')}</span>
+          </div>
+        );
+      } else if (!_start.isSame(_end, 'year')) {
+        return (
+          <div className="custom-calendar-card">
+            <div className="card-calendar extended d-flex flex-column justify-content-center px-2 w-auto">
+              <span className="card-date d-flex justify-content-between align-items-baseline">
+                <div className="date-label me-1">
+                  {intl.formatMessage(messages.from)}
+                </div>
+                <span className="date">{_start.format('DD/MM/YY')}</span>
+              </span>
+              <span className="card-date d-flex justify-content-between align-items-baseline">
+                <div className="date-label me-1">
+                  {intl.formatMessage(messages.to)}
+                </div>
+                <span className="date">{_end.format('DD/MM/YY')}</span>
+              </span>
+            </div>
+          </div>
+        );
+      } else {
+        return (
+          <div className="custom-calendar-card">
+            <div className="card-calendar extended d-flex flex-column justify-content-center px-2">
+              <span className="card-date d-flex justify-content-between align-items-baseline">
+                <div className="date-label me-1">
+                  {intl.formatMessage(messages.from)}
+                </div>
+                <span className="date">{_start.format('DD/MM')}</span>
+              </span>
+              <span className="card-date d-flex justify-content-between align-items-baseline">
+                <div className="date-label me-1">
+                  {intl.formatMessage(messages.to)}
+                </div>
+                <span className="date">{_end.format('DD/MM')}</span>
+              </span>
+            </div>
+          </div>
+        );
+      }
     } else if (recurrenceDates) {
+      let dateFormat = 'DD/MM';
+      if (
+        !recurrenceDates?.recurrenceStart?.isSame(
+          recurrenceDates?.recurrenceEnd,
+          'year',
+        )
+      )
+        dateFormat = 'DD/MM/YY';
       return (
         <div className="custom-calendar-card">
-          <div className="card-calendar d-flex flex-column justify-content-center">
-            <span className="card-date d-flex justify-content-center align-items-baseline">
-              <div className="date-label mr-1">
+          <div
+            className={cx(
+              'card-calendar extended d-flex flex-column justify-content-center px-2',
+              {
+                'w-auto': dateFormat !== 'DD/MM',
+              },
+            )}
+          >
+            <span className="card-date d-flex justify-content-between align-items-baseline">
+              <div className="date-label me-1">
                 {intl.formatMessage(messages.from)}
               </div>
               <span className="date">
-                {recurrenceDates.recurrenceStart?.format('DD/MM')}
+                {recurrenceDates.recurrenceStart?.format(dateFormat)}
               </span>
             </span>
-            <span className="card-date d-flex justify-content-center align-items-baseline">
-              <div className="date-label mr-1">
+            <span className="card-date d-flex justify-content-between align-items-baseline">
+              <div className="date-label me-1">
                 {intl.formatMessage(messages.to)}
               </div>
               <span className="date">
-                {recurrenceDates?.recurrenceEnd?.format('DD/MM')}
+                {recurrenceDates?.recurrenceEnd?.format(dateFormat)}
               </span>
             </span>
           </div>
         </div>
       );
-    } else {
+    } else if (_start.format('M') === _end.format('M')) {
       return (
         <div className="custom-calendar-card">
           <div className="card-calendar d-flex flex-column justify-content-center">
             <span className="card-date d-flex justify-content-center align-items-baseline">
-              <div className="date-label mr-1">
+              <span className="date day start-date">{_start.format('D')}</span>{' '}
+              <span className="date day divider">-</span>{' '}
+              <span className="date day end-date">{_end.format('D')}</span>
+            </span>
+            <span className="card-date d-flex justify-content-center align-items-baseline">
+              <span className="date month">{_end.format('MMM')}</span>
+            </span>
+          </div>
+        </div>
+      );
+    } else {
+      return (
+        <div className="custom-calendar-card">
+          <div className="card-calendar extended d-flex flex-column justify-content-center px-2">
+            <span className="card-date d-flex justify-content-between align-items-baseline">
+              <div className="date-label me-1">
                 {intl.formatMessage(messages.from)}
               </div>
               <span className="date">{_start.format('DD/MM')}</span>
             </span>
-            <span className="card-date d-flex justify-content-center align-items-baseline">
-              <div className="date-label mr-1">
+            <span className="card-date d-flex justify-content-between align-items-baseline">
+              <div className="date-label me-1">
                 {intl.formatMessage(messages.to)}
               </div>
               <span className="date">{_end.format('DD/MM')}</span>
diff --git a/theme/ItaliaTheme/Components/_card.scss b/theme/ItaliaTheme/Components/_card.scss
new file mode 100644
index 000000000..45ef7e9e4
--- /dev/null
+++ b/theme/ItaliaTheme/Components/_card.scss
@@ -0,0 +1,88 @@
+.public-ui {
+  .card-title {
+    margin: 0 !important;
+    margin-bottom: 1rem !important;
+    line-height: 1em;
+
+    a {
+      color: $primary;
+      font-size: 1.125rem;
+      line-height: 1.625rem;
+    }
+  }
+
+  .genericcard {
+    .card-title {
+      margin: 0 !important;
+      margin-bottom: 0.625rem !important;
+      line-height: 1em;
+
+      a {
+        color: $primary;
+        font-size: 1.125rem;
+        line-height: 1.625rem;
+      }
+    }
+  }
+
+  .card-wrapper.card-teaser-wrapper > .card-teaser {
+    &.attachment {
+      flex-wrap: nowrap;
+
+      .card-title {
+        a {
+          font-size: 1rem;
+        }
+      }
+    }
+
+    .card-body {
+      .category-top {
+        hyphens: auto;
+      }
+    }
+  }
+
+  .card.bigborder {
+    border: 1px solid #d9dadb;
+    border-left-width: 10px !important;
+  }
+}
+
+.custom-calendar-card {
+  .card-calendar.extended {
+    width: 100px;
+
+    .card-date .date-label {
+      @include rem-size(font-size, 16);
+      font-weight: 600;
+
+      + .date {
+        @include rem-size(font-size, 20);
+      }
+    }
+  }
+
+  .card-calendar {
+    .card-date {
+      .date {
+        font-family: $font-family-sans-serif;
+        font-size: 1.3rem;
+        font-weight: 700;
+        line-height: 1.4rem;
+
+        &.day {
+          @include rem-size(font-size, 28);
+          @include rem-size(line-height, 28);
+        }
+
+        &.month {
+          font-weight: 600;
+          text-transform: capitalize;
+          @include rem-size(font-size, 16);
+          @include rem-size(line-height, 21.1);
+        }
+      }
+    }
+  }
+}
diff --git a/theme/ItaliaTheme/Views/_common.scss b/theme/ItaliaTheme/Views/_common.scss
index fccca617d..c29da942e 100644
--- a/theme/ItaliaTheme/Views/_common.scss
+++ b/theme/ItaliaTheme/Views/_common.scss
@@ -103,11 +103,6 @@ h6 {
 }
 
 .public-ui {
-  .card.bigborder {
-    border: 1px solid #d9dadb;
-    border-left-width: 10px !important;
-  }
-
   .link-esterni {
     .card-title {
       border-bottom: 1px solid $neutral-1-a2;
@@ -119,32 +114,6 @@ h6 {
     font-size: 1.4rem;
   }
 
-  .card-title {
-    margin: 0 !important;
-    margin-bottom: 1rem !important;
-    line-height: 1em;
-
-    a {
-      color: $primary;
-      font-size: 1.125rem;
-      line-height: 1.625rem;
-    }
-  }
-
-  .genericcard {
-    .card-title {
-      margin: 0 !important;
-      margin-bottom: 0.625rem !important;
-      line-height: 1em;
-
-      a {
-        color: $primary;
-        font-size: 1.125rem;
-        line-height: 1.625rem;
-      }
-    }
-  }
-
   .link-list-wrapper {
     ul {
       li {
@@ -251,47 +220,6 @@ div.sticky-wrapper {
   }
 }
 
-.card-wrapper {
-  .custom-calendar-card {
-    .card-calendar {
-      width: 6.4rem;
-      text-align: left;
-
-      .date-label {
-        width: 1.4rem;
-        font-family: $font-family-monospace;
-        font-size: 0.7rem;
-        font-weight: 500;
-        text-align: center;
-        text-transform: lowercase;
-      }
-
-      .date {
-        font-family: $font-family-monospace;
-        font-size: 1.3rem;
-        font-weight: 200;
-      }
-    }
-  }
-}
-
-.public-ui .card-wrapper.card-teaser-wrapper > .card-teaser {
-  &.attachment {
-    flex-wrap: nowrap;
-
-    .card-title {
-      a {
-        font-size: 1rem;
-      }
-    }
-  }
-  .card-body {
-    .category-top {
-      hyphens: auto;
-    }
-  }
-}
-
 .icon-argument-container {
   display: flex;
 
diff --git a/theme/_mixins.scss b/theme/_mixins.scss
new file mode 100644
index 000000000..afb249093
--- /dev/null
+++ b/theme/_mixins.scss
@@ -0,0 +1,7 @@
+@mixin rem-size($key, $value) {
+  #{$key}: calc($value / 18) + rem;
+}
+
+@mixin margin-size($key, $value) {
+  #{$key}: calc($value / 18) + em;
+}
diff --git a/theme/site.scss b/theme/site.scss
index 5bed190b0..f81c1892a 100644
--- a/theme/site.scss
+++ b/theme/site.scss
@@ -1,6 +1,7 @@
 @import 'site-variables';
 @import 'bootstrap-override/bootstrap-italia-site';
 @import 'cms-ui';
+@import 'mixins';
 @import 'extras/blocks';
 @import 'extras/sidebar';
 @import 'extras/toolbar';
@@ -25,6 +26,7 @@
 @import 'ItaliaTheme/Addons/customerSatisfaction';
 @import 'ItaliaTheme/Addons/volto-gdpr-privacy';
 @import 'ItaliaTheme/Components/unauthorized';
+@import 'ItaliaTheme/Components/card';
 @import 'ItaliaTheme/Components/parentSiteMenu';
 @import 'ItaliaTheme/Components/tertiaryMenu';
 @import 'ItaliaTheme/Components/subsiteHeader';