diff --git a/src/components/Search.astro b/src/components/Search.astro
index 2c3b8cf..8181784 100644
--- a/src/components/Search.astro
+++ b/src/components/Search.astro
@@ -1,18 +1,94 @@
 ---
-import { Search } from '@iconoir/vue'
-import { t } from 'i18next'
+import { Search } from "@iconoir/vue";
+import { t } from "i18next";
 ---
 
 <div class="search-bar">
-    <input type="search" placeholder={t("HEADER.SEARCH")} aria-label="Search for a video"/>
-    <button onclick="Search()"><Search/></button>
+    <input
+        type="search"
+        placeholder={t("HEADER.SEARCH")}
+        aria-label="Search for a video or stream"
+    />
+    <button onclick="Search()"><Search /></button>
+    <div class="suggestions"></div>
 </div>
 
+<!-- Search Scripts -->
 <script is:inline>
-function Search() {
-    var SearchQuery = document.querySelector('input[type="search"]').value
-    location.href = `/search?q=${SearchQuery}`
-}
+    /*    
+@licstart  The following is the entire license notice for the 
+JavaScript code in this page.
+
+Copyright (C) 2024 SudoVanilla
+
+The JavaScript code in this page is free software: you can
+redistribute it and/or modify it under the terms of the GNU
+General Public License (GNU GPL) as published by the Free Software
+Foundation, either version 3 of the License, or (at your option)
+any later version.  The code is distributed WITHOUT ANY WARRANTY;
+without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
+
+As additional permission under GNU GPL version 3 section 7, you
+may distribute non-source (e.g., minimized or compacted) forms of
+that code without the copy of the GNU GPL normally required by
+section 4, provided you include this license notice and a URL
+through which recipients can access the Corresponding Source.   
+
+
+@licend  The above is the entire license notice
+for the JavaScript code in this page.
+*/
+
+    // Focus input
+    function FocusSearch() {
+        document.querySelector('input[type="search"]').focus();
+    }
+
+    // Trigger Search
+    function Search() {
+        var SearchQuery = document.querySelector('input[type="search"]').value;
+        location.href = `/search?q=${SearchQuery}`;
+    }
+
+    ///// Suggestions /////
+    // Dismiss when the end-user clicks else where
+    document.body.addEventListener("click", function (evt) {
+        document.querySelector(".suggestions").style.opacity = "0";
+    });
+
+    // When the end-user starts typing, trigget the fetch function
+    document
+        .querySelector('input[type="search"]')
+        .addEventListener("input", function (e) {
+            if (e.target.value !== "") {
+                document.querySelector(".suggestions").style.opacity = "1";
+                GetResults();
+            } else {
+                null;
+            }
+        });
+
+    // Fetch
+    function GetResults() {
+        var SearchValue = document.querySelector('input[type="search"]').value;
+        var YouTubeSuggestions = document.querySelector(".suggestions");
+        fetch(
+            `https://yt.sudovanilla.org/api/v1/search/suggestions?q=${SearchValue}`,
+        )
+            .then((response) => response.json())
+            .then((data) => {
+                YouTubeSuggestions.innerHTML = ListOfSuggestionsYT(data);
+            });
+    }
+
+    // Create List
+    function ListOfSuggestionsYT(data) {
+        const text = data.suggestions
+            .map((data) => `<a href="/search?query=${data}">${data}</a>`)
+            .join("\n");
+        return `${text}`;
+    }
 </script>
 
 <style lang="scss">
@@ -38,7 +114,7 @@ function Search() {
     display: none;
     border-radius: 1rem;
     aspect-ratio: 1;
-    background: rgba(255,255,255,0.1);
+    background: rgba(255, 255, 255, 0.1);
     color: white;
     margin: 8px 0px 0px -31px;
     height: 24px;
@@ -51,4 +127,17 @@ function Search() {
 .search-bar[data-astro-cid-otpdt6jm] {
     display: flex;
 }
-</style>
\ No newline at end of file
+.suggestions {
+    position: absolute;
+    top: 60px;
+    background: #131313e8;
+    width: 100%;
+    border-radius: 6px;
+    backdrop-filter: blur(20px);
+    border: 1px #282828 solid;
+    a:hover {
+        background: #0d0d0d !important;
+        border-radius: 6px;
+    }
+}
+</style>