diff --git a/pkg/interface/groups/src/css/custom.css b/pkg/interface/groups/src/css/custom.css
index 3f4a1babcf..95aa634bc3 100644
--- a/pkg/interface/groups/src/css/custom.css
+++ b/pkg/interface/groups/src/css/custom.css
@@ -167,6 +167,6 @@ a {
     border-color: #fff;
   }
   .hover-bg-gray1-d:hover {
-    color: #4d4d4d;
+    background-color: #4d4d4d;
   }
 }
\ No newline at end of file
diff --git a/pkg/interface/groups/src/js/api.js b/pkg/interface/groups/src/js/api.js
index 5ebf220df4..9c0016fb52 100644
--- a/pkg/interface/groups/src/js/api.js
+++ b/pkg/interface/groups/src/js/api.js
@@ -191,6 +191,16 @@ class UrbitApi {
     })
   }
 
+  setSelected(selected) {
+    store.handleEvent({
+      data: {
+        local: {
+          selected: selected
+        }
+      }
+    })
+  }
+
 }
 
 export let api = new UrbitApi();
diff --git a/pkg/interface/groups/src/js/components/lib/group-filter.js b/pkg/interface/groups/src/js/components/lib/group-filter.js
new file mode 100644
index 0000000000..fb0f12ecfa
--- /dev/null
+++ b/pkg/interface/groups/src/js/components/lib/group-filter.js
@@ -0,0 +1,232 @@
+import React, { Component } from 'react'
+
+export class GroupFilter extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: false,
+      selected: [],
+      groups: [],
+      searchTerm: "",
+      results: []
+    }
+    this.toggleOpen = this.toggleOpen.bind(this);
+    this.handleClickOutside = this.handleClickOutside.bind(this);
+    this.groupIndex = this.groupIndex.bind(this);
+    this.search = this.search.bind(this);
+    this.addGroup = this.addGroup.bind(this);
+    this.deleteGroup = this.deleteGroup.bind(this);
+  }
+
+  componentDidMount() {
+    document.addEventListener('mousedown', this.handleClickOutside);
+    this.groupIndex();
+    let selected = localStorage.getItem("urbit-selectedGroups");
+    if (selected) {
+      this.setState({selected: JSON.parse(selected)}, (() => {
+        window.api.setSelected(this.state.selected);
+      }))
+    }
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClickOutside);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps !== this.props) {
+      this.groupIndex();
+    }
+  }
+
+  handleClickOutside(evt) {
+    if ((this.dropdown && !this.dropdown.contains(evt.target))
+    && (this.toggleButton && !this.toggleButton.contains(evt.target))) {
+      this.setState({ open: false });
+    }
+  }
+
+  toggleOpen() {
+    this.setState({open: !this.state.open});
+  }
+
+  groupIndex() {
+    const { props, state } = this;
+    let index = [];
+    let associations = !!props.associations ? props.associations : {};
+    index = Object.keys(associations).map((each) => {
+      let eachGroup = [];
+      eachGroup.push(each);
+      let name = each;
+      let groupPath = `${each}/contacts${each}`;
+      if (associations[each][groupPath] && associations[each][groupPath].metadata) {
+        name = (associations[each][groupPath].metadata.title !== "")
+          ? associations[each][groupPath].metadata.title : name;
+      }
+      eachGroup.push(name);
+      return eachGroup;
+    });
+    this.setState({groups: index})
+  }
+
+  search(evt) {
+    this.setState({searchTerm: evt.target.value});
+    let term = evt.target.value.toLowerCase();
+
+    if (term.length < 3) {
+      return this.setState({results: []})
+    }
+
+    let groupMatches = [];
+    groupMatches = this.state.groups.filter(e => {
+      return (e[0].includes(term) || e[1].includes(term));
+    });
+    this.setState({results: groupMatches});
+  }
+
+  addGroup(group) {
+    let selected = this.state.selected;
+    if (!(group in selected)) {
+      selected.push(group);
+    }
+    this.setState({
+      searchTerm: "",
+      selected: selected,
+      results: []
+    }, (() => {
+        window.api.setSelected(this.state.selected);
+        localStorage.setItem("urbit-selectedGroups", JSON.stringify(this.state.selected));
+    }))
+  }
+
+  deleteGroup(group) {
+    let selected = this.state.selected;
+    selected = selected.filter(e => {
+      return e !== group;
+    });
+    this.setState({selected: selected}, (() => {
+      window.api.setSelected(this.state.selected);
+      localStorage.setItem("urbit-selectedGroups", JSON.stringify(this.state.selected));
+    }))
+  }
+
+  render() {
+    const { props, state } = this;
+
+    let currentGroup = "All Groups";
+
+    if (state.selected.length > 0) {
+      let titles = state.selected.map((each) => {
+        return each[1];
+      })
+      currentGroup = titles.join(" + ");
+    }
+
+    let buttonOpened = (state.open)
+      ? "bg-gray5 bg-gray1-d white-d" : "hover-bg-gray5 hover-bg-gray1-d white-d";
+
+    let dropdownClass = (state.open)
+      ? "absolute db z-2 bg-white bg-gray0-d white-d ba b--gray3 b--gray1-d"
+      : "dn";
+
+    let inviteCount = (props.invites && props.invites.length > 0)
+      ? <template className="dib fr">
+        <p className="dib bg-green2 bg-gray2-d white fw6 ph1 br1 v-mid" style={{ marginBottom: 2 }}>
+          {props.invites.length}
+        </p>
+        <span className="dib v-mid ml1">
+          <img
+          className="v-mid"
+          src="/~launch/img/Chevron.png"
+          style={{ height: 16, width: 16, paddingBottom: 1 }}
+          />
+        </span>
+      </template>
+      : <template className="dib fr">
+        <span className="dib v-top ml1">
+          <img className="v-mid"
+          src="/~launch/img/Chevron.png"
+          style={{ height: 16, width: 16, paddingBottom: 1 }}
+          />
+        </span>
+      </template>;
+
+    let selectedGroups = <div/>
+    let searchResults = <div/>
+
+    if (state.results.length > 0) {
+      let groupResults = state.results.map((group => {
+        return(
+          <li
+          key={group[0]}
+          className="tl list white-d f9 pv2 ph3 pointer hover-bg-gray4 hover-bg-gray1-d inter" onClick={() => this.addGroup(group)}>
+            <span className="mix-blend-diff white">{(group[1]) ? group[1] : group[0]}</span>
+          </li>
+        )
+      }))
+      searchResults = (
+        <div className={"tl absolute bg-white bg-gray0-d white-d pv3 z-1 w-100 ba b--gray4 b--white-d overflow-y-scroll"} style={{maxWidth: "15.67rem", maxHeight: "8rem"}}>
+          <p className="f9 tl gray2 ph3 pb2">Groups</p>
+          {groupResults}
+        </div>
+    )
+    }
+
+    if (state.selected.length > 0) {
+      let allSelected = this.state.selected.map((each) => {
+        let name = each[1];
+        return(
+          <span
+            key={each[0]}
+            className={"f9 inter black pa2 bg-gray5 bg-gray1-d " +
+            "ba b--gray4 b--gray2-d white-d dib mr2 mt2 c-default"}
+          >
+          {name}
+          <span
+          className="white-d ml3 mono pointer"
+          onClick={e => this.deleteGroup(each)}>
+            x
+          </span>
+          </span>
+        )
+      })
+      selectedGroups = (
+        <div className={
+          "f9 gray2 bb bl br b--gray3 b--gray2-d bg-gray0-d " +
+          "white-d pa3 db w-100 inter bg-gray5 lh-solid tl"
+        } style={{width: 253}}>
+        {allSelected}
+        </div>
+      )
+    }
+
+    return (
+      <div className="ml1 dib">
+        <div className={buttonOpened}
+        onClick={() => this.toggleOpen()}
+        ref={(el) => this.toggleButton = el}>
+        <p className="dib f9 pointer pa1 mw5 truncate v-mid">{currentGroup}</p>
+        </div>
+        <div className={dropdownClass}
+          style={{ maxHeight: "24rem", width: 285 }}
+          ref={(el) => { this.dropdown = el }}>
+          <p className="tc bb b--gray3 b--gray1-d gray3 pv4 f9">Group Select and Filter</p>
+          <a href="/~groups" className="ma4 bg-gray5 bg-gray1-d f9 tl pa1 br1 db no-underline" style={{paddingLeft: "6.5px", paddingRight: "6.5px"}}>Manage all Groups
+          {inviteCount}
+          </a>
+          <p className="pt4 gray3 f9 tl mh4">Filter Groups</p>
+          <div className="relative pb6 w-100 ph4 pt2">
+            <input className="ba b--gray3 white-d bg-gray0-d inter w-100 f9 pa2" style={{boxSizing: "border-box"}} placeholder="Group name..."
+          onChange={this.search}
+          value={state.searchTerm}
+          />
+          {searchResults}
+          {selectedGroups}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default GroupFilter;
\ No newline at end of file
diff --git a/pkg/interface/groups/src/js/components/lib/group-sidebar.js b/pkg/interface/groups/src/js/components/lib/group-sidebar.js
index 2e1dab4fb8..4797ff46d3 100644
--- a/pkg/interface/groups/src/js/components/lib/group-sidebar.js
+++ b/pkg/interface/groups/src/js/components/lib/group-sidebar.js
@@ -57,6 +57,14 @@ export class GroupSidebar extends Component {
           (path in props.groups)
         );
       })
