diff --git a/frontend/application/templates/forum/index.html b/frontend/application/templates/forum/index.html
index 3438f947a6f8fa453948e203c91d6cd5b73fe4de..dadd9a6b7c2bd4e0a30a2982330f9de43886ce3f 100644
--- a/frontend/application/templates/forum/index.html
+++ b/frontend/application/templates/forum/index.html
@@ -3,70 +3,82 @@
 
 {% block pageContent%}
 
+<style>
+    body {
+        background-color: #f8f9fa;
+        color: #212529;
+    }
+
+    .card-header {
+        background-color: #c6e2ff;
+        color: white;
+    }
+
+    .nav-link.active {
+        background-color: #6c757d;
+        color: white;
+    }
+</style>
+
 <div>
-  
-  
-</div>
 
+</div>
 
-    <div class="col-md-6 gedf-main">
-        <div class="card gedf-card">
-            <div class="card-header">
-                <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
-                    <li class="nav-item">
-                        <a class="nav-link active" id="posts-tab" data-toggle="tab" href="#posts" role="tab" aria-controls="posts" aria-selected="true">Start a discussion</a>
-                    </li>
-                </ul>
-            </div>
-            <div class="card-body">
-                <div class="tab-content" id="myTabContent">
-                    <div class="tab-pane fade show active" id="posts" role="tabpanel" aria-labelledby="posts-tab">
-                        <div class="form-group">
-                            <label class="sr-only" for="message">post</label>
-                            <a class="btn btn--link" href="{{ url_for('frontend.create_post') }}">New Post</a>
-                        </div>
+<div class="col-md-6 gedf-main">
+    <div class="card gedf-card">
+        <div class="card-header">
+            <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
+                <li class="nav-item">
+                    <a class="nav-link active" id="posts-tab" data-toggle="tab" href="#posts" role="tab" aria-controls="posts" aria-selected="true">Start a discussion</a>
+                </li>
+            </ul>
+        </div>
+        <div class="card-body">
+            <div class="tab-content" id="myTabContent">
+                <div class="tab-pane fade show active" id="posts" role="tabpanel" aria-labelledby="posts-tab">
+                    <div class="form-group">
+                        <label class="sr-only" for="message">post</label>
+                        <a class="btn btn--link" href="{{ url_for('frontend.create_post') }}">New Post</a>
                     </div>
                 </div>
-
             </div>
         </div>
-        {% for post,image in data %}
-        <div class="card gedf-card">
-          <div class="card-header">
+    </div>
+    {% for post,image in data %}
+    <div class="card gedf-card">
+        <div class="card-header">
             <div class="d-flex justify-content-between align-items-center">
-              <div class="d-flex justify-content-between align-items-center">
-                <div class="mr-2">
-                  <img class="rounded-circle" width="45" src="images/users/{{ image }}">
-                </div>
-                <div class="ml-2">
-                  <div class="h5 m-0"><a href="{{ url_for('frontend.display_user', user_id=post.user_id) }}">{{ post['user_name'] }}</a></div>
+                <div class="d-flex justify-content-between align-items-center">
+                    <div class="mr-2">
+                        <img class="rounded-circle" width="45" src="images/users/{{ image }}">
+                    </div>
+                    <div class="ml-2">
+                        <div class="h5 m-0"><a href="{{ url_for('frontend.display_user', user_id=post.user_id) }}">{{ post['user_name'] }}</a></div>
+                    </div>
                 </div>
-              </div>
-              <div>
-                <div class="dropdown">
+                <div>
+                    <div class="dropdown">
+                    </div>
                 </div>
-              </div>
             </div>
-          </div>
-          <div class="card-body">
+        </div>
+        <div class="card-body">
             <div class="text-muted h7 mb-2"> <i class="fa fa-clock-o"></i>{{ post['date_added']}}</div>
             <a class="card-link" href="{{ url_for('frontend.display_post', post_id=post.id) }}">
-              <h5 class="card-title">{{ post['title'] }}</h5>
+                <h5 class="card-title">{{ post['title'] }}</h5>
             </a>
+            {% if post['image_url'] != '' %}
+        <img class="post-image" src="static/images/{{ post['image_url'] }}">
+        {% endif %}
             <p class="card-text">{{ post.content | safe }}</p>
-          </div>
-          <div class="card-footer">
+            
+        </div>
+        <div class="card-footer">
             <a href="{{ url_for('frontend.display_post', post_id=post.id) }}" class="card-link"><i class="fa fa-comment"></i> Comment</a>
-          </div>
         </div>
-        {% endfor %}
     </div>
+{% endfor %}
 
+</div>
 
 {% endblock %}
-
-
-          
-
-
-