diff --git a/fec/fec/static/css/customize-editor.css b/fec/fec/static/css/customize-editor.css
index 42c5b5668d..2647107cc8 100644
--- a/fec/fec/static/css/customize-editor.css
+++ b/fec/fec/static/css/customize-editor.css
@@ -80,3 +80,36 @@ li.sequence-member .sequence-member-inner .sequence-type-list .sequence-containe
 .richtext ol ol ol li {
   list-style-type: lower-roman;
 }
+
+
+
+div[data-contentpath="reporting_dates_table"] div.widget-checkbox_input {
+  display: none !important;
+}
+
+
+div[data-contentpath="reporting_dates_table"] label[for*="-handsontable-col-caption"] {
+  display: none;
+}
+
+div[data-contentpath="reporting_dates_table"] label[for*="-handsontable-col-caption"] + div.field-content{
+  display: none;
+}
+
+
+div[data-contentpath="reporting_dates_table"] div[id*="-value-table-handsontable-container"] {
+  height:auto  !important;
+}
+
+div[data-contentpath="reporting_dates_table"] div.wtHolder {
+  height:auto  !important;
+}
+
+div[data-contentpath="reporting_dates_table"] .fieldname-table .help table td {
+  background: #357b7d;
+  color:#fff;
+  font-weight: bold;
+  border-width: 2px;
+
+}
+
diff --git a/fec/fec/static/js/pages/reporting-dates-tables.js b/fec/fec/static/js/pages/reporting-dates-tables.js
index 9f1c3d4492..614cc8d77e 100644
--- a/fec/fec/static/js/pages/reporting-dates-tables.js
+++ b/fec/fec/static/js/pages/reporting-dates-tables.js
@@ -13,7 +13,7 @@ const states_dropdown_template = `
     <option value="CO">Colorado</option>
     <option value="CT">Connecticut</option>
     <option value="DE">Delaware</option>
-    <option value="DC">District Of Columbia</option>
+    <option value="DC">District of Columbia</option>
     <option value="FL">Florida</option>
     <option value="GA">Georgia</option>
     <option value="GU">Guam</option>
@@ -72,10 +72,10 @@ const header_notes_modal_partial = `<div tabindex="-1" class="modal__overlay" da
   </div>
 </div>`;
 
+/* eslint-disable no-console */
+
 function ReportingDates() {
 
-  //Declare globals (scoped to this function) to get past linter error/tests. For header_notes and footnotes objects declared in CMS field, CSS.escape, Set()
-  /* global header_notes, footnotes */
   this.dates_table = document.getElementsByClassName('election-dates-table')[0];
 
   /*
@@ -88,24 +88,42 @@ function ReportingDates() {
   or in blocks.py. I think the former makes sense.
   */
 
-  //only run this logic if the page has an `.election-dates-table` onn it
-  if (this.dates_table) {
-  //get all acnhor links in TDs)
-    this.anchors = this.dates_table.querySelectorAll('td a[href^=\'#\']');
+    this.buildStaticElements();
 
-    //disable default jump behavior for anchor links(#) but keep links for accessibility
-    for (const anchor of this.anchors) {
-      anchor.addEventListener('click', e => {
-        e.preventDefault();
-      });
-    }
+    this.convertFootnotes(); //converts number or symbol following "+" to footnote html, in-place
 
-    this.buildStaticElements();
+    this.addStateClass();
 
-    this.addFootnotes();
+    this.addFootnotes(); //adds hidden Footnote rows
 
     this.stripeByState();
 
+    ///TODO REMEMER THAT PUTTING THIS BELOW `this.addFootnotes()` DISABLES THE `e.preventDefault();` ON FOOTNNOTES sups ALREADY ON PAGE ON THIS TEST VERSION
+
+    //it only runs this logic if the page has an `.election-dates-table` on it, TODO:  might not e necessary for this trmplate
+    if (this.dates_table) {
+    //get all acnhor links in TDs)
+      this.anchors = this.dates_table.querySelectorAll('td a[href^=\'#\']');
+
+      //disable default jump behavior for anchor links(#) but keep links for accessibility
+      for (const anchor of this.anchors) {
+        anchor.addEventListener('click', e => {
+          e.preventDefault();
+        });
+      }
+
+    const header_sups = document.querySelectorAll(
+      'tr:first-child th a[href^="#"]'
+    );
+
+    //add data attribute to the header sups to open AY11 dialog and disable default jump behavior for anchor links(#) but keep links for accessibility
+    for (const header_sup of header_sups) {
+      header_sup.setAttribute('data-a11y-dialog-show', 'header_notes_modal');
+      header_sup.addEventListener('click', e => {
+        e.preventDefault();
+      });
+    }
+
     //Define media query
     const mql = window.matchMedia('screen and (max-width: 650px)');
 
@@ -167,31 +185,32 @@ ReportingDates.prototype.buildStaticElements = function() {
   table_parent.insertBefore(dropdown_wrapper, this.dates_table);
 
   //Create static footnote/header note list
-
-  let hdr_str = '';
-  //build static list from header notes object if it exists
-  if (typeof header_notes == 'object') {
+ let hdr_str = '';
+   const header_notes_json = JSON.parse(document.getElementById('header_notes').textContent);
+// WORKS--  //build static list from footnotes object (`const footnotes`, which is added in teemplate riht now) --if it exists
+  if (typeof header_notes_json == 'object') {
     hdr_str = `<h4>Header notes</h4><ul>`;
-    for (const key in header_notes) {
+    for (const note of header_notes_json.footnote) {
       hdr_str += `<li>