+      .filter((path) => {
+        let selectedGroups = !!props.selectedGroups ? props.selectedGroups : [];
+        if (selectedGroups.length === 0) {
+          return true;
+        }
+        let selectedPaths = selectedGroups.map((e => {return e[0]}));
+        return (selectedPaths.includes(path));
+      })
       .sort((a, b) => {
         let aName = a.substr(1);
         let bName = b.substr(1);
diff --git a/pkg/interface/groups/src/js/components/lib/header-bar.js b/pkg/interface/groups/src/js/components/lib/header-bar.js
index aa03afd4e3..cd9c194581 100644
--- a/pkg/interface/groups/src/js/components/lib/header-bar.js
+++ b/pkg/interface/groups/src/js/components/lib/header-bar.js
@@ -1,23 +1,24 @@
 import React, { Component } from "react";
-import { cite } from '../../lib/util';
-import { IconHome } from "/components/lib/icons/icon-home";
+import { GroupFilter } from "./group-filter";
 import { Sigil } from "/components/lib/icons/sigil";
 
 export class HeaderBar extends Component {
   render() {
     let popout = window.location.href.includes("popout/")
-      ? "dn"
-      : "dn db-m db-l db-xl";
+      ? "dn" : "dn db-m db-l db-xl";
 
-    let title = document.title === "Home" ? "" : document.title;
+    // let spinner = !!this.props.spinner
+    //   ? this.props.spinner : false;
 
-    let spinner = !!this.props.spinner ? this.props.spinner : false;
+    // let spinnerClasses = "";
 
-    let spinnerClasses = "";
+    // if (spinner === true) {
+    //   spinnerClasses = "spin-active";
+    // }
 
-    if (spinner === true) {
-      spinnerClasses = "spin-active";
-        }
+    let invites = (this.props.invites && this.props.invites.contacts)
+      ? this.props.invites.contacts
+      : {};
 
     return (
       <div
@@ -25,33 +26,22 @@ export class HeaderBar extends Component {
           "bg-white bg-gray0-d w-100 justify-between relative tc pt3 " + popout
         }
         style={{ height: 40 }}>
-        <a
-          className="dib gray2 f9 inter absolute left-0"
-          href="/"
-          style={{ top: 14 }}>
-          <IconHome classes={spinnerClasses} />
-          <span
-            className="ml2 white-d v-top lh-title"
-            style={{ paddingTop: 3 }}>
-            Home
-          </span>
-        </a>
-        <span
-          className="f9 white-d inter dib"
-          style={{
-            verticalAlign: "text-top",
-            paddingTop: 3
-          }}>
-          {title}
-        </span>
-        <div className="absolute right-0 lh-copy" style={{ top: 8 }}>
-          <Sigil
-            ship={"~" + window.ship}
-            size={16}
-            color={"#000000"}
-            classes={"v-mid mix-blend-diff"}
-          />
-          <span className="mono white-d f9 ml2 c-default">{cite(window.ship)}</span>
+        <div className="fl lh-copy absolute left-0" style={{ top: 8 }}>
+          <a href="/~groups/me" className="dib v-top">
+            <Sigil
+              ship={"~" + window.ship}
+              classes="v-mid mix-blend-diff"
+              size={16}
+              color={"#000000"}
+            />
+          </a>
+          <GroupFilter invites={invites} associations={this.props.associations} />
+          <span className="dib f9 v-mid gray2 ml1 mr1 c-default inter">/</span>
+          <a
+            className="dib f9 v-mid inter ml1"
+            href="/"
+            style={{ top: 14 }}>
+            ⟵ Manage Groups</a>
         </div>
       </div>
     );
diff --git a/pkg/interface/groups/src/js/components/root.js b/pkg/interface/groups/src/js/components/root.js
index fd7294c304..a1dbffd334 100644
--- a/pkg/interface/groups/src/js/components/root.js
+++ b/pkg/interface/groups/src/js/components/root.js
@@ -34,7 +34,8 @@ export class Root extends Component {
     let invites =
       (!!state.invites && '/contacts' in state.invites) ?
       state.invites['/contacts'] : {};
-    let associations = !! state.associations ? state.associations : {};
+    let associations = !!state.associations ? state.associations : {};
+    let selectedGroups = !!state.selected ? state.selected : [];
 
     return (
       <BrowserRouter>
@@ -45,6 +46,7 @@ export class Root extends Component {
               <Skeleton
                 activeDrawer="groups"
                 spinner={state.spinner}
+                selectedGroups={selectedGroups}
                 history={props.history}
                 api={api}
                 contacts={contacts}
@@ -67,6 +69,7 @@ export class Root extends Component {
                 <Skeleton
                   spinner={state.spinner}
                   history={props.history}
+                  selectedGroups={selectedGroups}
                   api={api}
                   contacts={contacts}
                   groups={groups}
@@ -99,6 +102,7 @@ export class Root extends Component {
                 <Skeleton
                   spinner={state.spinner}
                   history={props.history}
+                  selectedGroups={selectedGroups}
                   api={api}
                   contacts={contacts}
                   invites={invites}
@@ -139,6 +143,7 @@ export class Root extends Component {
                 <Skeleton
                   spinner={state.spinner}
                   history={props.history}
+                  selectedGroups={selectedGroups}
                   api={api}
                   contacts={contacts}
                   groups={groups}
@@ -183,6 +188,7 @@ export class Root extends Component {
                   spinner={state.spinner}
                   history={props.history}
                   api={api}
+                  selectedGroups={selectedGroups}
                   contacts={contacts}
                   groups={groups}
                   invites={invites}
@@ -232,6 +238,7 @@ export class Root extends Component {
                   spinner={state.spinner}
                   history={props.history}
                   api={api}
+                  selectedGroups={selectedGroups}
                   contacts={contacts}
                   groups={groups}
                   invites={invites}
@@ -267,6 +274,7 @@ export class Root extends Component {
                   spinner={state.spinner}
                   history={props.history}
                   api={api}
+                  selectedGroups={selectedGroups}
                   contacts={contacts}
                   groups={groups}
                   invites={invites}
diff --git a/pkg/interface/groups/src/js/components/skeleton.js b/pkg/interface/groups/src/js/components/skeleton.js
index dd53f72d38..cec46f36f1 100644
--- a/pkg/interface/groups/src/js/components/skeleton.js
+++ b/pkg/interface/groups/src/js/components/skeleton.js
@@ -12,7 +12,7 @@ export class Skeleton extends Component {
 
     return (
       <div className="h-100 w-100 ph4-m ph4-l ph4-xl pb4-m pb4-l pb4-xl">
-        <HeaderBar spinner={props.spinner} />
+        <HeaderBar spinner={props.spinner} invites={props.invites} associations={props.associations} />
         <div className="cf w-100 h-100 h-100-m-40-ns flex ba-m ba-l ba-xl b--gray2 br1">
           <GroupSidebar
             contacts={props.contacts}
@@ -20,6 +20,7 @@ export class Skeleton extends Component {
             invites={props.invites}
             activeDrawer={props.activeDrawer}
             selected={props.selected}
+            selectedGroups={props.selectedGroups}
             history={props.history}
             api={api}
             associations={props.associations}
diff --git a/pkg/interface/groups/src/js/reducers/local.js b/pkg/interface/groups/src/js/reducers/local.js
index 26a6690d11..6e058a85b1 100644
--- a/pkg/interface/groups/src/js/reducers/local.js
+++ b/pkg/interface/groups/src/js/reducers/local.js
@@ -5,6 +5,7 @@ export class LocalReducer {
     let data = _.get(json, 'local', false);
     if (data) {
       this.setSpinner(data, state);
+      this.setSelected(data, state);
     }
   }
 
@@ -14,4 +15,10 @@ export class LocalReducer {
       state.spinner = json.spinner;
     }
   }
+  setSelected(json, state) {
+    let data = _.has(json, 'selected', false);
+    if (data) {
+      state.selected = json.selected;
+    }
+  }
 }
\ No newline at end of file
diff --git a/pkg/interface/groups/src/js/store.js b/pkg/interface/groups/src/js/store.js
index 31798fdbaa..a0bc23c6ad 100644
--- a/pkg/interface/groups/src/js/store.js
+++ b/pkg/interface/groups/src/js/store.js
@@ -15,6 +15,7 @@ class Store {
       associations: {},
       permissions: {},
       invites: {},
+      selected: [],
       spinner: false
     };