diff --git a/index.html b/index.html
index de0b3c6..5661e97 100644
--- a/index.html
+++ b/index.html
@@ -2,10 +2,12 @@
 <script type="module">
 
 import _ from "https://dev.jspm.io/lodash";
+import styled from "https://dev.jspm.io/styled-components";
 import React from "https://dev.jspm.io/react/index.js";
 import ReactDOM from "https://dev.jspm.io/react-dom/index.js";
 import ReactDOMServer from "https://dev.jspm.io/react-dom/server.js";
 
+
 let Util = {
     ParsePassage:inRef=>
     {
@@ -17,6 +19,7 @@ let Util = {
 };
 
 let h = React.createElement;
+let s = styled.default;
 
 let ElemApp = props =>
 {
@@ -24,6 +27,7 @@ let ElemApp = props =>
     [
         h(ElemTree, {key:"tree1", tree:App.State.Topics}),
         h(ElemTree, {key:"tree2", tree:App.State.Bible}),
+        h(ElemTree, {key:"tree3", tree:App.State.Date}),
         h(ElemItems, {key:3})
     ]
     );
@@ -46,14 +50,15 @@ let ElemItems = props =>
         h("div", {key:2}, list),
         h("div", {key:3}, pages)
     ]);
-}
+};
 let ElemItem = props =>
 {
     return h("div", {key:0}, [
         h("div", {key:1},
         [
             h("span", {key:2}, props.title),
-            h("em", {key:3}, props.id)
+            h("em", {key:3}, props.id),
+            h("strong", {key:4}, props.date),
         ]
         ),
         h("small", {key:4}, props.bible)
@@ -126,31 +131,17 @@ let ElemPager = ({count, active}) =>
     return h("div", {}, children);
 };
 
-let ElemTopics = props =>
-{
-    let children = App.State.Topics.All.map( t=>
-    {
-        return h(ElemTopic, {
-            onClick:e=>App.Update.Topic(t),
-            key:t.id,
-            label:t.display, 
-            active:t.active
-        });
-    });
-    return h("div", null, children);
-};
-let ElemTopic = props =>
-{
-    let label = props.active? props.label+" !" : props.label;
-    return h("button", {onClick:props.onClick}, label);
-};
+let ElemColumn = s.div`
+    display:inline-block;
+    vertical-align:top;
+`;
 
 let ElemTree = ({tree}) =>
 {
     let activeItems = tree.Active.map( a=>{
         return h("button", {disabled:a.Parent?false:true, key:a.ID, onClick:e=>App.Update.Select(a, tree)}, a.Display )
-     })
-    return h("div", {},
+    });
+    return h(ElemColumn, {},
     [
         h("h3", {key:"title"}, tree.Display),
         h("div", {key:"filters-active"}, [
@@ -162,7 +153,7 @@ let ElemTree = ({tree}) =>
             h(ElemTreeNode, {key:"tree", node:tree.Root, tree:tree})
         ])
     ]);
-}
+};
 let ElemTreeNode = ({node, tree}) =>
 {
     let children = [];
@@ -409,37 +400,129 @@ var App = {
                     Node.Create("1 Thessalonians")
                 ])
             ])
+        },
+        Date:
+        {
+            Display:"Date",
+            Results:[],
+            Active:[],
+            Root:
+            Node.Create("all", "All", [
+                Node.Create("", "Unclassified"),
+                Node.Create("8", "1980s"),
+                Node.Create("9", "1990s"),
+                Node.Create("0", "2000s"),
+                Node.Create("1", "2010s"),
+                Node.Create("2", "2020s")
+            ])
         }
     },
