diff --git a/views/edit.ejs b/views/edit.ejs
index 0b498e5..8674ee2 100644
--- a/views/edit.ejs
+++ b/views/edit.ejs
@@ -4,15 +4,44 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Edit Poem</title>
-    <link rel="stylesheet" href="/styles.css">
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
 </head>
-<body>
-    <h1>Edit Poem</h1>
-    <form action="/poems/<%= poem._id %>" method="POST">
-        <input type="text" name="title" placeholder="Title" value="<%= poem.title %>" required>
-        <textarea name="body" placeholder="Poem" required><%= poem.body %></textarea>
-        <input type="text" name="author" placeholder="Author" value="<%= poem.author %>" required>
-        <button type="submit">Update Poem</button>
-    </form>
+<body class="light-theme">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="#">Poet App</a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+                <div class="navbar-nav">
+                    <a class="nav-link" aria-current="page" href="/">Home</a>
+                    <a class="nav-link" href="/poems">Poems</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <div class="container mt-4">
+        <h1>Edit Poem</h1>
+        <form action="/poems/<%= poem._id %>" method="POST">
+            <div class="form-group">
+                <label for="title">Title</label>
+                <input type="text" id="title" name="title" class="form-control" placeholder="Title" value="<%= poem.title %>" required>
+            </div>
+            <div class="form-group">
+                <label for="body">Poem</label>
+                <textarea id="body" name="body" class="form-control" placeholder="Poem" required><%= poem.body %></textarea>
+            </div>
+            <div class="form-group">
+                <label for="author">Author</label>
+                <input type="text" id="author" name="author" class="form-control" placeholder="Author" value="<%= poem.author %>" required>
+            </div>
+            <button type="submit" class="btn btn-primary">Update Poem</button>
+        </form>
+    </div>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
 </body>
 </html>
diff --git a/views/search.ejs b/views/search.ejs
index 769be7a..f343ebf 100644
--- a/views/search.ejs
+++ b/views/search.ejs
@@ -4,38 +4,71 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Search Results</title>
-    <link rel="stylesheet" href="/styles.css">
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        .poem-item {
+            border: 1px solid #ccc;
+            padding: 10px;
+            border-radius: 5px;
+            margin-bottom: 15px;
+        }
+        .author {
+            color: teal;
+        }
+    </style>
 </head>
 <body>
-    <h1>Search Results for "<%= query %>"</h1>
-    <h2 align="center">Search by Titles</h2>
-    <ul>
-        <% poemsByTitle.forEach(poem => { %>
-            <li>
-                <h2><%= poem.title %></h2>
-                <p><%= poem.body %></p>
-                <p>By <%= poem.author %></p>
-                <a href="/poems/<%= poem._id %>/edit">Edit</a>
-                <form action="/poems/<%= poem._id %>/delete" method="POST">
-                    <button type="submit">Delete</button>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="#">Poet App</a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+                <div class="navbar-nav">
+                    <a class="nav-link" aria-current="page" href="/">Home</a>
+                    <a class="nav-link" href="/poems">Poems</a>
+                </div>
+                <form class="form-inline ml-auto" action="/search" method="GET">
+                    <input class="form-control mr-sm-2" type="search" name="query" placeholder="Title or Author" aria-label="Search" required style="width: 400px;">
+                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                 </form>
-            </li>
-        <% }) %>
-    </ul>
-
-    <h2 align="center">Search by Authors</h2>
-    <ul>
-        <% poemsByAuthor.forEach(poem => { %>
-            <li>
-                <h2><%= poem.title %></h2>
-                <p><%= poem.body %></p>
-                <p>By <%= poem.author %></p>
-                <a href="/poems/<%= poem._id %>/edit">Edit</a>
-                <form action="/poems/<%= poem._id %>/delete" method="POST">
-                    <button type="submit">Delete</button>
-                </form>
-            </li>
-        <% }) %>
-    </ul>
+            </div>
+        </div>
+    </nav>
+    <div class="container mt-4">
+        <h1 class="mb-4">Search Results for "<%= query %>"</h1>
+        <h2>Search by Titles</h2>
+        <div class="list-group mb-4">
+            <% poemsByTitle.forEach(poem => { %>
+                <div class="poem-item list-group-item">
+                    <h3><%= poem.title %></h3>
+                    <p><%= poem.body %></p>
+                    <p class="author">By <%= poem.author %></p>
+                    <a href="/poems/<%= poem._id %>/edit" class="btn btn-outline-secondary">Edit</a>
+                    <form action="/poems/<%= poem._id %>/delete" method="POST" class="d-inline">
+                        <button type="submit" class="btn btn-outline-danger">Delete</button>
+                    </form>
+                </div>
+            <% }) %>
+        </div>
+        <h2>Search by Authors</h2>
+        <div class="list-group">
+            <% poemsByAuthor.forEach(poem => { %>
+                <div class="poem-item list-group-item">
+                    <h3><%= poem.title %></h3>
+                    <p><%= poem.body %></p>
+                    <p class="author">By <%= poem.author %></p>
+                    <a href="/poems/<%= poem._id %>/edit" class="btn btn-outline-secondary">Edit</a>
+                    <form action="/poems/<%= poem._id %>/delete" method="POST" class="d-inline">
+                        <button type="submit" class="btn btn-outline-danger">Delete</button>
+                    </form>
+                </div>
+            <% }) %>
+        </div>
+    </div>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 </body>
 </html>
