diff --git a/CHANGELOG.md b/CHANGELOG.md
index ba02589d1..39ffd7853 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,7 @@ v1.13: In Progress
 - Switching to a new sub tool clears any unsaved changes displaying in the designer. [Bugfix]
 - Select parent row code looks at whether a content item is selected and returns the column that is relevant to the current environment status. [Bugfix]
 - Added a Date Element tool to the Form Builder along with the Styling and Delete sub tools. [Feature]
-- Added a Heading & Date content item to the Content Manager. [Feature]
+- Added a Heading & Date content item to the Content Manager along with the Styling, Typography and Delete sub tools. [Feature]
 - Clear the selected tool for the Form Builder upon logout. [Bugfix]
 - Refactoring
 
diff --git a/README.md b/README.md
index d2f10dff9..f72828401 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@ I am working towards reinstating the Website Manager and the Media Library. As s
 
 Latest stable release 
 --------
-v1.12 - Released 14th February 2017
+v1.13 - Released 18th February 2017
  
 Overview
 --------
diff --git a/application/configs/environment.php b/application/configs/environment.php
index e016a5fcb..5505f7177 100644
--- a/application/configs/environment.php
+++ b/application/configs/environment.php
@@ -16,4 +16,4 @@
 // Version number for current release
 $version_no = 'v1.13';
 // Release date for current release
-$version_release_date = 'In progress';
+$version_release_date = '18th February 2017';
diff --git a/application/modules/dlayer/views/scripts/index/index.phtml b/application/modules/dlayer/views/scripts/index/index.phtml
index 7ba4f801f..76572e1aa 100644
--- a/application/modules/dlayer/views/scripts/index/index.phtml
+++ b/application/modules/dlayer/views/scripts/index/index.phtml
@@ -31,20 +31,19 @@
 	</div>
 
     <div class="col-md-6 col-sm-6 col-xs-12">
-        <h3><span class="label label-success">v1.12</span> Mixed bag <small class="text-muted">(14th February 2017)</small></h3>
+        <h3><span class="label label-success">v1.13</span> Bugs & Date <small class="text-muted">(18th February 2017)</small></h3>
 
         <ul>
-            <li>Added a delete sub tool to each of the content items. [Feature]</li>
-            <li>The Content Manager does not display deleted content items; data remains pending feature to restore.</li>
-            <li>The re-order code which runs after an element is deleted in the Form Builder was sorting incorrectly. [Bugfix]</li>
-            <li>Added an admin controller to the Content Manager. [Refactoring]</li>
-            <li>Added an admin controller to the default module. [Refactoring]</li>
-            <li>Added the control bar to the Form Builder and Content Manager previews. There is a button to return to the Designer/Manager and in the Form Builder an option to set the width of the preview. [Feature]</li>
-            <li>The Form Builder displays the assigned title and subtitle. [Bugfix]</li>
-            <li>Model cleanup. [Refactoring]</li>
-            <li>Minor fixes and improvements.</li>
+            <li>Switching to a new sub tool clears any unsaved changes displaying in the designer. [Bugfix]</li>
+            <li>Select parent row code looks at whether a content item is selected and returns the column that is relevant to the current environment status. [Bugfix]</li>
+            <li>Added a Date Element tool to the Form Builder along with the Styling and Delete sub tools. [Feature]</li>
+            <li>Added a Heading & Date content item to the Content Manager along with the Styling, Typography and Delete sub tools. [Feature]</li>
+            <li>Clear the selected tool for the Form Builder upon logout. [Bugfix]</li>
+            <li>Refactoring.</li>
         </ul>
 
+        <h3><span class="label label-default">v1.12</span> Mixed bag <small class="text-muted">(14th February 2017)</small></h3>
+
         <h3><span class="label label-default">v1.11</span> Form Builder part 5 <small class="text-muted">(10th February 2017)</small></h3>
 
 	    <h3><span class="label label-default">v1.10</span> Form Builder part 4 <small class="text-muted">(4th February 2017)</small></h3>
