diff --git a/Modules/Bar/Bar.qml b/Modules/Bar/Bar.qml
index 7041f41..e4c7f3b 100644
--- a/Modules/Bar/Bar.qml
+++ b/Modules/Bar/Bar.qml
@@ -73,7 +73,7 @@ PanelWindow {
         Layout.alignment: Qt.AlignVCenter
       }
 
-      NClock {}
+      Clock {}
 
       NIconButton {
         id: demoPanelToggler
diff --git a/Modules/Bar/Clock.qml b/Modules/Bar/Clock.qml
new file mode 100644
index 0000000..bc1215a
--- /dev/null
+++ b/Modules/Bar/Clock.qml
@@ -0,0 +1,32 @@
+import QtQuick
+import qs.Services
+import qs.Widgets
+
+// Clock Icon with attached calendar
+NClock {
+  id: root
+
+  NTooltip {
+    id: tooltip
+    text: Time.dateString
+    target: root
+  }
+
+  NCalendar {
+    id: calendar
+    visible: false
+  }
+
+  onEntered: function (){
+    if (!calendar.visible) {
+      tooltip.show()
+    }
+  }
+  onExited: function (){
+    tooltip.hide()
+  }
+  onClicked: function () {
+    calendar.visible = !calendar.visible
+    tooltip.hide()
+  }
+}
diff --git a/Widgets/NClock.qml b/Widgets/NClock.qml
index d883e27..52ec789 100644
--- a/Widgets/NClock.qml
+++ b/Widgets/NClock.qml
@@ -6,6 +6,9 @@ Rectangle {
   id: root
 
   readonly property real scaling: Scaling.scale(screen)
+  property var onEntered: function () {}
+  property var onExited: function () {}
+  property var onClicked: function () {}
 
   width: textItem.paintedWidth
   height: textItem.paintedHeight
@@ -22,28 +25,8 @@ Rectangle {
     anchors.fill: parent
     cursorShape: Qt.PointingHandCursor
     hoverEnabled: true
-    onEntered: {
-      if (!calendar.visible) {
-        tooltip.show()
-      }
-    }
-    onExited: {
-      tooltip.hide()
-    }
-    onClicked: function () {
-      calendar.visible = !calendar.visible
-      tooltip.hide()
-    }
-  }
-
-  NCalendar {
-    id: calendar
-    visible: false
-  }
-
-  NTooltip {
-    id: tooltip
-    text: Time.dateString
-    target: root
+    onEntered:  root.onEntered()
+    onExited: root.onExited()
+    onClicked: root.onClicked()
   }
 }