diff --git a/pdb-js/src/app/app.module.ts b/pdb-js/src/app/app.module.ts
index 07308df..79296c7 100644
--- a/pdb-js/src/app/app.module.ts
+++ b/pdb-js/src/app/app.module.ts
@@ -12,6 +12,7 @@ import { VisualizationPageComponent } from './visualization-page/visualization-p
  
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule, MatInputModule} from '@angular/material';
+import { YAxisRangeComponent } from './y-axis-range/y-axis-range.component';
 
 @NgModule({
   declarations: [
@@ -20,6 +21,7 @@ import {MatFormFieldModule, MatInputModule} from '@angular/material';
     HelpPageComponent,
     UploadPageComponent,
     VisualizationPageComponent,
+    YAxisRangeComponent,
   ],
   imports: [
     BrowserModule,
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.html b/pdb-js/src/app/visualization-page/visualization-page.component.html
index 25aac92..b1a8179 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.html
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.html
@@ -3,47 +3,67 @@
 </style>
 
 <div id="visualization">
+  <div id="query-box">
+      <input matInput placeholder="Query" value="{{query}}" />
+  </div>
   <div id="filters">
+    <button mat-button>
+      <img src="assets/img/scatter-chart2.svg" class="icon-inline" aria-hidden="true" title="create plot" />
+      Plot
+    </button>
+    <button mat-button>
+      <img src="assets/img/four-squares-line.svg" class="icon-inline" aria-hidden="true" title="Create Gallery (only active if 'Split' is set)" />
+      Gallery
+    </button>
+    
   
-  <mat-form-field>
-    <mat-label>Type:</mat-label>
-    <mat-select [(value)]="selectedPlotType">
-      <mat-option *ngFor="let plotType of plotTypes" [value]="plotType.name">
-        <img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-
-  <mat-form-field>
-    <mat-label>Combine with:</mat-label>
-    <mat-select [(value)]="selectedCombinePlotType">
-      <mat-option>-</mat-option>
-      <mat-option *ngFor="let plotType of combinePlotTypes" [value]="plotType.name">
-        <img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
+    <mat-form-field>
+      <mat-label>Type:</mat-label>
+      <mat-select [(value)]="selectedPlotType">
+        <mat-option *ngFor="let plotType of plotTypes" [value]="plotType.name">
+          <img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
   
-  <mat-form-field>
-    <textarea matInput placeholder="Query"></textarea>
-  </mat-form-field>
+    <mat-form-field>
+      <mat-label>Combine with:</mat-label>
+      <mat-select [(value)]="selectedCombinePlotType">
+        <mat-option>-</mat-option>
+        <mat-option *ngFor="let plotType of combinePlotTypes" [value]="plotType.name">
+          <img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
   
-  <mat-form-field>
-    <mat-label>Group By:</mat-label>
-    <mat-select  multiple>
-      <mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
-    </mat-select>
-  </mat-form-field>
-  
-  <mat-form-field>
-    <mat-label>Split By:</mat-label>
-    <mat-select>
-      <mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
-    </mat-select>
-  </mat-form-field>
-  
-  
-
+    <mat-form-field>
+      <mat-label>Group By:</mat-label>
+      <mat-select multiple>
+        <mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
+      </mat-select>
+    </mat-form-field>
+    
+    <mat-form-field>
+      <mat-label>Split By:</mat-label>
+      <mat-select>
+        <mat-option>-</mat-option>
+        <mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
+      </mat-select>
+    </mat-form-field>
+    
+    <mat-form-field>
+      <mat-label>Y-Axis:</mat-label>
+      <mat-select [(value)]="yAxis">
+        <mat-option value="log">Logarithm</mat-option>
+        <mat-option value="linear">Linear</mat-option>
+      </mat-select>
+    </mat-form-field>
+    
+   <pdb-y-axis-range 
+    [(yAxisUnit)]="yAxisUnit"
+    [(minYValue)]="minYValue"
+    [(maxYValue)]="maxYValue"
+   ></pdb-y-axis-range>
   
   </div>
   <div id="results"></div>
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.scss b/pdb-js/src/app/visualization-page/visualization-page.component.scss
index fa6429b..d07161c 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.scss
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.scss
@@ -12,6 +12,7 @@
     height: 100%;
     margin: 0;
     grid:
+      "query-box query-box" auto
       "filters results" 1fr
       / minmax(200px, 1fr) 3fr;
   }
@@ -23,12 +24,19 @@
     height: 100%;
     margin: 0;
     grid:
+      "query-box" auto
       "filters" auto
       "results" 1fr
       / 1fr;
   }
 }
 
+#query-box {
+  grid-area: query-box;
+  padding: 2px;
+  border-bottom: 1px solid black;
+}
+
 #filters {
   grid-area: filters;
   background-color: #eee;
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.ts b/pdb-js/src/app/visualization-page/visualization-page.component.ts
index a3bc27b..70b1e9b 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.ts
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.ts
@@ -15,18 +15,29 @@ export class VisualizationPageComponent implements OnInit {
   combinePlotTypes: Array<any>;
   
   tagFields: Array<any>;
+  
+  yAxis: string;
+  yAxisUnit: string;
+  minYValue: number;
+  maxYValue: number;
+  
+  query: string;
 
   constructor(private plotService: PlotService) {
   }
 
   ngOnInit() {
+    this.query = "pod=*";
     this.plotTypes = this.plotService.getPlotTypes();
     this.selectedPlotType = this.plotTypes[0].name;
     
     this.combinePlotTypes = this.plotTypes;
     
-    
     this.tagFields = this.plotService.getTagFields();
+    this.yAxis = "log";
+    this.yAxisUnit = "MINUTES";
+    this.minYValue = 0;
+    this.maxYValue = 120;
   }
 
 }
