diff --git a/static/css/style.css b/static/css/style.css
index 27b604c..7559bd6 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,40 +1,7 @@
-html {
-    background-color: #344E5C;
-}
-
-header {
-    border-radius: 25px;
-    border: 10px #EF3D59 solid;
-    color: #4AB19D;
-    text-align: center;
-    padding: 10px;
-}
-
-body {
-    color: #EFC958;
-    text-align: center;
-    padding: 10px;
-}
-
-.button {
-  background-color: #04AA6D; /* Green */
-  border: none;
-  color: white;
-  padding: 15px 32px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 16px;
-}
-
-#headerpad {
-    padding: 10px;
-}
-
-#imagebox {
-    border-radius: 25px;
+img {
     padding: 10px;
     margin: auto;
+    min-height: 150px;
     width: 50%;
     text-align: center;
     width: 200px;
diff --git a/templates/index.html b/templates/index.html
index 4a32c3b..c12e48e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
 <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
@@ -7,24 +7,35 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 </head>
 
 <header>
-        <h1 class=roboto-bold>Matthew's Tool of the Week</h1>
-        <h2 class=roboto-regular> Week: {{ tool.Week_to_post }} </h2>
+    <div class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
+        <div class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none roboto-bold">
+            <span class="fs-4"> Matthew's Tool of the Week</span>
+        </div>
+        <div>
+            <h2 class=roboto-regular> Week: {{ tool.Week_to_post }} </h2>
+        </div>
+    </div>
 </header>
 
 <body>
-        <div id=headerpad />
+        <div class="px-4 pt-5 my-5 text-center border-bottom roboto-regular">
+            <h1 class="display-4 fw-bold text-body-emphasis"> {{ tool.Name }} </h1>
         <a href='http://{{ tool["Url"] }}'> 
-            <div id=imagebox>
-                <i></i>
+            <div class="container px-5">
+                <img class="img-fluid border rounded-3 shadow-lg mb-4"></img>
             </div>
             <button>{{ tool.Name }}</button>
         </a>
-        <div id=descriptionbox>
-            <p class=roboto-regular> {{ tool.Description }} </p>
+        <div>
+            <p class="roboto-regular col-lg-6 mx-auto"> {{ tool.Description }} </p>
         </div>
 </body>
+<footer>
+
+</footer>
 
 </html>
