diff --git a/MovieActorLookup/Components/Pages/SearchMovies.razor b/MovieActorLookup/Components/Pages/SearchMovies.razor
index 6e58e5c..37e2bdf 100644
--- a/MovieActorLookup/Components/Pages/SearchMovies.razor
+++ b/MovieActorLookup/Components/Pages/SearchMovies.razor
@@ -10,7 +10,7 @@
     <div class="search-header">
         <div class="navigation-toggle">
             <a href="/searchshows" class="nav-btn shows-btn">
-                <span class="nav-icon">📺</span>
+                <i class="bi bi-tv"></i>
                 <span class="nav-text">Switch to TV Shows</span>
             </a>
         </div>
@@ -26,7 +26,7 @@
                        @bind="_movieTitle"
                        placeholder="Enter movie title..."
                        @onkeypress="@(async (e) => { if (e.Key == "Enter") await SearchForActorAndCharacters(); })" />
-                <div class="input-icon">🎬</div>
+                <div class="input-icon bi bi-film"></div>
             </div>
             <div class="input-wrapper">
                 <input type="text"
@@ -34,7 +34,7 @@
                        @bind="_characterName"
                        placeholder="Enter character name..."
                        @onkeypress="@(async (e) => { if (e.Key == "Enter") await SearchForActorAndCharacters(); })" />
-                <div class="input-icon">🎭</div>
+                <div class="input-icon bi bi-person-vcard"></div>
             </div>
         </div>
         <button class="search-btn @(_isSearching ? "searching" : "")"
@@ -47,7 +47,7 @@
             }
             else
             {
-                <span>🔍 Search</span>
+                <span class="bi bi-search"> Search</span>
             }
         </button>
     </div>