-
-    RootDOM:document.querySelector("#root"),
-    RootComponent:ElemApp,
-    Render:()=>ReactDOM.render( h(App.RootComponent), App.RootDOM ),
-    ApplyFilters:()=>
-    {
-        App.State.Items.Active = _.union(App.State.Topics.Results, App.State.Bible.Results);
-        if(App.State.Items.Active.length == 0)
-        {
-            App.State.Items.Active = App.State.Items.All;
-        }
-        App.State.Pages.All = _.chunk(App.State.Items.Active, 10);
-        App.State.Pages.Active = 0;
-    },
-    LeafStructure:(inTree)=>
-    {
-        let output = {};
-        Node.IterateDown(inTree.Root, n=>
-        {
-            if(!n.Children)
-            {
-                output[n.ID] = n;
-            }
-        });
-        return output;
-    },
-
     Update:
     {
+        Load:(file)=>
+        {
+            let leafStructure = inTree=>
+            {
+                let output = [];
+                Node.IterateDown(inTree.Root, n=>
+                {
+                    if(!n.Children)
+                    {
+                        output[n.ID] = n;
+                    }
+                });
+                return output;
+            };
+
+            let structTopics = leafStructure(App.State.Topics)
+            let structBible = leafStructure(App.State.Bible);
+            let structDate = leafStructure(App.State.Date);
+
+            fetch(file)
+            .then(inAccept=>inAccept.text())
+            .then(inAccept=>
+            {
+                let itrUp = inLeaf=>
+                {
+                    Node.IterateUp(inLeaf, inBranch=>
+                    {
+                        inBranch.Leaves = _.union(inBranch.Leaves, inLeaf.Leaves)
+                    });
+                };
+
+                let columns = inAccept.split("|");
+
+                for(let i=0; i<columns.length; i+=5)
+                {
+                    let title  = columns[i+0];
+                    let id     = columns[i+1];
+                    let date   = columns[i+2];
+                    let bible  = columns[i+3].split("*");
+                    let topics = columns[i+4].split("*");
+
+                    let output = { title, id, date, topics, bible };
+
+
+                    var matched, match;
+
+                    // match topics
+                    matched = false;
+                    topics.forEach(t=>
+                    {
+                        match = structTopics[t];
+                        if(match)
+                        {
+                            match.Leaves.push(output);
+                            matched = true;
+                        }
+                    });
+                    if(!matched)
+                    {
+                        structTopics[""].Leaves.push(output);
+                    }
+
+                    // match bible
+                    matched = false;
+                    bible.forEach(t=>
+                    {
+                        match = structBible[ Util.ParsePassage(t)[0] ];
+                        if(match)
+                        {
+                            match.Leaves.push(output);
+                            matched = true;
+                        }
+                    });
+                    if(!matched)
+                    {
+                        structBible[""].Leaves.push(output);
+                    }
+
+                    // match date
+                    matched = false;
+                    match = structDate[date[2]];
+                    if(match)
+                    {
+                        match.Leaves.push(output);
+                        matched = true;
+                    }
+                    if(!matched)
+                    {
+                        structDate[""].Leaves.push(output);
+                    }
+
+                    App.State.Items.All.push(output);
+                }
+
+                Object.values(structTopics).forEach(itrUp);
+                Object.values(structBible).forEach(itrUp);
+                Object.values(structDate).forEach(itrUp);
+            })
+            .then(inAccept=>
+            {
+                App.ApplyFilters();
+                App.Render();
+            });
+        },
         Interact:(inNode)=>
         {
             if(inNode.Open)
@@ -493,96 +576,6 @@ var App = {
             App.ApplyFilters();
             App.Render();
         },
-        Load:(file)=>
-        {
-            
-            fetch(file)
-            .then(inAccept=>inAccept.text())
-            .then(inAccept=>
-            {
-                let structTopics = App.LeafStructure(App.State.Topics);
-                let structBible = App.LeafStructure(App.State.Bible);
-
-                let itrUp = inLeaf=>
-                {
-                    Node.IterateUp(inLeaf, inBranch=>
-                    {
-                        inBranch.Leaves = _.union(inBranch.Leaves, inLeaf.Leaves)
-                    });
-                };
-
-                let columns = inAccept.split("|");
-
-                for(let i=0; i<columns.length; i+=5)
-                {
-                    let title  = columns[i+0];
-                    let id     = columns[i+1];
-                    let year   = columns[i+2];
-                    let bible  = columns[i+3].split("*");
-                    let topics = columns[i+4].split("*");
-
-                    let output = { title, id, year, topics, bible };
-
-                    let matched = false;
-                    topics.forEach(t=>
-                    {
-                        let match = structTopics[t];
-                        if(match)
-                        {
-                            match.Leaves.push(output);
-                            matched = true;
-                        }
-                    });
-                    if(!matched)
-                    {
-                        structTopics[""].Leaves.push(output);
-                    }
-                    matched = false;
-                    bible.forEach(t=>
-                    {
-                        let passage = Util.ParsePassage(t);
-                        let match = structBible[ passage[0] ];
-                        if(match)
-                        {
-                            match.Leaves.push(output);
-                            matched = true;
-                        }
-                    });
-                    if(!matched)
-                    {
-                        structBible[""].Leaves.push(output);
-                    }
-
-                    App.State.Items.All.push(output);
-                }
-
-                Object.values(structTopics).forEach(itrUp);
-                Object.values(structBible).forEach(itrUp);
-                console.log(App.State.Items.All.length);
-            })
-            .then(inAccept=>
-            {
-                App.ApplyFilters();
-                App.Render();
-            });
-
-            
-        },
-        Topic:(topic)=>
-        {
-            if(topic.active)
-            {
-                topic.active = false;
-                App.State.Topics.Active = App.State.Topics.Active.filter( t=>t.id != topic.id );
-            }
-            else
-            {
-                topic.active = true;
-                App.State.Topics.Active.push(topic);
-            }
-            App.ApplyFilters();
-            App.Render();
-        },
         Page:(page)=>
         {
             if(page !== false)
@@ -591,6 +584,19 @@ var App = {
                 App.Render();
             }
         }
+    },
+    RootDOM:document.querySelector("#root"),
+    RootComponent:ElemApp,
+    Render:()=>ReactDOM.render( h(App.RootComponent), App.RootDOM ),
+    ApplyFilters:()=>
+    {
+        App.State.Items.Active = _.union(App.State.Topics.Results, App.State.Bible.Results, App.State.Date.Results);
+        if(App.State.Items.Active.length == 0)
+        {
+            App.State.Items.Active = App.State.Items.All;
+        }
+        App.State.Pages.All = _.chunk(App.State.Items.Active, 10);
+        App.State.Pages.Active = 0;
     }
 };