diff --git a/src/common/utilities.js b/src/common/utilities.js
index 7cbf8cb..145cdc6 100644
--- a/src/common/utilities.js
+++ b/src/common/utilities.js
@@ -159,7 +159,7 @@ export function getEventCategories(event, categories) {
   const matchedCategories = [];
   if (event.associations && event.associations.length > 0) {
     event.associations.reduce((acc, val) => {
-      const foundCategory = categories.find((cat) => cat.id === val);
+      const foundCategory = categories.find((cat) => cat.title === val);
       if (foundCategory) acc.push(foundCategory);
       return acc;
     }, matchedCategories);
diff --git a/src/components/controls/CategoriesListPanel.js b/src/components/controls/CategoriesListPanel.js
index f5e0054..bd62217 100644
--- a/src/components/controls/CategoriesListPanel.js
+++ b/src/components/controls/CategoriesListPanel.js
@@ -15,14 +15,14 @@ const CategoriesListPanel = ({
         {categories.map((cat) => {
           return (
             <li
-              key={cat.id.replace(/ /g, "_")}
+              key={cat.title.replace(/ /g, "_")}
               className="filter-filter active"
               style={{ marginLeft: "20px" }}
             >
               <Checkbox
-                label={cat.id}
-                isActive={activeCategories.includes(cat.id)}
-                onClickCheckbox={() => onCategoryFilter(cat.id)}
+                label={cat.title}
+                isActive={activeCategories.includes(cat.title)}
+                onClickCheckbox={() => onCategoryFilter(cat.title)}
               />
             </li>
           );
diff --git a/src/components/space/carto/Map.js b/src/components/space/carto/Map.js
index 864b1bd..a1fa588 100644
--- a/src/components/space/carto/Map.js
+++ b/src/components/space/carto/Map.js
@@ -26,6 +26,7 @@ import {
 } from "../../../common/utilities";
 
 // NB: important constants for map, TODO: make statics
+// Note: Base map is OpenStreetMaps by default; can choose another base map
 const supportedMapboxMap = ["streets", "satellite"];
 const defaultToken = "your_token";
 
diff --git a/src/components/time/Categories.js b/src/components/time/Categories.js
index 5a98cdd..74e7074 100644
--- a/src/components/time/Categories.js
+++ b/src/components/time/Categories.js
@@ -62,7 +62,7 @@ class TimelineCategories extends React.Component {
     const { dims, categories, fallbackLabel } = this.props;
     const categoriesExist = categories && categories.length > 0;
     const renderedCategories = categoriesExist
-      ? this.props.categories.map((cat, idx) => this.renderCategory(cat, idx))
+      ? categories.map((cat, idx) => this.renderCategory(cat, idx))
       : this.renderCategory(fallbackLabel, 0);
 
     return (
diff --git a/src/components/time/Timeline.js b/src/components/time/Timeline.js
index 77b09c4..c5b5744 100644
--- a/src/components/time/Timeline.js
+++ b/src/components/time/Timeline.js
@@ -96,7 +96,7 @@ class Timeline extends React.Component {
     const { features } = this.props;
     if (features.GRAPH_NONLOCATED && features.GRAPH_NONLOCATED.categories) {
       categories = categories.filter(
-        (cat) => !features.GRAPH_NONLOCATED.categories.includes(cat.id)
+        (cat) => !features.GRAPH_NONLOCATED.categories.includes(cat.title)
       );
     }
     const extraPadding = 0;
@@ -107,7 +107,7 @@ class Timeline extends React.Component {
     const catsYpos = categories.map((g, i) => {
       return (i + 1) * catHeight + marginTop + extraPadding / 2;
     });
-    const catMap = categories.map((c) => c.id);
+    const catMap = categories.map((c) => c.title);
 
     return (cat) => {
       const idx = catMap.indexOf(cat);
@@ -304,7 +304,9 @@ class Timeline extends React.Component {
   getY(event) {
     const { features, domain } = this.props;
     const { USE_CATEGORIES, GRAPH_NONLOCATED } = features;
+    // Categories represent active categories here
     const { categories } = domain;
+
     const categoriesExist =
       USE_CATEGORIES && categories && categories.length > 0;
 
@@ -394,7 +396,7 @@ class Timeline extends React.Component {
                 onDragEnd={() => {
                   this.onDragEnd();
                 }}
-                categories={categories.map((c) => c.id)}
+                categories={categories.map((c) => c.title)}
                 features={this.props.features}
                 fallbackLabel={
                   copy[this.props.app.language].timeline
@@ -467,7 +469,7 @@ function mapStateToProps(state) {
       categories: ((state) => {
         const allcats = selectors.getCategories(state);
         const active = selectors.getActiveCategories(state);
-        return allcats.filter((c) => active.includes(c.id));
+        return allcats.filter((c) => active.includes(c.title));
       })(state),
       narratives: state.domain.narratives,
     },
diff --git a/src/components/time/atoms/Events.js b/src/components/time/atoms/Events.js
index 0d50f82..2402b03 100644
--- a/src/components/time/atoms/Events.js
+++ b/src/components/time/atoms/Events.js
@@ -134,9 +134,9 @@ const TimelineEvents = ({
     // those timelines: so we create as many event 'shadows' as there are
     // categories
     const evShadows = getEventCategories(event, categories).map((cat) => {
-      const y = getY({ ...event, category: cat.id });
+      const y = getY({ ...event, category: cat.title });
 
-      const colour = event.colour ? event.colour : getCategoryColor(cat.id);
+      const colour = event.colour ? event.colour : getCategoryColor(cat.title);
       const styles = {
         fill: colour,
         fillOpacity: y > 0 ? calcOpacity(1) : 0,
diff --git a/src/components/time/atoms/Markers.js b/src/components/time/atoms/Markers.js
index abdc9a8..186aa00 100644
--- a/src/components/time/atoms/Markers.js
+++ b/src/components/time/atoms/Markers.js
@@ -65,7 +65,7 @@ const TimelineMarkers = ({
       (isLatitude(event.latitude) && isLongitude(event.longitude)) ||
       (features.GRAPH_NONLOCATED && event.projectOffset !== -1);
     const evShadows = getEventCategories(event, categories).map((cat) =>
-      getEventY({ ...event, category: cat.id })
+      getEventY({ ...event, category: cat.title })
     );
 
     function renderMarkerForEvent(y) {
diff --git a/src/reducers/app.js b/src/reducers/app.js
index 459d3c2..d137850 100644
--- a/src/reducers/app.js
+++ b/src/reducers/app.js
@@ -243,7 +243,7 @@ function setNotLoading(appState) {
 
 function setInitialCategories(appState, action) {
   const categories = action.values.reduce((acc, val) => {
-    if (val.mode === ASSOCIATION_MODES.CATEGORY) acc.push(val.id);
+    if (val.mode === ASSOCIATION_MODES.CATEGORY) acc.push(val.title);
     return acc;
   }, []);