diff --git a/package-lock.json b/package-lock.json
index aac0b951732..5f59998e84f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "@types/source-map": "0.5.2",
         "express": "^4.19.2",
         "fflate": "^0.8.1",
-        "igniteui-theming": "^10.0.0",
+        "igniteui-theming": "v10.1.0-beta.3",
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "rxjs": "^7.8.0",
@@ -12899,9 +12899,9 @@
       }
     },
     "node_modules/igniteui-theming": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-10.0.0.tgz",
-      "integrity": "sha512-76usU65w0amIGDAmwrxfrPKz1W0Bzfe+24/q5fxyKCyKWzbLxCUyNHdfHY//tHBEKQF5Y3uSTFbY872J4cXxpw==",
+      "version": "10.1.0-beta.3",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-10.1.0-beta.3.tgz",
+      "integrity": "sha512-JqGKOgLJLgs77OLJqaSNqcXpAi9L9E0CGEI4ttvZ7RJC54KkGhlQfAO8I5TH11//TbQ2NnQDrlvquEo2Qn4b2w==",
       "peerDependencies": {
         "sass": "^1.58.1"
       }
diff --git a/package.json b/package.json
index a4f1c71831b..1de1b81675c 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.19.2",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^10.0.0",
+    "igniteui-theming": "v10.1.0-beta.3",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
index d738d990602..8fda2e15836 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
@@ -146,6 +146,10 @@
             @extend %date-selected-special !optional;
         }
 
+        @include e(date, $mods: ('selected', 'special', 'active')) {
+            @extend %date-selected-special-active !optional;
+        }
+
         @include e(date, $mods: ('selected', 'range')) {
             @extend %date-selected-range !optional;
         }
@@ -219,10 +223,22 @@
             @extend %date-range-selected-special-last !optional;
         }
 
-        @include e(date, $mods: ('selected', 'special', 'first', 'last')) {
+        @include e(date, $mods: ('range', 'selected', 'special', 'first', 'last')) {
             @extend %date-selected-special-first-last !optional;
         }
 
+        @include e(date, $mods: ('selected', 'special', 'current', 'first', 'last')) {
+            @extend %date-selected-special-current-first-last !optional;
+        }
+
+        @include e(date, $mods: ('selected', 'special', 'current', 'preview', 'first')) {
+            @extend %date-selected-special-current-last !optional;
+        }
+
+        @include e(date, $mods: ('selected', 'special', 'current', 'preview', 'last')) {
+            @extend %date-selected-special-current-first !optional;
+        }
+
         @include e(date, $mods: ('range', 'selected', 'active')) {
             @extend %date-range-selected-active !optional;
         }
@@ -307,16 +323,26 @@
             @extend %date-special-current !optional;
         }
 
