diff --git a/404.html b/404.html
index 0ed61cab..811a4a0a 100644
--- a/404.html
+++ b/404.html
@@ -645,6 +645,84 @@ <h1 id="my-heading" style="margin-bottom: -10px">
                 }
             }
         });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                }
+                else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                }
+                else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                }
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                        if (results[selectedIndex]) {
+                            results[selectedIndex].click();
+                        }
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    }
+                    else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', function() {
+                clearSelection();
+                selectedIndex = -1;
+            });
+        });
     </script>
 
     <footer style="margin-top: 400px">
diff --git a/MovieVerse-Frontend/css/style.css b/MovieVerse-Frontend/css/style.css
index 1bd2ba96..68e94ce4 100644
--- a/MovieVerse-Frontend/css/style.css
+++ b/MovieVerse-Frontend/css/style.css
@@ -489,7 +489,6 @@ header h1 {
     transition: opacity 0.3s ease-in, visibility 0.3s ease-in, transform 0.3s ease-in;
     overflow-y: auto;
     visibility: hidden;
-    align-content: center;
     text-align: center;
 }
 
diff --git a/MovieVerse-Frontend/html/company-details.html b/MovieVerse-Frontend/html/company-details.html
index f14ab821..a08feea0 100644
--- a/MovieVerse-Frontend/html/company-details.html
+++ b/MovieVerse-Frontend/html/company-details.html
@@ -50,7 +50,7 @@
                 margin-top: 0;
             }
 
-            #form {
+            #form1 {
                 margin-right: 19px;
             }
         }
@@ -87,7 +87,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
-        <form id="form">
+        <form id="form1">
             <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!"/>
             <button type="button" id="button-search" onclick="handleSearch()">Search</button>
         </form>
diff --git a/MovieVerse-Frontend/html/search.html b/MovieVerse-Frontend/html/search.html
index 281bf4d1..1fa839f5 100644
--- a/MovieVerse-Frontend/html/search.html
+++ b/MovieVerse-Frontend/html/search.html
@@ -95,8 +95,15 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!"/>
-            <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." style="width: 250px; margin-right: 5px" class="search" title="Search for movies, actors, TV series, and more!" />
+                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+            </div>
+            <div id="search-results" class="search-results"></div>
+            <div class="buttons-container">
+                <button type="button" id="view-all-results" style="display: none;">View more results</button>
+                <button type="button" id="clear-search" style="display: none">Clear</button>
+            </div>
         </form>
     </header>
 
