diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 75a1a91..cf3302c 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { IFilterOption } from '../models/filter-option';
 
 @Component({
 	selector: 'app-dashboard',
@@ -6,10 +7,7 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./dashboard.component.scss']
 })
 export class DashboardComponent implements OnInit {
-	filterOptions: Array<{
-		name: string,
-		id: string
-	}>
+	filterOptions: Array<IFilterOption>;
 
 	constructor() { }
 
@@ -20,7 +18,7 @@ export class DashboardComponent implements OnInit {
 		}, {
 			name: 'Today',
 			id: 'today'
-		}]
+		}];
 	}
 
 }
diff --git a/src/app/models/filter-option.ts b/src/app/models/filter-option.ts
new file mode 100644
index 0000000..4f6236f
--- /dev/null
+++ b/src/app/models/filter-option.ts
@@ -0,0 +1,4 @@
+export type IFilterOption = {
+	name: string,
+	id: string
+};
diff --git a/src/app/orders/orders.component.html b/src/app/orders/orders.component.html
index 66000b4..75d083c 100644
--- a/src/app/orders/orders.component.html
+++ b/src/app/orders/orders.component.html
@@ -1 +1,13 @@
-<p>orders works!</p>
+<div class="widget-heading-holder">
+	<header> Dashboard </header>
+	<app-custom-selector header="Status" [options]="statusOptions" width="200"
+	[defaultOptionId]="statusOptions[0].id"></app-custom-selector>
+
+	<app-custom-selector header="Date" [options]="dateOptions" width="200"
+	[defaultOptionId]="dateOptions[0].id"></app-custom-selector>
+
+	<div class="search-input">
+		<input type="text" placeholder="Quick Search">
+		<button> <i class="icon ion-md-search"></i> </button>
+	</div>
+</div>
diff --git a/src/app/orders/orders.component.scss b/src/app/orders/orders.component.scss
index e69de29..09489a1 100644
--- a/src/app/orders/orders.component.scss
+++ b/src/app/orders/orders.component.scss
@@ -0,0 +1,32 @@
+.search-input {
+	display: flex;
+	width: 300px;
+	border-radius: 20px;
+	background-color: white;
+	color: var(--brand-blue);
+	align-items: center;
+	justify-content: space-between;
+
+	input {
+		border: 0;
+		font-size: 12px;
+		padding-left: 10px;
+		font-weight: 500;
+		color: var(--dark-grey);
+		flex-grow: 1;
+
+		&::placeholder {
+			color: var(--grey);
+		}
+	}
+
+	button {
+		border-radius: 50%;
+		width: 30px;
+		height: 30px;
+		color: var(--brand-blue);
+		font-size: 20px;
+		border: 1px solid var(--brand-blue);
+		background-color: white;
+	}
+}
diff --git a/src/app/orders/orders.component.ts b/src/app/orders/orders.component.ts
index de2ad68..5592d06 100644
--- a/src/app/orders/orders.component.ts
+++ b/src/app/orders/orders.component.ts
@@ -1,15 +1,28 @@
 import { Component, OnInit } from '@angular/core';
+import { IFilterOption } from '../models/filter-option';
 
 @Component({
-  selector: 'app-orders',
-  templateUrl: './orders.component.html',
-  styleUrls: ['./orders.component.scss']
+	selector: 'app-orders',
+	templateUrl: './orders.component.html',
+	styleUrls: ['./orders.component.scss']
 })
 export class OrdersComponent implements OnInit {
+	statusOptions: Array<IFilterOption>;
+	dateOptions: Array<IFilterOption>;
 
-  constructor() { }
 
-  ngOnInit() {
-  }
+	constructor() { }
+
+	ngOnInit() {
+		this.statusOptions = [{
+			name: 'All',
+			id: 'all'
+		}];
+
+		this.dateOptions = [{
+			name: 'Today',
+			id: 'today'
+		}];
+	}
 
 }
diff --git a/src/app/widgets-holder/widgets-holder.component.html b/src/app/widgets-holder/widgets-holder.component.html
index e5a22e2..995602c 100644
--- a/src/app/widgets-holder/widgets-holder.component.html
+++ b/src/app/widgets-holder/widgets-holder.component.html
@@ -42,5 +42,6 @@
 
 	<section class="widgets">
 		<app-dashboard *ngIf="selected_nav === 'dashboard'"></app-dashboard>
+		<app-orders *ngIf="selected_nav === 'orders'"></app-orders>
 	</section>
 </div>
diff --git a/src/app/widgets-holder/widgets-holder.component.ts b/src/app/widgets-holder/widgets-holder.component.ts
index e1cb159..30c0949 100644
--- a/src/app/widgets-holder/widgets-holder.component.ts
+++ b/src/app/widgets-holder/widgets-holder.component.ts
@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./widgets-holder.component.scss']
 })
 export class WidgetsHolderComponent implements OnInit {
-	selected_nav: string = 'dashboard';
+	selected_nav: string = 'orders';
 
 	constructor() { }