diff --git a/library/Dlayer/DesignerTool/ContentManager/HeadingDate/Ribbon.php b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/Ribbon.php
index ddc87bb8c..7ae240711 100644
--- a/library/Dlayer/DesignerTool/ContentManager/HeadingDate/Ribbon.php
+++ b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/Ribbon.php
@@ -128,7 +128,10 @@ protected function previewData()
 
             $this->contentData();
 
-            $this->preview_data = array();
+            $this->preview_data = array(
+                'heading' => $this->content_data['heading'],
+                'date' => date($this->content_data['format'], strtotime($this->content_data['date']))
+            );
 
             $this->preview_data_fetched = true;
         }
diff --git a/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Delete/Form.php b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Delete/Form.php
new file mode 100644
index 000000000..11d6b522f
--- /dev/null
+++ b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Delete/Form.php
@@ -0,0 +1,29 @@
+<?php
+
+/**
+ * Delete sub tool for heading & date content items
+ *
+ * @author Dean Blackborough
+ * @copyright G3D Development Limited
+ * @license https://github.com/Dlayer/dlayer/blob/master/LICENSE
+ */
+class Dlayer_DesignerTool_ContentManager_HeadingDate_SubTool_Delete_Form extends
+    Dlayer_DesignerTool_ContentManager_Shared_Form_Delete
+{
+    /**
+     * Set the properties for the form
+     *
+     * @param array $tool Tool and environment data array
+     * @param array $data Current data for content item
+     * @param integer $instances Instances of content data on web site
+     * @param array $element_data
+     * @param array|NULL $options Zend form options
+     */
+    public function __construct(array $tool, array $data, $instances, array $element_data, $options = null)
+    {
+        $this->content_type = 'heading-date';
+        $this->sub_tool_model = 'Delete';
+
+        parent::__construct($tool, $data, $instances, $element_data, $options);
+    }
+}
diff --git a/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Delete/Model.php b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Delete/Model.php
new file mode 100644
index 000000000..a97744cdb
--- /dev/null
+++ b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Delete/Model.php
@@ -0,0 +1,14 @@
+<?php
+
+/**
+ * Data model for the heading & date delete sub tool
+ *
+ * @author Dean Blackborough <dean@g3d-development.com>
+ * @copyright G3D Development Limited
+ * @license https://github.com/Dlayer/dlayer/blob/master/LICENSE
+ */
+class Dlayer_DesignerTool_ContentManager_HeadingDate_SubTool_Delete_Model extends
+    Dlayer_DesignerTool_ContentManager_Shared_Model_Delete
+{
+    // No custom logic required
+}
diff --git a/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Delete/Ribbon.php b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Delete/Ribbon.php
new file mode 100644
index 000000000..92d41087b
--- /dev/null
+++ b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Delete/Ribbon.php
@@ -0,0 +1,54 @@
+<?php
+
+/**
+ * Heading & Date ribbon data class for delete sub tool
+ *
+ * @author Dean Blackborough <dean@g3d-development.com>
+ * @copyright G3D Development Limited
+ * @license https://github.com/Dlayer/dlayer/blob/master/LICENSE
+ */
+class Dlayer_DesignerTool_ContentManager_HeadingDate_SubTool_Delete_Ribbon extends Dlayer_Ribbon_Content
+{
+    /**
+     * Fetch the view data for the current tool tab, typically the returned array will have at least two indexes,
+     * one for the form and another with the data required by the preview functions
+     *
+     * @param array $tool Tool and environment data
+     *
+     * @return array
+     */
+    public function viewData(array $tool)
+    {
+        $this->tool = $tool;
+
+        return array(
+            'form' => new Dlayer_DesignerTool_ContentManager_HeadingDate_SubTool_Delete_Form(
+                $tool,
+                array(),
+                0,
+                array()
+            )
+        );
+    }
+
+    /**
+     * Fetch the data array for the content item, if in edit mode mode populate the values otherwise every value is
+     * set to FALSE, the tool form can simply check to see if the value is FALSe or not and then set the existing value
+     *
+     * @return array
+     */
+    protected function contentData()
+    {
+        // TODO: Implement contentData() method.
+    }
+
+    /**
+     * Fetch the number of instances for the content items data
+     *
+     * @return integer
+     */
+    protected function instancesOfData()
+    {
+        // TODO: Implement instancesOfData() method.
+    }
+}
diff --git a/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Delete/Tool.php b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Delete/Tool.php
new file mode 100644
index 000000000..80da30294
--- /dev/null
+++ b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Delete/Tool.php
@@ -0,0 +1,14 @@
+<?php
+
+/**
+ * Heading & date delete sub tool
+ *
+ * @author Dean Blackborough <dean@g3d-development.com>
+ * @copyright G3D Development Limited
+ * @license https://github.com/Dlayer/dlayer/blob/master/LICENSE
+ */
+class Dlayer_DesignerTool_ContentManager_HeadingDate_SubTool_Delete_Tool extends
+    Dlayer_DesignerTool_ContentManager_Shared_Tool_Delete
+{
+    // No custom logic required
+}
diff --git a/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Delete/scripts/delete.phtml b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Delete/scripts/delete.phtml
new file mode 100644
index 000000000..6b1200282
--- /dev/null
+++ b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Delete/scripts/delete.phtml
@@ -0,0 +1,9 @@
+<?php /** @var $this Dlayer_View_Codehinting */ ?>
+
+<div class="col-md-12 col-sm-12 small">
+    <?php
+    if ($this->data != false) {
+        echo $this->data['form'];
+    }
+    ?>
+</div>
diff --git a/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Styling/Form.php b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Styling/Form.php
new file mode 100644
index 000000000..6b1d71126
--- /dev/null
+++ b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Styling/Form.php
@@ -0,0 +1,29 @@
+<?php
+
+/**
+ * Styling sub tools for the heading & date content item
+ *
+ * @author Dean Blackborough
+ * @copyright G3D Development Limited
+ * @license https://github.com/Dlayer/dlayer/blob/master/LICENSE
+ */
+class Dlayer_DesignerTool_ContentManager_HeadingDate_SubTool_Styling_Form extends
+    Dlayer_DesignerTool_ContentManager_Shared_Form_Styling
+{
+    /**
+     * Set the properties for the form
+     *
+     * @param array $tool Tool and environment data array
+     * @param array $data Current data for content item
+     * @param integer $instances Instances of content data on web site
+     * @param array $element_data
+     * @param array|NULL $options Zend form options
+     */
+    public function __construct(array $tool, array $data, $instances, array $element_data, $options = null)
+    {
+        $this->content_type = 'heading-date';
+        $this->sub_tool_model = 'Styling';
+
+        parent::__construct($tool, $data, $instances, $element_data, $options);
+    }
+}
diff --git a/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Styling/Model.php b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Styling/Model.php
new file mode 100644
index 000000000..ca7c26ab1
--- /dev/null
+++ b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Styling/Model.php
@@ -0,0 +1,14 @@
+<?php
+
+/**
+ * Data model for styling sub tool
+ *
+ * @author Dean Blackborough <dean@g3d-development.com>
+ * @copyright G3D Development Limited
+ * @license https://github.com/Dlayer/dlayer/blob/master/LICENSE
+ */
+class Dlayer_DesignerTool_ContentManager_HeadingDate_SubTool_Styling_Model extends
+    Dlayer_DesignerTool_ContentManager_Shared_Model_Styling
+{
+    // No custom logic, here if required
+}
diff --git a/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Styling/Ribbon.php b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Styling/Ribbon.php
new file mode 100644
index 000000000..a5725cf5f
--- /dev/null
+++ b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Styling/Ribbon.php
@@ -0,0 +1,97 @@
+<?php
+
+/**
+ * Heading & Date content item ribbon data class
+ *
+ * @author Dean Blackborough <dean@g3d-development.com>
+ * @copyright G3D Development Limited
+ * @license https://github.com/Dlayer/dlayer/blob/master/LICENSE
+ */
+class Dlayer_DesignerTool_ContentManager_HeadingDate_SubTool_Styling_Ribbon extends Dlayer_Ribbon_Content
+{
+    /**
+     * Fetch the view data for the current tool tab, typically the returned array will have at least two indexes,
+     * one for the form and another with the data required by the preview functions
+     *
+     * @param array $tool Tool and environment data
+     *
+     * @return array
+     */
+    public function viewData(array $tool)
+    {
+        $this->tool = $tool;
+
+        $this->contentData();
+        $this->previewData();
+
+        return array(
+            'form' => new Dlayer_DesignerTool_ContentManager_HeadingDate_SubTool_Styling_Form(
+                $tool,
+                $this->content_data,
+                $this->instancesOfData(),
+                array()
+            ),
+            'preview' => $this->preview_data
+        );
+    }
+
+    /**
+     * Fetch the data array for the content item, if in edit mode mode populate the values otherwise every value is
+     * set to FALSE, the tool form can simply check to see if the value is FALSe or not and then set the existing value
+     *
+     * @return void Write to $this->content_data
+     */
+    protected function contentData()
+    {
+        if ($this->content_fetched === false) {
+            $this->content_data = array(
+                'content_background_color' => false,
+            );
+
+            if ($this->tool['content_id'] !== null) {
+                $model_styling = new Dlayer_DesignerTool_ContentManager_HeadingDate_SubTool_Styling_Model();
+                $content_background_color = $model_styling->backgroundColor(
+                    $this->tool['site_id'],
+                    $this->tool['page_id'],
+                    $this->tool['content_id']
+                );
+
+                if ($content_background_color !== false) {
+                    $this->content_data['content_background_color'] = $content_background_color;
+                }
+            }
+
+            $this->content_fetched = true;
+        }
+    }
+
+    /**
+     * Fetch the data required by the preview functions
+     *
+     * @return void
+     */
+    protected function previewData()
+    {
+        if ($this->preview_data_fetched === false) {
+
+            $this->contentData();
+
+            $this->preview_data = array(
+                'id' => $this->tool['content_id'],
+                'background_color' => $this->content_data['content_background_color']
+            );
+
+            $this->preview_data_fetched = true;
+        }
+    }
+
+    /**
+     * Fetch the number of instances for the content items data
+     *
+     * @return integer
+     */
+    protected function instancesOfData()
+    {
+        return 0;
+    }
+}
diff --git a/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Styling/Tool.php b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Styling/Tool.php
new file mode 100644
index 000000000..e794f7d0e
--- /dev/null
+++ b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Styling/Tool.php
@@ -0,0 +1,49 @@
+<?php
+
+/**
+ * Styling sub tool
+ *
+ * @author Dean Blackborough <dean@g3d-development.com>
+ * @copyright G3D Development Limited
+ * @license https://github.com/Dlayer/dlayer/blob/master/LICENSE
+ */
+class Dlayer_DesignerTool_ContentManager_HeadingDate_SubTool_Styling_Tool extends
+    Dlayer_DesignerTool_ContentManager_Shared_Tool_Styling
+{
+    /**
+     * Generate the return ids array
+     *
+     * @return array
+     */
+    protected function returnIds()
+    {
+        return array(
+            array(
+                'type' => 'page_id',
+                'id' => $this->page_id,
+            ),
+            array(
+                'type' => 'row_id',
+                'id' => $this->row_id,
+            ),
+            array(
+                'type' => 'column_id',
+                'id' => $this->column_id,
+            ),
+            array(
+                'type' => 'tool',
+                'id' => 'HeadingDate',
+            ),
+            array(
+                'type' => 'tab',
+                'id' => 'styling',
+                'sub_tool' => 'Styling'
+            ),
+            array(
+                'type' => 'content_id',
+                'id' => $this->content_id,
+                'content_type' => 'heading-date'
+            )
+        );
+    }
+}
diff --git a/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Styling/scripts/styling.phtml b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Styling/scripts/styling.phtml
new file mode 100644
index 000000000..5f8bb2491
--- /dev/null
+++ b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Styling/scripts/styling.phtml
@@ -0,0 +1,24 @@
+<?php /** @var $this Dlayer_View_Codehinting */?>
+
+<script>
+    previewContentManager.contentItemBackgroundColor(<?php echo $this->data['preview']['id']; ?>, '<?php echo $this->data['preview']['background_color']; ?>');
+</script>
+
+<div class="col-md-12 col-sm-12">
+    <p class="dev-note bg-danger unsaved">Data has been modified!</p>
+</div>
+
+<div class="col-md-12 col-sm-12 small">
+    <?php echo $this->colorPicker()->picker($this->color_picker_data['palettes'],
+        $this->color_picker_data['history'], true); ?>
+</div>
+
+<div class="col-md-12 col-sm-12 small">
+    <?php
+    if($this->data != FALSE) {
+        echo $this->data['form'];
+    }
+    ?>
+</div>
+
+<?php echo $this->colorPicker()->javascript(); ?>
diff --git a/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Typography/Form.php b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Typography/Form.php
new file mode 100644
index 000000000..9988cc0fe
--- /dev/null
+++ b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Typography/Form.php
@@ -0,0 +1,29 @@
+<?php
+
+/**
+ * Typography sub tools for the heading & date content item
+ *
+ * @author Dean Blackborough
+ * @copyright G3D Development Limited
+ * @license https://github.com/Dlayer/dlayer/blob/master/LICENSE
+ */
+class Dlayer_DesignerTool_ContentManager_HeadingDate_SubTool_Typography_Form extends
+    Dlayer_DesignerTool_ContentManager_Shared_Form_Typography
+{
+    /**
+     * Set the properties for the form
+     *
+     * @param array $tool Tool and environment data array
+     * @param array $data Current data for content item
+     * @param integer $instances Instances of content data on web site
+     * @param array $element_data
+     * @param array|NULL $options Zend form options
+     */
+    public function __construct(array $tool, array $data, $instances, array $element_data, $options = null)
+    {
+        $this->content_type = 'heading-date';
+        $this->sub_tool_model = 'Typography';
+
+        parent::__construct($tool, $data, $instances, $element_data, $options);
+    }
+}
diff --git a/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Typography/Model.php b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Typography/Model.php
new file mode 100644
index 000000000..7e6c4ead9
--- /dev/null
+++ b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Typography/Model.php
@@ -0,0 +1,14 @@
+<?php
+
+/**
+ * Data model for typography sub tool
+ *
+ * @author Dean Blackborough <dean@g3d-development.com>
+ * @copyright G3D Development Limited
+ * @license https://github.com/Dlayer/dlayer/blob/master/LICENSE
+ */
+class Dlayer_DesignerTool_ContentManager_HeadingDate_SubTool_Typography_Model extends
+    Dlayer_DesignerTool_ContentManager_Shared_Model_Typography
+{
+    // No custom logic, here if required
+}
diff --git a/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Typography/Ribbon.php b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Typography/Ribbon.php
new file mode 100644
index 000000000..758410a42
--- /dev/null
+++ b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Typography/Ribbon.php
@@ -0,0 +1,151 @@
+<?php
+
+/**
+ * Heading & Date content item data class
+ *
+ * @author Dean Blackborough <dean@g3d-development.com>
+ * @copyright G3D Development Limited
+ * @license https://github.com/Dlayer/dlayer/blob/master/LICENSE
+ */
+class Dlayer_DesignerTool_ContentManager_HeadingDate_SubTool_Typography_Ribbon extends
+    Dlayer_Ribbon_Content
+{
+    /**
+     * Fetch the view data for the current tool tab, typically the returned array will have at least two indexes,
+     * one for the form and another with the data required by the preview functions
+     *
+     * @param array $tool Tool and environment data
+     *
+     * @return array
+     */
+    public function viewData(array $tool)
+    {
+        $this->tool = $tool;
+
+        $this->contentData();
+        $this->elementData();
+        $this->previewData();
+
+        return array(
+            'form' => new Dlayer_DesignerTool_ContentManager_HeadingDate_SubTool_Typography_Form(
+                $tool,
+                $this->content_data,
+                $this->instancesOfData(),
+                $this->element_data
+            ),
+            'preview' => $this->preview_data
+        );
+    }
+
+    /**
+     * Fetch the data array for the content item, if in edit mode mode populate the values otherwise every value is
+     * set to FALSE, the tool form can simply check to see if the value is FALSe or not and then set the existing value
+     *
+     * @return void Writes to $this->content_data
+     */
+    protected function contentData()
+    {
+        if ($this->content_fetched === false) {
+            $this->content_data = array(
+                'font_family_id' => false,
+                'text_weight_id' => false
+            );
+
+            if ($this->tool['content_id'] !== null) {
+                $model = new Dlayer_DesignerTool_ContentManager_Shared_Model_Typography();
+
+                $font_and_text_values = $model->fontAndTextValues(
+                    $this->tool['site_id'],
+                    $this->tool['page_id'],
+                    $this->tool['content_id']
+                );
+
+                if ($font_and_text_values !== false) {
+                    if ($font_and_text_values['text_weight_id'] !== null) {
+                        $this->content_data['text_weight_id'] = $font_and_text_values['text_weight_id'];
+                    }
+
+                    if ($font_and_text_values['font_family_id'] !== null) {
+                        $this->content_data['font_family_id'] = $font_and_text_values['font_family_id'];
+                    }
+                }
+            }
+
+            $this->content_fetched = true;
+        }
+    }
+
+    /**
+     * Element data, data required to build the inputs
+     *
+     * @return array
+     */
+    protected function elementData()
+    {
+        if ($this->element_data_fetched === false) {
+
+            $this->element_data = array(
+                'font_families' => false,
+                'text_weights' => false
+            );
+
+            $model = new Dlayer_DesignerTool_ContentManager_Shared_Model_Typography();
+
+            $font_families = $model->fontFamiliesForSelect();
+            if ($font_families !== false) {
+                $this->element_data['font_families'] = $font_families;
+            }
+
+            $text_weights = $model->textWeightsForSelect();
+            if ($text_weights !== false) {
+                $this->element_data['text_weights'] = $text_weights;
+            }
+
+            $this->element_data_fetched = true;
+        }
+    }
+
+    /**
+     * Fetch the data required by the preview functions
+     *
+     * @return array
+     */
+    protected function previewData()
+    {
+        if ($this->element_data_fetched === false || $this->preview_data_fetched === false) {
+
+            $this->contentData();
+
+            $this->preview_data = array(
+                'id' => $this->tool['content_id'],
+                'font_family_id' => $this->content_data['font_family_id'],
+                'font_families' => false,
+                'text_weights' => false
+            );
+
+            $model = new Dlayer_DesignerTool_ContentManager_Shared_Model_Typography();
+
+            $font_families = $model->fontFamiliesForPreview();
+            if ($font_families !== false) {
+                $this->preview_data['font_families'] = $font_families;
+            }
+
+            $text_weights = $model->textWeightsForPreview();
+            if ($text_weights !== false) {
+                $this->preview_data['text_weights'] = $text_weights;
+            }
+
+            $this->preview_data_fetched = true;
+        }
+    }
+
+    /**
+     * Fetch the number of instances for the content items data
+     *
+     * @return integer
+     */
+    protected function instancesOfData()
+    {
+        return 0;
+    }
+}
diff --git a/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Typography/Tool.php b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Typography/Tool.php
new file mode 100644
index 000000000..5d89c7038
--- /dev/null
+++ b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Typography/Tool.php
@@ -0,0 +1,49 @@
+<?php
+
+/**
+ * Typography sub tool
+ *
+ * @author Dean Blackborough <dean@g3d-development.com>
+ * @copyright G3D Development Limited
+ * @license https://github.com/Dlayer/dlayer/blob/master/LICENSE
+ */
+class Dlayer_DesignerTool_ContentManager_HeadingDate_SubTool_Typography_Tool extends
+    Dlayer_DesignerTool_ContentManager_Shared_Tool_Typography
+{
+    /**
+     * Generate the return ids array
+     *
+     * @return array
+     */
+    protected function returnIds()
+    {
+        return array(
+            array(
+                'type' => 'page_id',
+                'id' => $this->page_id,
+            ),
+            array(
+                'type' => 'row_id',
+                'id' => $this->row_id,
+            ),
+            array(
+                'type' => 'column_id',
+                'id' => $this->column_id,
+            ),
+            array(
+                'type' => 'tool',
+                'id' => 'HeadingDate',
+            ),
+            array(
+                'type' => 'tab',
+                'id' => 'typography',
+                'sub_tool' => 'Typography'
+            ),
+            array(
+                'type' => 'content_id',
+                'id' => $this->content_id,
+                'content_type' => 'heading-date'
+            )
+        );
+    }
+}
diff --git a/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Typography/scripts/typography.phtml b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Typography/scripts/typography.phtml
new file mode 100644
index 000000000..3208d3f34
--- /dev/null
+++ b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/SubTool/Typography/scripts/typography.phtml
@@ -0,0 +1,26 @@
+<?php /** @var Dlayer_View_Codehinting */
+$this ?>
+
+<script>
+    previewContentManager.contentItemFontFamily(<?php echo $this->data['preview']['id']; ?>, <?php echo json_encode($this->data['preview']['font_families']); ?>);
+    previewContentManager.contentItemTextWeight(<?php echo $this->data['preview']['id']; ?>, <?php echo json_encode($this->data['preview']['text_weights']); ?>);
+</script>
+
+<div class="col-md-12 col-sm-12">
+    <p class="dev-note bg-danger unsaved">Data has been modified!</p>
+</div>
+
+<div class="col-md-12 col-sm-12 small">
+    <?php echo $this->colorPicker()->picker($this->color_picker_data['palettes'],
+        $this->color_picker_data['history'], true); ?>
+</div>
+
+<div class="col-md-12 col-sm-12 small">
+    <?php
+    if ($this->data != false) {
+        echo $this->data['form'];
+    }
+    ?>
+</div>
+
+<?php echo $this->colorPicker()->javascript(); ?>
diff --git a/library/Dlayer/DesignerTool/ContentManager/HeadingDate/scripts/heading-date.phtml b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/scripts/heading-date.phtml
index be227d5bd..eeec54f74 100644
--- a/library/Dlayer/DesignerTool/ContentManager/HeadingDate/scripts/heading-date.phtml
+++ b/library/Dlayer/DesignerTool/ContentManager/HeadingDate/scripts/heading-date.phtml
@@ -1,11 +1,18 @@
 <?php /** @var $this Dlayer_View_Codehinting */?>
 