@@ -209,6 +216,270 @@ <h2 id="search-results-label">Search Results</h2>
         });
     </script>
 
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchBar = document.getElementById('search');
+            const searchButton = document.getElementById('button-search');
+            const myHeading = document.getElementById('my-heading');
+            const localTime = document.getElementById('local-time');
+
+            function toggleVisibility() {
+                const query = searchBar.value.trim();
+                if (query) {
+                    if (window.innerWidth > 800) {
+                        myHeading.style.position = 'fixed';
+                        myHeading.style.top = '28px';
+                        localTime.style.display = 'none';
+                        myHeading.style.zIndex = '0.05';
+                        searchBar.style.marginTop = '16px';
+                        searchButton.style.marginTop = '16px';
+                    }
+                } else {
+                    myHeading.style.position = '';
+                    myHeading.style.top = '';
+                    myHeading.style.zIndex = '';
+                    localTime.style.display = '';
+                    searchBar.style.marginTop = '';
+                    searchButton.style.marginTop = '';
+                }
+            }
+
+            searchBar.addEventListener('input', toggleVisibility);
+            toggleVisibility();
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+
+            function toggleButtons() {
+                const query = searchInput.value.trim();
+                viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+            }
+
+            clearSearchBtn.addEventListener('click', function() {
+                searchInput.value = '';
+                searchResultsContainer.innerHTML = '';
+                toggleButtons();
+                searchInput.focus();
+            });
+
+            toggleButtons();
+            searchInput.addEventListener('input', toggleButtons);
+        });
+    </script>
+
+    <script>
+        function showSpinner() {
+            document.getElementById('myModal').classList.add('modal-visible');
+        }
+
+        function hideSpinner() {
+            document.getElementById('myModal').classList.remove('modal-visible');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('search').addEventListener('input', function(e) {
+                showSpinner();
+                const viewAllResultsBtn = document.getElementById('view-all-results');
+                const searchInput = document.getElementById('search');
+                const query = e.target.value.trim();
+
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+
+                function toggleButtons() {
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    const clearSearchBtn = document.getElementById('clear-search');
+                    clearSearchBtn.style.display = query ? 'inline-block' : 'none';
+                }
+
+                if (query) {
+                    const searchURL = `https://${getMovieVerseData()}/3/search/multi?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(query)}`;
+                    fetch(searchURL)
+                        .then(response => response.json())
+                        .then(data => {
+                            const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
+                            displaySearchResults(sortedResults.slice(0, 5));
+                        })
+                        .catch(err => console.error("Fetching error:", err));
+                } else {
+                    searchInput.value = '';
+                    searchResultsContainer.innerHTML = '';
+                    toggleButtons();
+                    searchInput.focus();
+                }
+
+                searchInput.addEventListener('input', function() {
+                    if (searchInput.value.trim()) {
+                        viewAllResultsBtn.style.display = 'block';
+                    } else {
+                        viewAllResultsBtn.style.display = 'none';
+                    }
+                });
+
+                viewAllResultsBtn.addEventListener('click', function() {
+                    const searchQuery = searchInput.value.trim();
+                    if (searchQuery) {
+                        localStorage.setItem('searchQuery', searchQuery);
+                        window.location.href = 'search.html';
+                    } else {
+                        alert('Please enter a search query.');
+                    }
+                });
+
+                hideSpinner();
+            });
+
+            function displaySearchResults(results) {
+                showSpinner();
+                const resultsContainer = document.getElementById('search-results');
+                resultsContainer.innerHTML = '';
+
+                results.forEach(item => {
+                    const card = document.createElement('div');
+                    card.className = 'search-result-card';
+                    card.style.cursor = 'pointer';
+
+                    const imagePath = item.poster_path || item.profile_path ? `https://image.tmdb.org/t/p/w500${item.poster_path || item.profile_path}` : null;
+
+                    if (imagePath) {
+                        const image = document.createElement('img');
+                        image.src = imagePath;
+                        image.className = 'result-image';
+                        card.appendChild(image);
+                    } else {
+                        const placeholder = document.createElement('div');
+                        placeholder.className = 'result-image-placeholder';
+                        placeholder.textContent = 'Image Not Available';
+                        placeholder.style.textAlign = 'center';
+                        placeholder.style.padding = '10px';
+                        card.appendChild(placeholder);
+                    }
+
+                    const details = document.createElement('div');
+                    details.className = 'result-details';
+
+                    const name = document.createElement('div');
+                    name.className = 'result-name';
+                    name.textContent = item.title || item.name;
+                    details.appendChild(name);
+
+                    const type = document.createElement('div');
+                    type.className = 'result-type';
+                    type.textContent = item.media_type === 'movie' ? 'Movie' : item.media_type === 'tv' ? 'TV Series' : 'Person';
+                    details.appendChild(type);
+
+                    card.appendChild(details);
+                    resultsContainer.appendChild(card);
+
+                    card.addEventListener('click', () => handleResultClick(item));
+                });
+
+                hideSpinner();
+            }
+
+            async function handleResultClick(item) {
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'movie-details.html';
+                } else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'tv-details.html';
+                } else if (item.media_type === 'person') {
+                    try {
+                        const personDetailsUrl = `https://${getMovieVerseData()}/3/person/${item.id}?${generateMovieNames()}${getMovieCode()}`;
+                        const response = await fetch(personDetailsUrl);
+                        const personDetails = await response.json();
+
+                        if (personDetails.known_for_department === 'Directing') {
+                            localStorage.setItem('selectedDirectorId', item.id);
+                            window.location.href = 'director-details.html?' + item.id;
+                        } else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'actor-details.html?' + item.id;
+                        }
+                    } catch (error) {
+                        console.error('Error fetching person details:', error);
+                    }
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchInput = document.getElementById('search');
+            const viewAllResultsBtn = document.getElementById('view-all-results');
+            const clearSearchBtn = document.getElementById('clear-search');
+            const searchResultsContainer = document.getElementById('search-results');
+            let selectedIndex = -1;
+
+            function clearSelection() {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '';
+                } else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '';
+                } else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '';
+                }
+            }
+
+            function moveSelection(direction) {
+                const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                const totalElements = results.length + 2;
+                clearSelection();
+
+                if (direction === 'down') {
+                    selectedIndex = (selectedIndex + 1) % totalElements;
+                } else if (direction === 'up') {
+                    selectedIndex = (selectedIndex - 1 + totalElements) % totalElements;
+                }
+
+                if (selectedIndex < results.length) {
+                    results[selectedIndex].style.backgroundColor = '#ff8623';
+                    results[selectedIndex].scrollIntoView({ block: "nearest" });
+                } else if (selectedIndex === results.length) {
+                    viewAllResultsBtn.style.backgroundColor = '#ff8623';
+                    viewAllResultsBtn.scrollIntoView({ block: "nearest" });
+                } else if (selectedIndex === results.length + 1) {
+                    clearSearchBtn.style.backgroundColor = '#ff8623';
+                    clearSearchBtn.scrollIntoView({ block: "nearest" });
+                }
+            }
+
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('down');
+                } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                    e.preventDefault();
+                    moveSelection('up');
+                } else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (selectedIndex < searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        const results = searchResultsContainer.getElementsByClassName('search-result-card');
+                        if (results[selectedIndex]) {
+                            results[selectedIndex].click();
+                        }
+                    } else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length) {
+                        viewAllResultsBtn.click();
+                    } else if (selectedIndex === searchResultsContainer.getElementsByClassName('search-result-card').length + 1) {
+                        clearSearchBtn.click();
+                    }
+                }
+            });
+
+            searchInput.addEventListener('blur', function() {
+                clearSelection();
+                selectedIndex = -1;
+            });
+        });
+    </script>
+
     <footer>
         <a href="../../index.html" style="cursor: pointer; text-decoration: none">
             <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
