diff --git a/.eslintrc.json b/.eslintrc.json
index 7cbce95..a02d387 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -34,11 +34,12 @@
         "linebreak-style": ["error", "unix"],
         "react-native/no-unused-styles": 2,
         "react-native/split-platform-components": 2,
-        "react-native/no-inline-styles": 2,
-        "react-native/no-color-literals": 2,
         "react-native/no-raw-text": 2,
         "react-native/no-single-element-style-arrays": 2,
         "react-hooks/rules-of-hooks": "error",
-        "react-hooks/exhaustive-deps": "warn"
+        "react-hooks/exhaustive-deps": "warn",
+        "react-native/no-inline-styles": 0,
+        "react-native/no-color-literals": 0,
+        "react/prop-types": 0
     }
 }
\ No newline at end of file
diff --git a/components/Displays/nodeTeaser.js b/components/Displays/nodeTeaser.js
index 5f4944c..fc9ddbd 100644
--- a/components/Displays/nodeTeaser.js
+++ b/components/Displays/nodeTeaser.js
@@ -164,6 +164,7 @@ export default class NodeTeaser extends React.Component {
 
     return <View style={styles.nodeWrapper}>
       <View style={styles.nodeInnerWrapper}>
+        {this.props.showType && <Text style={styles.contentType}>{this.props.editableContentTypes[node.type].label}</Text>}
         <TouchableHighlight style={styles.touchable}  onPress={() => this.viewNode()}>
           <Text style={styles.nodeTitle}>{node.title}</Text>
         </TouchableHighlight>
@@ -211,6 +212,10 @@ const styles = StyleSheet.create({
     width: '100%',
     marginBottom: 15,
   },
+  contentType: {
+    textTransform: 'uppercase',
+    fontSize: 12
+  },
   touchable: {
 
   }
diff --git a/navigation/MainTabNavigator.js b/navigation/MainTabNavigator.js
index a3c6d43..86fc9fb 100644
--- a/navigation/MainTabNavigator.js
+++ b/navigation/MainTabNavigator.js
@@ -15,6 +15,7 @@ import OfflineScreen from '../screens/OfflineScreen';
 import WebviewScreen from "../screens/WebviewScreen";
 import NodeScreen from "../screens/NodeScreen";
 import NodeListing from "../screens/NodeListingScreen";
+import CategoryScreen from "../screens/CategoryScreen";
 import Colors from "../constants/Colors";
 
 const defaultScreenOptions = {
@@ -29,8 +30,14 @@ const defaultScreenOptions = {
 const HomeStack = createStackNavigator(
   {
     Home: {screen: HomeScreen},
-    Node: {screen: NodeScreen},
     NodeListing: {screen: NodeListing},
+    Node: {screen: NodeScreen},
+    Category: {
+      screen: CategoryScreen,
+      navigationOptions: ({navigation}) => ({
+        title: navigation.state.params.name
+      })
+    },
     EditContentForm: {screen: CreateContentFormScreen}
   },
   {
diff --git a/package.json b/package.json
index 9af758c..47b0d56 100755
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "expo-task-manager": "~8.1.0",
     "expo-video-thumbnails": "~4.1.0",
     "lodash": "^4.17.15",
+    "prop-types": "^15.7.2",
     "react": "16.9.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
     "react-native-appearance": "~0.3.3",
diff --git a/screens/CategoryScreen.js b/screens/CategoryScreen.js
new file mode 100644
index 0000000..7db515f
--- /dev/null
+++ b/screens/CategoryScreen.js
@@ -0,0 +1,86 @@
+import React, {useEffect, useMemo, useState} from 'react'
+import PropTypes from 'prop-types'
+import {ScrollView, Text, View, StyleSheet} from "react-native";
+import _ from 'lodash';
+import NodeTeaser from "../components/Displays/nodeTeaser";
+
+export default function CategoryScreen({navigation, screenProps}) {
+  const [label, setLabel] = useState('');
+  const [title, setTitle] = useState('');
+  const [filter, setFilter] = useState({tid: null, field: null});
+
+  useEffect(() => {
+    const type = navigation.getParam('type');
+    const field = navigation.getParam('field');
+    const tid = navigation.getParam('tid');
+
+    const label = _.get(screenProps, ['displayModes', type, field, 'label'], 'Term');
+    const title = _.get(screenProps, ['terms', tid, 'name'], '');
+    navigation.setParams({name: `${label}: ${title}`})
+
+    setLabel(label);
+    setTitle(title);
+    setFilter({tid, field});
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const list = useMemo(() => {
+    if (filter.tid === null) {
+      return [];
+    }
+    return _.filter(screenProps.nodes, (node) => {
+      const field = _.get(node, filter.field);
+      if (field === undefined || field.length === 0) {
+        return false;
+      }
+      const lang = _.has(field, 'en') ? 'en' : 'und';
+
+      const result = _.find(field[lang], {'tid': filter.tid})
+
+      return result !== undefined
+    });
+  }, [screenProps.refreshing, filter]); // eslint-disable-line react-hooks/exhaustive-deps
+
+
+  if (list.length === 0) {
+    return (
+      <View style={styles.container}>
+        <Text>No other content synced to the device for</Text>
+        <Text>{label}: {title}</Text>
+      </View>
+    )
+  }
+
+  return (
+    <ScrollView style={styles.container}>
+      {list.map((item) =>
+        <NodeTeaser
+          showType={true}
+          key={item.nid}
+          node={item}
+          token={screenProps.token}
+          cookie={screenProps.cookie}
+          url={screenProps.siteUrl}
+          db={screenProps.db}
+          terms={screenProps.terms}
+          allNodes={screenProps.nodes}
+          navigation={navigation}
+          editable={screenProps.editable}
+          editableContentTypes={screenProps.contentTypes}
+        />)}
+    </ScrollView>
+  )
+}
+
+CategoryScreen.propTypes = {
+  navigation: PropTypes.object,
+  screenProps: PropTypes.object
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    paddingLeft: 15,
+    paddingRight: 15,
+    paddingTop: 15}
+})
diff --git a/screens/NodeScreen.js b/screens/NodeScreen.js
index 64ca00f..e5bf65d 100644
--- a/screens/NodeScreen.js
+++ b/screens/NodeScreen.js
@@ -4,7 +4,7 @@ import {
   Text,
   View,
   ScrollView,
-  Dimensions,
+  Dimensions, TouchableHighlight, TouchableOpacity,
 } from 'react-native';
 import {Feather} from '@expo/vector-icons';
 import * as SQLite from 'expo-sqlite';
@@ -21,6 +21,7 @@ import {FieldCollection} from "../components/FieldCollection";
 import _ from 'lodash';
 import {NavigationActions} from "react-navigation";
 import UnlockOrientation from "../components/UnlockOrientation";
+import Colors from "../constants/Colors";
 
 class NodeScreen extends React.Component {
   static navigationOptions = ({navigation}) => {
@@ -118,6 +119,21 @@ class NodeScreen extends React.Component {
     });
   }
 
+  showCategory = (field, tid) => {
+    console.log('IN HERE')
+    const navigateAction = NavigationActions.navigate({
+      routeName: 'Category',
+      params: {
+        tid: tid,
+        field: field,
+        type: this.state.thisNode.type,
+        exclude: [this.state.thisNode.nid],
+      },
+      key: `term-${tid}`
+    });
+    this.props.navigation.dispatch(navigateAction);
+  }
+
   render() {
     const emptyView = (
       <View style={{flex: 1}}>
@@ -215,7 +231,7 @@ class NodeScreen extends React.Component {
         fieldObject.view_mode_properties.type === 'textformatter_list') {
         const isObject = Object.prototype.toString.call(node[fieldName]) === '[object Object]';
         if (isObject) {
-          let fieldData = '';
+          let fieldData = [];
           let errorMessage = '';
           let oneExists = false;
           if (!this.props.screenProps.terms) {
@@ -232,11 +248,15 @@ class NodeScreen extends React.Component {
                     item to Mukurtu Mobile.</Text>
               } else {
                 oneExists = true;
-                if (i > 0) {
-                  fieldData += ', ';
-                }
+                // if (i > 0) {
+                //   fieldData.push() += ', ';
+                // }
                 if (typeof this.props.screenProps.terms[tid] !== 'undefined') {
-                  fieldData += this.props.screenProps.terms[tid].name;
+                  // fieldData += this.props.screenProps.terms[tid].name;
+                  fieldData.push(
+                    <TouchableOpacity key={tid} onPress={() => this.showCategory(fieldName, tid)}>
+                      <Text style={styles.termLink}>{this.props.screenProps.terms[tid].name}</Text>
+                    </TouchableOpacity>);
                 } else {
                   // This is a catch in case the term isn't synced.
                   // let term = <Term
@@ -258,7 +278,7 @@ class NodeScreen extends React.Component {
             }
           }
 
-          renderedNode.push(<Text key={`${fieldName}_term_ref_${index}`} style={styles.text}>{fieldData}</Text>)
+          renderedNode.push(<View key={`${fieldName}_term_ref_${index}`} style={styles.text}>{fieldData}</View>)
         }
       }
 
@@ -579,32 +599,34 @@ class NodeScreen extends React.Component {
   }
 }
 
-const
-  styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      backgroundColor: '#DCDCDC',
-      padding: 10,
-    },
-    label: {
-      marginTop: 10,
-      marginBottom: 5,
-      color: '#000',
-      fontSize: 24
-    },
-    text: {
-      marginBottom: 10,
-      color: '#000',
-      fontSize: 16
-    },
-    map: {
-      width: Dimensions.get('window').width - 20,
-      height: 300,
-      marginBottom: 10
-    },
-    syncError: {
-      fontSize: 12
-    },
-  });
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#dcdcdc',
+    padding: 10,
+  },
+  label: {
+    marginTop: 10,
+    marginBottom: 5,
+    color: '#000',
+    fontSize: 24
+  },
+  text: {
+    marginBottom: 10,
+    color: '#000',
+    fontSize: 16
+  },
+  map: {
+    width: Dimensions.get('window').width - 20,
+    height: 300,
+    marginBottom: 10
+  },
+  syncError: {
+    fontSize: 12
+  },
+  termLink: {
+    color: Colors.primary
+  }
+});
 
 export default NodeScreen;