diff --git a/src/Pages/SourcePage.razor b/src/Pages/SourcePage.razor
index b3b195b..4a7434a 100644
--- a/src/Pages/SourcePage.razor
+++ b/src/Pages/SourcePage.razor
@@ -94,8 +94,6 @@
     private string LoadingMessage
         => $"Loading {SourceId.GetNameFromId()} content";
 
-    private string SortType { get; set; }
-
     private Book _book;
     private Page _currentPage;
 
diff --git a/src/Pages/SourcesPage.razor b/src/Pages/SourcesPage.razor
index 743c4e0..ac09170 100644
--- a/src/Pages/SourcesPage.razor
+++ b/src/Pages/SourcesPage.razor
@@ -2,6 +2,7 @@
 @using Grimoire.Handlers
 @using Grimoire.Sources.Interfaces
 
+@inject IJSRuntime JSRuntime
 @inject DatabaseHandler DatabaseHandler
 @inject NavigationManager NavigationManager
 
@@ -10,14 +11,26 @@
         <Waiting Message="Loading sources"/>
     }
     else {
-        <div class="border rounded-4 shadow">
+        <div class="rounded-4">
+            <div class="container p-4">
+                <Search OnSearchAsync="OnSearchAsync"></Search>
+            </div>
+
             <ul class="list-group list-group-flush">
-                @foreach (var source in _sources) {
-                    <a class="list-group-item list-group-item-action" @onclick="() => NavTo(source.Id)">
-                        <img src="@DatabaseHandler.GetSourceIcon(source.Id)" class="img-thumbnail" alt="@source.Name" width="70">
-                        <span>@source.Name</span>
-                    </a>
-                }
+                <div class="row row-cols-1 g-4">
+                    @foreach (var source in _sources) {
+                        <div class="col rounded">
+                            <a class="list-group-item list-group-item-action shadow" @onclick="() => NavTo(source.Id)">
+                                <img src="@DatabaseHandler.GetSourceIcon(source.Id)" class="img-thumbnail" alt="@source.Name" width="70">
+                                <span>@source.Name</span>
+                            </a>
+                        </div>
+
+                        <div id="@source.Id" class="col visually-hidden">
+
+                        </div>
+                    }
+                </div>
             </ul>
         </div>
     }
@@ -25,6 +38,7 @@
 
 @code {
     private IReadOnlyList<IGrimoireSource> _sources;
+    private bool _isHidden = true;
 
     protected override async Task OnInitializedAsync() {
         _sources = await DatabaseHandler.ListSourcesAsync();
@@ -34,4 +48,13 @@
         NavigationManager.NavigateTo($"/sources/{sourceId}");
     }
 
+    private async Task OnSearchAsync(string arg) {
+        var mangas = await DatabaseHandler.SearchAsync(SearchType.Global, arg);
+        var dict = mangas
+            .GroupBy(x => x.SourceId, y => y)
+            .ToDictionary(x => x.Key, x => x.ToList());
+
+        await JSRuntime.InvokeVoidAsync("displayData", dict);
+    }
+
 }
\ No newline at end of file
diff --git a/src/Pages/_Host.cshtml b/src/Pages/_Host.cshtml
index 11f1582..15f68e5 100644
--- a/src/Pages/_Host.cshtml
+++ b/src/Pages/_Host.cshtml
@@ -39,5 +39,6 @@
 
 <script src="_framework/blazor.server.js"></script>
 <script src="js/bootstrap.min.js"></script>
+<script src="js/site.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/wwwroot/js/site.js b/src/wwwroot/js/site.js
new file mode 100644
index 0000000..ccfa9e5
--- /dev/null
+++ b/src/wwwroot/js/site.js
@@ -0,0 +1,10 @@
+function displayData(dictionary) {
+    console.log(dictionary);
+
+    for (let key in dictionary) {
+        let element = document.getElementById(key)
+        element.classList.remove("visually-hidden")
+        
+        let value = dictionary[key]
+    }
+}
\ No newline at end of file