diff --git a/MovieVerse-Frontend/js/actor-details.js b/MovieVerse-Frontend/js/actor-details.js
index 80705f4f..115a932e 100644
--- a/MovieVerse-Frontend/js/actor-details.js
+++ b/MovieVerse-Frontend/js/actor-details.js
@@ -96,7 +96,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     else {
         document.getElementById('actor-details-container').innerHTML = `
-            <div style="display: flex; justify-content: center; align-items: center; text-align: center; width: 100vw;">
+            <div style="display: flex; justify-content: center; align-items: center; text-align: center; width: 100vw; height: 800px">
                 <h2>Actor details not found.</h2>
             </div>`;
     }
@@ -148,6 +148,7 @@ function populateActorDetails(actor, credits) {
         const noImageText = document.createElement('h2');
         noImageText.textContent = 'Image Not Available';
         noImageText.style.textAlign = 'center';
+        noImageText.style.height = '800px';
         document.querySelector('.actor-left').appendChild(noImageText);
     }
 
diff --git a/MovieVerse-Frontend/js/company-details.js b/MovieVerse-Frontend/js/company-details.js
index a8ff4ddf..d10b6363 100644
--- a/MovieVerse-Frontend/js/company-details.js
+++ b/MovieVerse-Frontend/js/company-details.js
@@ -23,7 +23,7 @@ function generateMovieNames(input) {
     return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
 }
 
-const form = document.getElementById("form");
+const form = document.getElementById("form1");
 const SEARCHPATH = `https://${getMovieVerseData()}/3/search/movie?&${generateMovieNames()}${getMovieCode()}&query=`;
 const main = document.getElementById("main");
 const IMGPATH = "https://image.tmdb.org/t/p/w1280";