-                  <a name="hdr${key}" id="hdr${key}"></a>
-                  <b>${key}</b>&nbsp;&nbsp;${header_notes[key]}
+                  <a name="hdr${note.value.footnote_number}" id="hdr${note.value.footnote_number}"></a>
+                  <b>${note.value.footnote_number}</b>&nbsp;&nbsp;${note.value.footnote_text}}
                 </l1>`;
+     }
+     hdr_str += `</ul>`;
     }
 
-    hdr_str += `</ul>`;
-  }
-
-  let ftnt_str = '';
-  //build static list from footnotes object if it exists
-  if (typeof footnotes == 'object') {
+ // build static list from <script id="footnotes">  which is added in teemplate with  json_script technique ) --if it exist
+ const footnotes_json = JSON.parse(document.getElementById('footnotes').textContent);
+ let ftnt_str = '';
+  if (typeof footnotes_json == 'object') {
     ftnt_str = `<h4>Footnotes</h4><ul>`;
-    for (const key in footnotes) {
-      const dot = /^\d+$/.test(key) ? '.' : '';
+    for (const note of footnotes_json.footnote) {
+      console.log('Note:', note);
+      const dot = /^\d+$/.test(note.value.footnote_number) ? '.' : '';
       ftnt_str += `<li>
-                   <a name="footnote_${key}" id="footnote_${key}"></a>
-                   <b>${key}</b>${dot}&nbsp;${footnotes[key]}
-                 </l1>`;
+                   <a name="footnote_${note.value.footnote_number}" id="footnote_${note.value.footnote_number}"></a>
+                   <b>${note.value.footnote_number}</b>${dot}&nbsp;${note.value.footnote_text}
+                   </l1>`;
     }
     ftnt_str += `</ul>`;
   }
@@ -208,7 +227,7 @@ ReportingDates.prototype.buildStaticElements = function() {
     table_parent.insertBefore(static_notes, this.dates_table.nextSibling);
   }
 
