diff --git a/ui/src/visualizations/legacy/file-tree-comparison/chart/chart.js b/ui/src/visualizations/legacy/file-tree-comparison/chart/chart.js
index 477a2ad1..7091b11f 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/chart/chart.js
+++ b/ui/src/visualizations/legacy/file-tree-comparison/chart/chart.js
@@ -117,9 +117,22 @@ export default class Changes extends React.Component {
   componentWillReceiveProps(nextProps) {
     if (nextProps.commits.length !== 0) {
       const commits = this.buildingSelect(nextProps.commits, null);
-      this.setState({ commits: nextProps.commits, commitsToChoose1: commits, commitsToChoose2: commits });
+      this.setState({ commits: nextProps.commits, commitsToChoose1: commits, commitsToChoose2: commits, filter: nextProps.filter });
+      if (this.state.tree2.length !== 0 && this.state.tree1.length !== 0) {
+        this.filterTrees(nextProps.filter);
+      }
     }
   }
+
+  filterTrees(f) {
+    if (f === '' || f === null) {
+      return;
+    }
+    let t1 = this.state.tree1;
+    let t2 = this.state.tree2;
+
+    console.log(t1);
+  }
   compareTrees(c1, c2) {
     console.log('compareTrees');
     const tree1 = getTreeCommitspan(c1.sha, this.state.commits);
@@ -212,6 +225,11 @@ function markChild(tree, path, mode) {
   }
   return tree;
 }
+
+function filterTree(tree, filter) {
+
+  return tree;
+}
 function makeHierarchyFileTree(fileTree) {
   if (fileTree === null || fileTree === undefined) {
     return null;
diff --git a/ui/src/visualizations/legacy/file-tree-comparison/chart/index.js b/ui/src/visualizations/legacy/file-tree-comparison/chart/index.js
index e64e7dde..34169f80 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/chart/index.js
+++ b/ui/src/visualizations/legacy/file-tree-comparison/chart/index.js
@@ -2,7 +2,7 @@
 
 import { connect } from 'react-redux';
 import Chart from './chart.js';
-import { setCommit1, setCommit2, setTree1, setTree2, setChanged } from '/ui/src/visualizations/legacy/file-tree-comparison/sagas';
+import { setFilter, setChanged } from '/ui/src/visualizations/legacy/file-tree-comparison/sagas';
 
 const mapStateToProps = (state /*, ownProps*/) => {
   const corState = state.visualizations.fileTreeComparison.state;
@@ -12,14 +12,12 @@ const mapStateToProps = (state /*, ownProps*/) => {
     commit2: corState.config.commit2,
     tree1: corState.config.tree1,
     tree2: corState.config.tree2,
+    filter: corState.config.filter,
   };
 };
 
 const mapDispatchToProps = (dispatch) => ({
-  onSetCommit1: (commit) => dispatch(setCommit1(commit)),
-  onSetCommit2: (commit) => dispatch(setCommit2(commit)),
-  onSetTree1: (tree) => dispatch(setTree1(tree)),
-  onSetTree2: (tree) => dispatch(setTree2(tree)),
+  onSetFilter: (f) => dispatch(setFilter(f)),
   onSetChanged: (changes) => dispatch(setChanged(changes)),
 });
 
diff --git a/ui/src/visualizations/legacy/file-tree-comparison/config.css b/ui/src/visualizations/legacy/file-tree-comparison/config.css
index 4d6391f2..9d966f4e 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/config.css
+++ b/ui/src/visualizations/legacy/file-tree-comparison/config.css
@@ -7,10 +7,25 @@
   align-content: center;
   display: flex;
   flex-flow: wrap;
+  margin-bottom: auto;
+}
+.search {
+  padding-top: 1em;
+}
+.files{
+  font-size: smaller;
+  overflow-y: auto;
+  max-height: 30em;
+  overflow-x: auto;
 }
 .info {
-  align-self: flex-end;
   max-width: 400px;
+  height: 40em;
+  display: flex;
+  flex-direction: row;
+  flex-flow: wrap;
+  justify-content: space-between;
+  align-content: space-between;
 }
 hr {
   flex-basis: 100%;
@@ -38,12 +53,7 @@ hr {
   width: 25px;
   margin-right: 10px;
 }
-.files{
-  font-size: smaller;
-  overflow-y: auto;
-  max-height: 25em;
-  overflow-x: auto;
-}
+
 .listStyle {
   list-style-type: disc;
   margin-left: 15px;
@@ -53,3 +63,4 @@ hr {
   word-wrap: break-word;
   width: auto !important;
 }
+
diff --git a/ui/src/visualizations/legacy/file-tree-comparison/config.js b/ui/src/visualizations/legacy/file-tree-comparison/config.js
index 520d5104..a34b97f9 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/config.js
+++ b/ui/src/visualizations/legacy/file-tree-comparison/config.js
@@ -2,6 +2,7 @@
 
 import { connect } from 'react-redux';
 import style from './config.css';
+import { setFilter } from './sagas';
 const mapStateToProps = (state /*, ownProps*/) => {
   const fileTreeState = state.visualizations.fileTreeComparison.state;
   return {
@@ -9,11 +10,29 @@ const mapStateToProps = (state /*, ownProps*/) => {
   };
 };
 
-const mapDispatchToProps = (dispatch) => {};
+const mapDispatchToProps = (dispatch, ownProps) => {
+  return Object.assign({
+      onSetFilter: (c) => dispatch(setFilter(c)),
+    },
+    ownProps
+  );
+};
 
 const ChangesConfigComponent = (props) => {
   return (
     <div className={style.info}>
+      <div className={style.search}>
+        <input
+          placeholder="Highlight issue..."
+          onChange={(e) => {
+            if (e.target.value === null) {
+              props.onSetFilter('');
+            } else {
+              props.onSetFilter(e.target.value);
+            }
+          }}
+        />
+      </div>
       <div className={style.files}>
         <div hidden={props.changed.add.length === 0}>
           <div>
@@ -53,11 +72,17 @@ const ChangesConfigComponent = (props) => {
         </div>
       </div>
       <div className={style.legend}>
-      <hr />
-      <div className={style.add}></div><div className={style.flexGrow}> Additions</div><hr/>
-      <div className={style.delete}></div><div className={style.flexGrow}> Deletions</div><hr/>
-      <div className={style.edit}></div><div className={style.flexGrow}> Modifications</div><hr/>
-    </div>
+        <hr />
+        <div className={style.add}></div>
+        <div className={style.flexGrow}> Additions</div>
+        <hr />
+        <div className={style.delete}></div>
+        <div className={style.flexGrow}> Deletions</div>
+        <hr />
+        <div className={style.edit}></div>
+        <div className={style.flexGrow}> Modifications</div>
+        <hr />
+      </div>
     </div>
   );
 };
diff --git a/ui/src/visualizations/legacy/file-tree-comparison/reducers/config.js b/ui/src/visualizations/legacy/file-tree-comparison/reducers/config.js
index f9a573d9..9a108773 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/reducers/config.js
+++ b/ui/src/visualizations/legacy/file-tree-comparison/reducers/config.js
@@ -25,6 +25,10 @@ export default handleActions(
       _.assign({}, state, {
         changed: action.payload ? action.payload : null,
       }),
+    SET_FILTER: (state, action) =>
+      _.assign({}, state, {
+        filter: action.payload ? action.payload : null,
+      }),
   },
   {
     commit1: [],
@@ -36,5 +40,6 @@ export default handleActions(
       delete: [],
       edit: [],
     },
+    filter: '',
   }
 );
diff --git a/ui/src/visualizations/legacy/file-tree-comparison/sagas/index.js b/ui/src/visualizations/legacy/file-tree-comparison/sagas/index.js
index 56729922..8fc73e4a 100644
--- a/ui/src/visualizations/legacy/file-tree-comparison/sagas/index.js
+++ b/ui/src/visualizations/legacy/file-tree-comparison/sagas/index.js
@@ -12,6 +12,7 @@ export const setCommit2 = createAction('SET_COMMIT_2', (f) => f);
 export const setTree1 = createAction('SET_TREE_1', (f) => f);
 export const setTree2 = createAction('SET_TREE_2', (f) => f);
 export const setChanged = createAction('SET_CHANGED', (f) => f);
+export const setFilter = createAction('SET_FILTER', (f) => f);
 
 export default function* () {
   // fetch data once on entry