+        @include e(date, $mods: ('special', 'current', 'selected')) {
+            @extend %date-special-current-selected !optional;
+        }
+
+        @include e(date, $mods: ('special', 'current', 'selected', 'active')) {
+            @extend %date-special-current-selected-active !optional;
+        }
+
         @include e(date, $mods: ('special' 'active')) {
             @extend %date-special-active !optional;
         }
 
         @include e(date, $mods: ('special', 'current', 'active')) {
             @extend %date-special-current !optional;
+            @extend %date-special-current-active !optional;
         }
 
         @include e(date, $mods: ('special', 'current', 'active', 'range')) {
             @extend %date-special-current !optional;
+            @extend %date-special-current-active !optional;
         }
 
         @include e(date, 'first') {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
index b243ddf3658..e8ed273dea9 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
@@ -112,6 +112,10 @@
 /// @param {Color} $date-selected-current-hover-outline [null] - The :hover outline of the current selected date.
 /// @param {Color} $date-selected-current-focus-outline [null] - The :focus outline of the current selected date.
 ///
+/// @param {Color} $date-selected-special-border-color: [null] - The border color of the selected special date,
+/// @param {Color} $date-selected-special-hover-border-color: [null] - The :hover border color of the selected special date,
+/// @param {Color} $date-selected-special-focus-border-color: [null] - The :focus border color of the selected special date,
+///
 /// @param {Color} $date-current-foreground [null] - The foreground of the current date.
 /// @param {Color} $date-current-background [null] - The background color of the current date.
 /// @param {Color} $date-current-hover-foreground [null] - The :hover text color of the current date.
@@ -282,6 +286,10 @@
     $date-selected-current-hover-outline: null,
     $date-selected-current-focus-outline: null,
 
+    $date-selected-special-border-color: null,
+    $date-selected-special-hover-border-color: null,
+    $date-selected-special-focus-border-color: null,
+
     $date-current-foreground: null,
     $date-current-background: null,
     $date-current-hover-foreground: null,
@@ -636,6 +644,10 @@
         date-selected-current-hover-outline: $date-selected-current-hover-outline,
         date-selected-current-focus-outline: $date-selected-current-focus-outline,
 
+        date-selected-special-border-color: $date-selected-special-border-color,
+        date-selected-special-hover-border-color: $date-selected-special-hover-border-color,
+        date-selected-special-focus-border-color: $date-selected-special-focus-border-color,
+
         date-special-foreground: $date-special-foreground,
         date-special-background: $date-special-background,
         date-special-hover-foreground: $date-special-hover-foreground,
@@ -1036,7 +1048,7 @@
     }
 
     %pickers-display--vertical,
-    %body-display--vertical  {
+    %body-display--vertical {
         display: contents;
     }
 
@@ -1169,8 +1181,8 @@
             }
         }
 
-        // TODO hide the 7 row anly of all the children have hidden class on them,
-        //  I need a wat to know if the calendar is in multi view to achieve this
+        // TODO Hide the 7th row only if all its children have the hidden class.
+        //  To implement this, we need to know if the calendar is in multi-view state.
         //&:nth-child(7) {
         //    > %date:has(:not(%date-hidden)) {
         //        display: none;
@@ -1363,7 +1375,7 @@
                 box-shadow: inset 0 0 0 $border-size var-get($theme, 'ym-current-outline-focus-color');
             } @else {
                 box-shadow: inset 0 0 0 $border-size var(--content-background),
-                    0 0 0 rem(1px) var-get($theme, 'ym-current-outline-focus-color');
+                0 0 0 rem(1px) var-get($theme, 'ym-current-outline-focus-color');
             }
         }
     }
@@ -1542,6 +1554,28 @@
         }
     }
 
+    %date-selected-special {
+        %date-inner {
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-border-color');
+            }
+
+            &:hover {
+                &::after {
+                    border-color: var-get($theme, 'date-selected-special-hover-border-color');
+                }
+            }
+        }
+    }
+
+    %date-selected-special-active {
+        %date-inner {
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-focus-border-color');
+            }
+        }
+    }
+
     %date-selected-range {
         %date-inner {
             &::after {
@@ -1581,7 +1615,7 @@
                 }
             }
 
-            @if $variant == 'bootstrap' {
+            @if $variant == 'bootstrap' or $variant == 'indigo-design' {
                 &::after {
                     border-color: var-get($theme, 'date-special-border-color');
                 }
@@ -1589,6 +1623,16 @@
         }
     }
 
+    %date-selected-special-current-first,
+    %date-selected-special-current-last,
+    %date-selected-special-current-first-last {
+        %date-inner {
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-border-color');
+            }
+        }
+    }
+
     %date-selected-special-range-active {
         %date-inner {
             color: var-get($theme, 'date-special-focus-foreground');
@@ -1629,6 +1673,13 @@
                     background: var-get($theme, 'date-current-background');
                 }
             }
+
+            @if $variant == 'indigo-design' {
+                &::after {
+                    width: $date-size;
+                    height: $date-size;
+                }
+            }
         }
     }
 
@@ -1701,6 +1752,21 @@
                 }
             }
 