-  if (typeof header_notes == 'object') {
+  if (typeof header_notes_json == 'object') {
     //Create A11Y modal dialog for header_notes popup and add innerHTML
     const dialog = document.createElement('div');
     //Must add these three classes separately for IE :-(
@@ -223,24 +242,34 @@ ReportingDates.prototype.buildStaticElements = function() {
     const dialog_p = document.querySelector('.modal p');
     dialog_p.innerHTML = `${hdr_str}`;
 
-    const header_sups = document.querySelectorAll(
-      'tr:first-child th a[href^="#"]'
-    );
+  }
+};
+
+// Adds row state name classes
+ReportingDates.prototype.addStateClass = function() {
+   const all_tr = document.querySelectorAll('tr');
+      Array.from(all_tr).forEach(row => {
+        let state_name = row.cells[0].textContent;
+        //state_name = state_name.split(' ')[0];//.toLowerCase()
+        console.log('STATE:', state_name);
+        const states_select = document.getElementById('states');
+        // console.log('SS',states_select);
+        Array.from(states_select.options).forEach(opt => {
+          //if (opt.textContent.includes(state_name)){
+          if (state_name.match(opt.textContent)) {
+
+             row.classList.add(opt.value.toLowerCase());
+           }
+        });
 
-    //add data attribute to the header sups to open AY11 dialog
-    for (const header_sup of header_sups) {
-      header_sup.setAttribute('data-a11y-dialog-show', 'header_notes_modal');
-      header_sup.addEventListener('click', e => {
-        e.preventDefault();
       });
-    }
-  }
 };
 
-//Show chosen state rows, hide others
+// Show chosen state rows, hide others
 ReportingDates.prototype.handleStateChange = function() {
   const state = this.states.value.toLowerCase();
 
+ //TODO: Should this be `this.dates_table.querySelectorAll` ?
   const tr = document.querySelectorAll('tr');
   const ftnt = document.querySelectorAll('tr.footnote_row');
 
@@ -274,21 +303,36 @@ ReportingDates.prototype.handleStateChange = function() {
   }
 };
 
-// Add footnote rows based on existence of superscript number on page load
+// Add footnote rows based on existence of superscript number created by convertFootnotes()
 ReportingDates.prototype.addFootnotes = function() {
+  const footnotes_json = JSON.parse(document.getElementById('footnotes').textContent);
+  const footnotes_array = footnotes_json.footnote;
+  console.log('footnotes_array', footnotes_array);
+
+  //TODO: Should this be `this.dates_table.querySelectorAll` ?
   const date_sups = document.querySelectorAll('td sup');
 
   Array.from(date_sups)
     .reverse()
     .forEach(node => {
       const indx = node.innerText; //should this be textContent?
+      console.log('indx', indx);
       const state_class = node.closest('tr').className;
       const ftnt_colspan = node.closest('tr').cells.length - 1;
+      let current_text;
+
+      for (let note of footnotes_array){
+        if(note.value.footnote_number == indx){
+
+          current_text = note.value.footnote_text;
+
+        }
+      }
 
       const ftnt_row = `<tr class='${state_class} footnote_row footnote_${indx}'>
                           <td></td>
                           <td colspan=${ftnt_colspan}>
-                            <b>${indx}.</b>&nbsp;${footnotes[indx]}</td>
+                            <b>${indx}.</b>&nbsp;${current_text}</td>
                         </tr>`;
       node.closest('tr').insertAdjacentHTML('afterend', ftnt_row);
     });
@@ -495,4 +539,62 @@ ReportingDates.prototype.stripeByState = function() {
   }
 };
 
+ReportingDates.prototype.convertFootnotes = function() {
+
+const all_hdr = this.dates_table.getElementsByTagName('th');
+   Array.from(all_hdr).forEach(cell => {
+  //#WORKKS LEAVES A COMMA AFTER TEXT, BEFORE FOOTNOTE
+   const txt = cell.textContent;
+
+   if (/~/.test(txt)) {
+        cell.style.color='red';
+        let txt_array = txt.split('~');
+        let hdr_txt = txt_array.shift();
+        let appended_hdr_notes = txt_array;
+
+        let hdr_note_html_array = [];
+        for (let note of appended_hdr_notes) {
+          let hdr_note_html = `<a href="#hdr_${note}"><sup>${note}</sup></a>`;
+          hdr_note_html_array.push(hdr_note_html);
+
+         }
+
+      cell.innerHTML = hdr_txt+hdr_note_html_array;
+
+    }
+
+  });
+
+   //get all non-footnote/non-header row cells
+  const all_td = this.dates_table.querySelectorAll('tr:not(.footnote_row) td');
+
+    Array.from(all_td).forEach(cell => {
+
+     const txt = cell.textContent;
+     //  console.log(txt);
+
+     if (/~/.test(txt)) {
+      cell.style.color='red';
+      //Create an array from the string split the tilda(s)
+      let txt_array = txt.split('~');
+      ///The first item is the date text, return that as a var. Now txt_array only includes footnotes.
+      let date_txt = txt_array.shift();
+      //Creeate a new varialble or clarity
+      let appended_footnotes = txt_array;
+
+      let footnote_html_array = [];
+      for (let note of appended_footnotes) {
+        let footnote_html = `<a href="#footnote_${note}"><sup>${note}</sup></a>`;
+
+        footnote_html_array.push(footnote_html);
+      }
+
+      cell.innerHTML = date_txt+footnote_html_array;
+
+     }
+
+   });
+
+}; // end conveertfootnotes()
+
 new ReportingDates();
diff --git a/fec/fec/static/scss/components/_table-styles.scss b/fec/fec/static/scss/components/_table-styles.scss
index 2026d6b681..22c3cfe2c0 100644
--- a/fec/fec/static/scss/components/_table-styles.scss
+++ b/fec/fec/static/scss/components/_table-styles.scss
@@ -1,6 +1,6 @@
 // Simple table
 //
-// <table class="simple-table simple-table--display">
+// <table class="$">
 //   <thead class="simple-table__header">
 //     <tr>
 //       <th class="simple-table__header-cell">Dates covered</th>
@@ -403,6 +403,11 @@ h3 + .simple-table {
   margin-left: u(-2rem);
 }
 
+#header_notes_modal p  {
+  margin-left: u(2rem);
+  display: inline;  
+}
+
 #static_notes {
   margin-top: u(2rem);
 
@@ -418,6 +423,13 @@ h3 + .simple-table {
   }
 }
 