@@ -327,7 +327,7 @@ document.addEventListener('DOMContentLoaded', () => {
     else {
         const companyDetailsContainer = document.getElementById('company-details-container');
         companyDetailsContainer.innerHTML = `
-            <div style="display: flex; justify-content: center; align-items: center; text-align: center; width: 100vw;">
+            <div style="display: flex; justify-content: center; align-items: center; text-align: center; width: 100vw; height: 800px">
                 <h2>Company details not found.</h2>
             </div>`;
     }
diff --git a/MovieVerse-Frontend/js/director-details.js b/MovieVerse-Frontend/js/director-details.js
index 7b472947..13393605 100644
--- a/MovieVerse-Frontend/js/director-details.js
+++ b/MovieVerse-Frontend/js/director-details.js
@@ -92,7 +92,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     else {
         document.getElementById('director-details-container').innerHTML = `
-            <div style="display: flex; justify-content: center; align-items: center; text-align: center; margin-top: 40px; width: 100vw;">
+            <div style="display: flex; justify-content: center; align-items: center; text-align: center; margin-top: 40px; width: 100vw; height: 800px">
                 <h2>Director details not found.</h2>
             </div>`;
     }
@@ -143,6 +143,7 @@ function populateDirectorDetails(director, credits) {
         const noImageText = document.createElement('h2');
         noImageText.textContent = 'Image Not Available';
         noImageText.style.textAlign = 'center';
+        noImageText.style.height = '800px';
         document.querySelector('.director-left').appendChild(noImageText);
     }
 
diff --git a/MovieVerse-Frontend/js/movie-details.js b/MovieVerse-Frontend/js/movie-details.js
index ce9195ad..0cfbf4c6 100644
--- a/MovieVerse-Frontend/js/movie-details.js
+++ b/MovieVerse-Frontend/js/movie-details.js
@@ -392,7 +392,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     else {
         document.getElementById('movie-details-container').innerHTML = `
-            <div style="display: flex; justify-content: center; align-items: center; text-align: center; margin-top: 40px; width: 100vw;">
+            <div style="display: flex; justify-content: center; align-items: center; text-align: center; margin-top: 40px; width: 100vw; height: 800px">
                 <h2>Movie details not found.</h2>
             </div>`;
     }
@@ -1001,6 +1001,7 @@ function populateMovieDetails(movie, imdbRating, rtRating, metascore, awards, ra
         const noImageText = document.createElement('h2');
         noImageText.textContent = 'Movie Image Not Available';
         noImageText.style.textAlign = 'center';
+        noImageText.style.height = '800px';
         document.querySelector('.movie-left').appendChild(noImageText);
     }
 
diff --git a/MovieVerse-Frontend/js/search.js b/MovieVerse-Frontend/js/search.js
index 1cc8efbd..2ea8e1ff 100644
--- a/MovieVerse-Frontend/js/search.js
+++ b/MovieVerse-Frontend/js/search.js
@@ -214,12 +214,6 @@ function attachArrowKeyNavigation() {
             case 'ArrowLeft':
                 currentIndex = (currentIndex - 1 + categories.length) % categories.length;
                 break;
-            case 'ArrowUp':
-                currentIndex = (currentIndex + 1) % categories.length;
-                break;
-            case 'ArrowDown':
-                currentIndex = (currentIndex - 1 + categories.length) % categories.length;
-                break;
             default:
                 return;
         }
@@ -332,6 +326,7 @@ function displayResults(results, category, searchTerm) {
 
     if (results.length === 0) {
         container.innerHTML = `<p>No results found for "${searchTerm}" in the ${capitalizedCategory} category. Please try again with a different query or look for it in another category.</p>`;
+        container.style.height = '800px';
         return;
     }
 
diff --git a/index.html b/index.html
index aa774b92..11fd792e 100644
--- a/index.html
+++ b/index.html
@@ -820,11 +820,11 @@ <h2 id="other" style="margin-top: 50px; cursor: pointer">Timeless Classics: Tren
             }
 
             searchInput.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+                if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey) || e.key === 'ArrowRight') {
                     e.preventDefault();
                     moveSelection('down');
                 }
-                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+                else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey) || e.key === 'ArrowLeft') {
                     e.preventDefault();
                     moveSelection('up');
                 }