diff --git a/templates/base.html b/templates/base.html
index 98660e0..697c676 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -3,6 +3,66 @@
 <head>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <title>{% block titel %}{% endblock %}</title>
+
+    <style>
+        body {
+            background-color: #212121;
+            color: #ffffff;
+        }
+        h1 {
+            color: #ffffff;
+        }
+        .content {
+            width: 80%;
+            margin: 0 auto;
+        }
+        .input-form-container {
+            width: 75%;
+            margin: 0 auto;
+        }
+
+        .card{
+            background-color: #424242;
+            color: #ffffff;
+            margin-bottom: 10px;
+            margin-right: 10px;
+        }
+
+        .card-body{
+            background-color: #424242;
+            color: #ffffff;
+        }
+
+        .Faceit-elo-and-steamid64 {
+            width: 80%;
+            margin: 0 auto;
+        }
+
+        .FaceIT-elo{
+            background-color: #424242;
+            color: #ffffff;
+        }
+
+        .SteamID64{
+            background-color: #424242;
+            color: #ffffff;
+        }
+
+        .profile-links {
+            width: 80%;
+            margin: 0 auto;
+        }
+
+        .status_screen_input {
+            background-color: #424242;
+            color: #ffffff;
+            border-radius: 20px
+        }
+
+        .input-form-container textarea.status_screen_input {
+            resize: none;
+        }
+    </style>
     </head>
     <body>
         <nav class="navbar navbar-light bg-light">
@@ -13,7 +73,7 @@
                 </a>
             </div>
         </nav>
-        <div>
+        <div class="content">
             {% block content %}
             {% endblock %}
         </div>
diff --git a/templates/index.html b/templates/index.html
index 9aa22fc..9b51076 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,11 +1,13 @@
 {% extends "base.html" %}
 {% block titel %}Faceit Elo Search by HerZ{% endblock %}
 {% block content %}
-<div class="input-group">
+
+<div class="input-form-container">
     <form action="#" method="post">
         <p>Status Screen:</p>
-        <p><input type="text" name="status_screen_input" /></p>
-        <p><input type="submit" value="submit" /></p>
+        <p><textarea name="status_screen_input" class="status_screen_input" rows="25" cols="75" ></textarea></p>
+        <button type="submit" class="btn btn-primary">Submit</button>
     </form>
-  </div>
+</div>
+  
 {% endblock %}
\ No newline at end of file
diff --git a/templates/steamids.html b/templates/steamids.html
index cb98922..26e6673 100644
--- a/templates/steamids.html
+++ b/templates/steamids.html
@@ -3,10 +3,10 @@
 {% block content %}
 <div class="input-group">
 {%for steamid in steamids%}
-<div class="card" style="width: 18rem;">
+<div class="card" >
   <img class="Steam-PB" src="{{steam_pic_dict[steamid]}}" alt="Card image cap">
   <div class="card-body">
-    <h5 class="STeam-Name">{{steam_name_dict[steamid]}}</h5>
+    <h3 class="STeam-Name">{{steam_name_dict[steamid]}}</h3>
     <p class="FaceIT-IMG">
       {% if faceit_level_dict[steamid] == 1 %}
         <img src="/static/faceit1.svg" alt="FaceIT Level 1" width="100" height="100">
@@ -33,13 +33,13 @@
       {% endif %}
     </p>
   </div>
-  <ul class="list-group list-group-flush">
-    {% if not faceit_elo_dict[steamid] == 0 %}
-    <li class="list-group-item">FaceIT ELO: {{faceit_elo_dict[steamid]}}</li>
-    <li class="list-group-item">SteamID: {{steamid64_dict[steamid]}}</li>
-    {% endif %}
-  </ul>
-  <div class="card-body">
+  {% if not faceit_elo_dict[steamid] == 0 %}
+  <div class="Faceit-elo-and-steamid64">
+    <p class="FaceIT-elo">FaceIT ELO: {{faceit_elo_dict[steamid]}}</p>
+    <p class="SteamID64">SteamID: {{steamid64_dict[steamid]}}</p>
+  </div>
+  {% endif %}
+  <div class="profile-links">
     <a href="https://steamcommunity.com/profiles/{{steamid64_dict[steamid]}}" class="card-link">Steam Profile</a>
     {% if not faceit_elo_dict[steamid] == 0 %}
     <a href="https://www.faceit.com/en/players/{{faceit_name_dict[steamid]}}" class="card-link">FaceIT Link</a>
