diff --git a/UI/Common/UIxPageFrame.m b/UI/Common/UIxPageFrame.m
index 2996d7d26..705ec960b 100644
--- a/UI/Common/UIxPageFrame.m
+++ b/UI/Common/UIxPageFrame.m
@@ -657,3 +657,9 @@
 
 @implementation UIxSidenavToolbarTemplate
 @end
+
+@interface UIxTopnavToolbarTemplate : UIxComponent
+@end
+
+@implementation UIxTopnavToolbarTemplate
+@end
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 3ab90fa38..da21a9c18 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -185,22 +185,7 @@
     <section layout="column" class="sg-app-content md-layout-fill">
       <md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
         <div class="md-toolbar-tools md-toolbar-tools-top sg-padded" layout="row" layout-align="space-between start">
-          <div class="sg-toolbar-group-1" layout="row">
-            <md-button ng-click="toggleLeft()" class="hide-gt-md sg-button-navicon iconButton" label:aria-label="Toggle Menu">
-              <span class="md-icon-menu"></span>
-            </md-button>
-            <div class="sg-date-group" layout="column" layout-align="space-between end">
-              <p class="sg-day" ng-bind="currentDay.weekday"><!-- weekday --></p>
-              <p class="sg-month" ng-bind="currentDay.month"><!-- month --></p>
-              <p class="sg-year" ng-bind="currentDay.year"><!-- year --></p>
-            </div>
-            <p class="sg-md-display-3 sg-date-today" ng-bind="currentDay.day"><!-- day --></p>
-          </div>
-          <div class="sg-toolbar-group-last">
-            <md-button class="iconButton" label:aria-label="Menu">
-              <i class="md-icon-more-vert"><!--icon--></i>
-            </md-button>
-          </div>
+          <var:component className="UIxTopnavToolbarTemplate" />
         </div>
         <div class="md-toolbar-tools md-toolbar-tools-bottom" layout="row" layout-align="space-between center">
           <div class="view-list cols-6 sg-padded" layout="row" layout-align="space-between center"
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index eb92f8a15..09e14f5f4 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -278,17 +278,7 @@
     <section layout="column" class="sg-app-content md-layout-fill">
       <md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
         <div class="md-toolbar-tools md-toolbar-tools-top sg-padded" layout="row" layout-align="space-between start">
-          <div class="sg-toolbar-group-1" layout="row">
-            <md-button ng-click="toggleLeft()" class="hide-gt-md sg-button-navicon iconButton" aria-label="Toggle Menu">
-              <span class="md-icon-menu"></span>
-            </md-button>
-            <div class="sg-date-group" layout="column" layout-align="space-between end">
-              <p class="sg-day" ng-bind="currentDay.weekday"><!-- weekday --></p>
-              <p class="sg-month" ng-bind="currentDay.month"><!-- month --></p>
-              <p class="sg-year" ng-bind="currentDay.year"><!-- year --></p>
-            </div>
-            <p class="sg-md-display-3 sg-date-today" ng-bind="currentDay.day"><!-- day --></p>
-          </div>
+          <var:component className="UIxTopnavToolbarTemplate" />
           <div class="sg-toolbar-group-last">
             <md-button class="iconButton" label:aria-label="More">
               <i class="md-icon-more-vert"><!--icon--></i>
diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index 3f43dec70..86fc4db20 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -45,17 +45,7 @@
       <!-- TOP RIGHT TOOLBAR -->
       <md-toolbar layout="row" layout-align="space-between start" class="md-tall">
         <div class="md-toolbar-tools md-toolbar-tools-top sg-padded" layout="row" layout-align="space-between start">
-          <div class="sg-toolbar-group-1" layout="row">
-            <md-button ng-click="toggleLeft()" class="hide-gt-md sg-button-navicon iconButton" label:aria-label="Toggle Menu">
-              <span class="md-icon-menu"></span>
-            </md-button>
-            <div class="sg-date-group" layout="column" layout-align="space-between end">
-              <p class="sg-day" ng-bind="currentDay.weekday"><!-- weekday --></p>
-              <p class="sg-month" ng-bind="currentDay.month"><!-- month --></p>
-              <p class="sg-year" ng-bind="currentDay.year"><!-- year --></p>
-            </div>
-            <p class="sg-md-display-3 sg-date-today" ng-bind="currentDay.day"><!-- day --></p>
-          </div>
+          <var:component className="UIxTopnavToolbarTemplate" />
           <div class="sg-toolbar-group-last">
             <md-button class="iconButton" label:aria-label="Menu">
               <i class="md-icon-more-vert"><!--icon--></i>
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index 45e57b7ef..2333e49e4 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -166,17 +166,7 @@
              ng-controller="CalendarListController as list">
       <md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
         <div class="md-toolbar-tools md-toolbar-tools-top" layout="row" layout-align="space-between start">
-          <div class="sg-toolbar-group-1" layout="row">
-            <md-button ng-click="toggleLeft()" class="md-hide-gt-md sg-button-navicon iconButton" label:aria-label="Toggle Menu">
-              <span class="md-icon-menu"></span>
-            </md-button>
-            <div class="sg-date-group" layout="column" layout-align="space-between end">
-              <p class="sg-day" ng-bind="currentDay.weekday"><!-- weekday --></p>
-              <p class="sg-month" ng-bind="currentDay.month"><!-- month --></p>
-              <p class="sg-year" ng-bind="currentDay.year"><!-- year --></p>
-            </div>
-            <p class="sg-md-display-3 sg-date-today" ng-bind="currentDay.day"><!-- day --></p>
-          </div>
+          <var:component className="UIxTopnavToolbarTemplate" />
           <div class="sg-toolbar-group-2">
             <md-button class="iconButton" label:aria-label="Search">
               <i class="md-icon-search"><!--icon--></i>
@@ -198,7 +188,7 @@
               <span class="md-icon-create"><!-- icon --></span>
             </div>
           </div>
-          <div class="spacer cols-8"><!-- spacer -->
+          <div class="spacer"><!-- spacer -->
             <a class="iconButton md-button md-default-theme"
                label:aria-label="Day"
                href="#/calendar/day"><i class="md-icon-view-day"><!-- day view --></i></a>
diff --git a/UI/Templates/UIxTopnavToolbarTemplate.wox b/UI/Templates/UIxTopnavToolbarTemplate.wox
new file mode 100644
index 000000000..1d54b0412
--- /dev/null
+++ b/UI/Templates/UIxTopnavToolbarTemplate.wox
@@ -0,0 +1,19 @@
+<?xml version='1.0' standalone='yes'?>
+<container
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:var="http://www.skyrix.com/od/binding"
+    xmlns:const="http://www.skyrix.com/od/constant"
+    xmlns:label="OGo:label"
+    >
+  <div class="sg-toolbar-group-1" layout="row">
+    <md-button ng-click="toggleLeft()" class="hide-gt-md sg-button-navicon iconButton" aria-label="Toggle Menu">
+      <span class="md-icon-menu"></span>
+    </md-button>
+    <div class="sg-date-group" layout="column" layout-align="space-between end">
+      <p class="sg-day" ng-bind="currentDay.weekday"><!-- weekday --></p>
+      <p class="sg-month" ng-bind="currentDay.month"><!-- month --></p>
+      <p class="sg-year" ng-bind="currentDay.year"><!-- year --></p>
+    </div>
+    <p class="sg-md-display-3 sg-date-today" ng-bind="currentDay.day"><!-- day --></p>
+  </div>
+</container>