diff --git a/nodejs/public/lib/js/app-base.js b/nodejs/public/lib/js/app-base.js
index c4ec287..94766bf 100644
--- a/nodejs/public/lib/js/app-base.js
+++ b/nodejs/public/lib/js/app-base.js
@@ -307,6 +307,8 @@ $( document ).ready(function(){
 
 	$('.fa-circle-minus').click(function(){
 		$(this).closest('.card').find('.card-body').slideToggle('fast');
+		// $(this).closest('.card').find('.card-header').slideToggle('fast');
+
 	});
 
 	$('.fa-circle-xmark').click(function(){
diff --git a/nodejs/views/hosts.ejs b/nodejs/views/hosts.ejs
index 08824ba..a6e6387 100755
--- a/nodejs/views/hosts.ejs
+++ b/nodejs/views/hosts.ejs
@@ -1,318 +1,364 @@
 <%- include('top') %>
-<script type="text/javascript">
-	// Require login to see this page.
-	app.auth.forceLogin()
-</script>
+	<script type="text/javascript">
+		// Require login to see this page.
+		app.auth.forceLogin()
+	</script>
 
-<style type="text/css">
-	label.control-label{
-		font-weight: bold;
-		margin-bottom: 1px;
-	}
+	<style type="text/css">
+		label.control-label {
+			font-weight: bold;
+			margin-bottom: 1px;
+		}
 
-	.card-title{
-		font-weight: bold;
-	}
+		.card-title {
+			font-weight: bold;
+		}
 
-	div.editWindow{
-		margin-bottom: 1em;
-	}
+		div.editWindow {
+			margin-bottom: 1em;
+		}
+		/* my Div class for my search bar */
+		.search-wrapper {
+			display: flex;
+			gap: .5rem;
+			align-items: center;
+			margin-top: 10px;
+		}
+		/* The input bar  */
+		input {
+			font-size: 1rem;
+			border-top-left-radius: 5px !important;
+			border-bottom-left-radius: 5px !important;
+			border-top-right-radius: 5px !important;
+			
+		}
+	</style>
 
-</style>
+	<script type="text/javascript">
 
-<script type="text/javascript">
+		function parseHostRow(host) {
+			host['updated_on_text'] = moment(host['updated_on'], "x").fromNow();
+			host['targetssl_text'] = host['targetssl'] ? 'https://' : 'http://';
+			host['forcessl_text'] = host['forcessl'] ? 'https://' : 'http://';
 
-	function parseHostRow(host) {
-		host['updated_on_text'] = moment(host['updated_on'], "x").fromNow();
-		host['targetssl_text'] = host['targetssl'] ? 'https://' : 'http://';
-		host['forcessl_text'] = host['forcessl'] ? 'https://' : 'http://';
+			return host;
+		}
 
-		return host;
-	}
+		function populateHosts() {
+			app.host.list(function (error, res) {
+				if (error) return app.util.actionMessage(error, $.scope.hosts.$this, 'danger');
 
-	function populateHosts(){
-		app.host.list(function(error, res){
-			if(error) return app.util.actionMessage(error, $.scope.hosts.$this, 'danger');
+				for (let host of res) {
+					$.scope.hosts.push(parseHostRow(host));
+				}
 
-			for(let host of res){
-				$.scope.hosts.push(parseHostRow(host));
-			}
-
-			$.scope.hosts.__setPut(function($el, item, list){
-				$el.addClass('bg-success');
-				$el.fadeIn(1000, function(){
-					$el.removeClass('bg-success');
+				$.scope.hosts.__setPut(function ($el, item, list) {
+					$el.addClass('bg-success');
+					$el.fadeIn(1000, function () {
+						$el.removeClass('bg-success');
+					});
 				});
 			});
-		});
-	}
+		}
 
-	function cancleHostEdit(){
-		$('#hostsTable').find('tr').each(function(idx, el){
-			console.log('here?')
-			$(el).removeClass('table-warning');
-		});
-		$('.editWindow').slideUp('fast');
-	}
+		function cancleHostEdit() {
+			$('#hostsTable').find('tr').each(function (idx, el) {
+				console.log('here?')
+				$(el).removeClass('table-warning');
+			});
+			$('.editWindow').slideUp('fast');
+		}
 
-	function editHost(btn, host){
-		cancleHostEdit();
-		$(btn).closest('tr').addClass('table-warning');
-		$('.editWindow .card-title').html("Edit "+ host);
+		function editHost(btn, host) {
+			cancleHostEdit();
+			$(btn).closest('tr').addClass('table-warning');
+			$('.editWindow .card-title').html("Edit " + host);
 
-		$('div.editWindow .card-body span').html($('#addHost').html());
-		$('div.editWindow .card-body span button').remove();
+			$('div.editWindow .card-body span').html($('#addHost').html());
+			$('div.editWindow .card-body span button').remove();
 
-		$(".editWindow input[name='edit_host']").val(host);
+			$(".editWindow input[name='edit_host']").val(host);
 
-		$('.editWindow').slideDown('fast');
+			$('.editWindow').slideDown('fast');
 
-		app.host.get(host, function(error, data){
-			$.each( data.results, function( key, value ) {
-				if(typeof value == "boolean"){
-					$(".editWindow #"+ key +"-"+ value).prop('checked', true)
-				}else{
-					$(".editWindow input[name='" + key + "']").val(value);
+			app.host.get(host, function (error, data) {
+				$.each(data.results, function (key, value) {
+					if (typeof value == "boolean") {
+						$(".editWindow #" + key + "-" + value).prop('checked', true)
+					} else {
+						$(".editWindow input[name='" + key + "']").val(value);
+					}
+				});
+			});
+		};
+
+		function deleteHost(host) {
+			app.host.remove({ host: host }, function (err, data) {
+				// app.util.actionMessage(`Host ${host} deleted!`, $.scope.hosts.$this, 'danger');
+				$.scope.hosts.remove(host);
+			});
+		}
+
+		$(document).ready(function () {
+			populateHosts(); //populate the table
+
+			$.scope.hosts.__setTake(function ($el, item, list) {
+				$el.addClass('bg-danger');
+				$el.fadeOut(1000, function () {
+					$el.remove()
+				});
+			});
+
+			//search bar html event logic stolen from here
+			// https://github.com/WebDevSimplified/js-search-bar/blob/main/script.js
+			$('[host-search]').on("input", function() {
+				let inputValue = $(this).val().toLowerCase();
+
+				//on each input detected we need to get all host list that was called by the populateHosts function which is store in 
+				// $.scope.hosts and then we need to loop through each host and check if the host name is equal to the input value
+				// if it is we will display the host if not we will hide it
+				for(let hostObj of $.scope.hosts){
+					if (hostObj.host.toLowerCase().includes(inputValue)) {
+						hostObj.__jq_$el.show();
+					} else {
+						hostObj.__jq_$el.hide();
+
+					}
+				}
+			});
+
+			$('form.addHost').on('submit', function () {
+				event.preventDefault();
+
+				$form = $(this);
+				var action = $($form.find('button[type="submit"]')[0]).data('type');
+				app.util.actionMessage('', $form);
+
+				if ($form.attr('isValid') === 'true') {
+					var formdata = $form.serializeObject();
+					if (formdata.targetPort) formdata.targetPort = Number(formdata.targetPort);
+					if (formdata.targetssl) formdata.targetssl = formdata.targetssl == 'true' ? true : false;
+					if (formdata.forcessl) formdata.forcessl = formdata.forcessl == 'true' ? true : false;
+
+					app.host[action](formdata, function (error, data) {
+						if (error) {
+							app.util.actionMessage(error + data.message, $form, 'danger');
+							return;
+						}
+
+						if ($.scope.hosts.indexOf(data.__requestedHost) >= 0) {
+							$.scope.hosts.update(data.__requestedHost, parseHostRow(data));
+						} else {
+							$.scope.hosts.splice(0, 0, parseHostRow(data))
+						}
+
+						if (action == 'edit') $('.editWindow').slideUp('fast');
+
+						$form.trigger('reset');
+					})
 				}
 			});
 		});
-	};
-
-	function deleteHost(host){
-		app.host.remove({host: host}, function(err, data){
-			// app.util.actionMessage(`Host ${host} deleted!`, $.scope.hosts.$this, 'danger');
-			$.scope.hosts.remove(host);
-		});
-	}
-
-	$(document).ready(function(){
-		populateHosts(); //populate the table
-
-		$.scope.hosts.__setTake(function($el, item, list){
-			$el.addClass('bg-danger');
-			$el.fadeOut(1000, function(){
-				$el.remove()
-			});
-		});
-
-		$('form.addHost').on('submit', function(){
-			event.preventDefault();
-
-			$form = $(this);
-			var action = $($form.find('button[type="submit"]')[0]).data('type');
-			app.util.actionMessage('', $form);
-
-			if($form.attr('isValid') === 'true'){
-				var formdata = $form.serializeObject();
-				if(formdata.targetPort) formdata.targetPort = Number(formdata.targetPort);
-				if(formdata.targetssl) formdata.targetssl = formdata.targetssl == 'true' ? true : false;
-				if(formdata.forcessl) formdata.forcessl = formdata.forcessl == 'true' ? true : false;
-
-				app.host[action](formdata, function(error, data){
-					if(error){
-						app.util.actionMessage(error + data.message, $form, 'danger');
-						return;
-					}
-					
-					if($.scope.hosts.indexOf(data.__requestedHost) >= 0){
-						$.scope.hosts.update(data.__requestedHost, parseHostRow(data));
-					}else{
-						$.scope.hosts.splice(0,0, parseHostRow(data))
-					}
-
-					if(action == 'edit') $('.editWindow').slideUp('fast');
-
-					$form.trigger('reset');
-				})
-			}
-		});
-	});
-</script>
-<div class="row" style="display:none">
-	<div class="col col-md-12 col-lg-4 col-xl-3 col-xxl-2">
-	<!-- 
+	</script>
+	<div class="row" style="display:none">
+		<div class="col col-md-12 col-lg-4 col-xl-3 col-xxl-2">
+			<!-- 
 		left column 
 	-->
-		<div class="card shadow-lg editWindow" style="display:none">
-			<!--
+			<div class="card shadow-lg editWindow" style="display:none">
+				<!--
 				Edit host card
 			-->
-			<div class="card-header text-center bg-warning">
-				<span class="card-icon float-start">
-					<i class="fa-solid fa-pencil"></i>
-				</span>
-				<span class="card-title">
-				</span>
-				<span class="float-end">
-					<i class="fa-solid fa-circle-minus"></i>
-					<i class="fa-solid fa-circle-xmark" onclick="cancleHostEdit()"></i>
-				</span>
-			</div>
-
-			<div class="card-body">
-				<form class="addHost" onsubmit="$(this).validate()">
-					<span></span>
-					<input type="hidden" name="edit_host" />
-					<button type="submit" data-type="edit" class="btn btn-warning">
+				<div class="card-header text-center bg-warning">
+					<span class="card-icon float-start">
 						<i class="fa-solid fa-pencil"></i>
-						Update
-					</button>
-					<button class="btn btn-secondary" type="reset" onclick="cancleHostEdit()">
-						<i class="fa-solid fa-ban"></i>
-						Cancel
-					</button>
-				</form>
-			</div>
-		</div>
+					</span>
+					<span class="card-title">
+					</span>
+					<span class="float-end">
+						<i class="fa-solid fa-circle-minus"></i>
+						<i class="fa-solid fa-circle-xmark" onclick="cancleHostEdit()"></i>
+					</span>
+				</div>
 
-		<div class="card shadow-lg">
-			<!--
+				<div class="card-body">
+					<form class="addHost" onsubmit="$(this).validate()">
+						<span></span>
+						<input type="hidden" name="edit_host" />
+						<button type="submit" data-type="edit" class="btn btn-warning">
+							<i class="fa-solid fa-pencil"></i>
+							Update
+						</button>
+						<button class="btn btn-secondary" type="reset" onclick="cancleHostEdit()">
+							<i class="fa-solid fa-ban"></i>
+							Cancel
+						</button>
+					</form>
+				</div>
+			</div>
+
+			<div class="card shadow-lg">
+				<!--
 				Add new host card
 			-->
-			<div class="card-header text-center">
-				<span class="card-icon float-start">
-					<i class="fa-solid fa-plus"></i>
-				</span>
-				<span class="card-title">
-					New Entry
-				</span>
-				<span class="float-end">
-					<i class="fa-solid fa-circle-minus"></i>
-				</span>
-			</div>
-
-			<div class="card-header actionMessage" style="display:none"></div>
-
-			<div class="card-body">
-				<form class="addHost" id="addHost" onsubmit="$(this).validate()">
-					
-					<div class="form-group">
-						<label class="control-label">Incoming SSL</label>
-						<div class="radio">
-							<label>
-								<input type="radio" name="forcessl" id="forcessl-true" value="true" checked>
-								Force incoming connections over HTTPS <b>Recommended</b>
-							</label>
-						</div>
-						<div class="radio">
-							<label>
-								<input type="radio" name="forcessl" id="forcessl-false" value="false">
-								Allow use of both HTTP and HTTPS
-							</label>
-						</div>
-					</div>
-
-					<div class="form-group">
-						<label class="control-label">Incoming Host Name</label>
-						<input type="text" name="host" class="form-control" placeholder="ex: proxy.cloud-ops.net" validate=":3" >
-					</div>
-
-					<div class="form-group">
-						<label class="control-label">Target IP or Host Name</label>
-						<input type="text" name="ip" class="form-control" placeholder="ex: 10.10.10.10" validate=":3" />
-					</div>
-
-					<div class="form-group">
-						<label class="control-label">Target TCP Port</label>
-						<input type="number"  name="targetPort" class="form-control" value="80" min="0" max="65535" />
-					</div>
-
-					<div class="form-group">
-						<label class="control-label">Target SSL</label>
-						<div class="radio">
-							<label>
-								<input type="radio" name="targetssl" id="targetssl-true" value="true">
-								Proxy to HTTPS 
-							</label>
-						</div>
-						<div class="radio">
-							<label>
-								<input type="radio" name="targetssl" id="targetssl-false" value="false" checked>
-								Proxy to HTTP <b>Recommended</b>
-							</label>
-						</div>
-					</div>
-					<hr />
-					<button type="submit" data-type="add" class="btn btn-success">
+				<div class="card-header text-center">
+					<span class="card-icon float-start">
 						<i class="fa-solid fa-plus"></i>
-						Add
-					</button>
-				</form>
+					</span>
+					<span class="card-title">
+						New Entry
+					</span>
+					<span class="float-end">
+						<i class="fa-solid fa-circle-minus"></i>
+					</span>
+				</div>
+
+				<div class="card-header actionMessage" style="display:none"></div>
+
+				<div class="card-body">
+					<form class="addHost" id="addHost" onsubmit="$(this).validate()">
+
+						<div class="form-group">
+							<label class="control-label">Incoming SSL</label>
+							<div class="radio">
+								<label>
+									<input type="radio" name="forcessl" id="forcessl-true" value="true" checked>
+									Force incoming connections over HTTPS <b>Recommended</b>
+								</label>
+							</div>
+							<div class="radio">
+								<label>
+									<input type="radio" name="forcessl" id="forcessl-false" value="false">
+									Allow use of both HTTP and HTTPS
+								</label>
+							</div>
+						</div>
+
+						<div class="form-group">
+							<label class="control-label">Incoming Host Name</label>
+							<input type="text" name="host" class="form-control" placeholder="ex: proxy.cloud-ops.net"
+								validate=":3">
+						</div>
+
+						<div class="form-group">
+							<label class="control-label">Target IP or Host Name</label>
+							<input type="text" name="ip" class="form-control" placeholder="ex: 10.10.10.10"
+								validate=":3" />
+						</div>
+
+						<div class="form-group">
+							<label class="control-label">Target TCP Port</label>
+							<input type="number" name="targetPort" class="form-control" value="80" min="0"
+								max="65535" />
+						</div>
+
+						<div class="form-group">
+							<label class="control-label">Target SSL</label>
+							<div class="radio">
+								<label>
+									<input type="radio" name="targetssl" id="targetssl-true" value="true">
+									Proxy to HTTPS
+								</label>
+							</div>
+							<div class="radio">
+								<label>
+									<input type="radio" name="targetssl" id="targetssl-false" value="false" checked>
+									Proxy to HTTP <b>Recommended</b>
+								</label>
+							</div>
+						</div>
+						<hr />
+						<button type="submit" data-type="add" class="btn btn-success">
+							<i class="fa-solid fa-plus"></i>
+							Add
+						</button>
+					</form>
+				</div>
 			</div>
 		</div>
-	</div>
 
-	<div class="col col-md-12 col-lg-8 col-xl-9 col-xxl-10">
-		<!--
+		<div class="col col-md-12 col-lg-8 col-xl-9 col-xxl-10">
+			<!--
 			Right column
 		-->
-		<div class="card shadow-lg">
-			<!--
+			<div class="card shadow-lg">
+				<!--
 				List current hosts
 			-->
-			<div class="card-header text-center">
-				<span class="card-icon float-start">
-					<i class="fa-solid fa-network-wired"></i>
-				</span>
-				<span class="card-title">
-					Proxy List
-				</span>
-				<span class="float-end">
-					<i class="fa-solid fa-circle-minus"></i>
-				</span>
-			</div>
+				<div class="card-header text-center">
+					<span class="card-icon float-start">
+						<i class="fa-solid fa-network-wired"></i>
+					</span>
+					<span class="card-title">
+						Proxy List
+					</span>
+					<span class="float-end">
+						<i class="fa-solid fa-circle-minus"></i>
+					</span>
+				</div>
+				<!-- <div class="form-group">
+					<label class="control-label">Target TCP Port</label>
+					<input type="number" name="targetPort" class="form-control" value="80" min="0"
+						max="65535" />
+				</div> -->
+				
+				<div class="card-header actionMessage" style="display:none"></div>
+				<div class="card-header search-wrapper">
+					<label class="control-label" for="search" style="margin-left: -5px;">Search Hosts: </label>
+					<input type="search" id="search" host-search>
+				</div>
 
-			<div class="card-header actionMessage" style="display:none"></div>
+				<table class="card-body table table-striped" style="margin-bottom:0">
 
-			<table class="card-body table table-striped" style="margin-bottom:0">
-	
-				<thead>
-					<th>
-						Host Name
-					</th>
-					<th>
-						target
-					</th>
-					<th class="hidden-xs">
-						Updated
-					</th>
-					<th>
-						Actions
-					</th>
-				</thead>
-				<tbody id="hostsTable">
-					<tr action="api" jq-repeat="hosts" jq-repeat-index='host' style="display:none">
-						<td>
-							<a target="_blank" href="{{ forcessl_text }}{{ host }}">
-								{{{ forcessl_text }}}{{ host }}
-							</a>
-						</td>
-						<td>
-							{{{ targetssl_text }}}{{ ip }}:{{ targetPort }}
-						</td>
-						<td class="hidden-xs momentFromNow" data-date="{{ updated_on }}">
-							{{ updated_on_text }}
-						</td>
-						<td>
-							<div class="btn-group">
-<!-- 								<button type="button" class="btn btn-info">
+					<thead>
+						<th>
+							Host Name
+						</th>
+						<th>
+							target
+						</th>
+						<th class="hidden-xs">
+							Updated
+						</th>
+						<th>
+							Actions
+						</th>
+					</thead>
+					<tbody id="hostsTable">
+						<tr action="api" jq-repeat="hosts" jq-repeat-index='host' style="display:none">
+							<td>
+								<a target="_blank" href="{{ forcessl_text }}{{ host }}">
+									{{{ forcessl_text }}}{{ host }}
+								</a>
+							</td>
+							<td>
+								{{{ targetssl_text }}}{{ ip }}:{{ targetPort }}
+							</td>
+							<td class="hidden-xs momentFromNow" data-date="{{ updated_on }}">
+								{{ updated_on_text }}
+							</td>
+							<td>
+								<div class="btn-group">
+									<!-- 								<button type="button" class="btn btn-info">
 									<i class="fa-brands fa-expeditedssl"></i>
 									Cert
 								</button> -->
-								<button type="button" onclick="editHost(this, '{{ host }}');" class="btn btn-sm btn-warning">
-									<i class="fa-solid fa-pencil"></i> Edit
-								</button>
-								<button type="button" onclick="deleteHost('{{ host }}')" class="btn btn-sm btn-danger">
-									<i class="fa-solid fa-trash-can"></i>
-									Delete
-								</button>
-							</div>
-						</td>
-					</tr>
-				</tbody>
-			</table>
+									<button type="button" onclick="editHost(this, '{{ host }}');"
+										class="btn btn-sm btn-warning">
+										<i class="fa-solid fa-pencil"></i> Edit
+									</button>
+									<button type="button" onclick="deleteHost('{{ host }}')"
+										class="btn btn-sm btn-danger">
+										<i class="fa-solid fa-trash-can"></i>
+										Delete
+									</button>
+								</div>
+							</td>
+						</tr>
+					</tbody>
+				</table>
 
+			</div>
 		</div>
 	</div>
-</div>
-<%- include('bottom') %>
+	<%- include('bottom') %>
\ No newline at end of file