diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8be4fc367..4001de134 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# v4.4 - changes staged on develop
+## Improvements
+- Combined the search and multiselect interfaces into a single UI. This allows groups, software, and mitigations to be filtered alongside techniques and improves usability by moving the interface to a sidebar. See issue [#204](https://github.com/mitre-attack/attack-navigator/issues/204). 
+
 # v4.3 - 29 April 2021
 ## New Features
 - Added aggregate scores. Aggregate scores are computed using the score of the technique and all sub-techniques using an "aggregate function" -- min, max, average, or sum. The aggregate score is used to determine the color of the technique in place of the technique's score. Aggregate scores are an optional feature and can be enabled in the "matrix configuration" dropdown. See issue [#269](https://github.com/mitre-attack/attack-navigator/issues/269).
diff --git a/nav-app/src/app/app.component.html b/nav-app/src/app/app.component.html
index 2e2dc5d15..a53798120 100755
--- a/nav-app/src/app/app.component.html
+++ b/nav-app/src/app/app.component.html
@@ -1,13 +1,2 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<!-- <div *ngIf="techniques && tactics"> -->
-<tabs>
-    <!-- <tab [tabTitle]="'grid'">
-        <DataTable></DataTable>
-    </tab> -->
-</tabs>
+<tabs></tabs>
 <span style="font-size: 7pt">MITRE ATT&CK&reg; Navigator v{{nav_version}}</span>
-
-<!-- </div> -->
-<!-- <div *ngIf="!techniques && !tactics">
-    loading...
-</div> -->
diff --git a/nav-app/src/app/app.component.ts b/nav-app/src/app/app.component.ts
index f94d84c29..d1737a7bc 100755
--- a/nav-app/src/app/app.component.ts
+++ b/nav-app/src/app/app.component.ts
@@ -2,6 +2,7 @@ import { Component, ViewChild, DoCheck, HostListener } from '@angular/core';
 import { TabsComponent } from './tabs/tabs.component';
 import { ConfigService } from './config.service';
 import * as globals from "./globals";
+import { DataService } from './data.service';
 
 @Component({
     selector: 'app-root',
@@ -30,6 +31,4 @@ export class AppComponent {
             return false;
         }
     }
-
-
 }
diff --git a/nav-app/src/app/app.module.ts b/nav-app/src/app/app.module.ts
index 807631e4d..e83d1240f 100755
--- a/nav-app/src/app/app.module.ts
+++ b/nav-app/src/app/app.module.ts
@@ -14,6 +14,8 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { MatSidenavModule } from '@angular/material/sidenav';
+
 import { ColorPickerModule } from 'ngx-color-picker';
 import { HttpClientModule } from '@angular/common/http';
 
@@ -27,11 +29,13 @@ import { MatrixSideComponent } from './matrix/matrix-side/matrix-side.component'
 import { MatrixFlatComponent } from './matrix//matrix-flat/matrix-flat.component';
 import { MatrixMiniComponent } from './matrix//matrix-mini/matrix-mini.component';
 import { TooltipComponent } from './matrix/technique-cell/tooltip/tooltip.component';
-import { MultiselectComponent } from './multiselect/multiselect.component';
-import { TechniquesSearchComponent } from './techniques-search/techniques-search.component';
+import { SearchAndMultiselectComponent } from './search-and-multiselect/search-and-multiselect.component';
 import { ContextmenuComponent } from './matrix/technique-cell/contextmenu/contextmenu.component';
 import { TacticCellComponent } from './matrix/tactic-cell/tactic-cell.component';
 import { VersionUpgradeComponent } from './version-upgrade/version-upgrade.component';
+import { SidebarComponent } from './sidebar/sidebar.component';
+import { MatCardModule } from "@angular/material/card";
+import { MatDividerModule } from "@angular/material/divider";
 
 
 @NgModule({
@@ -46,11 +50,11 @@ import { VersionUpgradeComponent } from './version-upgrade/version-upgrade.compo
     MatrixFlatComponent,
     MatrixMiniComponent,
     TooltipComponent,
-    MultiselectComponent,
-    TechniquesSearchComponent,
+    SearchAndMultiselectComponent,
     ContextmenuComponent,
     TacticCellComponent,
     VersionUpgradeComponent,
+    SidebarComponent
   ],
   imports: [
     BrowserModule,
@@ -68,6 +72,9 @@ import { VersionUpgradeComponent } from './version-upgrade/version-upgrade.compo
     MatExpansionModule,
     MatDialogModule,
     ColorPickerModule,
+    MatSidenavModule,
+    MatCardModule,
+    MatDividerModule
   ],
   exports: [
       MatSelectModule,
diff --git a/nav-app/src/app/data.service.ts b/nav-app/src/app/data.service.ts
index 56bc3e26d..8167d6646 100755
--- a/nav-app/src/app/data.service.ts
+++ b/nav-app/src/app/data.service.ts
@@ -43,14 +43,20 @@ export class DataService {
      */
     parseBundle(domain: Domain, stixBundles: any[]): void {
         let platforms = new Set<String>();
+        let seenIDs = new Set<String>();
         for (let bundle of stixBundles) {
             let techniqueSDOs = [];
             let matrixSDOs = [];
             let idToTechniqueSDO = new Map<string, any>();
             let idToTacticSDO = new Map<string, any>();
             for (let sdo of bundle.objects) { //iterate through stix domain objects in the bundle
-                // ignore deprecated and revoked objects in the bundle
-                if (sdo.x_mitre_deprecated || sdo.revoked) continue; 
+                // ignore deprecated and revoked objects in the bundle?
+                if (sdo.x_mitre_deprecated || sdo.revoked) continue;
+
+                // filter out duplicates
+                if (!seenIDs.has(sdo.id)) seenIDs.add(sdo.id)
+                else continue;
+
                 // parse according to type
                 switch(sdo.type) {
                     case "intrusion-set":
@@ -133,16 +139,18 @@ export class DataService {
                 }
                 domain.techniques.push(new Technique(techniqueSDO, subtechniques, this));
             }
-            
+
             //create matrices, which also creates tactics and filters techniques
             for (let matrixSDO of matrixSDOs) {
                 domain.matrices.push(new Matrix(matrixSDO, idToTacticSDO, domain.techniques, this));
             }
-            
+
             // parse platforms
             for (let technique of domain.techniques) {
-                for (let platform of technique.platforms) {
-                    platforms.add(platform)
+                if (technique.platforms) {
+                    for (let platform of technique.platforms) {
+                        platforms.add(platform)
+                    }
                 }
             }
             for (let subtechnique of domain.subtechniques) {
@@ -302,9 +310,9 @@ export class DataService {
     }
 }
 
-/** 
+/**
  * Common attributes for STIX objects
- */ 
+ */
 export abstract class BaseStix {
     public readonly id: string;          // STIX ID
     public readonly attackID: string;    // ATT&CK ID
@@ -376,7 +384,7 @@ export class Technique extends BaseStix {
         this.platforms = stixSDO.x_mitre_platforms;
       	if (stixSDO.x_mitre_data_sources !== undefined)
 		      this.datasources = stixSDO.x_mitre_data_sources.toString();
-	      else
+	    else
 		      this.datasources = "";
         this.tactics = stixSDO.kill_chain_phases.map((phase) => phase.phase_name);
 
@@ -384,7 +392,6 @@ export class Technique extends BaseStix {
         for (let subtechnique of this.subtechniques) {
             subtechnique.parent = this;
         }
-
     }
 
     /**
@@ -472,7 +479,7 @@ export class Mitigation extends BaseStix {
         let rels = this.dataService.getDomain(domainID).relationships.mitigates;
         if (rels.has(this.id)) {
             return rels.get(this.id);
-        } 
+        }
         else return [];
     }
     /**
@@ -522,10 +529,10 @@ export class Domain {
     public relationships: any = {
         // subtechnique subtechnique-of technique
         // ID of technique to [] of subtechnique IDs
-        subtechniques_of: new Map<string, string[]>(), 
+        subtechniques_of: new Map<string, string[]>(),
         // group uses technique
         // ID of group to [] of technique IDs
-        group_uses: new Map<string, string[]>(), 
+        group_uses: new Map<string, string[]>(),
         // group uses technique
         // ID of group to [] of technique IDs
         software_uses: new Map<string, string[]>(),
diff --git a/nav-app/src/app/datatable/data-table.component.html b/nav-app/src/app/datatable/data-table.component.html
index 445e6304b..76c34ef2b 100755
--- a/nav-app/src/app/datatable/data-table.component.html
+++ b/nav-app/src/app/datatable/data-table.component.html
@@ -40,33 +40,14 @@
             <!-- Search -->
             <div *ngIf="configService.getFeature('search')" class="control-row-item">
 
-                <div class="control-row-button dropdown noselect"
-                    (click)="currentDropdown = currentDropdown !== 'search' ? 'search' : null;"
+                <div class="control-row-button noselect"
+                    (click)="(viewModel.sidebarOpened = (viewModel.sidebarContentType !== 'search') ? true : !viewModel.sidebarOpened) && (viewModel.sidebarContentType = 'search')"
                     matTooltipPosition="below"
-                    matTooltip="search">
+                    matTooltip="search & multiselect">
                     <img src="assets/icons/ic_search_black_24px.svg"/>
                 </div>
-
-                <div class="dropdown-container search" *ngIf="currentDropdown === 'search'" #dropdown [class.left]="checkalign(dropdown)">
-                    <app-techniques-search [viewModel]="viewModel"></app-techniques-search>
-                </div>
-            </div>
-
-
-            <!-- Multi-select -->
-            <div *ngIf="configService.getFeature('multiselect')" class="control-row-item">
-                <div class="control-row-button dropdown noselect"
-                    (click)="currentDropdown = currentDropdown !== 'multiselect' ? 'multiselect' : null;"
-                    matTooltipPosition="below"
-                    matTooltip="multi-select">
-                    <img src="assets/icons/ic_playlist_add_black_24px.svg"/>
-                </div>
-                <div class="dropdown-container multiselect" *ngIf="currentDropdown === 'multiselect'" #dropdown [class.left]="checkalign(dropdown)">
-                    <app-multiselect [viewModel]="viewModel"></app-multiselect>
-                </div>
             </div>
 
-
             <!-- deselect all -->
             <div *ngIf="configService.getFeature('deselect_all')" class="control-row-item">
                 <div class="control-row-button noselect"
@@ -535,26 +516,34 @@
  88  888  88    8oooo88    888      888  88o    888     88 888
 o88o  8  o88o o88o  o888o o888o    o888o  88o8 o888o o88o  o888o
                                                                  -->
-
-<div class="matrices" oncontextmenu="return false">
+<div class="matrices">
+    <div oncontextmenu="return false">
         <div class="spinner" *ngIf="!dataService.getDomain(viewModel.domainID).dataLoaded">
             <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
         </div>
-        <div class="matrices-columns">
-            <div class="matrix-column" *ngFor="let matrix of dataService.getDomain(viewModel.domainID).matrices">
-                <div *ngIf="dataService.getDomain(viewModel.domainID).matrices.length > 1" class="matrix-name">{{matrix.name}}</div>
-                <div *ngIf="viewModel.layout.layout == 'side'">
-                    <matrix-side [matrix]="matrix" [viewModel]="viewModel" (selectionChanged)="onTechniqueSelect()"></matrix-side>
-                </div>
-                <div *ngIf="viewModel.layout.layout == 'flat'">
-                    <matrix-flat [matrix]="matrix" [viewModel]="viewModel" (selectionChanged)="onTechniqueSelect()"></matrix-flat>
-                </div>
-                <div *ngIf="viewModel.layout.layout == 'mini'">
-                    <matrix-mini [matrix]="matrix" [viewModel]="viewModel" (selectionChanged)="onTechniqueSelect()"></matrix-mini>
+        <mat-drawer-container autosize>
+            <mat-drawer-content>
+                <div class="matrices-columns">
+                    <div class="matrix-column" *ngFor="let matrix of dataService.getDomain(viewModel.domainID).matrices">
+                        <div *ngIf="dataService.getDomain(viewModel.domainID).matrices.length > 1" class="matrix-name">{{matrix.name}}</div>
+                        <div *ngIf="viewModel.layout.layout == 'side'">
+                            <matrix-side [matrix]="matrix" [viewModel]="viewModel" (selectionChanged)="onTechniqueSelect()"></matrix-side>
+                        </div>
+                        <div *ngIf="viewModel.layout.layout == 'flat'">
+                            <matrix-flat [matrix]="matrix" [viewModel]="viewModel" (selectionChanged)="onTechniqueSelect()"></matrix-flat>
+                        </div>
+                        <div *ngIf="viewModel.layout.layout == 'mini'">
+                            <matrix-mini [matrix]="matrix" [viewModel]="viewModel" (selectionChanged)="onTechniqueSelect()"></matrix-mini>
+                        </div>
+                    </div>
                 </div>
-            </div>
-        </div>
+            </mat-drawer-content>
+            <mat-drawer mode="side" position="end" #sidebar [opened]="viewModel.sidebarOpened">
+                <sidebar [viewModel]="viewModel"></sidebar>
+            </mat-drawer>
+        </mat-drawer-container>
     </div>
+</div>
 
 
 <!--
diff --git a/nav-app/src/app/datatable/data-table.component.scss b/nav-app/src/app/datatable/data-table.component.scss
index b444e39a3..78eafc5a7 100755
--- a/nav-app/src/app/datatable/data-table.component.scss
+++ b/nav-app/src/app/datatable/data-table.component.scss
@@ -405,6 +405,7 @@ $panel-light: lighten($panel-dark, 8%);
 }
 
 .legendBar {
+    z-index: 999;
     position: fixed;
     bottom: 0;
     right: 0;
@@ -472,4 +473,3 @@ $panel-light: lighten($panel-dark, 8%);
         }
     }
 }
-
diff --git a/nav-app/src/app/datatable/data-table.component.ts b/nav-app/src/app/datatable/data-table.component.ts
index 988115fc2..330dcdb6f 100755
--- a/nav-app/src/app/datatable/data-table.component.ts
+++ b/nav-app/src/app/datatable/data-table.component.ts
@@ -16,7 +16,7 @@ declare var tinycolor: any; //use tinycolor2
 
 import * as FileSaver from 'file-saver';
 import { ColorPickerModule } from 'ngx-color-picker';
-import { TechniquesSearchComponent } from '../techniques-search/techniques-search.component';
+import { SearchAndMultiselectComponent } from '../search-and-multiselect/search-and-multiselect.component';
 import { TmplAstVariable } from '@angular/compiler';
 
 @Component({
@@ -37,7 +37,6 @@ export class DataTableComponent implements AfterViewInit {
 
     currentDropdown: string = ""; //current dropdown menu
 
-
     //////////////////////////////////////////////////////////
     // Stringifies the current view model into a json string//
     // stores the string as a blob                          //
@@ -50,7 +49,7 @@ export class DataTableComponent implements AfterViewInit {
         let filename = this.viewModel.name.replace(/ /g, "_") + ".json";
         // FileSaver.saveAs(blob, this.viewModel.name.replace(/ /g, "_") + ".json");
         this.saveBlob(blob, filename);
-        
+
     }
 
     saveBlob(blob, filename){
@@ -75,8 +74,8 @@ export class DataTableComponent implements AfterViewInit {
         var workbook = new Excel.Workbook();
         let domain = this.dataService.getDomain(this.viewModel.domainID);
         for (let matrix of domain.matrices) {
-            var worksheet = workbook.addWorksheet(matrix.name + " (v" + domain.getVersion() + ")");  
-                      
+            var worksheet = workbook.addWorksheet(matrix.name + " (v" + domain.getVersion() + ")");
+
             // create tactic columns
             let columns = this.viewModel.filterTactics(matrix.tactics, matrix).map(tactic => { return {header: this.getDisplayName(tactic), key: tactic.name} });
             worksheet.columns = columns;
@@ -234,10 +233,10 @@ export class DataTableComponent implements AfterViewInit {
         }
     }
 
-    constructor(public dataService: DataService, 
-                private tabs: TabsComponent, 
-                private sanitizer: DomSanitizer, 
-                private viewModelsService: ViewModelsService, 
+    constructor(public dataService: DataService,
+                private tabs: TabsComponent,
+                private sanitizer: DomSanitizer,
+                private viewModelsService: ViewModelsService,
                 public configService: ConfigService) { }
 
     /**
@@ -273,7 +272,7 @@ export class DataTableComponent implements AfterViewInit {
      * @param  addToSelection add to the technique selection (shift key) or replace selection?
      */
     onTechniqueSelect(technique, addToSelection, eventX, eventY): void {
-        
+
         if (!this.viewModel.isCurrentlyEditing()) {
             if (["comment", "score", "colorpicker"].includes(this.currentDropdown)) this.currentDropdown = ""; //remove technique control dropdowns, because everything was deselected
             return;
diff --git a/nav-app/src/app/help/help.component.html b/nav-app/src/app/help/help.component.html
index 875dae987..c0b50c1d4 100755
--- a/nav-app/src/app/help/help.component.html
+++ b/nav-app/src/app/help/help.component.html
@@ -63,8 +63,7 @@ <h1>Table of Contents</h1>
                 <ul>
                     <li (click)="scrollTo('help_Selecting_with_the_Mouse')">Selecting with the Mouse</li>
                     <li (click)="scrollTo('help_Selection_Behavior')">Selection Behavior</li>
-                    <li (click)="scrollTo('help_Search_Interface')">Search Interface</li>
-                    <li (click)="scrollTo('help_Multiselct_Interface')">Multiselect Interface</li>
+                    <li (click)="scrollTo('help_Search_Interface')">Search & Multiselect Interface</li>
                 </ul>
             </li>
             <li>
@@ -701,45 +700,42 @@ <h2 id="help_Selection_Behavior">
 
             <h2 id="help_Search_Interface">
                 <img src="assets/icons/ic_search_black_24px.svg">
-                Search Interface
+                Search & Multiselect Interface
             </h2>
             <p>
-                The search interface provides a text input to search through techniques in the matrix.
-                Toggles in the interface allow for searching of specific technique fields (name, ID, and description).
+                The search & multiselect interface provides the means to select or deselect techniques in the matrix 
+                that match a text query or that are mapped to groups, software, or mitigations. The text input
+                can be used to filter the lists of techniques, groups, software, and mitigations according to their data. 
+                You can select what fields of the objects are searched under "search settings:" <i>name</i>, 
+                <i>ATT&CK ID</i>, <i>description</i>, and (for techniques) <i>data sources</i> can all be searched.
             </p>
             <p>
-                The interface provides
-                buttons to select and deselect techniques. These buttons modify the currently selected techniques rather
-                than replacing then, allowing for the selection of the multiple techniques by selecting them in sequence.
-                There are 'view' links that lead to more info on each technique.
-            </p>
-            <p>
-                Buttons labelled 'select all' and 'deselect all' are provided to quickly select/deselect all techniques in the results
-                area.
-            </p>
-
-            <h2 id="help_Multiselct_Interface">
-                <img src="assets/icons/ic_playlist_add_black_24px.svg">
-                Multiselect Interface
-            </h2>
-            <p>
-                The multiselect interface provides a way to quickly select and deselect
-                groups of techniques. The interface provides two types of groupings, threat
-                groups and software. Threat groups constitute related intrusion activity
-                tracked by a common name. Software constitutes software, malware
-                or utilities that use known techniques for intrusion.
+                The lists of objects below the search can be used to select data in the matrix. 
             </p>
+            <ul>
+                <li><b>Techniques:</b> this list can be used to find a technique alphabetically or one that matches the search query.</li>
+                <li>
+                    <b>Threat Groups:</b> threat groups constitute related intrusion activity tracked under a common name. Selecting a group 
+                    under this section will select all techniques that are mapped to (used by) that group.
+                </li>
+                <li>
+                    <b>Software:</b> software constitutes malware (custom closed source or open source software intended for malicious purposes) 
+                    or tools (open-source, built-in, or publicly available software that could be used by a defender or an adversary). Selecting a software under this 
+                    section will select all techniques that are mapped to (used by) that software.
+                </li>
+                <li>
+                    <b>Mitigations:</b> Mitigations represent security concepts and classes of technologies that can be used to prevent a technique or 
+                    sub-technique from being successfully executed. Selecting a mitigation under this section will select all techniques that are mapped to (mitigated by) that mitigation.
+                </li>
+            </ul>
             <p>
-                The interface provides
-                buttons to select and deselect techniques associated with each software or
-                threat group. These buttons modify the currently selected techniques rather
-                than replacing then, allowing for the selection of the techniques of multiple
-                threat groups or software by selecting them in sequence.
+                The interface provides buttons to select and deselect each object. These buttons modify the currently selected techniques rather
+                than replacing then, allowing for the selection of the multiple techniques or the techniques of multiple
+                threat groups, software, or mitigations by selecting them in sequence. The 'view' links for each entry link to additional information about the object in question.
             </p>
             <p>
-                Threat groups and software in the list are given a gray background when all
-                of their techniques are selected, even if the selection was not made using
-                the multiselect interface.
+                Buttons labelled 'select all' and 'deselect all' are provided to quickly select/deselect all techniques in the results
+                area. You can use this in conjunction with the search input to select all results which match the given query.
             </p>
 
             <h1 id="help_Customizing_The_Navigator">Customizing The Navigator</h1>
diff --git a/nav-app/src/app/matrix/technique-cell/technique-cell.component.ts b/nav-app/src/app/matrix/technique-cell/technique-cell.component.ts
index 0c01c9cb5..30f9ed269 100644
--- a/nav-app/src/app/matrix/technique-cell/technique-cell.component.ts
+++ b/nav-app/src/app/matrix/technique-cell/technique-cell.component.ts
@@ -22,35 +22,25 @@ export class TechniqueCellComponent implements OnInit {
 
     public get showTooltip(): boolean {
         if (this.showContextmenu) return false;
-        if (!this.viewModel.highlightedTechnique) return false;
+        if (this.viewModel.highlightedTechniques.size === 0) return false;
 
-        return (this.viewModel.highlightedTechnique.id == this.technique.id && this.viewModel.highlightedTactic.id == this.tactic.id);
+        return (this.viewModel.highlightedTechniques.has(this.technique.id) && this.viewModel.highlightedTactic && this.viewModel.highlightedTactic.id == this.tactic.id);
     }
 
     public get isHighlighted(): boolean {
-        if (this.viewModel.highlightedTactic) {
-            if (this.viewModel.selectTechniquesAcrossTactics) {
-                if (this.viewModel.selectSubtechniquesWithParent) {
-                    let compareTo = this.viewModel.highlightedTechnique;
-                    if (compareTo.isSubtechnique) compareTo = compareTo.parent;
-                    let compare = this.technique;
-                    if (compare.isSubtechnique) compare = compare.parent;
-                    if (compare.attackID == compareTo.attackID) return true;
-                } else if (this.viewModel.highlightedTechnique.id == this.technique.id) {
-                    return true;
-                }
-            } else if (this.viewModel.highlightedTactic.id == this.tactic.id) {
-                if (this.viewModel.selectSubtechniquesWithParent) {
-                    let compareTo = this.viewModel.highlightedTechnique;
-                    if (compareTo.isSubtechnique) compareTo = compareTo.parent;
-                    let compare = this.technique;
-                    if (compare.isSubtechnique) compare = compare.parent;
-                    if (compare.attackID == compareTo.attackID) return true;
-                } else if (this.viewModel.highlightedTechnique.id == this.technique.id) {
-                    return true;
-                }
+        if (this.viewModel.selectTechniquesAcrossTactics) {
+            if (this.viewModel.selectSubtechniquesWithParent) {
+                return this.technique.isSubtechnique && this.viewModel.highlightedTechniques.has(this.technique.parent.id);
             }
         }
+        else if (this.viewModel.highlightedTactic && this.viewModel.highlightedTactic.id == this.tactic.id) {
+            if (this.viewModel.selectSubtechniquesWithParent) {
+                return this.technique.isSubtechnique && this.viewModel.highlightedTechniques.has(this.technique.parent.id);
+            }
+        }
+        if (this.viewModel.highlightedTechniques.has(this.technique.id)) { // for highlighting techniques from the techniques search component, where highlightedTactic is null
+            return true;
+        }
 
         return this.showContextmenu;
     }
diff --git a/nav-app/src/app/multiselect/multiselect.component.html b/nav-app/src/app/multiselect/multiselect.component.html
deleted file mode 100644
index 5772717e1..000000000
--- a/nav-app/src/app/multiselect/multiselect.component.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<div class="multiselect">
-    <div *ngFor="let stixType of stixTypes" class="stixType">
-        <h1>
-            {{stixType.label}}
-        </h1>
-        <div *ngIf="stixType.objects.length !== 0" class="objects">
-            <table>
-                <tr *ngFor="let stixObject of stixType.objects">
-                    <td>{{stixObject.name}}</td>
-                    <td><a href="{{stixObject.url}}" target="_blank">view</a></td>
-                    <td><button class="button" (click)="select(stixObject)">select</button></td>
-                    <td><button class="button" (click)="deselect(stixObject)">deselect</button></td>
-                </tr>
-            </table>
-        </div>
-        <div *ngIf="stixType.objects.length == 0">
-            Data does not include {{stixType.label}}
-        </div>
-    </div>
-</div>
diff --git a/nav-app/src/app/multiselect/multiselect.component.scss b/nav-app/src/app/multiselect/multiselect.component.scss
deleted file mode 100644
index 29c0f299a..000000000
--- a/nav-app/src/app/multiselect/multiselect.component.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@import "../../colors.scss";
-.multiselect {
-    .stixType {
-        h1 {
-            font-size: 14px;
-            background: $panel-light;
-            padding: 5px;
-            margin: 0;
-        }
-        .objects {
-            height: 150px;
-            overflow-y: scroll;
-            table {
-                border-collapse: collapse;
-                width: 100%;
-                tr + tr {
-                    border-top: 1px solid $panel-light;
-                }
-                tr:hover {
-                    background: $cell-highlight-color
-                }
-                td {
-                    width: 100px;
-                    text-align: left;
-                    &+td {
-                        width: 1px;
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/nav-app/src/app/multiselect/multiselect.component.spec.ts b/nav-app/src/app/multiselect/multiselect.component.spec.ts
deleted file mode 100644
index 0171a69bd..000000000
--- a/nav-app/src/app/multiselect/multiselect.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { MultiselectComponent } from './multiselect.component';
-
-describe('MultiselectComponent', () => {
-  let component: MultiselectComponent;
-  let fixture: ComponentFixture<MultiselectComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MultiselectComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MultiselectComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/nav-app/src/app/multiselect/multiselect.component.ts b/nav-app/src/app/multiselect/multiselect.component.ts
deleted file mode 100644
index 06ab9d3ed..000000000
--- a/nav-app/src/app/multiselect/multiselect.component.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { ViewModel } from '../viewmodels.service';
-import { DataService, BaseStix, Group, Technique, Mitigation, Software } from '../data.service';
-
-@Component({
-  selector: 'app-multiselect',
-  templateUrl: './multiselect.component.html',
-  styleUrls: ['./multiselect.component.scss']
-})
-export class MultiselectComponent implements OnInit {
-    @Input() viewModel: ViewModel;
-
-    public openedPanel: string = "";
-    
-    public stixTypes: any[];
-
-    constructor(private dataService: DataService) {
-        this.stixTypes = [];
-    }
-
-    ngOnInit() {
-        let domain = this.dataService.getDomain(this.viewModel.domainID)
-
-        this.stixTypes = [{
-            "label": "threat groups",
-            "objects": domain.groups.filter((group, i, arr) => arr.findIndex(t => t.id === group.id) === i)
-                       .sort((a,b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
-        }, {
-            "label": "software",
-            "objects": domain.software.sort((a,b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
-        }, {
-            "label": "mitigations",
-            "objects": domain.mitigations.sort((a,b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
-        }]
-    }
-
-    public getRelated(stixObject: BaseStix): Technique[] {
-        // master list of all techniques and sub-techniques
-        let techniques = this.dataService.getDomain(this.viewModel.domainID).techniques;
-        let allTechniques = techniques.concat(this.dataService.getDomain(this.viewModel.domainID).subtechniques);
-        let domainID = this.viewModel.domainID;
-
-        if (stixObject instanceof Group) {
-            return allTechniques.filter((technique: Technique) => (stixObject as Group).relatedTechniques(domainID).includes(technique.id));
-        } else if (stixObject instanceof Software) {
-            return allTechniques.filter((technique: Technique) => (stixObject as Software).relatedTechniques(domainID).includes(technique.id));
-        } else if (stixObject instanceof Mitigation) {
-            return allTechniques.filter((technique: Technique) => (stixObject as Mitigation).relatedTechniques(domainID).includes(technique.id));
-        }
-    }
-
-    public deselect(stixObject: BaseStix): void {
-       for (let technique of this.getRelated(stixObject)) {
-            this.viewModel.unselectTechniqueAcrossTactics(technique);
-       }
-    }
-
-    public select(stixObject: BaseStix): void {
-        for (let technique of this.getRelated(stixObject)) {
-            this.viewModel.selectTechniqueAcrossTactics(technique);
-        }
-    }
-
-
-}
diff --git a/nav-app/src/app/search-and-multiselect/search-and-multiselect.component.html b/nav-app/src/app/search-and-multiselect/search-and-multiselect.component.html
new file mode 100644
index 000000000..cb5e53f38
--- /dev/null
+++ b/nav-app/src/app/search-and-multiselect/search-and-multiselect.component.html
@@ -0,0 +1,106 @@
+<div class="search-and-multiselect">
+    <mat-form-field appearance="outline">
+        <mat-label>Search</mat-label>
+        <span matPrefix><img src="assets/icons/ic_search_black_24px.svg"></span>
+        <input matInput [(ngModel)]="query" placeholder="Search">
+    </mat-form-field>
+
+    <mat-divider></mat-divider>
+
+    <div class="sidebar-content">
+        <mat-card>
+            <div class="settings">
+                <mat-card-title><h4 class="title">Search Settings</h4></mat-card-title>
+                <mat-card-content>
+                    <div class="fields">
+                        <div class="field" *ngFor="let field of fields">
+                            <input [id]="field.field" class="checkbox-custom" type="checkbox"
+                                   (click)="toggleFieldEnabled(field.field)" [checked]="field.enabled">
+                            <label [for]="field.field" class="checkbox-custom-label noselect">{{field.label}}</label>
+                        </div>
+                    </div>
+                </mat-card-content>
+            </div>
+        </mat-card>
+    </div>
+
+    <mat-divider></mat-divider>
+
+    <div class="sidebar-content">
+        <mat-accordion multi>
+        <mat-expansion-panel>
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    <h4>Techniques ({{techniqueResults.length}})</h4>
+                </mat-panel-title>
+                <mat-panel-description>
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+
+            <div>
+                <div class="allresults-buttons">
+                    <button class="button" (click)="selectAll(techniqueResults)">select all</button>
+                    <button class="button" (click)="deselectAll(techniqueResults)">deselect all</button>
+                </div>
+                <div class="results">
+                    <table class="results" *ngIf="techniqueResults.length > 0; else noTechniquesResults">
+                        <tr *ngFor="let result of techniqueResults">
+                            <td (mouseenter)="mouseEnter(result)" (mouseleave)="mouseLeave()">
+                                <span *ngIf="result.isSubtechnique">{{result.parent.name}}: </span>{{result.name}}
+                            </td>
+                            <td><a href="{{result.url}}" target="_blank">view</a></td>
+                            <td>
+                                <button class="button" (click)="select(result)">select</button>
+                            </td>
+                            <td>
+                                <button class="button" (click)="deselect(result)">deselect</button>
+                            </td>
+                        </tr>
+                    </table>
+                    <ng-template #noTechniquesResults><div class="no-results">no results for techniques</div></ng-template>
+                </div>
+            </div>
+        </mat-expansion-panel>
+
+        <mat-expansion-panel *ngFor="let stixType of stixTypes" class="stixType">
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    <h4>
+                        {{stixType.label | titlecase }} ({{stixType.objects.length}})
+                    </h4>
+                </mat-panel-title>
+                <mat-panel-description>
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+            <div class="allresults-buttons">
+                <button class="button" (click)="selectAll(stixType.objects, false)">select all</button>
+                <button class="button" (click)="deselectAll(stixType.objects, false)">deselect all</button>
+            </div>
+            <div class="results objects">
+                <table *ngIf="stixType.objects.length > 0; else noResults">
+                    <tr *ngFor="let stixObject of stixType.objects">
+                        <td (mouseenter)="mouseEnter(stixObject, false)"
+                            (mouseleave)="mouseLeave()">
+                            {{stixObject.name}}
+                        </td>
+                        <td><a href="{{stixObject.url}}" target="_blank">view</a></td>
+                        <td>
+                            <button class="button" (click)="select(stixObject, false)">select</button>
+                        </td>
+                        <td>
+                            <button class="button" (click)="deselect(stixObject, false)">deselect</button>
+                        </td>
+                    </tr>
+                </table>
+                <ng-template #noResults><div class="no-results">no results for {{stixType.label}}</div></ng-template>
+            </div>
+        </mat-expansion-panel>
+    </mat-accordion>
+    </div>
+
+    <mat-divider></mat-divider>
+
+    <div class="button-container sidebar-content">
+        <button (click)="viewModel.sidebarOpened = !viewModel.sidebarOpened" mat-raised-button>Close</button>
+    </div>
+</div>
diff --git a/nav-app/src/app/techniques-search/techniques-search.component.scss b/nav-app/src/app/search-and-multiselect/search-and-multiselect.component.scss
similarity index 53%
rename from nav-app/src/app/techniques-search/techniques-search.component.scss
rename to nav-app/src/app/search-and-multiselect/search-and-multiselect.component.scss
index 72fc7a1b3..f6bc81f17 100644
--- a/nav-app/src/app/techniques-search/techniques-search.component.scss
+++ b/nav-app/src/app/search-and-multiselect/search-and-multiselect.component.scss
@@ -1,11 +1,28 @@
 @import "../../colors.scss";
-.techniques-search {
-    
-    .query {
-        padding: 0 10px;
+.search-and-multiselect {
+    mat-label {
+        padding-left: 5px;
+    }
+    .mat-form-field-appearance-outline {
+        width: 100%;
+    }
+    .mat-form-field-outline-start {
+        width: 30px !important;
+    }
+    .mat-form-field-outline-start, .mat-form-field-outline-gap, .mat-form-field-outline-end {
+        background-color: white;
+    }
+    .sidebar-content {
+        margin: 1rem 0;
+    }
+    mat-card-content {
+        margin-bottom: 0;
+    }
+    .settings .title {
+        font-size: 14px;
+        margin: 0;
     }
     .fields {
-        padding: 0 10px;
         text-align: left;
         .field {
             display: inline-block;
@@ -19,6 +36,9 @@
         text-align: center;
     }
     .allresults-buttons {
+        display: flex;
+        justify-content: space-around;
+
         button {
             width: 48.5%;
         }
@@ -35,8 +55,10 @@
             tr:hover {
                 background: $cell-highlight-color
             }
+            td:first-of-type {
+                width: 200px;
+            }
             td {
-                width: 100px;
                 text-align: left;
                 &+td {
                     width: 1px;
@@ -48,4 +70,11 @@
             text-align: center;
         }
     }
+    mat-panel-description {
+        align-items: center;
+    }
+    .button-container {
+        display: flex;
+        justify-content: flex-end;
+    }
 }
diff --git a/nav-app/src/app/search-and-multiselect/search-and-multiselect.component.ts b/nav-app/src/app/search-and-multiselect/search-and-multiselect.component.ts
new file mode 100644
index 000000000..0b78bb559
--- /dev/null
+++ b/nav-app/src/app/search-and-multiselect/search-and-multiselect.component.ts
@@ -0,0 +1,234 @@
+import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
+import { ViewModel } from '../viewmodels.service';
+import { BaseStix, DataService, Group, Mitigation, Software, Technique } from '../data.service';
+
+@Component({
+  selector: 'app-search-and-multiselect',
+  templateUrl: './search-and-multiselect.component.html',
+  styleUrls: ['./search-and-multiselect.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+
+export class SearchAndMultiselectComponent implements OnInit {
+    @Input() viewModel: ViewModel;
+    public stixTypes: any[];
+
+    public fields = [
+        {
+            "label": "name",
+            "field": "name",
+            "enabled": true
+        },
+        {
+            "label": "ATT&CK ID",
+            "field": "attackID",
+            "enabled": true
+        },
+        // {
+        //     "label": "STIX ID",
+        //     "field": "id",
+        //     "enabled": false
+        // },
+        {
+            "label": "description",
+            "field": "description",
+            "enabled": true
+        },
+        {
+            "label": "data sources",
+            "field": "datasources",
+            "enabled": true
+        }
+    ]
+
+    private debounceFunction;
+    private previousQuery: string = "";
+    private _query: string = "";
+    public set query(newQuery: string) {
+        this._query = newQuery;
+        if (!this.debounceFunction) {
+            this.debounceFunction = setTimeout(() => {
+                this.getResults(this._query);
+                this.debounceFunction = null;
+                this.previousQuery = this._query;
+                }, 300);
+        }
+    }
+
+    public get queryLength(): number {
+        return this._query.length;
+    }
+
+    public techniqueResults: Technique[] = [];
+
+    constructor(private dataService: DataService) {
+        this.stixTypes = [];
+    }
+
+    ngOnInit() {
+        this.getResults();
+    }
+
+    /**
+     * filterAndSort() takes an array of items and does the following:
+     *       1) if the query is empty, then it sorts the array
+     *       2) if the query is not empty, then it filters the already sorted array until nothing is left, or until
+     *          the query is cleared out and empty again
+     * @param items BaseStix[] or Technique[] objects to be filtered and sorted
+     * @param query user-input query in search bar
+     * @param sortTechniquesAndSubtechniques will be true if called from getTechniqueResults(),
+     *                                       to sort techniques and all its subtechniques,
+     *                                       otherwise just sort BaseStix items by name
+     */
+    filterAndSort(items: BaseStix[], query = "", sortTechniquesAndSubtechniques = false): any[] {
+        let self = this;
+        let results = items;
+        if (query.trim() === "") {
+            if (sortTechniquesAndSubtechniques) {
+                results.sort((tA: Technique, tB: Technique) => {
+                    let c1 = tA.isSubtechnique ? tA.parent.name : tA.name;
+                    let c2 = tB.isSubtechnique ? tB.parent.name : tB.name;
+                    return c1.localeCompare(c2)
+                });
+            } else {
+                results.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
+            }
+        } else {
+            // deconflict IDs for cross-tactic techniques
+            let seenIDs = new Set();
+            results = results.filter(function (technique: Technique) {
+                if (seenIDs.has(technique.id)) return false;
+                for (let field of self.fields) {
+                    if (field.enabled) {
+                        // query in this field
+                        if (technique[field.field]?.toLowerCase().includes(query.trim().toLowerCase())) {
+                            seenIDs.add(technique.id);
+                            return true;
+                        }
+                    }
+                }
+                return false;
+            });
+        }
+        return results;
+    }
+
+    // getResults() checks if this._query is:
+    // 1) valid, and
+    // 2) part of last query, otherwise call getTechniques() and getStixData() to search all objects again
+    getResults(query = "", fieldToggled = false) {
+        if (query.trim() != "" && query.includes(this.previousQuery) && !fieldToggled) {
+            this.techniqueResults = this.filterAndSort(this.techniqueResults, query, true);
+            this.stixTypes.forEach(item => item['objects'] = this.filterAndSort(item['objects'], query));
+        } else {
+            this.getTechniques();
+            this.getStixData();
+        }
+    }
+
+    getTechniques() {
+        //get master list of techniques and sub-techniques
+        let allTechniques = this.dataService.getDomain(this.viewModel.domainID).techniques;
+        for (let technique of allTechniques) {
+            allTechniques = allTechniques.concat(technique.subtechniques);
+        }
+        this.techniqueResults = this.filterAndSort(allTechniques, this._query, true);
+    }
+
+    getStixData() {
+        let domain = this.dataService.getDomain(this.viewModel.domainID);
+
+        this.stixTypes = [{
+            "label": "threat groups",
+            "objects": this.filterAndSort(domain.groups, this._query)
+        }, {
+            "label": "software",
+            "objects": this.filterAndSort(domain.software, this._query)
+        }, {
+            "label": "mitigations",
+            "objects": this.filterAndSort(domain.mitigations, this._query)
+        }]
+    }
+
+    public toggleFieldEnabled(field: string) {
+        for (let thefield of this.fields) {
+            if (thefield.field == field) {
+                thefield.enabled = !thefield.enabled;
+                // set query to empty string to trigger getResults() in the case that:
+                // 1) a field was toggled, and
+                // 2) the query did not change
+                this.getResults("", true);
+                break;
+            }
+        }
+    }
+
+    public mouseEnter(technique: Technique, isTechnique = true): void {
+        if (!isTechnique) {
+            for (let t of this.getRelated(technique)) {
+                this.viewModel.selectTechniqueAcrossTactics(t, true, true);
+            }
+        } else {
+            this.viewModel.highlightTechnique(technique);
+        }
+    }
+
+    public mouseLeave(): void {
+        this.viewModel.clearHighlight();
+    }
+
+    public select(stixObject: any, isTechnique= true): void {
+        if (isTechnique) {
+            this.viewModel.selectTechniqueAcrossTactics(stixObject);
+        }
+        else if (!isTechnique) {
+            for (let technique of this.getRelated(stixObject)) {
+                this.viewModel.selectTechniqueAcrossTactics(technique);
+            }
+        }
+    }
+
+    public deselect(stixObject: any, isTechnique = true): void {
+        if (isTechnique) {
+            this.viewModel.unselectTechniqueAcrossTactics(stixObject);
+        }
+        else if (!isTechnique) {
+            for (let technique of this.getRelated(stixObject)) {
+                this.viewModel.unselectTechniqueAcrossTactics(technique);
+            }
+        }
+    }
+
+    public selectAll(items: any[], isTechniqueArray = true): void {
+        if (isTechniqueArray) {
+            for (let result of items) this.select(result, isTechniqueArray);
+        }
+        else if (!isTechniqueArray) {
+            for (let stixObject of items) this.select(stixObject, isTechniqueArray);
+        }
+    }
+
+    public deselectAll(items: any[], isTechniqueArray = true): void {
+        if (isTechniqueArray) {
+            for (let result of items) this.deselect(result, isTechniqueArray);
+        }
+        else if (!isTechniqueArray) {
+            for (let stixObject of items) this.deselect(stixObject, isTechniqueArray);
+        }
+    }
+
+    public getRelated(stixObject: BaseStix): Technique[] {
+        // master list of all techniques and sub-techniques
+        let techniques = this.dataService.getDomain(this.viewModel.domainID).techniques;
+        let allTechniques = techniques.concat(this.dataService.getDomain(this.viewModel.domainID).subtechniques);
+        let domainID = this.viewModel.domainID;
+
+        if (stixObject instanceof Group) {
+            return allTechniques.filter((technique: Technique) => (stixObject as Group).relatedTechniques(domainID).includes(technique.id));
+        } else if (stixObject instanceof Software) {
+            return allTechniques.filter((technique: Technique) => (stixObject as Software).relatedTechniques(domainID).includes(technique.id));
+        } else if (stixObject instanceof Mitigation) {
+            return allTechniques.filter((technique: Technique) => (stixObject as Mitigation).relatedTechniques(domainID).includes(technique.id));
+        }
+    }
+}
diff --git a/nav-app/src/app/sidebar/sidebar.component.html b/nav-app/src/app/sidebar/sidebar.component.html
new file mode 100644
index 000000000..287d8ac8e
--- /dev/null
+++ b/nav-app/src/app/sidebar/sidebar.component.html
@@ -0,0 +1,7 @@
+<div class="sidebar">
+    <div *ngIf="viewModel">
+        <div *ngIf="viewModel.sidebarContentType === 'search'">
+            <app-search-and-multiselect [viewModel]="viewModel"></app-search-and-multiselect>
+        </div>
+    </div>
+</div>
diff --git a/nav-app/src/app/sidebar/sidebar.component.scss b/nav-app/src/app/sidebar/sidebar.component.scss
new file mode 100644
index 000000000..c8b8b592e
--- /dev/null
+++ b/nav-app/src/app/sidebar/sidebar.component.scss
@@ -0,0 +1 @@
+.sidebar { padding: 16px; }
\ No newline at end of file
diff --git a/nav-app/src/app/sidebar/sidebar.component.spec.ts b/nav-app/src/app/sidebar/sidebar.component.spec.ts
new file mode 100644
index 000000000..1f932e207
--- /dev/null
+++ b/nav-app/src/app/sidebar/sidebar.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarComponent } from './sidebar.component';
+
+describe('SidebarComponent', () => {
+  let component: SidebarComponent;
+  let fixture: ComponentFixture<SidebarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SidebarComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/nav-app/src/app/sidebar/sidebar.component.ts b/nav-app/src/app/sidebar/sidebar.component.ts
new file mode 100644
index 000000000..d96ab9635
--- /dev/null
+++ b/nav-app/src/app/sidebar/sidebar.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { DataService } from '../data.service';
+import { ViewModel } from '../viewmodels.service';
+
+@Component({
+    selector: 'sidebar',
+    templateUrl: './sidebar.component.html',
+    styleUrls: ['./sidebar.component.scss']
+})
+export class SidebarComponent implements OnInit {
+    @Input() viewModel: ViewModel;
+
+    constructor(public dataService: DataService) { }
+
+    ngOnInit(): void {
+    }
+
+}
diff --git a/nav-app/src/app/tabs/tabs.component.ts b/nav-app/src/app/tabs/tabs.component.ts
index 55191c23e..10d9ddf60 100755
--- a/nav-app/src/app/tabs/tabs.component.ts
+++ b/nav-app/src/app/tabs/tabs.component.ts
@@ -162,6 +162,10 @@ export class TabsComponent implements AfterContentInit, AfterViewInit {
         this.activeTab = tab;
         // activate the tab the user has clicked on.
         // tab.active = true;
+        this.viewModelsService.viewModels.forEach(viewModel => {
+            viewModel.sidebarOpened = false;
+            viewModel.sidebarContentType = "";
+        });
     }
 
     /**
diff --git a/nav-app/src/app/techniques-search/techniques-search.component.html b/nav-app/src/app/techniques-search/techniques-search.component.html
deleted file mode 100644
index 9c65a4a53..000000000
--- a/nav-app/src/app/techniques-search/techniques-search.component.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<div class="techniques-search">
-    <div class="query">
-        <mat-form-field style="width:100%; margin-top: 10px; box-sizing: content-box;">
-            <input matInput [(ngModel)]="query" placeholder="Search Techniques">
-        </mat-form-field>
-    </div>
-    <h1>properties searched</h1>
-    <div class="fields">
-        <div class="field" *ngFor="let field of fields">
-            <input [id]="field.field" class="checkbox-custom" type="checkbox" (click)="toggleFieldEnabled(field.field)" [checked]="field.enabled">
-            <label for="{{field.field}}" class="checkbox-custom-label noselect">{{field.label}}</label>
-        </div>
-    </div>
-    <div *ngIf="queryLength > 0">
-        <h1>results</h1>
-        <div class="allresults-buttons">
-            <button class="button" (click)="selectAll()">select all</button>
-            <button class="button" (click)="deselectAll()">deselect all</button>
-        </div>
-        <div class="results">
-            <table class="results" *ngIf="results.length > 0">
-                <tr *ngFor="let result of results">
-                    <td>
-                        <span *ngIf="result.isSubtechnique">{{result.parent.name}}: </span>{{result.name}}
-                    </td>
-                    <td><a href="{{result.url}}" target="_blank">view</a></td>
-                    <td><button class="button" (click)="select(result)">select</button></td>
-                    <td><button class="button" (click)="deselect(result)">deselect</button></td>
-                </tr>
-            </table>
-            <div class="no-results" *ngIf="results.length == 0"> no results </div>
-        </div>
-    </div>
-</div>
diff --git a/nav-app/src/app/techniques-search/techniques-search.component.spec.ts b/nav-app/src/app/techniques-search/techniques-search.component.spec.ts
deleted file mode 100644
index 403bbf3cd..000000000
--- a/nav-app/src/app/techniques-search/techniques-search.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { TechniquesSearchComponent } from './techniques-search.component';
-
-describe('TechniquesSearchComponent', () => {
-  let component: TechniquesSearchComponent;
-  let fixture: ComponentFixture<TechniquesSearchComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ TechniquesSearchComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TechniquesSearchComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/nav-app/src/app/techniques-search/techniques-search.component.ts b/nav-app/src/app/techniques-search/techniques-search.component.ts
deleted file mode 100644
index 9bd8722c2..000000000
--- a/nav-app/src/app/techniques-search/techniques-search.component.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { ViewModel } from '../viewmodels.service';
-import { DataService, Technique } from '../data.service';
-
-@Component({
-  selector: 'app-techniques-search',
-  templateUrl: './techniques-search.component.html',
-  styleUrls: ['./techniques-search.component.scss']
-})
-export class TechniquesSearchComponent implements OnInit {
-    @Input() viewModel: ViewModel;
-    public fields = [
-        {
-            "label": "name",
-            "field": "name",
-            "enabled": true
-        },
-        {
-            "label": "ATT&CK ID",
-            "field": "attackID",
-            "enabled": true
-        },
-        // {
-        //     "label": "STIX ID",
-        //     "field": "id",
-        //     "enabled": false
-        // },
-        {
-            "label": "description",
-            "field": "description",
-            "enabled": true
-        },
-        {
-            "label": "data sources",
-            "field": "datasources",
-            "enabled": true
-        }
-    ]
-
-    private _query: string = "";
-    public set query(newQuery: string) {
-        let self = this;
-        this._query = newQuery;
-        if (this._query.trim() != "") {
-            // search
-
-            //get master list of techniques and sub-techniques
-            let allTechniques = this.dataService.getDomain(this.viewModel.domainID).techniques;
-            for (let technique of allTechniques) {
-                allTechniques = allTechniques.concat(technique.subtechniques);
-            }
-
-            let results = allTechniques.filter(function(technique: Technique) {
-                for (let field of self.fields) {
-                    if (field.enabled) {
-                        // query in this field
-                        if (technique[field.field].toLowerCase().includes(self._query.trim().toLowerCase())) return true;
-                    }
-                }
-                return false;
-            });
-            // deconflict IDs for cross-tactic techniques
-            let seenIDs = new Set();
-            results = results.filter(function(technique: Technique) {
-                if (seenIDs.has(technique.id)) return false;
-                else {
-                    seenIDs.add(technique.id);
-                    return true;
-                }
-            })
-
-            results = results.sort((tA: Technique, tB: Technique) => {
-                let c1 = tA.isSubtechnique ? tA.parent.name : tA.name;
-                let c2 = tB.isSubtechnique ? tB.parent.name : tB.name;
-                return c1.localeCompare(c2)
-            });
-            // console.log(seenIDs, results)
-            this.results = results;
-        } else {
-            this.results = [];
-        }
-    }
-    public get queryLength(): number {
-        return this._query.length;
-    }
-    public results: Technique[] = [];
-
-    constructor(private dataService: DataService) {
-
-    }
-
-    ngOnInit() {
-    }
-
-    public toggleFieldEnabled(field: string) {
-        for (let thefield of this.fields) {
-            if (thefield.field == field) {
-                thefield.enabled = !thefield.enabled;
-                break;
-            }
-        }
-        this.query = this._query;
-    }
-
-    public select(technique: Technique): void {
-        this.viewModel.selectTechniqueAcrossTactics(technique);
-    }
-
-    public deselect(technique: Technique): void {
-        this.viewModel.unselectTechniqueAcrossTactics(technique);
-    }
-
-    public selectAll(): void {
-        for (let result of this.results) this.select(result);
-    }
-
-    public deselectAll(): void {
-        for (let result of this.results) this.deselect(result);
-    }
-
-}
diff --git a/nav-app/src/app/viewmodels.service.ts b/nav-app/src/app/viewmodels.service.ts
index 289b9e417..39ed2b505 100755
--- a/nav-app/src/app/viewmodels.service.ts
+++ b/nav-app/src/app/viewmodels.service.ts
@@ -382,6 +382,18 @@ export class ViewModel {
     techIDtoUIDMap: Object = {};
     techUIDtoIDMap: Object = {};
 
+    private _sidebarOpened: boolean;
+    public get sidebarOpened(): boolean { return this._sidebarOpened; };
+    public set sidebarOpened(newVal: boolean) { this._sidebarOpened = newVal; };
+
+    public readonly sidebarContentTypes = ['layerUpgrade', 'search'];
+    private _sidebarContentType: string;
+    public get sidebarContentType(): string { return this._sidebarContentType; };
+    public set sidebarContentType(newVal: string) {
+        if (this.sidebarContentTypes.includes(newVal)) this._sidebarContentType = newVal;
+        else this._sidebarContentType = '';
+    };
+
     constructor(name: string, uid: string, domainID: string, private dataService: DataService) {
         this.domainID = domainID;
         console.log("initializing ViewModel '" + name + "'");
@@ -485,15 +497,16 @@ export class ViewModel {
 
 
     public highlightedTactic: Tactic = null;
-    public highlightedTechnique: Technique = null;
+    public highlightedTechniques: Set<string> = new Set<string>();
 
     /**
      * Highlight the given technique under the given tactic
      * @param {Technique} technique to highlight
      * @param {Tactic} tactic wherein the technique occurs
      */
-    public highlightTechnique(technique: Technique, tactic: Tactic) {
-        this.highlightedTechnique = technique;
+    public highlightTechnique(technique: Technique, tactic?: Tactic | null) {
+        if (this.selectSubtechniquesWithParent && technique.isSubtechnique) this.highlightedTechniques.add(technique.parent.id);
+        this.highlightedTechniques.add(technique.id);
         this.highlightedTactic = tactic;
     }
     /**
@@ -501,7 +514,7 @@ export class ViewModel {
      */
     public clearHighlight() {
         this.highlightedTactic = null;
-        this.highlightedTechnique = null;
+        this.highlightedTechniques = new Set<string>();
     }
 
     /**
@@ -563,20 +576,26 @@ export class ViewModel {
      * select the given technique across all tactics in which it occurs
      * @param {Technique} technique to select
      * @param {boolean} walkChildren (recursion helper) if true and selectSubtechniquesWithParent is true, walk selection up to parent technique
+     * @param highlightTechniques, if true, highlight techniques rather than add to selected techniques group
      */
-    public selectTechniqueAcrossTactics(technique: Technique, walkChildren=true): void {
+    public selectTechniqueAcrossTactics(technique: Technique, walkChildren= true, highlightTechniques = false): void {
         if (this.selectSubtechniquesWithParent && walkChildren) { //walk to parent / children / siblings
             if (technique.isSubtechnique) { //select from parent
-                this.selectTechniqueAcrossTactics(technique.parent, true);
+                this.selectTechniqueAcrossTactics(technique.parent, true, highlightTechniques);
                 return;
             } else { //select subtechniques
                 for (let subtechnique of technique.subtechniques) {
-                    this.selectTechniqueAcrossTactics(subtechnique, false);
+                    this.selectTechniqueAcrossTactics(subtechnique, false, highlightTechniques);
                 }
             }
         }
-        for (let id of technique.get_all_technique_tactic_ids()) {
-            this.selectedTechniques.add(id);
+        if (highlightTechniques) {
+            this.highlightTechnique(technique);
+        }
+        else {
+            for (let id of technique.get_all_technique_tactic_ids()) {
+                this.selectedTechniques.add(id);
+            }
         }
     }
 
diff --git a/nav-app/src/assets/icons/ic_playlist_add_black_24px.svg b/nav-app/src/assets/icons/ic_playlist_add_black_24px.svg
deleted file mode 100644
index 6ecd376e5..000000000
--- a/nav-app/src/assets/icons/ic_playlist_add_black_24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M14 10H2v2h12v-2zm0-4H2v2h12V6zm4 8v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM2 16h8v-2H2v2z"/>
-</svg>
\ No newline at end of file
diff --git a/nav-app/src/assets/icons/ic_playlist_add_gray_24px.svg b/nav-app/src/assets/icons/ic_playlist_add_gray_24px.svg
deleted file mode 100644
index 64349c77d..000000000
--- a/nav-app/src/assets/icons/ic_playlist_add_gray_24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg fill="#aaaaaa" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M14 10H2v2h12v-2zm0-4H2v2h12V6zm4 8v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM2 16h8v-2H2v2z"/>
-</svg>
\ No newline at end of file
diff --git a/nav-app/src/styles.scss b/nav-app/src/styles.scss
index 4e25bff68..dd8f8782b 100755
--- a/nav-app/src/styles.scss
+++ b/nav-app/src/styles.scss
@@ -172,4 +172,8 @@ body {
 
 .mat-button-focus-overlay {
     background-color: transparent!important;
-}
\ No newline at end of file
+}
+
+.mat-drawer-inner-container {
+    background-color: $panel-light;
+}