diff --git a/public/react/StatusKey/StatusKey.tsx b/public/react/StatusKey/StatusKey.tsx
index 22dca846..1d75c336 100644
--- a/public/react/StatusKey/StatusKey.tsx
+++ b/public/react/StatusKey/StatusKey.tsx
@@ -1,24 +1,40 @@
-import { FC } from "react";
-
-import React from "react";
+import React, { Children, FC, ReactNode } from "react";
 import Lozenge from "@atlaskit/lozenge";
 import { useTheme } from "../services/theme";
 
+const StatusKeyItem: FC<{ icon: ReactNode; text: ReactNode }> = ({ icon, text }) => (
+  <div className="flex space-x-2 content-center">
+    <div className="color-text-and-bg-notstarted text-xs w-4 h-4 relative flex content-center justify-center rounded-full">
+      {icon}
+    </div>
+    <div className="color-text-notstarted text-xs">{text}</div>
+  </div>
+);
+
 const StatusKey: FC = () => {
   const theme = useTheme();
 
   return (
-    <div>
-      {theme.map(({ backgroundCssVar, textCssVar, label }) => (
-        <Lozenge
-          style={{
-            backgroundColor: `var(${backgroundCssVar})`,
-            color: `var(${textCssVar})`,
-          }}
-        >
-          {label}
-        </Lozenge>
-      ))}
+    <div className="flex flex-wrap gap-x-4 gap-y-3 p-2 ">
+      <div className="flex gap-x-8">
+        <StatusKeyItem icon={<img className='m-0.5' src="/images/empty-set.svg" />} text={"Unknown dates"} />
+        <StatusKeyItem icon={"←"} text={"Dates are in the past outside this view"} />
+        <StatusKeyItem icon={"→"} text={"Dates are in the future outside this view"} />
+      </div>
+      <div className="flex gap-x-1">
+        {Children.toArray(
+          theme.map(({ backgroundCssVar, textCssVar, label }) => (
+            <Lozenge
+              style={{
+                backgroundColor: `var(${backgroundCssVar})`,
+                color: `var(${textCssVar})`,
+              }}
+            >
+              {label}
+            </Lozenge>
+          ))
+        )}
+      </div>
     </div>
   );
 };
diff --git a/public/timeline-report.js b/public/timeline-report.js
index 219faf90..9f1f59b3 100644
--- a/public/timeline-report.js
+++ b/public/timeline-report.js
@@ -95,21 +95,9 @@ export class TimelineReport extends StacheElement {
               primaryIssuesOrReleases:from="this.primaryIssuesOrReleases"
               allIssuesOrReleases:from="this.rolledupAndRolledBackIssuesAndReleases"></status-report>
           {{/ }}
-
-          <div class='p-2'>
-          <span class='color-text-and-bg-new p-2 inline-block'>New</span>
-          <span class='color-text-and-bg-notstarted p-2 inline-block'>Not Started</span>
-          <span class='color-text-and-bg-ontrack p-2 inline-block'>On Track</span>
-          <span class='color-text-and-bg-ahead p-2 inline-block'>Ahead</span>
-          <span class='color-text-and-bg-behind p-2 inline-block'>Behind</span>
-          <span class='color-text-and-bg-warning p-2 inline-block'>Warning</span>
-          <span class='color-text-and-bg-blocked p-2 inline-block'>Blocked</span>
-          <span class='color-text-and-bg-complete p-2 inline-block'>Complete</span>
-          </div>
           
-          </div>
-          {{/ and }}
-          <div class='p-2' id='status-key'></div>
+        </div>
+      {{/ and }}
       {{# and(this.routeData.derivedIssuesRequestData.issuesPromise.isResolved, not(this.primaryIssuesOrReleases.length) ) }}
         <div class="my-2 p-2 h-780  border-box block overflow-hidden color-text-and-bg-warning">
           <p>{{this.primaryIssuesOrReleases.length}} issues of type {{this.routeData.primaryIssueType}}.</p>
@@ -131,6 +119,8 @@ export class TimelineReport extends StacheElement {
               <p>Please check your JQL is correct!</p>
         </div>
       {{/ if }}
+
+      <div id='status-key' class="{{# if(not(and(this.routeData.derivedIssuesRequestData.issuesPromise.isResolved, this.primaryIssuesOrReleases.length))) }}invisible{{/ if }}"></div>
     </div>
   `;
   static props = {
@@ -226,7 +216,7 @@ export class TimelineReport extends StacheElement {
         },
       })
     );
-
+    
     createRoot(document.getElementById("status-key")).render(createElement(StatusKey, {}));
   }