+<?php if ($this->content_id !== null) { ?>
+    <script>
+        previewContentManager.headingText('#params-heading', '#params-date', '.content[data-content-id="' + <?php echo $this->escape($this->content_id); ?> + '"]', <?php echo $this->json($this->data['preview']['heading']); ?>, <?php echo $this->json($this->data['preview']['date']); ?>, false);
+        previewContentManager.headingType('#params-type', '.content[data-content-id="' + <?php echo $this->escape($this->content_id); ?> + '"]');
+    </script>
+<?php } ?>
+
 <div class="col-md-12 col-sm-12">
-	<p class="dev-note bg-danger unsaved">Data has been modified!</p>
+    <p class="dev-note bg-danger unsaved">Data has been modified!</p>
 </div>
 
 <div class="col-md-12 col-sm-12">
-	<?php
+    <?php
     if($this->data != FALSE) {
         echo $this->data['form'];
     }
diff --git a/library/Dlayer/Ribbon/Handler/Content.php b/library/Dlayer/Ribbon/Handler/Content.php
index 56f789be4..7d8961f4e 100644
--- a/library/Dlayer/Ribbon/Handler/Content.php
+++ b/library/Dlayer/Ribbon/Handler/Content.php
@@ -545,6 +545,21 @@ private function headingDate($tool, $tab)
                 $data = $ribbon_heading_date->viewData($this->toolParams($tool));
                 break;
 
