diff --git a/Components/Pages/MovieDetail.razor b/Components/Pages/MovieDetail.razor
index b81b1bc..de76a8f 100644
--- a/Components/Pages/MovieDetail.razor
+++ b/Components/Pages/MovieDetail.razor
@@ -2,41 +2,23 @@
 
 <PageTitle>Movie Details</PageTitle>
 
-<style>
-    .my-grid {
-        display: grid;
-        grid-template-columns: 1fr 2fr;
-        grid-template-rows: auto auto;
-        gap: 20px;
-        max-width: 800px;
-        margin-right: auto;
-    }
-    .favorite {
-        background-color: gold;
-        color: black;
-    }
-    .not-favorite {
-        background-color: gray;
-        color: white;
-    }
-</style>
-
-<div class="my-grid">
+<div class="row g-4" style="max-width: 800px;">
     @if (movie is not null)
     {
         <h1>@movie.Title</h1>
-        <div></div>
-        <img src="@movie.Poster" alt="@movie.Title Poster" />
-        <div class="details">
+        <div class="col-md-4">
+            <img src="@movie.Poster" alt="@movie.Title Poster" class="img-fluid" />
+        </div>
+        <div class="col-md-8">
             <p>@movie.Runtime</p>
             <p>@movie.Plot</p>
             @if(ManageFavorite.IsFavorite(id))
             {
-                <button class="btn-secondary favorite" @onclick="ToggleFavoriteMovie">Remove Favorite</button>
+                <button class="btn btn-warning" @onclick="ToggleFavoriteMovie">Remove Favorite</button>
             }
             else
             {
-                <button class="btn-secondary not-favorite" @onclick="ToggleFavoriteMovie">Add to Favorites</button>
+                <button class="btn btn-secondary" @onclick="ToggleFavoriteMovie">Add to Favorites</button>
             }
         </div>
     }