diff --git a/frontends/dnet-is-application/src/app/app-routing.module.ts b/frontends/dnet-is-application/src/app/app-routing.module.ts
index 6cb55229..f943a72f 100644
--- a/frontends/dnet-is-application/src/app/app-routing.module.ts
+++ b/frontends/dnet-is-application/src/app/app-routing.module.ts
@@ -6,6 +6,7 @@ import { WfHistoryComponent } from './wf-history/wf-history.component';
 import { ResourcesComponent } from './resources/resources.component';
 import { VocabulariesComponent, VocabularyEditorComponent } from './vocabularies/vocabularies.component';
 import { ContextViewerComponent, ContextsComponent } from './contexts/contexts.component';
+import { DsmSearchComponent, DsmResultsComponent, DsmApiComponent, DsmAddApiComponent } from './dsm/dsm.component';
 
 const routes: Routes = [
   { path:"info"                    , component:InfoComponent },
@@ -16,6 +17,10 @@ const routes: Routes = [
   { path:"wf_history"              , component:WfHistoryComponent },
   { path:"ctx_viewer"              , component:ContextViewerComponent },
   { path:"voc_editor"              , component:VocabularyEditorComponent },
+  { path:"dsm/search"              , component:DsmSearchComponent },
+  { path:"dsm/results/:page/:size" , component:DsmResultsComponent },
+  { path:"dsm/addApi"              , component:DsmAddApiComponent },
+  { path:"dsm/api"                 , component:DsmApiComponent }
 ];
 
 @NgModule({
diff --git a/frontends/dnet-is-application/src/app/app.module.ts b/frontends/dnet-is-application/src/app/app.module.ts
index f73db797..02253e0c 100644
--- a/frontends/dnet-is-application/src/app/app.module.ts
+++ b/frontends/dnet-is-application/src/app/app.module.ts
@@ -14,7 +14,6 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatTreeModule } from '@angular/material/tree';
-import { MainMenuTreeComponent } from './main-menu-tree/main-menu-tree.component';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatCardModule } from '@angular/material/card';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -30,13 +29,13 @@ import { ResourcesComponent, ResContentDialog, ResCreateNewDialog, ResMetadataDi
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { ContextsComponent, ContextViewerComponent, ContextParamsDialog } from './contexts/contexts.component';
 import { VocabulariesComponent, VocabularyEditorComponent, VocDialog, VocTermDialog } from './vocabularies/vocabularies.component';
+import { DsmSearchComponent, DsmResultsComponent, DsmApiComponent, DsmAddApiComponent } from './dsm/dsm.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     FilterPipe,
     MainMenuPanelsComponent,
-    MainMenuTreeComponent,
     InfoComponent,
     ProtocolsComponent,
     WfHistoryComponent,
@@ -51,7 +50,11 @@ import { VocabulariesComponent, VocabularyEditorComponent, VocDialog, VocTermDia
     VocabulariesComponent,
     VocabularyEditorComponent,
     VocDialog,
-    VocTermDialog
+    VocTermDialog,
+    DsmSearchComponent, 
+    DsmResultsComponent, 
+    DsmApiComponent, 
+    DsmAddApiComponent
   ],
   imports: [
     BrowserModule,
diff --git a/frontends/dnet-is-application/src/app/dsm/dsm-add-api.component.html b/frontends/dnet-is-application/src/app/dsm/dsm-add-api.component.html
new file mode 100644
index 00000000..8c0318ce
--- /dev/null
+++ b/frontends/dnet-is-application/src/app/dsm/dsm-add-api.component.html
@@ -0,0 +1 @@
+<p>dsm search</p>
diff --git a/frontends/dnet-is-application/src/app/dsm/dsm-api.component.html b/frontends/dnet-is-application/src/app/dsm/dsm-api.component.html
new file mode 100644
index 00000000..8c0318ce
--- /dev/null
+++ b/frontends/dnet-is-application/src/app/dsm/dsm-api.component.html
@@ -0,0 +1 @@
+<p>dsm search</p>
diff --git a/frontends/dnet-is-application/src/app/dsm/dsm-results.component.html b/frontends/dnet-is-application/src/app/dsm/dsm-results.component.html
new file mode 100644
index 00000000..8c0318ce
--- /dev/null
+++ b/frontends/dnet-is-application/src/app/dsm/dsm-results.component.html
@@ -0,0 +1 @@
+<p>dsm search</p>
diff --git a/frontends/dnet-is-application/src/app/dsm/dsm-search.component.html b/frontends/dnet-is-application/src/app/dsm/dsm-search.component.html
new file mode 100644
index 00000000..8c0318ce
--- /dev/null
+++ b/frontends/dnet-is-application/src/app/dsm/dsm-search.component.html
@@ -0,0 +1 @@
+<p>dsm search</p>
diff --git a/frontends/dnet-is-application/src/app/dsm/dsm.component.css b/frontends/dnet-is-application/src/app/dsm/dsm.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontends/dnet-is-application/src/app/dsm/dsm.component.ts b/frontends/dnet-is-application/src/app/dsm/dsm.component.ts
new file mode 100644
index 00000000..14e8440d
--- /dev/null
+++ b/frontends/dnet-is-application/src/app/dsm/dsm.component.ts
@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dsm-search',
+  templateUrl: './dsm-search.component.html',
+  styleUrls: ['./dsm.component.css']
+})
+export class DsmSearchComponent {
+
+}
+
+@Component({
+  selector: 'app-dsm-results',
+  templateUrl: './dsm-results.component.html',
+  styleUrls: ['./dsm.component.css']
+})
+export class DsmResultsComponent {
+
+}
+
+@Component({
+  selector: 'app-dsm-api',
+  templateUrl: './dsm-api.component.html',
+  styleUrls: ['./dsm.component.css']
+})
+export class DsmApiComponent {
+
+}
+
+@Component({
+  selector: 'app-dsm-add-api',
+  templateUrl: './dsm-add-api.component.html',
+  styleUrls: ['./dsm.component.css']
+})
+export class DsmAddApiComponent {
+
+}
diff --git a/frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.html b/frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.html
index c09e72f0..795242d9 100644
--- a/frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.html
+++ b/frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.html
@@ -15,7 +15,7 @@
             <mat-panel-title>Datasources</mat-panel-title>
         </mat-expansion-panel-header>
         <div>
-            <a class="menu-item" [routerLink]="['ds/search']">Search</a>
+            <a class="menu-item" [routerLink]="['dsm/search']">Search</a>
         </div>
     </mat-expansion-panel>
 
diff --git a/frontends/dnet-is-application/src/app/main-menu-tree/main-menu-tree.component.css b/frontends/dnet-is-application/src/app/main-menu-tree/main-menu-tree.component.css
deleted file mode 100644
index bcf84cd4..00000000
--- a/frontends/dnet-is-application/src/app/main-menu-tree/main-menu-tree.component.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.type-icon {
-  color: #757575;
-  margin-right: 5px;
-}
diff --git a/frontends/dnet-is-application/src/app/main-menu-tree/main-menu-tree.component.html b/frontends/dnet-is-application/src/app/main-menu-tree/main-menu-tree.component.html
deleted file mode 100644
index a84203f7..00000000
--- a/frontends/dnet-is-application/src/app/main-menu-tree/main-menu-tree.component.html
+++ /dev/null
@@ -1,40 +0,0 @@
-
-
-
-
-<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
-  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
-    <button mat-icon-button disabled></button>
-    <mat-icon class="type-icon" [attr.aria-label]="node.type + 'icon'">
-      {{ node.type === 'menuitem' ? 'description' : 'folder' }}
-    </mat-icon>
-    <div *ngIf="!node.badge">
-      <a [routerLink]="[node.route]" *ngIf="node.route">{{node.name}}</a>
-      <span *ngIf="!node.route">{{node.name}}</span>
-    </div>
-    <div matBadge="{{node.badge}}" matBadgeOverlap="false" *ngIf="node.badge">
-      <a [routerLink]="[node.route]" *ngIf="node.route">{{node.name}}</a>
-      <span *ngIf="!node.route">{{node.name}}</span>
-    </div>
-  </mat-tree-node>
-
-  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
-    <button mat-icon-button matTreeNodeToggle
-            [attr.aria-label]="'Toggle ' + node.name">
-      <mat-icon class="mat-icon-rtl-mirror">
-        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
-      </mat-icon>
-    </button>
-    <mat-icon class="type-icon" [attr.aria-label]="node.type + 'icon'">
-      {{ node.type ==='menuitem' ? 'description' : 'folder' }}
-    </mat-icon>
-    <div *ngIf="!node.badge">
-      <a [routerLink]="[node.route]" *ngIf="node.route">{{node.name}}</a>
-      <span *ngIf="!node.route">{{node.name}}</span>
-    </div>
-    <div matBadge="{{node.badge}}" matBadgeOverlap="false" *ngIf="node.badge">
-      <a [routerLink]="[node.route]" *ngIf="node.route">{{node.name}}</a>
-      <span *ngIf="!node.route">{{node.name}}</span>
-    </div>
-  </mat-tree-node>
-</mat-tree>
diff --git a/frontends/dnet-is-application/src/app/main-menu-tree/main-menu-tree.component.ts b/frontends/dnet-is-application/src/app/main-menu-tree/main-menu-tree.component.ts
deleted file mode 100644
index 08c2d7cc..00000000
--- a/frontends/dnet-is-application/src/app/main-menu-tree/main-menu-tree.component.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-import { Component } from '@angular/core';
-import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
-import { FlatTreeControl } from '@angular/cdk/tree';
-import { menuData } from './menu-data';
-import { ResourceType } from '../model/controller.model';
-import { ISService } from '../is.service';
-
-export interface MenuNode {
-  name: string;
-  type: string;
-  route?: string;
-  badge?: string;
-  children?: MenuNode[];
-}
-
-export interface FlatTreeNode {
-  name: string;
-  type: string;
-  level: number;
-  route?: string;
-  badge?: string;
-  expandable: boolean;
-}
-
-@Component({
-  selector: 'app-main-menu-tree',
-  templateUrl: './main-menu-tree.component.html',
-  styleUrls: ['./main-menu-tree.component.css']
-})
-export class MainMenuTreeComponent {
-
-  /** The TreeControl controls the expand/collapse state of tree nodes.  */
-  treeControl: FlatTreeControl<FlatTreeNode>;
-
-  /** The TreeFlattener is used to generate the flat list of items from hierarchical data. */
-  treeFlattener: MatTreeFlattener<MenuNode, FlatTreeNode>;
-
-  /** The MatTreeFlatDataSource connects the control and flattener to provide data. */
-  dataSource: MatTreeFlatDataSource<MenuNode, FlatTreeNode>;
-
-  constructor(public service:ISService) {
-    this.treeFlattener = new MatTreeFlattener(
-      this.transformer,
-      this.getLevel,
-      this.isExpandable,
-      this.getChildren);
-
-    this.service.loadResourceTypes((data:ResourceType[]) => {
-      let simpleResources: MenuNode[] = []
-      let advancedResources: MenuNode[] = []
-    
-      data.forEach(resType => {
-        let item:MenuNode = {
-          name: resType.name, 
-          type: 'menuitem',
-          badge: resType.count.toString()
-        }
-        if (resType.simple) {
-          item.route = '/resources/' + resType.id;
-          simpleResources.push(item)
-        } else {
-          item.route = '/adv_resources/' + resType.id;
-          advancedResources.push(item)
-        }
-      })
-      
-      menuData.forEach(m => {
-        if (m.name=='Simple Resources') {
-          m.children = simpleResources
-        } else if (m.name=='Advanced Resources') {
-          m.children = advancedResources
-        }
-      })
-      this.dataSource.data = menuData;
-  });
-
-    this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
-    this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
-    this.dataSource.data = menuData;
-
-  }
-
-  /** Transform the data to something the tree can read. */
-  transformer(node: MenuNode, level: number): FlatTreeNode {
-    return {
-      name: node.name,
-      type: node.type,
-      route: node.route,
-      badge: node.badge,
-      level,
-      expandable: !!node.children
-    };
-  }
-
-  /** Get the level of the node */
-  getLevel(node: FlatTreeNode): number {
-    return node.level;
-  }
-
-  /** Get whether the node is expanded or not. */
-  isExpandable(node: FlatTreeNode): boolean {
-    return node.expandable;
-  }
-
-  /** Get whether the node has children or not. */
-  hasChild(index: number, node: FlatTreeNode): boolean {
-    return node.expandable;
-  }
-
-  /** Get the children for the node. */
-  getChildren(node: MenuNode): MenuNode[] | null | undefined {
-    return node.children;
-  }
-}
diff --git a/frontends/dnet-is-application/src/app/main-menu-tree/menu-data.ts b/frontends/dnet-is-application/src/app/main-menu-tree/menu-data.ts
deleted file mode 100644
index fe939c0c..00000000
--- a/frontends/dnet-is-application/src/app/main-menu-tree/menu-data.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export const menuData = [
-  { name: 'Home', type: 'menuitem' },
-  {
-    name: 'Datasources',
-    type: 'menu',
-    children: [
-      { name: 'Search', type: 'menuitem' }
-    ]
-  },
-  {
-    name: 'Simple Resources',
-    type: 'menu',
-    children: []
-  },
-  {
-    name: 'Advanced Resources',
-    type: 'menu',
-    children: []
-  },
-  { name: 'Workflow History', type: 'menuitem' },
-  { name: 'Container Info', type: 'menuitem', route: 'info' },
-  { name: 'API Documentation', type: 'menuitem' }
- 
-];