diff --git a/jobs/templates/jobs/index.html b/jobs/templates/jobs/index.html
index a90daf0..d1dda09 100644
--- a/jobs/templates/jobs/index.html
+++ b/jobs/templates/jobs/index.html
@@ -3,45 +3,102 @@
 <div class="cards">
     <div class="card-body">
         <div class="row">
-            <div class="col-12">
-                <h1 class="h5">Latest Jobs</h1>
+            <div class="col-12 mb-2">
+                <h1 class="h2 text-center">Latest Jobs</h1>
             </div>
         </div>
-        {% for job in jobs %}
-        <div class="row">
-            <div class="col-12 border border-info">
-                <div>
-                    <a href="{{ job.get_absolute_url }}">{{ job.title }}</a></h4>
+       
+        <section class="bg-light-gray">
+            <div class="row">
+                {% for job in jobs %}
+                <div class="col-md-4 col-sm-6 portfolio-item wow fadeInUp" data-wow-delay="0.25s" style="visibility: visible; animation-delay: 0.25s; animation-name: fadeInUp;">
+                    <div class="portfolio-caption inline-block">
+                        <h4><a href="{{ job.get_absolute_url }}" style="color:black;">{{ job.title }}</a></h4>
+                        <p>&nbsp;</p>
+                        <p class="text-muted"></p>
+                        <p>{{job.description|truncatewords:20}}</p>
+                        <p class="text-right"><a href="{% url 'jobs:job_apply' job.pk %}">Apply</a></p>
+                    </div>
                 </div>
-                <div>
-                    {% for tag in job.tags.all %}
-                        <i class="fas fa-tag"></i> {{tag}}
-                    {% endfor %}
+                {% endfor %}
+            </div>
+
+        </section>
+
 
-                </div>
-                <div>
-                    <a href="{% url 'jobs:job_apply' job.pk %}">Apply</a>
-                </div>
-            </div>
-        </div>
-        {% endfor %}
     </div>
 </div>
-{% comment %}
-<div class="card-deck mb-3 text-center">
-     {% for job in jobs %}
-    <div class="card mb-4 shadow-sm">
-        <div class="card-header">
-            <h4 class="my-0 font-weight-normal"><a href="{{ job.get_absolute_url }}">{{ job.title }}</a></h4>
-        </div>
-        <div class="card-body">
-            <p class="card-text">{{ job.description|truncatewords_html:20 }}</p>
-        </div>
-        <div class="card-footer">
-            <a href="{% url 'jobs:job_apply' job.pk %}" class="btn btn-lg btn-block btn-primary">Apply</a>
-        </div>
-    </div>
-    {% endfor %}
-</div>
-{% endcomment %}
+<style>
+    .portfolio-item {
+        right: 0;
+        margin: 0 0 15px;
+        text-align: center;
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+
+    .portfolio-item .portfolio-link {
+        display: block;
+        position: relative;
+        margin: 0 auto;
+        max-width: 400px;
+    }
+
+    .portfolio-item .portfolio-link .portfolio-hover {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        background: rgba(254, 209, 54, .9);
+        -webkit-transition: all ease .5s;
+        -moz-transition: all ease .5s;
+        transition: all ease .5s;
+    }
+
+    .portfolio-item .portfolio-link .portfolio-hover:hover {
+        opacity: 1;
+    }
+
+    .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
+        position: absolute;
+        top: 50%;
+        width: 100%;
+        height: 20px;
+        margin-top: -12px;
+        text-align: center;
+        font-size: 20px;
+        color: #fff;
+    }
+
+    .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
+        margin-top: -12px;
+    }
+
+    .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
+    .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
+        margin: 0;
+    }
+
+    .portfolio-item .portfolio-caption {
+        padding: 25px;
+        max-width: 400px;
+        text-align: center;
+        background-color: #fff;
+        width: 100%;
+    }
+
+    .portfolio-item .portfolio-caption h4 {
+        margin: 0 0 17px;
+        text-transform: none;
+        color: #494949;
+    }
+
+    .inline-block {
+        display: inline-block
+    }
+
+    body {
+        background-color: #f7f7f7;
+    }
+</style>
 {% endblock %}
\ No newline at end of file
diff --git a/jobs/views.py b/jobs/views.py
index 1de8884..a61db16 100644
--- a/jobs/views.py
+++ b/jobs/views.py
@@ -17,7 +17,7 @@ class Index(TemplateView):
 
     def get_context_data(self, *args, **kwargs):
         context = super().get_context_data(*args, **kwargs)
-        context['jobs'] = Job.objects.all().order_by('-updated')[:3]
+        context['jobs'] = Job.objects.all().order_by('-updated')[:6]
         return context