@@ -74,25 +74,20 @@
             @if (_matchedMovie != null)
             {
                 <div class="matched-movie-section">
-                    <h4 class="section-title">Your Search Match</h4>
-                    <div class="movie-card featured">
-                        <div class="poster-container">
-                            <img class="poster-image"
-                                 src="@($"https://image.tmdb.org/t/p/w500{_matchedMovie.MoviePosterPath}")"
+                    <h4 class="section-title">
+                        <span class="match-indicator"></span>
+                        Your Search Result
+                    </h4>
+                    <div class="search-match-banner">
+                        <div class="match-poster">
+                            <img src="@($"https://image.tmdb.org/t/p/w200{_matchedMovie.MoviePosterPath}")"
                                  alt="@_matchedMovie.MovieTitle Poster"
                                  loading="lazy" />
-                            <div class="match-badge">✨ Match</div>
                         </div>
-                        <div class="card-content">
-                            <h5 class="movie-title">@_matchedMovie.MovieTitle</h5>
-                            <div class="character-name">as @_matchedMovie.CharacterName</div>
-                            @if (!string.IsNullOrEmpty(_matchedMovie.Overview?.Trim()))
-                            {
-                                <p class="movie-overview expanded">
-                                    @_matchedMovie.Overview.Trim()
-                                </p>
-                            }
-                            <div class="release-date">Released: @_matchedMovie.ReleaseDate</div>
+                        <div class="match-info">
+                            <h5 class="match-title">@_matchedMovie.MovieTitle</h5>
+                            <div class="match-character">as @_matchedMovie.CharacterName</div>
+                            <div class="match-date">Released: @_matchedMovie.ReleaseDate</div>
                         </div>
                     </div>
                 </div>
@@ -159,7 +154,7 @@
     else if (!string.IsNullOrEmpty(_movieTitle) || !string.IsNullOrEmpty(_characterName))
     {
         <div class="no-results">
-            <div class="no-results-icon">🔍</div>
+            <div class="no-results-icon bi bi-search"></div>
             <h4>No matches found</h4>
             <p>Try adjusting your search terms or check the spelling</p>
         </div>
@@ -167,7 +162,7 @@
     else
     {
         <div class="welcome-state">
-            <div class="welcome-icon">🎬</div>
+            <div class="welcome-icon bi bi-film"></div>
             <h4>Ready to explore?</h4>
             <p>Enter a movie title and character name to discover an actor's complete film journey</p>
         </div>
@@ -175,14 +170,35 @@
 </div>
 
 <style>
+    body {
+        margin: 0;
+        padding: 0;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+        position: relative;
+    }
+
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.08)"/><circle cx="80" cy="30" r="1.5" fill="rgba(255,255,255,0.06)"/></svg>') repeat;
+            opacity: 0.3;
+            pointer-events: none;
+            animation: float 20s ease-in-out infinite;
+            z-index: -1;
+        }
+
     .search-container {
         max-width: 1200px;
         margin: 0 auto;
         padding: 2rem 1rem;
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        min-height: 100vh;
         position: relative;
+        z-index: 1;
     }
 
         .search-container::before {
@@ -545,7 +561,65 @@
     }
 
     .matched-movie-section {
-        margin-bottom: 3rem;
+        margin-bottom: 2rem;
+    }
+
+    .search-match-banner {
+        background: rgba(255,255,255,0.15);
+        border-radius: 1rem;
+        padding: 1.5rem;
+        display: flex;
+        align-items: center;
+        gap: 1.5rem;
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255,255,255,0.2);
+        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+    }
+
+    .match-poster {
+        flex-shrink: 0;
+    }
+
+        .match-poster img {
+            width: 80px;
+            height: 120px;
+            object-fit: cover;
+            border-radius: 0.5rem;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+        }
+
+    .match-info {
+        flex: 1;
+        color: white;
+    }
+
+    .match-title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        margin: 0 0 0.5rem 0;
+        color: white;
+    }
+
+    .match-character {
+        font-size: 0.95rem;
+        color: rgba(255,255,255,0.8);
+        margin-bottom: 0.25rem;
+    }
+
+    .match-date {
+        font-size: 0.85rem;
+        color: rgba(255,255,255,0.6);
+    }
+
+    .match-indicator {
+        font-family: 'Courier New', monospace;
+        background: rgba(16, 185, 129, 0.8);
+        color: white;
+        padding: 0.25rem 0.75rem;
+        border-radius: 0.5rem;
+        font-size: 0.8rem;
+        font-weight: 600;
+        margin-right: 0.5rem;
     }
 
     .section-title {
diff --git a/MovieActorLookup/Components/Pages/SearchShows.razor b/MovieActorLookup/Components/Pages/SearchShows.razor
index 08d7ea5..344679c 100644
--- a/MovieActorLookup/Components/Pages/SearchShows.razor
+++ b/MovieActorLookup/Components/Pages/SearchShows.razor
@@ -8,7 +8,7 @@
     <div class="search-header">
         <div class="navigation-toggle">
             <a href="/searchmovies" class="nav-btn movies-btn">
-                <span class="nav-icon">🎬</span>
+                <span class="nav-icon bi bi-film"></span>
                 <span class="nav-text">Switch to Movies</span>
             </a>
         </div>
@@ -24,7 +24,7 @@
                        @bind="_tvTitle"
                        placeholder="Enter TV show title..."
                        @onkeypress="@(async (e) => { if (e.Key == "Enter") await SearchForActorAndCharacters(); })" />
-                <div class="input-icon">📺</div>
+                <div class="input-icon bi bi-tv"></div>
             </div>
             <div class="input-wrapper">
                 <input type="text"
@@ -32,7 +32,7 @@
                        @bind="_characterName"
                        placeholder="Enter character name..."
                        @onkeypress="@(async (e) => { if (e.Key == "Enter") await SearchForActorAndCharacters(); })" />
-                <div class="input-icon">🎭</div>
+                <div class="input-icon bi bi-person-vcard"></div>
             </div>
         </div>
         <button class="search-btn @(_isSearching ? "searching" : "")"
@@ -45,7 +45,8 @@
             }
             else
             {
-                <span>🔍 Search</span>
+                <span class="bi bi-search"></span>
+                <span> Search</span>
             }
         </button>
     </div>
@@ -162,7 +163,7 @@
     else if (!string.IsNullOrEmpty(_tvTitle) || !string.IsNullOrEmpty(_characterName))
     {
         <div class="no-results">
-            <div class="no-results-icon">🔍</div>
+            <div class="no-results-icon bi-search"></div>
             <h4>No matches found</h4>
             <p>Try adjusting your search terms or check the spelling</p>
         </div>
@@ -170,7 +171,7 @@
     else
     {
         <div class="welcome-state">
-            <div class="welcome-icon">📺</div>
+            <div class="welcome-icon bi bi-tv"></div>
             <h4>Ready to explore?</h4>
             <p>Enter a TV show title and character name to discover an actor's complete television journey</p>
         </div>