+            case 'styling':
+                $ribbon_heading_date = new Dlayer_DesignerTool_ContentManager_HeadingDate_SubTool_Styling_Ribbon();
+                $data = $ribbon_heading_date->viewData($this->toolParams($tool));
+                break;
+
+            case 'typography':
+                $ribbon_heading_date = new Dlayer_DesignerTool_ContentManager_HeadingDate_SubTool_Typography_Ribbon();
+                $data = $ribbon_heading_date->viewData($this->toolParams($tool));
+                break;
+
+            case 'delete':
+                $ribbon_heading_date = new Dlayer_DesignerTool_ContentManager_HeadingDate_SubTool_Delete_Ribbon();
+                $data = $ribbon_heading_date->viewData($this->toolParams($tool));
+                break;
+
             default:
                 $data = false;
                 break;
diff --git a/library/Dlayer/View/ColorPicker.php b/library/Dlayer/View/ColorPicker.php
index 5770d61f3..6b1685a38 100644
--- a/library/Dlayer/View/ColorPicker.php
+++ b/library/Dlayer/View/ColorPicker.php
@@ -77,7 +77,7 @@ public function javascript()
 	* @param boolean $custom
 	* @return Dlayer_View_ColorPicker
 	*/
-	public function picker($palettes, $history, $custom=TRUE) 
+	public function picker($palettes, $history, $custom = true)
 	{
 		// Start color picker container
 		$this->html = '<div class="color-picker-tool panel panel-default">';
@@ -134,9 +134,7 @@ private function palettes($palettes)
 					}
 					
 					$html .= $colors;
