diff --git a/statusboard/package.json b/statusboard/package.json
index 392eda1b..7ac0b697 100644
--- a/statusboard/package.json
+++ b/statusboard/package.json
@@ -28,6 +28,7 @@
     "react-perfect-scrollbar": "^1.5.8",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
+    "react-split-pane": "^0.1.92",
     "react-super-responsive-table": "^5.2.0",
     "react-table": "^7.7.0",
     "sass": "^1.49.9",
diff --git a/statusboard/src/components/App/App.js b/statusboard/src/components/App/App.js
index f2d91188..5f7f339c 100644
--- a/statusboard/src/components/App/App.js
+++ b/statusboard/src/components/App/App.js
@@ -9,12 +9,12 @@ function App() {
   return (
     <div className="App">
       <TaxonomyDataContextProvider>
-      <BrigadeDataContextProvider>
-        <AppRouter>
-          <Header />
-          <PageContents />
-        </AppRouter>
-      </BrigadeDataContextProvider>
+        <BrigadeDataContextProvider>
+          <AppRouter>
+            <Header />
+            <PageContents />
+          </AppRouter>
+        </BrigadeDataContextProvider>
       </TaxonomyDataContextProvider>
     </div>
   );
diff --git a/statusboard/src/components/Checkbox/Checkbox.js b/statusboard/src/components/Checkbox/Checkbox.js
index fabd89b3..c33e24d3 100644
--- a/statusboard/src/components/Checkbox/Checkbox.js
+++ b/statusboard/src/components/Checkbox/Checkbox.js
@@ -1,37 +1,19 @@
 import React from 'react';
-import cx from 'classnames';
 import '../commonFormControlStyles.scss';
 import './Checkbox.scss';
 
-export default function Checkbox({
-  label,
-  id,
-  onChange,
-  className = '',
-  inline = true
-}) {
+export default function Checkbox({ label, id, onChange }) {
   return (
-    <div
-      className={cx(
-        'form-control-container',
-        { 'form-control-container--inline': inline },
-        className
-      )}
-      style={{ display: 'flex' }}
-    >
-      <label
-        htmlFor={id}
-        className={cx('form-label', { 'form-label--inline': inline })}
-      >
+    <div className="form-control-container" style={{ display: 'flex' }}>
+      <label htmlFor={id} className="form-label checkboxLabelAdjustment">
         {label}
       </label>
       <input
-	    type="checkbox"
+        type="checkbox"
         id={id}
         onChange={onChange}
-        className={cx('form-control', { 'form-control--inline': inline })}
+        className="form-control"
       />
     </div>
   );
 }
-
diff --git a/statusboard/src/components/Divider/Divider.js b/statusboard/src/components/Divider/Divider.js
new file mode 100644
index 00000000..85290041
--- /dev/null
+++ b/statusboard/src/components/Divider/Divider.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Checkbox() {
+  return <div className="separator" />;
+}
diff --git a/statusboard/src/components/MultiSelect/MultiSelect.js b/statusboard/src/components/MultiSelect/MultiSelect.js
deleted file mode 100644
index 141a9252..00000000
--- a/statusboard/src/components/MultiSelect/MultiSelect.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Downshift from 'downshift';
-import Button from '../Button/Button';
-import { ReactComponent as Arrow } from '../../assets/arrow.svg';
-import './MultiSelect.scss';
-
-// From https://www.axelerant.com/resources/team-blog/using-downshift-create-multi-select-widget-react
-export const MultiSelect = ({
-  items,
-  labelText,
-  onSelectionItemsChange,
-  selectedItems = [],
-  setSelectedItems,
-  clearTaxonomy,
-  ...rest
-}) => (
-  <>
-    <Downshift
-      {...rest}
-      onChange={changeHandler(
-        selectedItems,
-        setSelectedItems,
-        onSelectionItemsChange
-      )}
-    >
-      {({
-        getLabelProps,
-        getInputProps,
-        getItemProps,
-        getToggleButtonProps,
-        clearSelection,
-        isOpen,
-        selectedItem,
-        inputValue,
-      }) => (
-        <div className="multi-select">
-          <div className="text-input form-control-container">
-            <label {...getLabelProps()}>{labelText}</label>
-            <input
-              {...getInputProps()}
-              type="text"
-              className="form-control form-control--left"
-            />
-            <Button
-              {...getToggleButtonProps({
-                className: 'button-primary form-control--right',
-              })}
-            >
-              <>
-                <Arrow className="dropdown-arrow" />
-                <span className="sr-only">{isOpen ? 'close' : 'open'}</span>
-              </>
-            </Button>
-            {selectedItem || selectedItems.length > 0 ? (
-              <Button
-                className="button-primary clear-button"
-                onClick={() => {
-                  setSelectedItems([]);
-                  clearSelection();
-                  clearTaxonomy();
-                }}
-                text="Clear"
-              />
-            ) : null}
-          </div>
-
-          {isOpen ? (
-            <ul>
-              {items
-                .filter(
-                  (item) =>
-                    !selectedItems.find(
-                      (selectedItem) => selectedItem === item
-                    ) && item.toLowerCase().includes(inputValue.toLowerCase())
-                )
-                .map((item) => {
-                  return (
-                    <li
-                      {...getItemProps({
-                        item,
-                        key: item,
-                      })}
-                    >
-                      {' '}
-                      {item}{' '}
-                    </li>
-                  );
-                })}
-            </ul>
-          ) : null}
-
-          <div>
-            {selectedItems.map((value, i) => {
-              return (
-                <span key={value}>
-                  <Button
-                    className="form-control--dark-background tag"
-                    onClick={() =>
-                      removeSelectedItemByIndex(
-                        i,
-                        selectedItems,
-                        setSelectedItems,
-                        onSelectionItemsChange
-                      )
-                    }
-                  >
-                    <>
-                      <span className="sr-only">Remove</span>
-                      <span className="tag__name">{value}</span>
-                      <span className="tag__close">x</span>
-                    </>
-                  </Button>{' '}
-                </span>
-              );
-            })}
-          </div>
-        </div>
-      )}
-    </Downshift>
-  </>
-);
-
-/* Helper functions */
-function changeHandler(
-  selectedItems,
-  setSelectedItems,
-  onSelectionItemsChange
-) {
-  return (selectedItem, downshift) => {
-    if (!selectedItem) return;
-    const i = selectedItems.findIndex((item) => item.id === selectedItem.id);
-    if (i === -1) setSelectedItems([...selectedItems, selectedItem]);
-    onSelectionItemsChange([...selectedItems, selectedItem]);
-    downshift.clearSelection();
-  };
-}
-
-function removeSelectedItemByIndex(
-  i,
-  selectedItems,
-  setSelectedItems,
-  onSelectionItemsChange
-) {
-  const temp = [...selectedItems];
-  temp.splice(i, 1);
-  setSelectedItems(temp);
-  onSelectionItemsChange(temp);
-}
-
-MultiSelect.defaultProps = {};
-
-MultiSelect.propTypes = {
-  items: PropTypes.array,
-  labelText: PropTypes.string,
-  onSelectionItemsChange: PropTypes.func,
-  clearTaxonomy: PropTypes.func,
-};
diff --git a/statusboard/src/components/PageContents/PageContents.css b/statusboard/src/components/PageContents/PageContents.css
index 6dd09f2f..639e80ac 100644
--- a/statusboard/src/components/PageContents/PageContents.css
+++ b/statusboard/src/components/PageContents/PageContents.css
@@ -1,6 +1,6 @@
 .contents {
   display: block;
-  padding: 3rem 5vw 0 5vw;
+  padding: 1rem 5vw 0 5vw;
 }
 
 .text-content {
diff --git a/statusboard/src/components/Projects/MultiSelect/MultiSelect.js b/statusboard/src/components/Projects/MultiSelect/MultiSelect.js
new file mode 100644
index 00000000..ab252c90
--- /dev/null
+++ b/statusboard/src/components/Projects/MultiSelect/MultiSelect.js
@@ -0,0 +1,114 @@
+/* eslint-disable react/require-default-props */
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable import/prefer-default-export */
+import React from 'react';
+import PropTypes from 'prop-types';
+import Downshift from 'downshift';
+import './MultiSelect.scss';
+import { UnselectedTags } from './UnselectedTags';
+
+const displayCollapseExpand = (display) => (display ? collapse : expand);
+const collapse = '▲';
+const expand = '▼';
+
+function changeHandler({
+  setSelectedItem,
+  setInputValue,
+  inputValue,
+  setIsOpen,
+  isOpen,
+  selectedItems,
+  setSelectedItems,
+}) {
+  return (selectedItem, downshift) => {
+    setInputValue(inputValue);
+    setIsOpen(isOpen);
+    if (!selectedItem) return;
+    setSelectedItem(selectedItem);
+    // setInputValue(inputValue);
+    // const i = selectedItems.findIndex((item) => item.id === selectedItem.id);
+    setSelectedItems([...selectedItems, selectedItem]);
+    downshift.clearSelection();
+  };
+}
+
+// From https://www.axelerant.com/resources/team-blog/using-downshift-create-multi-select-widget-react
+export const MultiSelect = ({
+  availableTags,
+  inputClassName = '',
+  labelText,
+  setSelectedItems,
+  selectedItems = [],
+  setSelectedItem,
+  setIsOpen,
+  isOpen,
+  setInputValue,
+  inputValue,
+  ...rest
+}) => (
+  <>
+    <Downshift
+      {...rest}
+      onChange={changeHandler({
+        selectedItems,
+        setSelectedItem,
+        setIsOpen,
+        isOpen,
+        setInputValue,
+        inputValue,
+        setSelectedItems,
+      })}
+    >
+      {({
+        // parameters provided by Downshift
+        getLabelProps,
+        getInputProps,
+        getItemProps,
+        getToggleButtonProps,
+        isOpen,
+        inputValue,
+      }) => (
+        <div className="multi-select">
+          <div className="form-control-container">
+            <label {...getLabelProps()}>{labelText}</label>
+            <input
+              {...getInputProps()}
+              {...getToggleButtonProps()}
+              type="text"
+              width="40px"
+              className={`form-control ${inputClassName}`}
+            />
+            <span
+              {...getToggleButtonProps({
+                className: 'accordionCollapseExpandButton',
+              })}
+            >
+              {displayCollapseExpand(isOpen)}
+            </span>
+          </div>
+          <UnselectedTags
+            availableTags={availableTags}
+            selectedItems={selectedItems}
+            getItemProps={getItemProps}
+            isOpen={isOpen}
+            inputValue={inputValue}
+          />
+        </div>
+      )}
+    </Downshift>
+  </>
+);
+
+MultiSelect.defaultProps = {};
+
+MultiSelect.propTypes = {
+  availableTags: PropTypes.array,
+  labelText: PropTypes.string,
+  setSelectedItems: PropTypes.func,
+  getItemProps: PropTypes.func,
+  isOpen: PropTypes.bool,
+  selectedItem: {},
+  inputValue: PropTypes.string,
+};
diff --git a/statusboard/src/components/MultiSelect/MultiSelect.scss b/statusboard/src/components/Projects/MultiSelect/MultiSelect.scss
similarity index 77%
rename from statusboard/src/components/MultiSelect/MultiSelect.scss
rename to statusboard/src/components/Projects/MultiSelect/MultiSelect.scss
index 0630daf5..662f19f7 100644
--- a/statusboard/src/components/MultiSelect/MultiSelect.scss
+++ b/statusboard/src/components/Projects/MultiSelect/MultiSelect.scss
@@ -1,9 +1,28 @@
-.multi-select {
-  .dropdown-arrow {
-    height: 0.75em;
-    width: 1em;
-    transform: rotate(90deg);
+.unselected-tags {
+  margin-left: -300px;
+}
+  .selected-tag-name {
+    margin-right: 1rem;
+  }
+  
+  .selected-tag-close {
+    font-weight: bold;
+    opacity: 0.75;
+  }
+
+  .selected-tag {
+    margin-top: 0.5rem;
+    padding: 0.3rem 0.5rem;
+
+  
+    &:hover,
+    &:focus {
+      .selected-tag-close {
+        opacity: 1;
+      }
+    }
   }
+.multi-select {
 
   ul {
     position: absolute;
@@ -36,23 +55,4 @@
     margin-left: 1rem;
   }
 
-  .tag {
-    margin-top: 0.5rem;
-    padding: 0.3rem 0.5rem;
-
-    &__name {
-      margin-right: 1rem;
-    }
-    &__close {
-      font-weight: bold;
-      opacity: 0.75;
-    }
-
-    &:hover,
-    &:focus {
-      .tag__close {
-        opacity: 1;
-      }
-    }
-  }
 }
diff --git a/statusboard/src/components/Projects/MultiSelect/UnselectedTags.js b/statusboard/src/components/Projects/MultiSelect/UnselectedTags.js
new file mode 100644
index 00000000..302e8aae
--- /dev/null
+++ b/statusboard/src/components/Projects/MultiSelect/UnselectedTags.js
@@ -0,0 +1,56 @@
+/* eslint-disable react/require-default-props */
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable import/prefer-default-export */
+import React from 'react';
+import PropTypes from 'prop-types';
+import './MultiSelect.scss';
+
+// From https://www.axelerant.com/resources/team-blog/using-downshift-create-multi-select-widget-react
+export const UnselectedTags = ({
+  availableTags,
+  selectedItems = [],
+  getItemProps,
+  isOpen,
+  inputValue,
+}) => (
+  <>
+    <div>
+      <div className="unselected-tags">
+        {isOpen ? (
+          <ul>
+            {availableTags
+              .filter(
+                (item) =>
+                  !selectedItems.find(
+                    (selectedItem) => selectedItem === item
+                  ) && item.toLowerCase().includes(inputValue.toLowerCase())
+              )
+              .map((item) => (
+                <li
+                  {...getItemProps({
+                    item,
+                    key: item,
+                  })}
+                >
+                  {'  '}
+                  {item}
+                </li>
+              ))}
+          </ul>
+        ) : null}
+      </div>
+    </div>
+  </>
+);
+
+UnselectedTags.defaultProps = {};
+
+UnselectedTags.propTypes = {
+  availableTags: PropTypes.array,
+  selectedItems: PropTypes.array,
+  getItemProps: {},
+  isOpen: PropTypes.bool,
+  inputValue: PropTypes.string,
+};
diff --git a/statusboard/src/components/Projects/ProjectsOverview.tsx b/statusboard/src/components/Projects/ProjectsOverview.tsx
new file mode 100644
index 00000000..b981867f
--- /dev/null
+++ b/statusboard/src/components/Projects/ProjectsOverview.tsx
@@ -0,0 +1,40 @@
+/* eslint-disable react/style-prop-object */
+/* eslint-disable react/jsx-filename-extension */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable import/prefer-default-export */
+import React from 'react';
+
+// From https://www.axelerant.com/resources/team-blog/using-downshift-create-multi-select-widget-react
+// eslint-disable @typescript-eslint/explicit-module-boundary-types
+// eslint-disable import/prefer-default-export
+
+export const ProjectsOverview = () => (
+  <div style={{ height: '200px', overflowY: 'scroll' }}>
+    <div className="attention">
+      Looking to volunteer for an open source Civic Tech Github (and non Github)
+      application?
+    </div>
+    <div>
+      Search our curated list of Civic Tech Open Source applications for the
+      ideal volunteer opportunity. Filter projects based on your area of
+      interest and date last updated. Check out the{' '}
+      <a href="https://brigade.cloud/" rel="noreferrer" target="_blank">
+        Project Index Documentation
+      </a>{' '}
+      for information on adding your project, how to contribute, tag taxonomy,
+      and more. Maintained by the{' '}
+      <a
+        href="https://brigade.codeforamerica.org"
+        rel="noreferrer"
+        target="_blank"
+      >
+        Brigade Network
+      </a>{' '}
+      of{' '}
+      <a href="https://codeforamerica.org/" rel="noreferrer" target="_blank">
+        Code for America
+      </a>
+      .
+    </div>
+  </div>
+);
diff --git a/statusboard/src/components/ProjectsTable/ColumnHeader.js b/statusboard/src/components/Projects/ProjectsTable/ColumnHeader.js
similarity index 93%
rename from statusboard/src/components/ProjectsTable/ColumnHeader.js
rename to statusboard/src/components/Projects/ProjectsTable/ColumnHeader.js
index a1e185a1..69ea7534 100644
--- a/statusboard/src/components/ProjectsTable/ColumnHeader.js
+++ b/statusboard/src/components/Projects/ProjectsTable/ColumnHeader.js
@@ -3,8 +3,8 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import cx from 'classnames';
-import Button from '../Button/Button';
-import { ReactComponent as Arrow } from '../../assets/arrow.svg';
+import Button from '../../Button/Button';
+import { ReactComponent as Arrow } from '../../../assets/arrow.svg';
 import './ColumnHeader.scss';
 
 export default function ColumnHeader({ column, disableSort }) {
diff --git a/statusboard/src/components/ProjectsTable/ColumnHeader.scss b/statusboard/src/components/Projects/ProjectsTable/ColumnHeader.scss
similarity index 100%
rename from statusboard/src/components/ProjectsTable/ColumnHeader.scss
rename to statusboard/src/components/Projects/ProjectsTable/ColumnHeader.scss
diff --git a/statusboard/src/components/ProjectsTable/ProjectsTable.scss b/statusboard/src/components/Projects/ProjectsTable/ProjectsTable.scss
similarity index 100%
rename from statusboard/src/components/ProjectsTable/ProjectsTable.scss
rename to statusboard/src/components/Projects/ProjectsTable/ProjectsTable.scss
diff --git a/statusboard/src/components/Projects/ProjectsTable/ProjectsTable.tsx b/statusboard/src/components/Projects/ProjectsTable/ProjectsTable.tsx
new file mode 100644
index 00000000..45c3b748
--- /dev/null
+++ b/statusboard/src/components/Projects/ProjectsTable/ProjectsTable.tsx
@@ -0,0 +1,104 @@
+/* eslint-disable react/jsx-filename-extension */
+import { Row, useTable, TableOptions, PluginHook } from 'react-table';
+import React, { useContext, useEffect } from 'react';
+// import 'react-perfect-scrollbar/dist/css/styles.css';
+import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table';
+import './SuperResponsiveTableStyle.css';
+// import PerfectScrollbar from 'react-perfect-scrollbar';
+import Button from '../../Button/Button';
+import ColumnHeader from './ColumnHeader';
+import './ProjectsTable.scss';
+import { Project } from '../../../utils/types';
+import BrigadeDataContext from '../../../contexts/BrigadeDataContext';
+
+export type TableAttributes = {
+  options: TableOptions<Project>;
+  plugins?: PluginHook<Project>[];
+  setRowCounter?: (value: React.SetStateAction<number>) => void;
+};
+
+export default function ProjectsTable({
+  options,
+  plugins = [],
+  setRowCounter,
+}: TableAttributes): JSX.Element {
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    prepareRow,
+    rows,
+    page,
+    setPageSize,
+    state: { pageSize },
+  } = useTable<Project>(options, ...plugins);
+  const { loading } = useContext(BrigadeDataContext);
+
+  useEffect(() => {
+    setRowCounter?.(rows.length);
+  }, [rows, setRowCounter]);
+
+  return (
+    <div className="projects-table">
+      {/* <PerfectScrollbar> */}
+      <Table {...getTableProps()}>
+        <thead className="desktop">
+          {headerGroups.map((headerGroup) => (
+            <Tr
+              {...headerGroup.getHeaderGroupProps()}
+              key={headerGroup.getHeaderGroupProps().key}
+            >
+              {headerGroup.headers.map((column) => (
+                <ColumnHeader
+                  column={column}
+                  key={column.id}
+                  disableSort={!rows.length}
+                />
+              ))}
+            </Tr>
+          ))}
+        </thead>
+
+        <Tbody {...getTableBodyProps()}>
+          {loading && (
+            <Tr>
+              <Td colSpan={3}>
+                <span>Loading...</span>
+              </Td>
+            </Tr>
+          )}
+          {!rows.length && !loading && (
+            <Tr>
+              <Td colSpan={3}>
+                <span>No projects</span>
+              </Td>
+            </Tr>
+          )}
+          {page.map((row: Row<Project>) => {
+            prepareRow(row);
+            return (
+              <Tr {...row.getRowProps()} key={row.getRowProps().key}>
+                {row.cells.map((cell) => (
+                  <Td {...cell.getCellProps()} key={cell.getCellProps().key}>
+                    {cell.render('Cell')}
+                  </Td>
+                ))}
+              </Tr>
+            );
+          })}
+        </Tbody>
+      </Table>
+      {pageSize < rows.length && (
+        <div className="load-projects-button">
+          {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+          {/* @ts-ignore */}
+          <Button
+            text="Load next 50 projects"
+            onClick={() => setPageSize(pageSize + 50)}
+          />
+        </div>
+      )}
+      {/* </PerfectScrollbar> */}
+    </div>
+  );
+}
diff --git a/statusboard/src/components/ProjectsTable/QueryParamFilter.ts b/statusboard/src/components/Projects/ProjectsTable/QueryParamFilter.ts
similarity index 93%
rename from statusboard/src/components/ProjectsTable/QueryParamFilter.ts
rename to statusboard/src/components/Projects/ProjectsTable/QueryParamFilter.ts
index 836d5c7c..6174ecaf 100644
--- a/statusboard/src/components/ProjectsTable/QueryParamFilter.ts
+++ b/statusboard/src/components/Projects/ProjectsTable/QueryParamFilter.ts
@@ -1,5 +1,5 @@
 import { FilterType, FilterValue, IdType, Row } from 'react-table';
-import { Project } from '../../utils/types';
+import { Project } from '../../../utils/types';
 
 function returnFalse(): boolean {
   return false;
@@ -9,7 +9,7 @@ function returnFalse(): boolean {
  * A simple {@link FilterType} wrapper that updates the URL query parameters based on the column id and filter value.
  */
 export default function queryParamFilter(
-  filter: FilterType<Project>,
+  filter: FilterType<Project>
 ): FilterType<Project> {
   const myFilter: FilterType<Project> = (
     rows: Array<Row<Project>>,
diff --git a/statusboard/src/components/ProjectsTable/SuperResponsiveTableStyle.css b/statusboard/src/components/Projects/ProjectsTable/SuperResponsiveTableStyle.css
similarity index 100%
rename from statusboard/src/components/ProjectsTable/SuperResponsiveTableStyle.css
rename to statusboard/src/components/Projects/ProjectsTable/SuperResponsiveTableStyle.css
diff --git a/statusboard/src/components/ProjectsTable/TextFilter.js b/statusboard/src/components/Projects/ProjectsTable/TextFilter.js
similarity index 96%
rename from statusboard/src/components/ProjectsTable/TextFilter.js
rename to statusboard/src/components/Projects/ProjectsTable/TextFilter.js
index fe86eee9..dd0d2caa 100644
--- a/statusboard/src/components/ProjectsTable/TextFilter.js
+++ b/statusboard/src/components/Projects/ProjectsTable/TextFilter.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import matchSorter from 'match-sorter';
-import { TextInput } from '..';
+import { TextInput } from '../..';
 
 export function fuzzyTextFilter(rows, id, filterValue) {
   const trimmedFilterValue = filterValue?.trim();
diff --git a/statusboard/src/components/Projects/SelectedTags.js b/statusboard/src/components/Projects/SelectedTags.js
new file mode 100644
index 00000000..227aad41
--- /dev/null
+++ b/statusboard/src/components/Projects/SelectedTags.js
@@ -0,0 +1,47 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable import/prefer-default-export */
+import React from 'react';
+import Button from '../Button/Button';
+
+function removeSelectedItemByIndex(i, selectedItems, setSelectedItems) {
+  const temp = [...selectedItems];
+  temp.splice(i, 1);
+  setSelectedItems(temp);
+}
+
+export const SelectedTags = ({
+  setSelectedItems,
+  selectedItems = [],
+  clearTaxonomy,
+}) => (
+  <div>
+    {selectedItems.length > 0 ? (
+      <>
+        <Button
+          className="button-primary clear-button"
+          onClick={() => {
+            setSelectedItems([]);
+            clearTaxonomy();
+          }}
+          text="Clear All"
+        />{' '}
+        {selectedItems.map((value, i) => (
+          <span key={value}>
+            <Button
+              className="form-control--dark-background selected-tag"
+              onClick={() =>
+                removeSelectedItemByIndex(i, selectedItems, setSelectedItems)
+              }
+            >
+              <>
+                <span className="sr-only">Remove</span>
+                <span className="selected-tag-name">{value}</span>
+                <span className="selected-tag-close">x</span>
+              </>
+            </Button>{' '}
+          </span>
+        ))}
+      </>
+    ) : null}
+  </div>
+);
diff --git a/statusboard/src/components/ProjectsTable/ProjectsTable.tsx b/statusboard/src/components/ProjectsTable/ProjectsTable.tsx
deleted file mode 100644
index b4184b09..00000000
--- a/statusboard/src/components/ProjectsTable/ProjectsTable.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { Row, useTable, TableOptions, PluginHook } from 'react-table';
-import React, { useContext, useEffect } from 'react';
-import 'react-perfect-scrollbar/dist/css/styles.css';
-import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table';
-import './SuperResponsiveTableStyle.css'
-import PerfectScrollbar from 'react-perfect-scrollbar';
-import Button from '../Button/Button';
-import ColumnHeader from './ColumnHeader';
-import './ProjectsTable.scss';
-import { Project } from '../../utils/types';
-import BrigadeDataContext from '../../contexts/BrigadeDataContext';
-
-export type TableAttributes = {
-  options: TableOptions<Project>;
-  plugins?: PluginHook<Project>[];
-  setRowCounter?: (value: React.SetStateAction<number>) => void;
-};
-
-export default function ProjectsTable({
-  options,
-  plugins = [],
-  setRowCounter,
-}: TableAttributes): JSX.Element {
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    prepareRow,
-    rows,
-    page,
-    setPageSize,
-    state: { pageSize },
-  } = useTable<Project>(options, ...plugins);
-  const { loading } = useContext(BrigadeDataContext);
-
-  useEffect(() => {
-    setRowCounter?.(rows.length);
-  }, [rows, setRowCounter]);
-
-
-  return (
-    <div className="projects-table">
-      <PerfectScrollbar>
-        <Table {...getTableProps()}>
-          <thead className="desktop">
-            {headerGroups.map((headerGroup) => (
-              <Tr
-                {...headerGroup.getHeaderGroupProps()}
-                key={headerGroup.getHeaderGroupProps().key}
-              >
-                {headerGroup.headers.map((column) => (
-                  <ColumnHeader
-                    column={column}
-                    key={column.id}
-                    disableSort={!rows.length}
-                  />
-                ))}
-              </Tr>
-            ))}
-          </thead>
-    
-          <Tbody {...getTableBodyProps()}>
-            {loading && (
-              <Tr>
-                <Td colSpan={3}>
-                  <span>Loading...</span>
-                </Td>
-              </Tr>
-            )}
-            {!rows.length && !loading && (
-              <Tr>
-                <Td colSpan={3}>
-                  <span>No projects</span>
-                </Td>
-              </Tr>
-            )}
-            {page.map((row: Row<Project>) => {
-              prepareRow(row);
-              return (
-                <Tr {...row.getRowProps()} key={row.getRowProps().key}>
-                  {row.cells.map((cell) => (
-                    <Td {...cell.getCellProps()} key={cell.getCellProps().key}>
-                      {cell.render('Cell')}
-                    </Td>
-                  ))}
-                </Tr>
-              );
-            })}
-          </Tbody>
-        </Table>
-        {pageSize < rows.length && (
-          <div className="load-projects-button">
-            {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-            {/* @ts-ignore */}
-            <Button
-              text="Load next 50 projects"
-              onClick={() => setPageSize(pageSize + 50)}
-            />
-          </div>
-        )}
-      </PerfectScrollbar>
-    </div>
-  );
-}
diff --git a/statusboard/src/components/Select/Select.js b/statusboard/src/components/Select/Select.js
index 5513fbc1..f2f344dc 100644
--- a/statusboard/src/components/Select/Select.js
+++ b/statusboard/src/components/Select/Select.js
@@ -1,4 +1,4 @@
-import {React} from 'react';
+import { React } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import '../commonFormControlStyles.scss';
@@ -13,6 +13,7 @@ export default function Select({
   className,
   inline,
   extraRef,
+  inputClassName = '',
 }) {
   return (
     <div
@@ -32,15 +33,18 @@ export default function Select({
         id={id}
         ref={extraRef}
         onChange={onChange}
-        className={cx('form-control', { 'form-control--inline': inline })}
+        className={`${cx('form-control', {
+          'form-control--inline': inline,
+        })}
+          ${inputClassName}`}
         value={selected}
       >
         {emptyOptionText && (
           <option value={emptyOptionText}>{emptyOptionText}</option>
         )}
-        {options.map((option) => {
-          return <option key={option}>{option}</option>;
-        })}
+        {options.map((option) => (
+          <option key={option}>{option}</option>
+        ))}
       </select>
     </div>
   );
diff --git a/statusboard/src/components/index.js b/statusboard/src/components/index.js
index e635f0c9..3b266ea0 100644
--- a/statusboard/src/components/index.js
+++ b/statusboard/src/components/index.js
@@ -1,8 +1,8 @@
 import Button from './Button/Button';
 import Select from './Select/Select';
 import TextInput from './TextInput/TextInput';
-import ProjectsTable from './ProjectsTable/ProjectsTable';
-import TextFilter, { fuzzyTextFilter } from './ProjectsTable/TextFilter';
+import ProjectsTable from './Projects/ProjectsTable/ProjectsTable';
+import TextFilter, { fuzzyTextFilter } from './Projects/ProjectsTable/TextFilter';
 import RadioGroup from './RadioGroup/RadioGroup';
 
 export {
diff --git a/statusboard/src/contexts/BrigadeDataContext.tsx b/statusboard/src/contexts/BrigadeDataContext.tsx
index cfaa9613..8ab992b6 100644
--- a/statusboard/src/contexts/BrigadeDataContext.tsx
+++ b/statusboard/src/contexts/BrigadeDataContext.tsx
@@ -1,24 +1,25 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
 import React, { createContext, useState, useEffect } from 'react';
 import axios from 'axios';
 
 import {
   getBaseApiUrl,
   getProjectsFromBrigadeData,
-  getTopicsFromProjects,
+  getTagsFromProjects,
 } from '../utils/utils';
 import { Brigade, Project } from '../utils/types';
 
 type BrigadeDataContextType = {
   allBrigadeData: Brigade[];
   allProjects: Project[];
-  allTopics: string[];
+  allTags: string[];
   loading: boolean;
 };
 
 const BrigadeDataContext = createContext<BrigadeDataContextType>({
   allBrigadeData: [],
   allProjects: [],
-  allTopics: [],
+  allTags: [],
   loading: false,
 });
 
@@ -31,7 +32,7 @@ const BrigadeDataContextProvider = ({
 }) => {
   const [brigadeData, setBrigadeData] = useState<Brigade[]>([]);
   const [projects, setProjects] = useState<Project[]>([]);
-  const [topics, setTopics] = useState<string[]>([]);
+  const [tags, setTags] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -43,7 +44,7 @@ const BrigadeDataContextProvider = ({
         setBrigadeData(_brigadeData);
         const _projects = getProjectsFromBrigadeData(_brigadeData);
         setProjects(_projects || []);
-        setTopics(getTopicsFromProjects(_projects));
+        setTags(getTagsFromProjects(_projects));
       }
       setLoading(false);
     };
@@ -57,7 +58,7 @@ const BrigadeDataContextProvider = ({
       value={{
         allBrigadeData: brigadeData,
         allProjects: projects,
-        allTopics: topics,
+        allTags: tags,
         loading,
       }}
     >
diff --git a/statusboard/src/index.scss b/statusboard/src/index.scss
index 54bc7ee0..d38a9aa8 100644
--- a/statusboard/src/index.scss
+++ b/statusboard/src/index.scss
@@ -6,6 +6,10 @@ body {
   overflow-x: hidden;
 }
 
+.attention {
+  font-size: 150%;
+  color: blue;
+}
 body {
   margin: 0;
   padding: 0;
@@ -38,3 +42,19 @@ a {
 .display-inline {
   display: inline;
 }
+
+.hidden {
+  display: none;
+}
+
+.flex {
+  display: flex;
+}
+
+.separator {
+  border-bottom: 3px solid blue;
+  height: 0px;
+  padding: 0px;
+  margin: 0px;
+
+}
diff --git a/statusboard/src/pages/Projects/Projects.scss b/statusboard/src/pages/Projects/Projects.scss
index 28022bf4..2d131919 100644
--- a/statusboard/src/pages/Projects/Projects.scss
+++ b/statusboard/src/pages/Projects/Projects.scss
@@ -8,4 +8,69 @@
     }
   }
 }
+.accordionButtonInnerDiv { color: blue; display: flex; justify-content: space-between;}
+.accordionCollapseExpand {
+  color: blue; 
+}
+.accordionCollapseExpandButton {
+  border-width: 0;
+  padding-left: 6px;
+  font-size: small;
+  color: blue;
+}
+.accordionButton {
+  background-color: #eee;
+  color: blue;
+  cursor: pointer;
+  display: block;
+  width: 150px;
+  padding: 6px;
+  text-align: left;
+  border: none;
+  outline: none;
+  transition: 0.4s;
+}
+
+.active, .accordionButton:hover {
+  background-color: #ccc;
+}
+.overviewSection {
+  margin-bottom: 8px
+}
+.filterSection { display: box; }
+// width below included margins, border, and padding
+.tagFilterSectionSelect { width: 200px }
+// width below excludes padding left, padding right for MultiSelect.  
+// Total width is width + padding + border (2px).  
+// Border width should n
+.tag-filter-section-multi-select { width: 140px; padding-left: 16px; padding-right: 16px; border-width: 2px }
+#nontagFilter label
+{ display: inline-block;
+    width: 280px;
+    vertical-align: middle;
+    position: relative;
+    text-align: relative;
+}
+.divBottomSeparator {
+  border-bottom: blue 3px solid;
+}
+.checkboxLabelAdjustment {
+  /* align-center does not work for checkboxes same as text */
+  padding-top: 5px;
+}
+#only_cfa_projects {
+  margin-left: 0;
+  margin-top: 0;
+}
+#nontagFilter {
+  margin-right: 20px;
+}
+
+#tagFilter label 
+{ display: inline-block;
+width: 250px;
+vertical-align: middle;
+position: relative;
+text-align: left;
+}
   
\ No newline at end of file
diff --git a/statusboard/src/pages/Projects/Projects.tsx b/statusboard/src/pages/Projects/Projects.tsx
index a4f6da22..906d4c58 100644
--- a/statusboard/src/pages/Projects/Projects.tsx
+++ b/statusboard/src/pages/Projects/Projects.tsx
@@ -1,3 +1,8 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable react/jsx-curly-newline */
+/* eslint-disable react/jsx-filename-extension */
+/* eslint-disable import/extensions */
+/* @typescript-eslint/no-unsafe-return */
 import React, {
   useMemo,
   useContext,
@@ -6,6 +11,7 @@ import React, {
   useRef,
   useCallback,
 } from 'react';
+import div from 'react-split-pane';
 import {
   usePagination,
   useFilters,
@@ -16,28 +22,41 @@ import {
   Filters,
   useSortBy,
 } from 'react-table';
-import Modal from 'react-modal'
 import { fuzzyTextFilter } from '../../components';
-import ProjectsTable from '../../components/ProjectsTable/ProjectsTable';
-import { ACTIVE_THRESHOLDS, getTopicsFromProjects, customStringSort, lastPushSort } from '../../utils/utils';
+import ProjectsTable from '../../components/Projects/ProjectsTable/ProjectsTable';
+import Divider from '../../components/Divider/Divider';
+import {
+  ACTIVE_THRESHOLDS,
+  getTagsFromProjects,
+  customStringSort,
+  lastPushSort,
+} from '../../utils/utils';
 import Select from '../../components/Select/Select';
 import Checkbox from '../../components/Checkbox/Checkbox';
-import { MultiSelect } from '../../components/MultiSelect/MultiSelect';
+import { MultiSelect } from '../../components/Projects/MultiSelect/MultiSelect';
+import { ProjectsOverview } from '../../components/Projects/ProjectsOverview';
 import BrigadeDataContext from '../../contexts/BrigadeDataContext';
 import { LoadingIndicator } from '../../components/LoadingIndicator/LoadingIndicator';
 import { useProjectFilters } from '../../utils/useProjectFilters';
 import { Project } from '../../utils/types';
 import getTableColumns from './utils';
-import queryParamFilter from '../../components/ProjectsTable/QueryParamFilter';
+import queryParamFilter from '../../components/Projects/ProjectsTable/QueryParamFilter';
 import TaxonomyDataContext from '../../contexts/TaxonomyDataContext';
 import './Projects.scss';
 import './modal.css';
+import { SelectedTags } from '../../components/Projects/SelectedTags';
 
 function Projects(): JSX.Element {
-  const { allTopics, loading } = useContext(BrigadeDataContext);
+  const { allTags, loading } = useContext(BrigadeDataContext);
   const [rowCounter, setRowCounter] = useState(0);
+  const [displayOverview, setDisplayOverview] = useState(true);
+  const [displayFilter, setDisplayFilter] = useState(true);
+  const [selectedItem, setSelectedItem] = useState();
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState('');
 
-  const { priorityAreasMap, issuesMap, isTaxonomyError } = useContext(TaxonomyDataContext);
+  const { priorityAreasMap, issuesMap, isTaxonomyError } =
+    useContext(TaxonomyDataContext);
 
   const {
     topics,
@@ -48,11 +67,11 @@ function Projects(): JSX.Element {
     queryParameters,
   } = useProjectFilters();
 
-  // Topics
-  const availableTopics = useMemo(() => {
-    if (!projectsFilteredByTime) return allTopics;
-    return getTopicsFromProjects(projectsFilteredByTime);
-  }, [projectsFilteredByTime, allTopics]);
+  // Tags
+  const availableTags = useMemo(() => {
+    if (!projectsFilteredByTime) return allTags;
+    return getTagsFromProjects(projectsFilteredByTime);
+  }, [projectsFilteredByTime, allTags]);
 
   const filterTypes: FilterTypes<Project> = useMemo(
     () => ({ fuzzyTextFilter: queryParamFilter(fuzzyTextFilter) }),
@@ -61,11 +80,9 @@ function Projects(): JSX.Element {
 
   const sortTypes = {
     customStringSort,
-    lastPushSort
+    lastPushSort,
   };
 
-
-
   const columns: Column<Project>[] = useMemo(
     () => getTableColumns(topics, setFilters),
     [topics, setFilters]
@@ -140,130 +157,167 @@ function Projects(): JSX.Element {
     clearPriorityAreaSelect();
   }, [clearIssueSelect, clearPriorityAreaSelect]);
 
-  const [isOpen, setIsOpen] = useState(false);
+  const toggleDisplayOverview = () => {
+    setDisplayOverview(!displayOverview);
+  };
 
-  function toggleModal() {
-    setIsOpen(!isOpen);
-  }
+  const toggleDisplayFilter = () => {
+    setDisplayFilter(!displayFilter);
+  };
 
-  function closeModal() {
-    setIsOpen(false);
-  }
+  const displayActiveClass = (display: boolean): string => {
+    return display ? 'active' : '';
+  };
+
+  const displayHideClass = (display: boolean): string => {
+    return display ? '' : 'hidden';
+  };
 
+  const displayCollapseExpand = (display: boolean): string => {
+    return display ? collapse : expand;
+  };
+  const collapse = '▲';
+  const expand = '▼';
   return (
     <>
-        This is the list of <a href="https://brigade.codeforamerica.org/">Code For America Brigades</a> and other organizations' civic tech projects.
-        <br/>
-        You can search projects by <span className="help">"Topic", "Priority Area" or by "Tags"</span> &nbsp;  
-        <button type='button' className='question_mark' onClick={toggleModal}>&#63;</button>
-        <Modal 
-          isOpen={isOpen}
-          contentLabel="Taxonomy"
-          className="taxonomy_modal"
-          overlayClassName="taxonomy_overlay"
-          onRequestClose={() => closeModal()}          
-          shouldCloseOnOverlayClick
-          shouldCloseOnEsc
-        >
-          <div className='header'>
-            <div>Taxonomy</div>
-            <button type='button' className='close' onClick={toggleModal}>.</button>
-          </div>
-          <div style={{fontSize: '16px'}}>
-            The list of Topics and Priority Action Areas comes from the Taxonomy project.
-            <br/>
-            The list of Tags comes from the Index Crawler.
-            <br/>
-            You can find out more about Taxonomy by clicking on the Taxonomy menu item.
-          </div>
-        </Modal>
-        <br/>
-        You can also exclude projects outside "Code For America Brigades" as well as select a timeframe on when a project was last updated.
-        <br/>
-      <LoadingIndicator loading={loading}>
-        <>
-          <div>
-          <br/>
-            <Select
-              extraRef={null}
-              label={`Showing ${rowCounter} projects with changes on Github in the last  `}
-              id="active_time_range"
-              onChange={(e: ChangeEvent<HTMLSelectElement>) =>
-                setFilters({ timeRange: e.target.value })
-              }
-              selected={timeRange}
-              options={Object.keys(ACTIVE_THRESHOLDS)}
-            />
-            <Checkbox
-              label="Show only Code For America projects?"
-              id="only_cfa_projects"
-              onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                setFilters({ onlyCfA: String(e.target.checked) })
-              }
-            />
-            {!isTaxonomyError &&
-              <div style={{display: 'flex', gap: '30px'}}>
+      <LoadingIndicator loading={false}>
+        <div className="flex">
+          <div
+            className={`filterSection ${displayFilter ? 'block' : 'hidden'}`}
+          >
+            <div id="nontagFilter">
+              <div>
+                <b>General</b>
+              </div>
               <Select
-                extraRef={issueSelect}
-                label="Topic "
-                id="select-issue"
-                options={issueOptions}
-                emptyOptionText=""
-                onChange={(event) => {
-                  if (!event || !event.target) return;
-                  const newVal = event.target.value;
-                  if (typeof newVal === 'string') {
-                    const tags = issuesMap.get(newVal) ?? [];
-                    setFilters({ topics: tags });
-                  }
-                  clearPriorityAreaSelect();
-                }}
+                extraRef={null}
+                label="Changed on github in the last"
+                id="active_time_range"
+                onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+                  setFilters({ timeRange: e.target.value })
+                }
+                selected={timeRange}
+                options={Object.keys(ACTIVE_THRESHOLDS)}
               />
-              <Select
-                extraRef={priorityAreaSelect}
-                label=" CfA Priority Action Area "
-                id="select-priority-areas"
-                options={priorityAreasOptions}
-                emptyOptionText=""
-                onChange={(event) => {
-                  if (!event || !event.target) return;
-                  const newVal = event.target.value;
-                  if (typeof newVal === 'string') {
-                    const tags = priorityAreasMap.get(newVal) ?? [];
-                    setFilters({ topics: tags });
-                  }
-                  clearIssueSelect();
-                }}
+              <Checkbox
+                label="Only Code For America projects?"
+                id="only_cfa_projects"
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  setFilters({ onlyCfA: String(e.target.checked) })
+                }
               />
+            </div>
+            <div id="tagFilter">
+              <div>
+                <b>Tags</b>
               </div>
-            }
+              {!isTaxonomyError && (
+                <div>
+                  <Select
+                    extraRef={issueSelect}
+                    label="By Topic"
+                    id="select-issue"
+                    inputClassName="tagFilterSectionSelect"
+                    options={issueOptions}
+                    emptyOptionText=""
+                    onChange={(event) => {
+                      if (!event || !event.target) return;
+                      const newVal = event.target.value;
+                      if (typeof newVal === 'string') {
+                        const tags = issuesMap.get(newVal) ?? [];
+                        setFilters({ topics: tags });
+                      }
+                      clearPriorityAreaSelect();
+                    }}
+                  />
+                  <Select
+                    inputClassName="tagFilterSectionSelect"
+                    extraRef={priorityAreaSelect}
+                    label="By CfA Priority Action Area "
+                    id="select-priority-areas"
+                    options={priorityAreasOptions}
+                    emptyOptionText=""
+                    onChange={(event) => {
+                      if (!event || !event.target) return;
+                      const newVal = event.target.value;
+                      if (typeof newVal === 'string') {
+                        const tags = priorityAreasMap.get(newVal) ?? [];
+                        setFilters({ topics: tags });
+                      }
+                      clearIssueSelect();
+                    }}
+                  />
+                </div>
+              )}
+              {availableTags && (
+                <>
+                  <MultiSelect
+                    clearTaxonomy={clearTaxonomy}
+                    inputClassName="tag-filter-section-multi-select"
+                    selectedItems={topics}
+                    setSelectedItem={setSelectedItem}
+                    setInputValue={setInputValue}
+                    inputValue={inputValue}
+                    setIsOpen={setIsOpen}
+                    isOpen={isOpen}
+                    availableTags={availableTags}
+                    labelText="Add Specific Tags"
+                    setSelectedItems={(newTags: string[] | undefined) =>
+                      setFilters({ topics: newTags })
+                    }
+                  />
+                </>
+              )}
+            </div>
           </div>
-          {availableTopics  && (
-            <MultiSelect
-              clearTaxonomy={clearTaxonomy}
+          <div id="right-panel" className="block right-panel">
+            <button
+              type="button"
+              className={`accordionButton ${displayActiveClass(
+                displayOverview
+              )}`}
+              onClick={toggleDisplayOverview}
+            >
+              <div className="accordionButtonInnerDiv">
+                <div>Overview</div>
+                <div className="accordionCollapseExpand">
+                  {displayCollapseExpand(displayOverview)}
+                </div>
+              </div>
+            </button>{' '}
+            <div
+              className={`overviewSection ${displayHideClass(displayOverview)}`}
+            >
+              <ProjectsOverview />
+            </div>
+            <Divider />
+            <SelectedTags
               selectedItems={topics}
-              setSelectedItems={(newTopics: string[]) =>
-                setFilters({ topics: newTopics })
-              }
-              items={availableTopics}
-              labelText="Tags"
-              onSelectionItemsChange={(newTopics: string[] | undefined) =>
-                setFilters({ topics: newTopics })
+              setSelectedItems={(newTags: string[] | undefined) =>
+                setFilters({ topics: newTags })
               }
+              clearTaxonomy={clearTaxonomy}
             />
-          )}
-          <br />
-          <div className="hideFifthColumn">
-            <ProjectsTable
-              options={options}
-              plugins={hooks}
-              setRowCounter={setRowCounter}
-            />
+            <div
+              className="hideFifthColumn"
+              style={{ height: getBrowserHeight(), overflowY: 'scroll' }}
+            >
+              <ProjectsTable
+                options={options}
+                plugins={hooks}
+                setRowCounter={setRowCounter}
+              />
+            </div>
           </div>
-        </>
+        </div>
       </LoadingIndicator>
     </>
   );
 }
 
 export default Projects;
+function getBrowserHeight(): string {
+  const height = window.innerHeight - 185;
+  console.log(`debug ${height}px`);
+  return `${height}px`;
+}
diff --git a/statusboard/src/pages/Projects/utils.tsx b/statusboard/src/pages/Projects/utils.tsx
index 3cfa1a4b..6d4a9a67 100644
--- a/statusboard/src/pages/Projects/utils.tsx
+++ b/statusboard/src/pages/Projects/utils.tsx
@@ -80,8 +80,8 @@ function topicsCellButtons(
 }
 
 export default function getTableColumns(
-  filterTopics: string[] = [],
-  setFilterTopics: (newFilter: Filter) => void
+  filterTags: string[] = [],
+  setFilterTags: (newFilter: Filter) => void
 ): Column<Project>[] {
   return [
     {
@@ -117,7 +117,7 @@ export default function getTableColumns(
       id: 'topics',
       accessor: (project: Project) => project.topics?.length,
       disableFilters: true,
-      Cell: topicsCellButtons(filterTopics, setFilterTopics),
+      Cell: topicsCellButtons(filterTags, setFilterTags),
       disableSortBy: true,
     },
     {
diff --git a/statusboard/src/utils/useProjectFilters.ts b/statusboard/src/utils/useProjectFilters.ts
index f7e56306..9553e224 100644
--- a/statusboard/src/utils/useProjectFilters.ts
+++ b/statusboard/src/utils/useProjectFilters.ts
@@ -8,7 +8,7 @@ import {
   filterActiveProjects,
   filterProjectsByBrigades,
   filterProjectsByTime,
-  filterProjectsByTopics,
+  filterProjectsByTags,
   filterProjectsByCfA,
 } from './utils';
 
@@ -21,7 +21,7 @@ export type Filter = {
 
 export type ProjectFilterReturn = Filter & {
   projectsFilteredByTime: Project[];
-  projectsFilteredByTopics: Project[];
+  projectsFilteredByTags: Project[];
   projectsFilteredByBrigades: Project[];
   projectsFilteredByAllParams: Project[];
   projectsFilteredByCfA: Project[];
@@ -59,8 +59,8 @@ export const useProjectFilters = (): ProjectFilterReturn => {
     [timeRange, allProjects],
   );
 
-  const projectsFilteredByTopics = useMemo<Project[]>(
-    () => filterProjectsByTopics(allProjects || [], topics),
+  const projectsFilteredByTags = useMemo<Project[]>(
+    () => filterProjectsByTags(allProjects || [], topics),
     [topics, allProjects],
   );
 
@@ -105,7 +105,7 @@ export const useProjectFilters = (): ProjectFilterReturn => {
     queryParameters,
     projectsFilteredByTime,
     projectsFilteredByCfA,
-    projectsFilteredByTopics,
+    projectsFilteredByTags,
     projectsFilteredByBrigades,
     projectsFilteredByAllParams,
   };
diff --git a/statusboard/src/utils/utils.ts b/statusboard/src/utils/utils.ts
index e37d0f89..86e64968 100644
--- a/statusboard/src/utils/utils.ts
+++ b/statusboard/src/utils/utils.ts
@@ -40,13 +40,13 @@ export function getProjectsFromBrigadeData(brigadeData: Brigade[]) {
   );
 }
 
-function numTopicsIntersecting(
-  filterByTopics: any[],
-  projectTopics?: string | any[]
+function numTagsIntersecting(
+  filterByTags: any[],
+  projectTags?: string | any[]
 ) {
-  if (!filterByTopics?.length) return 1;
-  if (!projectTopics || !projectTopics.length) return -1;
-  const intersection = filterByTopics.filter((t) => projectTopics.includes(t));
+  if (!filterByTags?.length) return 1;
+  if (!projectTags || !projectTags.length) return -1;
+  const intersection = filterByTags.filter((t) => projectTags.includes(t));
   return intersection.length;
 }
 
@@ -84,20 +84,20 @@ export function filterProjectsByBrigades(
   );
 }
 
-type ProjectWithTopicsMatched = Project & {
-  numberTopicsMatched?: number;
+type ProjectWithTagsMatched = Project & {
+  numberTagsMatched?: number;
 };
-export function filterProjectsByTopics(projects: Project[], topics?: string[]) {
+export function filterProjectsByTags(projects: Project[], topics?: string[]) {
   if (!topics?.length) return projects;
   return projects
     .map((p) => ({
       ...p,
-      numberTopicsMatched: numTopicsIntersecting(topics, p.topics),
+      numberTagsMatched: numTagsIntersecting(topics, p.topics),
     }))
-    .sort((a, b) => b.numberTopicsMatched - a.numberTopicsMatched)
+    .sort((a, b) => b.numberTagsMatched - a.numberTagsMatched)
     .filter(
-      (project: ProjectWithTopicsMatched) =>
-        (project.numberTopicsMatched || -1) > 0
+      (project: ProjectWithTagsMatched) =>
+        (project.numberTagsMatched || -1) > 0
     );
 }
 
@@ -135,11 +135,11 @@ export function filterActiveProjects(
   if (!projects) return [];
   // Set destructuring and allow defaults to be overwritten
   const { timeRange, topics, brigades, onlyCfA } = options || {};
-  let newProjects: ProjectWithTopicsMatched[] = filterProjectsByBrigades(
+  let newProjects: ProjectWithTagsMatched[] = filterProjectsByBrigades(
     projects,
     brigades
   );
-  newProjects = filterProjectsByTopics(newProjects, topics);
+  newProjects = filterProjectsByTags(newProjects, topics);
   newProjects = filterProjectsByTime(newProjects, timeRange);
   newProjects = filterProjectsByCfA(newProjects, onlyCfA);
   return newProjects;
@@ -149,15 +149,15 @@ export function slugify(s: string) {
   return s.toLowerCase().replace(/[^\w]+/g, '');
 }
 
-export function getTopicsFromProjects(projects?: Project[]) {
+export function getTagsFromProjects(projects?: Project[]) {
   if (!projects) return [];
   // Sorted by frequency
-  const allTopics: string[] = projects.reduce<string[]>(
+  const allTags: string[] = projects.reduce<string[]>(
     (topics, project) => topics.concat(project.topics || []),
     []
   );
   const topicsByFrequency: { [key: string]: number } = {};
-  allTopics.forEach(
+  allTags.forEach(
     (topic) => (topicsByFrequency[topic] = (topicsByFrequency[topic] || 0) + 1)
   );
 
diff --git a/statusboard/todo.txt b/statusboard/todo.txt
new file mode 100644
index 00000000..2b9c81e1
--- /dev/null
+++ b/statusboard/todo.txt
@@ -0,0 +1,10 @@
+- make input fields same size in tags
+- move to side
+- add project and keyword as demo
+- customize columns
+- change icon to be same as other buttons
+- make accordion button into an element
+- add dash to style names
+- investigate cx and --inline in Projects
+- get rid of warning about ts not allowing jsx
+
diff --git a/statusboard/tsconfig.json b/statusboard/tsconfig.json
index 29da742a..0eb3e402 100644
--- a/statusboard/tsconfig.json
+++ b/statusboard/tsconfig.json
@@ -1,4 +1,7 @@
 {
+  "rules":  {
+    "react/jsx-filename-extension": [2, { "extensions": [".js'", ".jsx", ".ts", ".tsx"] }]
+  },
   "compilerOptions": {
     "target": "es5",
     "downlevelIteration": true,
diff --git a/statusboard/yarn.lock b/statusboard/yarn.lock
index aa1bd2c9..9a8d6648 100644
--- a/statusboard/yarn.lock
+++ b/statusboard/yarn.lock
@@ -9354,7 +9354,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.5.4, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -9600,7 +9600,7 @@ react-leaflet@^2.7.0:
     hoist-non-react-statics "^3.3.2"
     warning "^4.0.3"
 
-react-lifecycles-compat@^3.0.0:
+react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
@@ -9723,6 +9723,22 @@ react-scripts@4.0.3:
   optionalDependencies:
     fsevents "^2.1.3"
 
+react-split-pane@^0.1.92:
+  version "0.1.92"
+  resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.92.tgz#68242f72138aed95dd5910eeb9d99822c4fc3a41"
+  integrity sha512-GfXP1xSzLMcLJI5BM36Vh7GgZBpy+U/X0no+VM3fxayv+p1Jly5HpMofZJraeaMl73b3hvlr+N9zJKvLB/uz9w==
+  dependencies:
+    prop-types "^15.7.2"
+    react-lifecycles-compat "^3.0.4"
+    react-style-proptype "^3.2.2"
+
+react-style-proptype@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-3.2.2.tgz#d8e998e62ce79ec35b087252b90f19f1c33968a0"
+  integrity sha512-ywYLSjNkxKHiZOqNlso9PZByNEY+FTyh3C+7uuziK0xFXu9xzdyfHwg4S9iyiRRoPCR4k2LqaBBsWVmSBwCWYQ==
+  dependencies:
+    prop-types "^15.5.4"
+
 react-super-responsive-table@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/react-super-responsive-table/-/react-super-responsive-table-5.2.0.tgz#5357c928f7bca7851b3ae3f2e8e7550f7acf5c7d"