diff --git a/src/Project-Orion/CMakeLists.txt b/src/Project-Orion/CMakeLists.txt
index 418b2b0..9bc7d7a 100644
--- a/src/Project-Orion/CMakeLists.txt
+++ b/src/Project-Orion/CMakeLists.txt
@@ -28,6 +28,7 @@ qt_add_qml_module(appProject-Orion
         QML_FILES CalendarGrid.qml
         QML_FILES UserConfiguration.qml
         QML_FILES DateRangeSelector.qml
+        QML_FILES DateRangeCell.qml
 )
 
 # Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.
diff --git a/src/Project-Orion/DateRangeCell.qml b/src/Project-Orion/DateRangeCell.qml
new file mode 100644
index 0000000..f280058
--- /dev/null
+++ b/src/Project-Orion/DateRangeCell.qml
@@ -0,0 +1,37 @@
+import QtQuick
+
+Rectangle {
+    id: repeatedRectangle
+    property bool isHoveredOver: false
+
+    border.color: isHoveredOver ? highlightColor: inactiveBackgroundColor
+    border.width: 3
+    width: rectangleWidth
+    height: 20
+    color: inactiveBackgroundColor
+
+    MouseArea
+    {
+        anchors.fill: parent
+        hoverEnabled: true
+        onEntered: repeatedRectangle.isHoveredOver = true
+        onExited: repeatedRectangle.isHoveredOver = false
+    }
+
+
+    Text {
+        anchors.centerIn: parent
+        font.pixelSize: 12
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        text: myText
+        color: textColor
+    }
+
+    required property color highlightColor
+    required property color textColor
+    required property color activeBackgroundColor
+    required property color inactiveBackgroundColor
+    required property string myText
+    required property int rectangleWidth
+}
diff --git a/src/Project-Orion/DateRangeSelector.qml b/src/Project-Orion/DateRangeSelector.qml
index 9317b4e..648a8fb 100644
--- a/src/Project-Orion/DateRangeSelector.qml
+++ b/src/Project-Orion/DateRangeSelector.qml
@@ -9,22 +9,20 @@ Dialog {
     id: dateRangeRootDialog
 
     required property date currentDate
-    required property SystemPalette calendarActivePalette;
-    required property color disabledTextColor;
+    required property SystemPalette calendarActivePalette
+    required property color disabledTextColor
 
-    enum ViewMode
-    {
+    enum ViewMode {
         DAY = 0,
         MONTH = 1,
         YEAR = 2
     }
 
     property int viewMode: 0
-    property date beginDate;
-    property date endDate;
+    property date beginDate
+    property date endDate
 
-    Flickable
-    {
+    Flickable {
         onMovementStarted: console.log("Flick started")
         onMovementEnded: console.log("Flick ended")
         anchors.fill: parent
@@ -34,8 +32,7 @@ Dialog {
             id: myGridLayout
             columns: 1
             anchors.centerIn: parent
-            Label
-            {
+            Label {
                 font.pixelSize: 22
                 text: getMyDate()
             }
@@ -46,8 +43,7 @@ Dialog {
                 Layout.fillWidth: true
             }
 
-            MonthGrid
-            {
+            MonthGrid {
                 id: grid
 
                 month: currentDate.getMonth()
@@ -56,73 +52,55 @@ Dialog {
                 visible: dateRangeRootDialog.viewMode === DateRangeSelector.ViewMode.DAY
                 Layout.fillWidth: true
                 Layout.fillHeight: true
-                delegate: Rectangle {
-                    border.color: model.day === currentDate.getDay() ? "green": "transparent"
-                    border.width: 3
-                    width: 30
-                    height: 20
-                    color: calendarActivePalette ? calendarActivePalette.base: "black"
-
-                    Text {
-                        anchors.centerIn: parent
-                        font.pixelSize: 12
-                        horizontalAlignment: Text.AlignHCenter
-                        verticalAlignment: Text.AlignVCenter
-                        text: model.day
-                        color: model.month === currentDate.getMonth() ? calendarActivePalette.text : disabledTextColor
+                delegate: Row {
+                    DateRangeCell {
+                        inactiveBackgroundColor: calendarActivePalette ? calendarActivePalette.base : "black"
+                        activeBackgroundColor: calendarActivePalette ? calendarActivePalette.highlight : "yellow"
+                        highlightColor: calendarActivePalette ? calendarActivePalette.highlight : "yellow"
+                        myText: model.day
+                        rectangleWidth: 30
+                        textColor: calendarActivePalette ? (model.month === currentDate.getMonth(
+                                                                ) ? calendarActivePalette.text : calendarActivePalette.dark) : "black"
                     }
 
                     required property var model
                 }
 
-                property date currentlySelectedDate: currentDate;
+                property date currentlySelectedDate: currentDate
             }
 
-            Grid
-            {
+            Grid {
                 id: monthsGrid
                 visible: dateRangeRootDialog.viewMode === DateRangeSelector.ViewMode.MONTH
-
-                property list<string> monthNames: ["January", "February", "March", "April", "May", "June",
-                "July", "August", "September", "October", "November", "December"];
-
-                spacing: 10
+                spacing: 15
                 columns: 3
 
-                Repeater
-                {
+                Repeater {
                     model: 12
 
-                    Rectangle {
-                        width: 100
-                        height: 30
-                        color: calendarActivePalette ? calendarActivePalette.base: "black"
-                        required property int index
-                        Label
-                        {
-                            anchors.centerIn: parent
-                            font.pixelSize: 12
-                            horizontalAlignment: Text.AlignHCenter
-                            verticalAlignment: Text.AlignVCenter
-                            anchors.horizontalCenter: parent.horizontalCenter
-                            text: monthsGrid.monthNames[index]
+                    DateRangeCell {
+                        property list<string> monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
 
-                        }
+                        inactiveBackgroundColor: calendarActivePalette ? calendarActivePalette.base : "black"
+                        activeBackgroundColor: calendarActivePalette ? calendarActivePalette.highlight : "yellow"
+                        highlightColor: calendarActivePalette ? calendarActivePalette.highlight : "yellow"
+                        myText: monthNames[index]
+                        textColor: calendarActivePalette ? calendarActivePalette.text : "black"
+                        rectangleWidth: 60
+
+                        required property int index
                     }
                 }
             }
 
-            Row
-            {
-                Button
-                {
+            Row {
+                Button {
                     text: "Months"
 
                     onPressed: dateRangeRootDialog.viewMode = DateRangeSelector.ViewMode.MONTH
                 }
 
-                Button
-                {
+                Button {
                     text: "Years"
                     onPressed: dateRangeRootDialog.viewMode = DateRangeSelector.ViewMode.MONTH
                 }
@@ -130,9 +108,8 @@ Dialog {
         }
     }
 
-    function getMyDate()
-    {
-        return Qt.formatDateTime(currentDate, "MMM yyyy");
+    function getMyDate() {
+        return Qt.formatDateTime(currentDate, "MMM yyyy")
     }
 
     standardButtons: Dialog.Ok | Dialog.Cancel