diff --git a/.vscode/settings.json b/.vscode/settings.json
index bfa0aab..b1b1606 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,8 @@
 {
   "todo-tree.flat": false,
   "todo-tree.grouped": false,
-  "todo-tree.expanded": true
-}
\ No newline at end of file
+  "todo-tree.expanded": true,
+  "workbench.colorCustomizations": {
+    "titleBar.activeBackground": "#e2c34a"
+  }
+}
diff --git a/src/components/FareList.js b/src/components/FareList.js
index dce5e8a..b6a3caa 100644
--- a/src/components/FareList.js
+++ b/src/components/FareList.js
@@ -41,38 +41,106 @@ class FareList extends Component {
   }
 
   render() {
-    const { results } = this.props.fareattr
+    const { fareattr, farerule } = this.props
     const { match } = this.props
     return (
       <StyledBox>
       <h1 className="title">Fare</h1>
       <div className="columns">
-        <div className="column is-12">
+        <div className="column is-6">
           <nav className="level is-mobile">
             <p className="level-item has-text-centered">
-              <Link className="link is-info" to={`${match.url}/new`}>
-                <i className="fas fa-plus" /> New fare
+              <Link className="link is-info" to={`${match.url}/rules/new`}>
+                <i className="fas fa-plus" /> New fare rule
               </Link>
             </p>
           </nav>
-          {results && Object.keys(results).map(i => (
-          <FakeRow className="level panel" key={results[i].fare_id}>
+          {fareattr.results && Object.keys(farerule.results).map(i => (
+          <FakeRow className="level panel" key={fareattr.results[i].fare_id}>
             <div className="level-item has-text-centered">
               <div>
                 <p className="heading">Fare ID</p>
-                <p className="title"><Link to={`${match.url}/${results[i].fare_id}`}>{results[i].fare_id}</Link></p>
+                <p className="title"><Link to={`${match.url}/${fareattr.results[i].fare_id}`}>{fareattr.results[i].fare_id}</Link></p>
               </div>
             </div>
             <div className="level-item has-text-centered">
               <div>
-                <p className="heading">Start</p>
-                <p className="title">{results[i].start_date}</p>
+                <p className="heading">Origin ID</p>
+                <p className="title">{fareattr.results[i].origin_id}</p>
               </div>
             </div>
             <div className="level-item has-text-centered">
               <div>
-                <p className="heading">End</p>
-                <p className="title">{results[i].end_date}</p>
+                <p className="heading">Destination ID (or contains)</p>
+                <p className="title">
+                  {fareattr.results[i].destination_id}
+                  {fareattr.results[i].contains_id}
+                </p>
+              </div>
+            </div>
+            <div className="level-item has-text-centered">
+              <div>
+                <p className="heading">Route ID</p>
+                <p className="title">
+                  {fareattr.results[i].route_id}
+                </p>
+              </div>
+            </div>
+          </FakeRow>
+          ))}
+        </div>
+
+
+        <div className="column is-6">
+          <nav className="level is-mobile">
+            <p className="level-item has-text-centered">
+              <Link className="link is-info" to={`${match.url}/attributes/new`}>
+                <i className="fas fa-plus" /> New fare attributes
+              </Link>
+            </p>
+          </nav>
+          {fareattr.results && Object.keys(fareattr.results).map(i => (
+          <FakeRow className="level panel" key={fareattr.results[i].fare_id}>
+            <div className="level-item has-text-centered">
+              <div>
+                <p className="heading">Fare ID</p>
+                <p className="title"><Link to={`${match.url}/${fareattr.results[i].fare_id}`}>{fareattr.results[i].fare_id}</Link></p>
+              </div>
+            </div>
+            <div className="level-item has-text-centered">
+              <div>
+                <p className="heading">Price</p>
+                <p className="title">{fareattr.results[i].price}</p>
+              </div>
+            </div>
+            <div className="level-item has-text-centered">
+              <div>
+                <p className="heading">Currency</p>
+                <p className="title">{fareattr.results[i].currency_type}</p>
+              </div>
+            </div>
+            <div className="level-item has-text-centered">
+              <div>
+                <p className="heading">Payment Method</p>
+                <p className="title">{fareattr.results[i].payment_method}</p>
+              </div>
+            </div>
+            <div className="level-item has-text-centered">
+              <div>
+                <p className="heading">Transfer</p>
+                <p className="title">{fareattr.results[i].transfer}</p>
+              </div>
+            </div>
+            <div className="level-item has-text-centered">
+              <div>
+                <p className="heading">Duration</p>
+                <p className="title">{fareattr.results[i].transfer_duration}</p>
+              </div>
+            </div>
+            <div className="level-item has-text-centered">
+              <div>
+                <p className="heading">Agency</p>
+                <p className="title">{fareattr.results[i].agency_id}</p>
               </div>
             </div>
           </FakeRow>