diff --git a/pdb-js/src/app/y-axis-range/y-axis-range.component.html b/pdb-js/src/app/y-axis-range/y-axis-range.component.html
new file mode 100644
index 0000000..91272a0
--- /dev/null
+++ b/pdb-js/src/app/y-axis-range/y-axis-range.component.html
@@ -0,0 +1,16 @@
+ <mat-form-field>
+  <input matInput type="number" placeholder="Min Y-Value" min="0" value="{{minYValue}}">
+</mat-form-field>
+<mat-form-field>
+  <input matInput type="number" placeholder="Max Y-Value" min="0" value="{{maxYValue}}">
+</mat-form-field>
+ <mat-form-field>
+  <mat-select [(value)]="yAxisUnit">
+    <mat-option value="AUTOMATIC">automatic</mat-option>
+    <mat-option value="MILLISECONDS">milli seconds</mat-option>
+    <mat-option value="SECONDS">seconds</mat-option>
+    <mat-option value="MINUTES">minutes</mat-option>
+    <mat-option value="HOURS">hours</mat-option>
+    <mat-option value="DAYS">days</mat-option>
+  </mat-select>
+</mat-form-field>
diff --git a/pdb-js/src/app/y-axis-range/y-axis-range.component.scss b/pdb-js/src/app/y-axis-range/y-axis-range.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/pdb-js/src/app/y-axis-range/y-axis-range.component.spec.ts b/pdb-js/src/app/y-axis-range/y-axis-range.component.spec.ts
new file mode 100644
index 0000000..837e60b
--- /dev/null
+++ b/pdb-js/src/app/y-axis-range/y-axis-range.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { YAxisRangeComponent } from './y-axis-range.component';
+
+describe('YAxisRangeComponent', () => {
+  let component: YAxisRangeComponent;
+  let fixture: ComponentFixture<YAxisRangeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ YAxisRangeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(YAxisRangeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/pdb-js/src/app/y-axis-range/y-axis-range.component.ts b/pdb-js/src/app/y-axis-range/y-axis-range.component.ts
new file mode 100644
index 0000000..0762961
--- /dev/null
+++ b/pdb-js/src/app/y-axis-range/y-axis-range.component.ts
@@ -0,0 +1,19 @@
+import { Component,  Input } from '@angular/core';
+
+@Component({
+  selector: 'pdb-y-axis-range',
+  templateUrl: './y-axis-range.component.html',
+  styleUrls: ['./y-axis-range.component.scss']
+})
+export class YAxisRangeComponent {
+
+  @Input() yAxisUnit: string;
+  @Input() minYValue: number;
+  @Input() maxYValue: number;
+
+  constructor() {
+    this.yAxisUnit = "AUTOMATIC";
+    this.minYValue = 1;
+    this.maxYValue = 123;
+  }
+}
diff --git a/pdb-js/src/assets/img/four-squares-line.svg b/pdb-js/src/assets/img/four-squares-line.svg
new file mode 100644
index 0000000..ace6eab
--- /dev/null
+++ b/pdb-js/src/assets/img/four-squares-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3016 2973" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"><path d="M1826 1615h1017c48 0 91 19 122 51 31 31 51 75 51 122v1012c0 48-19 91-51 122-31 31-75 51-122 51H1826c-48 0-91-19-122-51-31-31-51-75-51-122V1788c0-48 19-91 51-122 31-31 75-51 122-51zM173 0h1017c48 0 91 19 122 51 31 31 51 75 51 122v1012c0 48-19 91-51 122-31 31-75 51-122 51H173c-47 0-91-19-122-51-31-31-51-75-51-122V173c0-48 19-91 51-122 2-2 5-4 7-6C89 17 129 1 173 1zm1008 182H181v995h1000V182zM1826 0h1017c48 0 91 19 122 51 31 31 51 75 51 122v1012c0 48-19 91-51 122-31 31-75 51-122 51H1826c-48 0-91-19-122-51-31-31-51-75-51-122V173c0-48 19-91 51-122 31-31 75-51 122-51zm1008 182H1834v995h1000V182zM173 1615h1017c48 0 91 19 122 51 31 31 51 75 51 122v1012c0 48-19 91-51 122-31 31-75 51-122 51H173c-47 0-91-19-122-51-31-31-51-75-51-122V1788c0-48 19-91 51-122 2-2 5-4 7-6 31-28 71-44 115-44zm1008 182H181v995h1000v-995zm1653 0H1834v995h1000v-995z" fill-rule="nonzero"/></svg>
\ No newline at end of file
diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss
index 5775a52..c3ef9f2 100644
--- a/pdb-js/src/styles.scss
+++ b/pdb-js/src/styles.scss
@@ -29,6 +29,12 @@ body {
   margin: 0;
 }
 
+.icon-inline {
+  width: 1em;
+  height: 1em;
+  vertical-align: text-bottom;
+}
+
 .icon-small {
   max-width: 1.5em;
   max-height: 1.5em;