diff --git a/ServerManagement/Components/Controls/SearchBarComponent.razor b/ServerManagement/Components/Controls/SearchBarComponent.razor
new file mode 100644
index 0000000..eb90dcb
--- /dev/null
+++ b/ServerManagement/Components/Controls/SearchBarComponent.razor
@@ -0,0 +1,25 @@
+<div class="input-group mb-3">
+  <input type="text" class="form-control" placeholder="Search servers"
+    @bind-value="serverFilter"
+    @bind-value:event="oninput" />
+  <button class="btn btn-outline-secondary" type="button" id="button-search" @onclick="HandleSearch">Search</button>
+</div>
+
+@code {
+  private string _serverFilter = "";
+  private string serverFilter {
+    get => _serverFilter;
+    set
+    {
+      _serverFilter = value;
+    }
+  }
+
+  [Parameter]
+  public EventCallback<string> FilterSearchTerm { get; set; }
+
+  private void HandleSearch()
+  {
+    FilterSearchTerm.InvokeAsync(serverFilter);
+  }
+}
\ No newline at end of file
diff --git a/ServerManagement/Components/Controls/ServerListComponent.razor b/ServerManagement/Components/Controls/ServerListComponent.razor
index 7b4dd36..ddb3dfc 100644
--- a/ServerManagement/Components/Controls/ServerListComponent.razor
+++ b/ServerManagement/Components/Controls/ServerListComponent.razor
@@ -8,12 +8,22 @@
 }
 
 @code {
+  private List<Server>? servers;
+
   [Parameter]
   public string? CityName { get; set; }
-  private List<Server>? servers;
+  [Parameter]
+  public string SearchFilter { get; set; } = "";
 
   protected override void OnParametersSet()
   {
-    servers = ServersRepository.GetServersByCity(CityName ?? "Eindhoven");
+    if (string.IsNullOrWhiteSpace(this.SearchFilter))
+    {
+      servers = ServersRepository.GetServersByCity(CityName ?? "Eindhoven");
+    }
+    else
+    {
+      servers = ServersRepository.SearchServers(SearchFilter);
+    }
   }
 }
\ No newline at end of file
diff --git a/ServerManagement/Components/Pages/Servers.razor b/ServerManagement/Components/Pages/Servers.razor
index cd338d6..4da62b9 100644
--- a/ServerManagement/Components/Pages/Servers.razor
+++ b/ServerManagement/Components/Pages/Servers.razor
@@ -6,39 +6,30 @@
 <br/>
 <CityListComponent SelectCityCallBack="HandleCitySelection"></CityListComponent>
 <br/>
-<div class="input-group mb-3">
-  <input type="text" class="form-control" placeholder="Search servers"
-    @bind-value="serverFilter"
-    @bind-value:event="oninput" />
-  <button class="btn btn-outline-secondary" type="button" id="button-search" @onclick="HandleSearch">Search</button>
-</div>
+<SearchBarComponent FilterSearchTerm="HandleSearch"></SearchBarComponent>
 <br/>
 <a href="@($"/servers/add")" class="btn btn-primary">Add</a>
 <br/>
 
-<ServerListComponent CityName="@this.selectedCity"></ServerListComponent>
+<ServerListComponent
+  CityName="@this.selectedCity"
+  SearchFilter="@this.searchFilter">
+
+</ServerListComponent>
 
 @code {
   private string selectedCity = "Eindhoven";
-  private string _serverFilter = "";
-  private string serverFilter {
-    get => _serverFilter;
-    set
-    {
-      _serverFilter = value;
-      //this.servers = ServersRepository.SearchServers(_serverFilter);
-      //this.selectedCity = string.Empty;
-    }
-  }
+  private string searchFilter = "";
 
   private void HandleCitySelection(string cityName)
   {
+    this.searchFilter = string.Empty;
     this.selectedCity = cityName;
   }
 
-  private void HandleSearch()
+  private void HandleSearch(string searchFilter)
   {
-    //this.servers = ServersRepository.SearchServers(serverFilter);
-    // this.selectedCity = string.Empty;
+    this.selectedCity = string.Empty;
+    this.searchFilter = searchFilter;
   }
 }
\ No newline at end of file