diff --git a/app/scripts/annotations/module.ts b/app/scripts/annotations/module.ts
index 346fa322b..663f5a878 100755
--- a/app/scripts/annotations/module.ts
+++ b/app/scripts/annotations/module.ts
@@ -15,7 +15,8 @@ module ngApp.annotations {
         annotations: (AnnotationsService: IAnnotationsService): ng.IPromise<IAnnotations> => {
           return AnnotationsService.getAnnotations();
         }
-      }
+      },
+      reloadOnSearch: false
     });
 
     $stateProvider.state("annotation", {
diff --git a/app/scripts/annotations/templates/annotations.html b/app/scripts/annotations/templates/annotations.html
index d1f2cce1f..57bcc5b0e 100755
--- a/app/scripts/annotations/templates/annotations.html
+++ b/app/scripts/annotations/templates/annotations.html
@@ -1,19 +1,7 @@
 <div class="container-fluid projects search">
   <h1 data-translate>Annotations</h1>
 
-  <div class="row search-bar">
-    <div class="col-lg-10 col-md-8 col-sm-12 pull-right">
-      <div class="row">
-        <div class="col-lg-1 col-md-2 col-sm-2">
-          <button class="btn btn-default pull-right" data-translate aria-label="{{ 'Share Query' | translate }}">Share</button>
-          <span class="fa fa-refresh pull-right"></span>
-        </div>
-        <div class="col-lg-11 col-md-10 col-sm-10">
-          <current-filters class="current-filters"></current-filters>
-        </div>
-      </div>
-    </div>
-  </div>
+  <search-bar></search-bar>
 
   <div class="row search-panel">
     <div class="col-lg-2 col-md-3 facets-sidebar">
diff --git a/app/scripts/components/charts/chart.directives.ts b/app/scripts/components/charts/chart.directives.ts
index 0b1161a9a..9d59a3787 100644
--- a/app/scripts/components/charts/chart.directives.ts
+++ b/app/scripts/components/charts/chart.directives.ts
@@ -39,7 +39,7 @@ module ngApp.components.charts {
         var margin = { top: 10, right: 20, bottom: 60, left: 40 };
         var width = element.find(".chart-container")[0].clientWidth - margin.left - margin.right;
         var height = 500 - margin.top - margin.bottom;
-        var radius = Math.min(width, height) /2;
+        var radius = Math.min(width, height) / 2;
 
         function buildChart() {
           var colour = d3.scale.category20c();
@@ -82,7 +82,7 @@ module ngApp.components.charts {
         var redraw = function() {
           width = parseInt(d3.select(element.find(".chart-container")[0]).style("width"), 10);
           width = width - margin.left - margin.right;
-          radius = Math.min(width, height)/2;
+          radius = Math.min(width, height) / 2;
           d3.select(element.find(".chart-container > svg")[0]).remove();
           buildChart();
         };
diff --git a/app/scripts/components/facets/facets.controllers.ts b/app/scripts/components/facets/facets.controllers.ts
index b9db1feae..05dfbbad5 100644
--- a/app/scripts/components/facets/facets.controllers.ts
+++ b/app/scripts/components/facets/facets.controllers.ts
@@ -32,11 +32,11 @@ module ngApp.components.facets.directives {
       this.expanded = !!$scope.expanded;
       this.displayCount = this.originalDisplayCount = $scope.displayCount || 5;
       this.title = $scope.title;
+      // TODO api should re-format the facets
+      this.name = $scope.name;
       if ($scope.facet) {
         this.refresh($scope.facet.buckets);
       }
-      // TODO api should re-format the facets
-      this.name = $scope.name;
 
       $scope.$watch("facet", (n, o) => {
         if (n === o) {
diff --git a/app/scripts/components/facets/styles/facets.less b/app/scripts/components/facets/styles/facets.less
index 410ab733c..6fce23335 100644
--- a/app/scripts/components/facets/styles/facets.less
+++ b/app/scripts/components/facets/styles/facets.less
@@ -50,6 +50,7 @@
 }
 
 .current-filters {
+
   div, span {
     display: inline-block;
     margin-bottom: 3px;
diff --git a/app/scripts/components/facets/templates/current.html b/app/scripts/components/facets/templates/current.html
index ce4c343de..9cdd974d7 100644
--- a/app/scripts/components/facets/templates/current.html
+++ b/app/scripts/components/facets/templates/current.html
@@ -1,4 +1,4 @@
-<div data-ng-repeat="filter in cfc.currentFilters">
+<div data-ng-repeat="filter in cfc.currentFilters" class="filter">
   <span class="facet-button facet-name"
         data-ng-click="cfc.removeTerm(filter.content.field, null, $event)"
         data-ng-keypress="cfc.removeTerm(filter.content.field, null, $event)">
diff --git a/app/scripts/components/header/header.controller.ts b/app/scripts/components/header/header.controller.ts
index 01e2746fd..f9f5877fd 100755
--- a/app/scripts/components/header/header.controller.ts
+++ b/app/scripts/components/header/header.controller.ts
@@ -26,7 +26,7 @@ module ngApp.components.header.controllers {
 
     /* @ngInject */
     constructor(private gettextCatalog, private CartService: ICartService,
-                private CoreService: ICoreService) {
+                private CoreService: ICoreService, private $state: ng.ui.IStateService) {
       this.addedLanguages = !!_.keys(gettextCatalog.strings).length;
     }
 
diff --git a/app/scripts/components/header/templates/header.html b/app/scripts/components/header/templates/header.html
index c515dae4b..9528b308b 100755
--- a/app/scripts/components/header/templates/header.html
+++ b/app/scripts/components/header/templates/header.html
@@ -15,7 +15,9 @@
          aria-label="{{ 'Site Navigation' | translate }}">
       <ul class="nav navbar-nav">
         <li ui-sref-active="active"><a ui-sref="projects" data-translate>Projects</a></li>
-        <li ui-sref-active="active"><a ui-sref="search" data-translate>Search</a></li>
+        <li data-ng-class="{ active: HeaderController.$state.includes('search') || HeaderController.$state.includes('query') }">
+          <a ui-sref="search.participants" data-translate>Search</a>
+        </li>
         <li ui-sref-active="active">
           <a ui-sref="cart">
             <span data-translate>Cart</span>
diff --git a/app/scripts/components/location/location.services.ts b/app/scripts/components/location/location.services.ts
index e6e3ab6a2..00eedac24 100644
--- a/app/scripts/components/location/location.services.ts
+++ b/app/scripts/components/location/location.services.ts
@@ -2,6 +2,7 @@ module ngApp.components.location.services {
 
   export interface ISearch {
     filters: string;
+    query: string;
   }
 
   export interface ILocationService {
@@ -10,11 +11,66 @@ module ngApp.components.location.services {
     search(): ISearch;
     filters(): string;
     setFilters(filters: Object): ng.ILocationService;
+    query(): string;
+    setQuery(query: Object): ng.ILocationService;
   }
 
   class LocationService implements ILocationService {
     /* @ngInject */
-    constructor(private $location: ng.ILocationService) {
+    constructor(private $rootScope: ng.IRootScopeService, private $location: ng.ILocationService) {
+      var cachedFilters: any = {};
+      var validSwitches = [
+        "search",
+        "query"
+      ];
+
+      $rootScope.$on("$stateChangeStart", (event: any, toState: any, toParams: any, fromState: any, fromParams: any) => {
+        var toStateRoot = toState.name.substr(0, toState.name.indexOf("."));
+        var fromStateRoot = fromState.name.substr(0, fromState.name.indexOf("."));
+
+        if (validSwitches.indexOf(toStateRoot) !== -1 && validSwitches.indexOf(fromStateRoot) !== -1) {
+          if (toState.name.match("query.") && fromState.name.match("search.")) {
+            cachedFilters = this.filters();
+            var query = "";
+
+            _.each(cachedFilters.content, (facet, index: number) => {
+              query += facet.content.field.toUpperCase() + " IS ";
+
+              _.each(facet.content.value, (value: string, index: number) => {
+                query += value;
+
+                if (index !== (facet.content.value.length - 1)) {
+                  query += " OR ";
+                }
+              });
+
+              if (index !== (cachedFilters.content.length - 1)) {
+                query += " AND ";
+              }
+            });
+
+            cachedFilters = query;
+          } else if (toState.name.match("query.") && fromState.name.match("query.")) {
+            cachedFilters = this.query();
+          } else if (toState.name.match("search.") && fromState.name.match("search.")) {
+            cachedFilters = this.filters();
+          }
+        }
+      });
+
+      $rootScope.$on("$stateChangeSuccess", (event: any, toState: any, toParams: any, fromState: any, fromParams: any) => {
+        var toStateRoot = toState.name.substr(0, toState.name.indexOf("."));
+        var fromStateRoot = fromState.name.substr(0, fromState.name.indexOf("."));
+
+        if (validSwitches.indexOf(toStateRoot) !== -1 && validSwitches.indexOf(fromStateRoot) !== -1) {
+          if ((toState.name.match("query.") && fromState.name.match("search.")) ||
+              (toState.name.match("query.") && fromState.name.match("query."))) {
+            this.setQuery(cachedFilters);
+          } else if (toState.name.match("search.") && fromState.name.match("search.")) {
+            this.setFilters(cachedFilters);
+          }
+        }
+      });
     }
 
     path(): string {
@@ -25,7 +81,24 @@ module ngApp.components.location.services {
       return this.$location.search();
     }
 
-    setSearch(search: ISearch): ng.ILocationService {
+    setSearch(search): ng.ILocationService {
+      if (!_.keys(search).length) {
+        search = "";
+      }
+
+      var propsWithValues = _.find(search, function(val) {
+
+        if (typeof val === "object" || val === "{}") {
+          return false;
+        }
+
+        return val;
+      });
+
+      if (!propsWithValues) {
+        search = "";
+      }
+
       return this.$location.search(search);
     }
 
@@ -48,6 +121,22 @@ module ngApp.components.location.services {
       }
       return this.setSearch(search);
     }
+
+    query(): string {
+      // TODO error handling
+      var f = this.search()["query"];
+      return f ? angular.fromJson(f) : {};
+    }
+
+    setQuery(query: Object): ng.ILocationService {
+      var search: ISearch = this.search();
+      if (query) {
+        search.query = angular.toJson(query);
+      } else {
+        delete search.query;
+      }
+      return this.setSearch(search);
+    }
   }
 
   angular
diff --git a/app/scripts/components/styles.less b/app/scripts/components/styles.less
index c59016f0d..ab60838c6 100644
--- a/app/scripts/components/styles.less
+++ b/app/scripts/components/styles.less
@@ -1,4 +1,5 @@
 @import "charts/styles/charts.less";
 @import "charts/styles/bar-chart.less";
 @import "charts/styles/d3-tip.less";
-@import "facets/styles/facets.less";
\ No newline at end of file
+@import "facets/styles/facets.less";
+@import "ui/search/styles.less";
\ No newline at end of file
diff --git a/app/scripts/components/ui/module.ts b/app/scripts/components/ui/module.ts
index 983d98c5f..e9dd75825 100644
--- a/app/scripts/components/ui/module.ts
+++ b/app/scripts/components/ui/module.ts
@@ -3,7 +3,8 @@ module ngApp.components.ui {
   angular.module("components.ui", [
     "ui.scroll",
     "ui.date",
-    "ui.file"
+    "ui.file",
+    "ui.search"
   ]);
 
 }
diff --git a/app/scripts/components/ui/search/module.ts b/app/scripts/components/ui/search/module.ts
new file mode 100644
index 000000000..6b13bf0e8
--- /dev/null
+++ b/app/scripts/components/ui/search/module.ts
@@ -0,0 +1,7 @@
+module ngApp.components.ui.search {
+
+  angular.module("ui.search", [
+    "search.directives",
+    "search.controllers"
+  ]);
+}
diff --git a/app/scripts/components/ui/search/search.controllers.ts b/app/scripts/components/ui/search/search.controllers.ts
new file mode 100644
index 000000000..c907957d8
--- /dev/null
+++ b/app/scripts/components/ui/search/search.controllers.ts
@@ -0,0 +1,54 @@
+module ngApp.components.ui.search.controllers {
+  import ILocationService = ngApp.components.location.services.ILocationService;
+
+  interface ISearchBarController {
+    query: string;
+    isSearchQuery: boolean;
+    toggle(isAdvancedQuery?: boolean): void;
+    setQuery(): void;
+    sendQuery(): void;
+    resetQuery(): void;
+  }
+
+  class SearchBarController implements ISearchBarController {
+    query: string = "";
+    isSearchQuery: boolean = false;
+
+    /* @ngInject */
+    constructor(private $scope: ng.IScope, private LocationService: ILocationService,
+                private $state: ng.ui.IStateService) {
+      this.isSearchQuery = !!$state.current.name.match("search.") ||
+                           !!$state.current.name.match("query.");
+      $scope.$watch("query", () => {
+        if (!this.query) {
+          this.LocationService.clear();
+        }
+      });
+      this.setQuery();
+    }
+
+    sendQuery() {
+      this.LocationService.setQuery(this.query);
+    }
+
+    setQuery() {
+      var currentQuery = this.LocationService.query();
+
+      if (typeof currentQuery === "string") {
+        this.query = currentQuery;
+      }
+    }
+
+    toggle(isAdvancedQuery: boolean = false) {
+      this.$scope.$parent.advancedQuery = isAdvancedQuery;
+    }
+
+    resetQuery() {
+      this.LocationService.clear();
+      this.query = "";
+    }
+  }
+
+  angular.module("search.controllers", [])
+      .controller("SearchBarController", SearchBarController);
+}
diff --git a/app/scripts/components/ui/search/search.directives.ts b/app/scripts/components/ui/search/search.directives.ts
new file mode 100644
index 000000000..a272f056c
--- /dev/null
+++ b/app/scripts/components/ui/search/search.directives.ts
@@ -0,0 +1,17 @@
+module ngApp.components.ui.search.directives {
+  import IGDCWindowService = ngApp.models.IGDCWindowService;
+
+  /* @ngInject */
+  function SearchBar(): ng.IDirective {
+    return {
+      restrict: "E",
+      scope: true,
+      templateUrl: "components/ui/search/templates/search-bar.html",
+      controller: "SearchBarController as sb"
+    };
+  }
+
+  angular.module("search.directives", ["search.controllers"])
+      .directive("searchBar", SearchBar);
+}
+
diff --git a/app/scripts/components/ui/search/styles.less b/app/scripts/components/ui/search/styles.less
new file mode 100644
index 000000000..2ec7b7dc4
--- /dev/null
+++ b/app/scripts/components/ui/search/styles.less
@@ -0,0 +1,13 @@
+.search-bar {
+  button {
+    margin-right: 5px;
+
+    &:first-child {
+      margin-right: 0;
+    }
+  }
+
+  textarea {
+    resize: none;
+  }
+}
\ No newline at end of file
diff --git a/app/scripts/components/ui/search/templates/search-bar.html b/app/scripts/components/ui/search/templates/search-bar.html
new file mode 100644
index 000000000..11eabd801
--- /dev/null
+++ b/app/scripts/components/ui/search/templates/search-bar.html
@@ -0,0 +1,49 @@
+<div class="row search-bar">
+  <div class="col-sm-12 pull-right"
+       data-ng-class="{ 'col-lg-10 col-md-8 col-sm-12': !$parent.advancedQuery, 'col-lg-12 col-md-12': $parent.advancedQuery }">
+    <div class="row">
+      <div class="col-lg-10 col-md-9 col-sm-9">
+        <div class="row" data-ng-if="!$parent.advancedQuery">
+          <div class="col-lg-12 col-md-12 col-sm-12">
+            <current-filters class="current-filters"></current-filters>
+          </div>
+        </div>
+        <div class="row" data-ng-if="$parent.advancedQuery" >
+          <div class="col-lg-11 col-md-11 col-sm-11">
+            <textarea class="form-control"
+                   data-ng-model="sb.query"
+                   type="text"
+                   aria-label="Advanced Query"
+                   placeholder="Start Typing Your Query...."
+                   role="search">
+            </textarea>
+          </div>
+          <div class="col-lg-1 col-md-1 col-sm-1 no-padding-left">
+            <button class="btn btn-default" data-ng-if="$parent.advancedQuery" data-translate
+                    data-ng-click="sb.sendQuery()">Search</button>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-2 col-md-3 col-sm-3" data-ng-if="sb.isSearchQuery">
+        <button class="btn btn-default pull-right"
+                data-ng-click="sb.resetQuery()"
+                aria-label="{{ 'Clear Query' | translate }}" data-translate>
+          Clear
+        </button>
+        <button class="btn btn-default pull-right"
+                aria-label="{{ 'Share Query' | translate }}" data-translate>
+          Share
+        </button>
+        <button class="btn btn-default pull-right" data-ng-click="sb.toggle(true)"
+                data-ng-if="!$parent.advancedQuery" data-translate>
+           Advanced
+        </button>
+        <button class="btn btn-default pull-right" data-ng-click="sb.toggle(false)"
+           data-ng-disabled="sb.query"
+           data-ng-if="$parent.advancedQuery" data-translate>
+           Basic
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/app/scripts/projects/module.ts b/app/scripts/projects/module.ts
index 85a7e4fef..16ed1f4d9 100644
--- a/app/scripts/projects/module.ts
+++ b/app/scripts/projects/module.ts
@@ -9,7 +9,8 @@ module ngApp.projects {
     $stateProvider.state("projects", {
       url: "/projects",
       controller: "ProjectsController as prsc",
-      templateUrl: "projects/templates/projects.html"
+      templateUrl: "projects/templates/projects.html",
+      reloadOnSearch: false
     });
 
     $stateProvider.state("project", {
diff --git a/app/scripts/projects/projects.controller.ts b/app/scripts/projects/projects.controller.ts
index f5e25b400..769b98907 100644
--- a/app/scripts/projects/projects.controller.ts
+++ b/app/scripts/projects/projects.controller.ts
@@ -8,12 +8,17 @@ module ngApp.projects.controllers {
     projects: IProjects;
   }
 
+  interface IProjectsControllerScope {
+    advancedQuery: boolean;
+  }
+
   class ProjectsController implements IProjectsController {
     projects: IProjects;
+    advancedQuery: boolean = false;
     /* @ngInject */
-    constructor(private $scope, private ProjectsService: IProjectsService, private CoreService: ICoreService) {
+    constructor(private $scope: ng.IScope, private ProjectsService: IProjectsService, private CoreService: ICoreService) {
       CoreService.setPageTitle("Projects");
-      this.$scope.$on("$locationChangeSuccess", (event, next) => {
+      $scope.$on("$locationChangeSuccess", (event, next) => {
         if (next.indexOf("projects") !== -1) {
           this.refresh();
         }
diff --git a/app/scripts/projects/templates/projects.html b/app/scripts/projects/templates/projects.html
index 415efd096..eaa7942af 100644
--- a/app/scripts/projects/templates/projects.html
+++ b/app/scripts/projects/templates/projects.html
@@ -1,22 +1,10 @@
 <div class="container-fluid projects search">
   <h1 data-translate>Projects</h1>
 
-  <div class="row search-bar">
-    <div class="col-lg-10 col-md-8 col-sm-12 pull-right">
-      <div class="row">
-        <div class="col-lg-1 col-md-2 col-sm-2">
-          <button class="btn btn-default pull-right" data-translate aria-label="{{ 'Share Query' | translate }}">Share</button>
-          <span class="fa fa-refresh pull-right"></span>
-        </div>
-        <div class="col-lg-11 col-md-10 col-sm-10">
-          <current-filters class="current-filters"></current-filters>
-        </div>
-      </div>
-    </div>
-  </div>
+  <search-bar></search-bar>
 
   <div class="row search-panel">
-    <div class="col-lg-2 col-md-3 facets-sidebar">
+    <div class="col-lg-2 col-md-3 facets-sidebar" data-ng-show="!prsc.$scope.advancedQuery">
       <facets-free-text placeholder="{{ '(Project Name or Code)' | translate }}"></facets-free-text>
       <facet-terms data-facet="prsc.projects.aggregations.diseaseType"></facet-terms>
       <terms data-name="project_code"
@@ -36,8 +24,8 @@ <h2 class="col-lg-10 col-md-9" data-ng-if="prsc.projects.hits.length === 0">
       No projects found using those filters.
     </h2>
 
-    <div class="col-lg-10 col-md-9" data-ng-if="prsc.projects.hits.length > 0">
-
+    <div class="col-lg-10 col-md-9" data-ng-if="prsc.projects.hits.length > 0"
+         data-ng-class="{ 'col-lg-10 col-md-9': !prsc.$scope.advancedQuery, 'col-lg-12 col-md-12': prsc.$scope.advancedQuery }">
       <h4 class="clearfix">
         <span class="pull-right">
           <select-columns></select-columns>
diff --git a/app/scripts/search/module.ts b/app/scripts/search/module.ts
index 4061e553c..31313d6e5 100755
--- a/app/scripts/search/module.ts
+++ b/app/scripts/search/module.ts
@@ -12,39 +12,61 @@ module ngApp.search {
   function searchConfig($stateProvider: ng.ui.IStateProvider, $urlRouterProvider: ng.ui.IUrlRouterProvider) {
 
     $urlRouterProvider.when("/search", "/search/p");
+    $urlRouterProvider.when("/query", "/query/p");
 
     $stateProvider.state("search", {
-      url: "/search?query",
+      url: "/search?filters",
       controller: "SearchController as sc",
-      templateUrl: "search/templates/search.html"
+      templateUrl: "search/templates/search.html",
+      reloadOnSearch: false
     });
 
     $stateProvider.state("search.participants", {
       url: "/p?filters",
       data: {
         tab: "participants"
-      }
+      },
+      reloadOnSearch: false
     });
 
     $stateProvider.state("search.files", {
       url: "/f?filters",
       data: {
         tab: "files"
-      }
+      },
+      reloadOnSearch: false
     });
 
-    $stateProvider.state("search.annotations", {
-      url: "/a",
+    $stateProvider.state("query", {
+      url: "/query?query",
+      controller: "SearchController as sc",
+      templateUrl: "search/templates/search.html",
+      reloadOnSearch: false
+    });
+
+    $stateProvider.state("query.participants", {
+      url: "/p",
       data: {
-        tab: "annotations"
-      }
+        tab: "participants",
+        advancedQuery: true
+      },
+      reloadOnSearch: false
     });
+
+    $stateProvider.state("query.files", {
+      url: "/f",
+      data: {
+        tab: "files",
+        advancedQuery: true
+      },
+      reloadOnSearch: false
+    });
+
   }
 
   angular
       .module("ngApp.search", [
         "search.controller",
-        "ngApp.annotations",
         "ngApp.participants",
         "ngApp.files",
         "ui.router.state"
diff --git a/app/scripts/search/search.controllers.ts b/app/scripts/search/search.controllers.ts
index 932f56a82..b6c8afc5d 100755
--- a/app/scripts/search/search.controllers.ts
+++ b/app/scripts/search/search.controllers.ts
@@ -19,6 +19,12 @@ module ngApp.search.controllers {
     query: string;
     searchQuery(event: any, size: number): void;
     addFilesKeyPress(event: any, type: string): void;
+    setState(tab: string, next: string): void;
+    select(section: string, tab: string): void;
+  }
+
+  interface ISearchControllerScope extends ng.IScope {
+    advancedQuery: boolean;
   }
 
   class SearchController implements ISearchController {
@@ -29,7 +35,7 @@ module ngApp.search.controllers {
     query: string = "";
 
     /* @ngInject */
-    constructor(private $scope,
+    constructor(private $scope: ISearchControllerScope,
                 private $state: ng.ui.IStateService,
                 public State: IState,
                 public CartService: ICartService,
@@ -37,14 +43,27 @@ module ngApp.search.controllers {
                 public ParticipantsService: IParticipantsService,
                 CoreService: ICoreService) {
       var data = $state.current.data || {};
-      this.State.setActive(data.tab);
+      this.State.setActive("tabs", data.tab);
+      this.State.setActive("facets", data.tab);
+      $scope.advancedQuery = data.advancedQuery;
       CoreService.setPageTitle("Search");
 
-      this.$scope.$on("$locationChangeSuccess", (event, next) => {
-        if (next.indexOf("search") !== -1) {
+      $scope.$on("$locationChangeSuccess", (event, next: string) => {
+        if (next.indexOf("search") !== -1 || next.indexOf("query") !== -1) {
           this.refresh();
         }
       });
+      $scope.$watch("advancedQuery", (newVal: boolean) => {
+        if (newVal !== undefined) {
+          var state: string = "search.";
+
+          if (newVal) {
+            state = "query.";
+          }
+
+          this.setState(this.$state.current.name.substring(this.$state.current.name.lastIndexOf(".") + 1), state);
+        }
+      });
       this.refresh();
     }
 
@@ -95,14 +114,30 @@ module ngApp.search.controllers {
     }
 
     // TODO Load data lazily based on active tab
-    select(tab) {
+    setState(tab: string, next: string) {
       // Changing tabs and then navigating to another page
       // will cause this to fire.
-      if (tab && this.$state.current.name.match("search.")) {
-        this.$state.go("search." + tab, {}, {inherit: true});
+      if (tab && (this.$state.current.name.match("search.") ||
+                  this.$state.current.name.match("query."))) {
+
+        next += tab;
+
+        this.$state.go(next, {}, {inherit: true});
       }
     }
 
+    select(section: string, tab: string) {
+      var next = "search.";
+
+      this.State.setActive(section, tab);
+
+      if (this.$state.current.name.match("query.")) {
+        next = "query.";
+      }
+
+      this.setState(tab, next);
+    }
+
     addFilesKeyPress(event: any, type: string) {
       if (event.which === 13) {
         if (type === "all") {
diff --git a/app/scripts/search/search.services.ts b/app/scripts/search/search.services.ts
index 984df8205..1f537dd80 100644
--- a/app/scripts/search/search.services.ts
+++ b/app/scripts/search/search.services.ts
@@ -11,7 +11,8 @@ module ngApp.search.services {
 
   export interface IState {
     tabs: ITabs;
-    setActive(s: string): void;
+    facets: ITabs;
+    setActive(section: string, s: string): void;
   }
 
   class State implements IState {
@@ -21,15 +22,23 @@ module ngApp.search.services {
       },
       files: {
         active: false
+      }
+    };
+    facets: ITabs = {
+      participants: {
+        active: false
       },
-      annotations: {
+      files: {
         active: false
       }
     };
 
-    setActive(tab: string) {
-      if (tab) {
-        this.tabs[tab].active = true;
+    setActive(section: string, tab: string) {
+      if (section && tab) {
+        _.each(this[section], function (section: ITab) {
+          section.active = false;
+        });
+        this[section][tab].active = true;
       }
     }
   }
diff --git a/app/scripts/search/templates/search.html b/app/scripts/search/templates/search.html
index 20dca1c3e..d2dd19d9c 100755
--- a/app/scripts/search/templates/search.html
+++ b/app/scripts/search/templates/search.html
@@ -1,64 +1,64 @@
 <div class="container-fluid search">
   <h1 data-translate>Search</h1>
 
-  <div class="row search-bar">
-    <div class="col-lg-10 col-md-8 col-sm-12 pull-right">
-      <div class="row">
-        <div class="col-lg-1 col-md-2 col-sm-2">
-          <button class="btn btn-default pull-right" data-translate aria-label="{{ 'Share Query' | translate }}">Share</button>
-          <span class="fa fa-refresh pull-right"></span>
-        </div>
-        <div class="col-lg-11 col-md-10 col-sm-10">
-          <current-filters class="current-filters"></current-filters>
-        </div>
-      </div>
-    </div>
-  </div>
+  <search-bar></search-bar>
 
   <div class="row search-panel">
-    <div class="col-lg-2 col-md-3 facets-sidebar">
-      <tabset>
-        <tab heading="{{ 'Participants' | translate }}">
-          <div data-ng-include="'search/templates/search.participants.facets.html'" role="form"></div>
-        </tab>
-
-        <tab heading="{{ 'Files' | translate }}">
-          <div data-ng-include="'search/templates/search.files.facets.html'" role="form"></div>
-        </tab>
-      </tabset>
+    <div class="col-lg-2 col-md-3 facets-sidebar" data-ng-show="!sc.$scope.advancedQuery">
+      <ul class="nav nav-tabs">
+        <li role="presentation"
+            data-ng-class="{ active: sc.State.facets.participants.active }"
+            data-ng-click="sc.State.setActive('facets', 'participants')">
+          <a>{{ 'Participants' | translate }}</a>
+        </li>
+        <li role="presentation"
+            data-ng-class="{ active: sc.State.facets.files.active }"
+            data-ng-click="sc.State.setActive('facets', 'files')">
+          <a>{{ 'Files' | translate }}</a>
+        </li>
+      </ul>
+      <div data-ng-include="'search/templates/search.participants.facets.html'" role="form"
+           data-ng-show="sc.State.facets.participants.active"></div>
+      <div data-ng-include="'search/templates/search.files.facets.html'" role="form"
+           data-ng-show="sc.State.facets.files.active"></div>
     </div>
-    <div class="col-lg-10 col-md-9 table-area">
-      <tabset>
-        <tab heading="{{ 'Participants' | translate }} ({{sc.participants.pagination.total}})"
-             active="sc.State.tabs.participants.active"
-             select="sc.select('participants')">
-          <div class="pane-section">
-            <h2 class="col-lg-10 col-md-9" data-ng-if="!sc.participants">
-              <i class="fa fa-spinner fa-spin"></i> <span data-translate>Loading participants...</span>
-            </h2>
+    <div class="table-area"
+         data-ng-class="{ 'col-lg-10 col-md-9': !sc.$scope.advancedQuery, 'col-lg-12 col-md-12': sc.$scope.advancedQuery }">
+      <ul class="nav nav-tabs">
+        <li role="presentation"
+            data-ng-class="{ active: sc.State.tabs.participants.active }"
+            data-ng-click="sc.select('tabs', 'participants')">
+          <a>{{ 'Participants' | translate }} ({{sc.participants.pagination.total}})</a>
+        </li>
+        <li role="presentation"
+            data-ng-class="{ active: sc.State.tabs.files.active }"
+            data-ng-click="sc.select('tabs', 'files')">
+          <a>{{ 'Files' | translate }} ({{sc.files.pagination.total}})</a>
+        </li>
+      </ul>
+      <div class="pane-section"
+           data-ng-show="sc.State.tabs.participants.active">
+        <h2 class="col-lg-10 col-md-9" data-ng-if="!sc.participants">
+          <i class="fa fa-spinner fa-spin"></i> <span data-translate>Loading participants...</span>
+        </h2>
 
-            <h2 class="col-lg-10 col-md-9" data-ng-if="sc.participants.hits.length === 0" data-translate>
-              No participants found using those filters.
-            </h2>
-            <div data-ng-include="'search/templates/search.participants.html'" data-ng-if="sc.participants.hits.length > 0"></div>
-          </div>
-        </tab>
-        <tab heading="{{ 'Files' | translate }} ({{sc.files.pagination.total}})"
-             active="sc.State.tabs.files.active"
-             select="sc.select('files')">
-          <div class="pane-section">
-            <h2 class="col-lg-10 col-md-9" data-ng-if="!sc.files">
-              <i class="fa fa-spinner fa-spin"></i> <span data-translate>Loading files...</span>
-            </h2>
+        <h2 class="col-lg-10 col-md-9" data-ng-if="sc.participants.hits.length === 0" data-translate>
+          No participants found using those filters.
+        </h2>
+        <div data-ng-include="'search/templates/search.participants.html'" data-ng-if="sc.participants.hits.length > 0"></div>
+      </div>
+      <div class="pane-section"
+           data-ng-show="sc.State.tabs.files.active">
+        <h2 class="col-lg-10 col-md-9" data-ng-if="!sc.files">
+          <i class="fa fa-spinner fa-spin"></i> <span data-translate>Loading files...</span>
+        </h2>
 
-            <h2 class="col-lg-10 col-md-9" data-ng-if="sc.files.hits.length === 0" data-translate>
-              No files found using those filters.
-            </h2>
+        <h2 class="col-lg-10 col-md-9" data-ng-if="sc.files.hits.length === 0" data-translate>
+          No files found using those filters.
+        </h2>
 
-            <div data-ng-include="'search/templates/search.files.html'" data-ng-if="sc.files.hits.length > 0"></div>
-          </div>
-        </tab>
-      </tabset>
+        <div data-ng-include="'search/templates/search.files.html'" data-ng-if="sc.files.hits.length > 0"></div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/app/styles/colours.less b/app/styles/colours.less
index b4ebecfd6..ecacf4ab6 100644
--- a/app/styles/colours.less
+++ b/app/styles/colours.less
@@ -1 +1,2 @@
-@lightgrey: #f2f2f2;
\ No newline at end of file
+@lightgrey: #f2f2f2;
+@grey: #DDDDDD;
\ No newline at end of file
diff --git a/app/styles/files.less b/app/styles/files.less
index 73edd203c..9cd7c3a40 100644
--- a/app/styles/files.less
+++ b/app/styles/files.less
@@ -24,6 +24,6 @@
   // Overridden to prevent layout oddities
   #xmlViewer > .Element {
     left: 0 !important;
-    border: 1px solid #DDDDDD;
+    border: 1px solid @grey;
   }
 }
diff --git a/app/styles/footer.less b/app/styles/footer.less
index 1045a5365..5131d3e21 100644
--- a/app/styles/footer.less
+++ b/app/styles/footer.less
@@ -5,7 +5,7 @@
   width: 100%;
   height: @FOOTER_HEIGHT;
   background-color: #f5f5f5;
-  border-top: 1px solid #DDDDDD;
+  border-top: 1px solid @grey;
   z-index: 100;
 
   > div.container > div {
diff --git a/app/styles/search.less b/app/styles/search.less
index add647b4a..611846de0 100644
--- a/app/styles/search.less
+++ b/app/styles/search.less
@@ -4,13 +4,6 @@
     cursor: pointer;
   }
 
-  .search-bar {
-    span.fa {
-      margin-right: 10px;
-      margin-top: 8px;
-    }
-  }
-
   .search-panel {
     margin: 10px 0;
 
@@ -65,7 +58,7 @@
     }
 
     .table-area .pane-section {
-      border-left: 1px solid #DDD;
+      border-left: 1px solid @grey;
       padding: 15px;
       padding-right: 0;
     }