+            @if $variant == 'indigo-design' {
+                background: var-get($theme, 'date-current-background');
+                border-color: var-get($theme, 'date-current-border-color');
+
+                &:hover {
+                    background: var-get($theme, 'date-current-hover-background');
+                    border-color: var-get($theme, 'date-current-hover-border-color');
+                }
+
+                &::after {
+                    width: calc($date-inner-size - #{rem(4px)});
+                    height: calc($date-inner-size - #{rem(4px)});
+                }
+            }
+
             @if $variant == 'fluent' {
                 color: var-get($theme, 'date-current-foreground');
 
@@ -1713,6 +1779,35 @@
         }
     }
 
+    @if $variant == 'indigo-design' {
+        %date-special-current-active {
+            %date-inner {
+                color: var-get($theme, 'date-current-hover-foreground');
+                background: var-get($theme, 'date-current-focus-background');
+                border-color: var-get($theme, 'date-current-focus-border-color');
+            }
+        }
+    }
+
+    @if $variant == 'indigo-design' {
+        %date-special-current-selected {
+            %date-inner {
+                &::after {
+                    width: calc($date-inner-size - #{rem(4px)});
+                    height: calc($date-inner-size - #{rem(4px)});
+                }
+            }
+        }
+    }
+
+    %date-special-current-selected-active {
+        %date-inner {
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-border-color');
+            }
+        }
+    }
+
     %date-selected {
         %date-inner {
             color: var-get($theme, 'date-selected-foreground');
@@ -1735,16 +1830,6 @@
         }
     }
 
-    %date-selected-special {
-        %date-inner {
-            &::after {
-                @if $variant == 'material' or $variant == 'bootstrap' {
-                    border-color: var-get($theme, 'date-selected-foreground');
-                }
-            }
-        }
-    }
-
     %date-selected-current {
         %date-inner {
             color: var-get($theme, 'date-selected-current-foreground');
@@ -1754,6 +1839,12 @@
                 border-color: var-get($theme, 'date-selected-current-border-color');
             }
 
+            &::after {
+                @if $variant == 'indigo-design' {
+                    border-color: var-get($theme, 'date-current-border-color');
+                }
+            }
+
             &:hover {
                 color: var-get($theme, 'date-selected-current-hover-foreground');
                 background: var-get($theme, 'date-selected-current-hover-background');
@@ -1763,16 +1854,10 @@
                 } @else {
                     // stylelint-disable-next-line
                     &::after {
-                        border-color: var-get($theme, 'date-selected-current-hover-border-color');
+                        border-color: var-get($theme, 'date-current-hover-border-color');
                     }
                 }
             }
-
-            &::after {
-                @if $variant == 'indigo-design' {
-                    border-color: var-get($theme, 'date-selected-current-border-color');
-                }
-            }
         }
     }
 
@@ -1787,7 +1872,7 @@
 
             &::after {
                 @if $variant == 'indigo-design' {
-                    border-color: var-get($theme, 'date-selected-current-focus-border-color');
+                    border-color: var-get($theme, 'date-current-focus-border-color');
                 }
             }
         }
@@ -1871,10 +1956,16 @@
 
     %date-selected-current-range-first,
     %date-selected-current-range-last {
-        %date-inner {
-            @if $variant == 'indigo-design' {
+        @if $variant == 'indigo-design' {
+            %date-inner {
                 &::after {
-                    border-color: var-get($theme, 'date-selected-current-border-color');
+                border-color: var-get($theme, 'date-current-border-color');
+                }
+
+                &:hover {
+                    &::after {
+                        border-color: var-get($theme, 'date-current-hover-border-color');
+                    }
                 }
             }
         }
@@ -1906,6 +1997,7 @@
                 }
 
                 @if $variant == 'indigo-design' {
+                    background: var-get($theme, 'date-selected-current-range-hover-background');
                     border-color: var-get($theme, 'date-current-hover-border-color');
                 }
             }
@@ -1919,6 +2011,11 @@
                     height: sizable(rem(22px), rem(24px), rem(28px));
                 }
 