-					
-					//$html .= '<hr />';
-					
+
 					$html .= '</div>';
 				}
 			} else {
diff --git a/private/database/tables/data/dlayer_module_tool_tab.sql b/private/database/tables/data/dlayer_module_tool_tab.sql
index c60c0ae5a..cdf697fe3 100644
--- a/private/database/tables/data/dlayer_module_tool_tab.sql
+++ b/private/database/tables/data/dlayer_module_tool_tab.sql
@@ -100,7 +100,7 @@ values
     (NULL,3,27,'Delete','delete','Delete','remove',NULL,1,0,0,3,1),
     (NULL,3,27,'Help','help',NULL,'info-sign',NULL,0,0,0,4,1),
     (NULL,4,28,'Heading & Date','heading-date',NULL,'pencil',NULL,1,0,1,1,1),
-    (NULL,4,28,'Styles','styling','Styling','tint',NULL,1,1,0,2,0),
-    (NULL,4,28,'Typography','typography','Typography','font',NULL,1,1,0,3,0),
-    (NULL,4,28,'Delete','delete','Delete','remove',NULL,0,1,0,4,0),
+    (NULL,4,28,'Styles','styling','Styling','tint',NULL,1,1,0,2,1),
+    (NULL,4,28,'Typography','typography','Typography','font',NULL,1,1,0,3,1),
+    (NULL,4,28,'Delete','delete','Delete','remove',NULL,0,1,0,4,1),
     (NULL,4,28,'Help','help',NULL,'info-sign',NULL,0,0,0,5,1);