+#static_notes p,
+.footnote_row p {
+  display: inline
+}
+
+
+
 // Chart Table
 // Table style used on breakdown charts
 // Very similar to simple-table, but with slight differences
diff --git a/fec/home/blocks.py b/fec/home/blocks.py
index 1698cae4e7..fad6f3ba82 100644
--- a/fec/home/blocks.py
+++ b/fec/home/blocks.py
@@ -186,6 +186,29 @@ class Meta:
         template = 'blocks/custom_table.html'
         icon = 'table'
 
+        
+class ReportingTableBlock(blocks.StructBlock):
+    """A custom table
+    """
+    reporting_table_options = {
+        'startRows': 1,
+        'startCols': 6,
+        'colHeaders': False,
+        'rowHeaders': False,
+        'height': 108,
+        'language': 'en',
+        'renderer': 'html'
+    }
+
+    table = TableBlock(table_options=reporting_table_options,
+                       help_text='<table class="htcore handsontable" style="table-layout:fixed;width: calc(100% - 294px);position: fixed;top: 20%;"> \
+                       <tr><td>State</td><td>Election date</td><td>Close of books+</td><td>Mailing deadline++</td> \
+                       <td>Filing deadline++</td><td>48-Hour Notices**</td></tr</table>')
+
+    class Meta:
+        template = 'blocks/reporting-dates-table-block.html'
+        icon = 'table'
+
 
 class ExampleImage(blocks.StructBlock):
     """Creates an example module with an image and a caption, side-by-side
diff --git a/fec/home/migrations/0126_reportingdatestable.py b/fec/home/migrations/0126_reportingdatestable.py
new file mode 100644
index 0000000000..0af8c98da6
--- /dev/null
+++ b/fec/home/migrations/0126_reportingdatestable.py
@@ -0,0 +1,31 @@
+# Generated by Django 3.2.16 on 2023-04-20 16:55
+
+from django.db import migrations, models
+import django.db.models.deletion
+import wagtail.blocks
+import wagtail.contrib.table_block.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailcore', '0069_log_entry_jsonfield'),
+        ('home', '0125_officepage'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='ReportingDatesTable',
+            fields=[
+                ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.page')),
+                ('reporting_dates_table', wagtail.fields.StreamField([('dates_table', wagtail.blocks.StructBlock([('table', wagtail.contrib.table_block.blocks.TableBlock(help_text='<table class="htcore handsontable" style="table-layout:fixed;width: calc(100% - 294px);position: fixed;top: 20%;">                        <tr><td>State</td><td>Election date</td><td>Close of books+</td><td>Mailing deadline++</td>                        <td>Filing deadline++</td><td>48-Hour Notices**</td></tr</table>', table_options={'colHeaders': False, 'height': 108, 'language': 'en', 'renderer': 'html', 'rowHeaders': False, 'startCols': 6, 'startRows': 1}))], blank=True, form_classname='title'))], blank=True, null=True, use_json_field=True)),
+                ('footnotes', wagtail.fields.StreamField([('footnote_section', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(blank='true', help_text='either &quot;Footnotes&quot; or &quot;Header notes&quot;', icon='title')), ('footnote', wagtail.blocks.ListBlock(wagtail.blocks.StructBlock([('footnote_number', wagtail.blocks.CharBlock(blank='true', form_classname='title', icon='tag')), ('footnote_text', wagtail.blocks.RichTextBlock(blank='true', help_text='', icon='pilcrow'))])))], blank=True))], blank=True, use_json_field=True)),
+                ('citations', wagtail.fields.StreamField([('citations', wagtail.blocks.ListBlock(wagtail.blocks.StructBlock([('label', wagtail.blocks.CharBlock()), ('content', wagtail.blocks.RichTextBlock(help_text='Use Shift + Enter to add line breaks between citation and description'))])))], blank=True, null=True, use_json_field=None)),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('wagtailcore.page',),
+        ),
+    ]
diff --git a/fec/home/models.py b/fec/home/models.py
index 1d333d9f22..1ba2316f20 100644
--- a/fec/home/models.py
+++ b/fec/home/models.py
@@ -33,7 +33,7 @@
     DocumentFeedBlurb, ExampleForms, ExampleImage, ExampleParagraph,
     ExternalButtonBlock, InternalButtonBlock, LinkBlock, OptionBlock,
     ReportingExampleCards, ResourceBlock, SnippetChooserBlock,
-    ThumbnailBlock, FeedDocumentBlock, EmployeeTitle
+    ThumbnailBlock, FeedDocumentBlock, EmployeeTitle, ReportingTableBlock
 )
 
 logger = logging.getLogger(__name__)
@@ -1359,3 +1359,25 @@ class OfficePage(Page):
     @property
     def content_section(self):
         return 'about'
+
+class ReportingDatesTable(Page):
+    reporting_dates_table = StreamField([
+        ('dates_table', ReportingTableBlock(blank=True, form_classname='title'))
+    ], blank=True, null=True, use_json_field=True, collapsed=False)
+
+    footnotes = StreamField([
+        ('footnote_section', blocks.StructBlock([
+            ('title', blocks.CharBlock(blank='true', icon='title', help_text='either &quot;Footnotes&quot; or &quot;Header notes&quot;')),
+            ('footnote', blocks.ListBlock(blocks.StructBlock([
+                ('footnote_number', blocks.CharBlock(blank='true', icon='tag', form_classname='title')),
+                ('footnote_text', blocks.RichTextBlock(blank='true', icon='pilcrow', help_text='')),
+            ])))
+        ], blank=True))
+    ], blank=True, use_json_field=True)
+    citations = StreamField([('citations', blocks.ListBlock(CitationsBlock()))], null=True, blank=True)
+
+    content_panels = Page.content_panels + [
+        FieldPanel('reporting_dates_table'),
+        FieldPanel('footnotes'),
+        StreamFieldPanel('citations')
+    ]
diff --git a/fec/home/templates/blocks/reporting-dates-table-block.html b/fec/home/templates/blocks/reporting-dates-table-block.html
new file mode 100644
index 0000000000..06c414594f
--- /dev/null
+++ b/fec/home/templates/blocks/reporting-dates-table-block.html
@@ -0,0 +1,28 @@
+{% load table_block_tags %}
+{% load wagtailcore_tags %}
+
+{% for row in self.table.data %}
+ {% if forloop.first %}
+    <tr>
+    {% for cell in row %}
+    <th>{{ cell | safe}}</th>
+      {% endfor %}
+    </tr>
+ {% else%}
+    <tr>
+    {% for cell in row %}
+    <td>{{ cell | safe}}</td>
+      {% endfor %}
+    </tr>
+ {% endif%}
+{% endfor %}
+
+
+
+
+
+
+
+
+
+
diff --git a/fec/home/templates/home/reporting_dates_table.html b/fec/home/templates/home/reporting_dates_table.html
new file mode 100644
index 0000000000..96c146f0a1
--- /dev/null
+++ b/fec/home/templates/home/reporting_dates_table.html
@@ -0,0 +1,78 @@
+{% extends "base.html" %}
+{% load wagtailcore_tags wagtailimages_tags %}
+{% load filters %}
+{% load static %}
+{% block body_class %}template-{{ self.get_verbose_name | slugify }}{% endblock %}
+
+{% block content %}
+
+{% block breadcrumbs %}
+  {% include 'partials/breadcrumbs.html' with page=self links=self.get_ancestors style=self.breadcrumb_style %}
+{% endblock %}
+
+{% comment %} TODO:MOVE STYLES  TO STYLEESHEEET  {% endcomment %}
+
+<article class="main container">
+
+  <h1 class="heading--main">{{ self.title }}</h1>
+
+  <table class="simple-table simple-table--display simple-table-cms election-dates-table">
+
+     {% for block in self.reporting_dates_table %}
+    
+       {% if block.block_type == "dates_table" %}
+    
+          {% include_block block.value %}
+    
+        {% endif %}
+   
+    {% endfor %}
+   
+    </table>
+
+<!-- USe "json_script" to create to create two JSON-ecasped script tags to iterate in JS. TWO json_script CALLS--->
+{% for raw in self.footnotes.raw_data %}
+  {% if raw.value.title == 'Footnotes' %}
+    {{ raw.value|json_script:"footnotes" }}
+  {% elif raw.value.title == 'Header notes' %}
+    {{ raw.value|json_script:"header_notes" }}
+  {% endif %} 
+{% endfor %}
+
+
+    {% if self.citations %}
+      <div id="legal-citations" class="sidebar--secondary t-sans">
+        <h4 class="sidebar__title">Legal citations</h4>
+        <div class="sidebar__content">
+          <div class="grid grid--2-wide">
+          {% for citation in self.citations %}
+            {% for block in citation.value %}
+              <div class="grid__item">
+                <p class="t-bold">{{ block.label }}</p>
+                <div class="rich-text">{{ block.content }}</div>
+              </div>
+            {% endfor %}
+          {% endfor %}
+          </div>
+        </div>
+      </div>
+    {% endif %}
+
+</article>
+
+<h1>SELF.FOOTNOTES</h1>
+
+ {{ self.footnotes.raw_data }} 
+
+{% include 'partials/disclaimer.html' %}
+
+{% endblock %}
+
+{% block extra_js %}
+
+ <script> window.BASE_PATH = '/data' </script>
+ <script type="text/javascript" src="{% asset_for_js 'data-init.js' %}"></script>
+ <script type="text/javascript" src="{% asset_for_js 'reporting-dates-tables.js' %}"></script>
+
+{% endblock %}
+