+                @if $variant == 'indigo-design' {
+                    width:  calc($date-inner-size - #{rem(4px)});
+                    height:  calc($date-inner-size - #{rem(4px)});
+                }
+
                 @if $variant == 'fluent' {
                     border-color: var-get($theme, 'date-current-foreground');
                 }
@@ -1928,7 +2025,7 @@
                 }
 
                 @if $variant == 'indigo-design' {
-                    border-color: transparent;
+                    border-color: var-get($theme, 'date-special-range-border-color');
                 }
             }
         }
@@ -1936,10 +2033,15 @@
 
     %date-selected-current-range-special-active:not(%date-selected-current-range-special-first),
     %date-selected-current-range-special-active:not(%date-selected-current-range-special-last) {
-        @if not $bootstrap-theme {
-            %date-inner {
+        %date-inner {
+            @if not $bootstrap-theme {
                 color: var-get($theme, 'date-special-focus-foreground');
             }
+
+            @if $variant == 'indigo-design' {
+                background: var-get($theme, 'date-selected-current-range-focus-background');
+                border-color: var-get($theme, 'date-current-focus-border-color');
+            }
         }
     }
 
@@ -1970,6 +2072,8 @@
                 background: var-get($theme, 'date-selected-background');
 
                 &::after {
+                    width: calc($date-inner-size - #{rem(4px)});
+                    height: calc($date-inner-size - #{rem(4px)});
                     border-color: var-get($theme, 'date-selected-current-border-color');
                 }
 
@@ -1990,10 +2094,12 @@
     %date-selected-current-range-special-active-last {
         @if $variant == 'indigo-design' {
             %date-inner {
-                color: var-get($theme, 'date-selected-focus-foreground');
-                background: var-get($theme, 'date-selected-focus-background');
+                color: var-get($theme, 'date-selected-focus-foreground') !important;
+                background: var-get($theme, 'date-selected-focus-background') !important;
 
                 &::after {
+                    width: calc($date-inner-size - #{rem(4px)});
+                    height: calc($date-inner-size - #{rem(4px)});
                     border-color: var-get($theme, 'date-selected-current-focus-border-color');
                 }
             }
@@ -2077,15 +2183,6 @@
             width: $date-size;
             border-radius: var-get($theme, 'date-border-radius');
         }
-
-        %date-inner {
-            &::after {
-                @if $variant == 'indigo-design' {
-                    width: $date-inner-size;
-                    height: $date-inner-size;
-                }
-            }
-        }
     }
 
     %date-range-selected-first-disabled,
@@ -2108,12 +2205,9 @@
     %date-range-selected-special-last {
         %date-inner {
             &::after {
-                @if $variant == 'material' or $variant == 'bootstrap' {
-                    border-color: var-get($theme, 'date-selected-foreground');
-                }
-
                 width: $date-inner-size;
                 height: $date-inner-size;
+                border-color: var-get($theme, 'date-selected-special-border-color');
             }
         }
     }
@@ -2124,6 +2218,10 @@
                 @if $variant == 'material' or $variant == 'bootstrap' {
                     border-color: var-get($theme, 'date-selected-foreground');
                 }
+
+                @if $variant == 'indigo-design' {
+                    border-color: var-get($theme, 'date-current-border-color');
+                }
             }
         }
     }
@@ -2380,12 +2478,9 @@
     %date-first-preview-special {
         %date-inner {
             &::after {
-                @if $variant != 'fluent' {
+                @if $variant == 'material' or $variant == 'bootstrap' {
                     width: var-get($theme, 'inner-size');
                     height: var-get($theme, 'inner-size');
-                }
-
-                @if $variant == 'material' or $variant == 'bootstrap' {
                     border-color: var-get($theme, 'date-selected-foreground');
                 }
             }
@@ -2431,12 +2526,9 @@
     %date-last-preview-special {
         %date-inner {
             &::after {
-                @if $variant != 'fluent' {
+                @if $variant == 'material' or $variant == 'bootstrap' {
                     width: var-get($theme, 'inner-size');
                     height: var-get($theme, 'inner-size');
-                }
-
-                @if $variant == 'material' or $variant == 'bootstrap' {
                     border-color: var-get($theme, 'date-selected-foreground');
                 }
             }