diff --git a/courseify/courses/templates/courses/course_list.html b/courseify/courses/templates/courses/course_list.html
index 1ca0db4..7fe2282 100644
--- a/courseify/courses/templates/courses/course_list.html
+++ b/courseify/courses/templates/courses/course_list.html
@@ -1,20 +1,256 @@
-{% extends 'courses/base.html' %}
+<!-- {% load static %} -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Document</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/mailtoharshit/San-Francisco-Font-/sanfrancisco.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
+      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      crossorigin="anonymous"
+    />
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+      * {
+        --primary-color: rgb(254, 242, 0);
+      }
 
-{% block content %}
+      body {
+        background-color: #333;
+        font-family: "San Francisco";
+        overflow: hidden;
+      }
 
-{% if request.user.is_authenticated %}
-Hello {{request.user}}
+      .card {
+        margin: 2rem;
+        border-radius: 10px;
+        width: 20rem;
+        border: solid 4px grey;
+        color: white;
+        background: linear-gradient(to right, #232526, #414345);
+      }
+
+      .btn {
+        background: linear-gradient(to right, #7f7fd5, #86a8e7, #91eae4);
+      }
+
+      .card-title {
+        font-size: 2rem;
+      }
+
+      .card-deck {
+        margin-left: auto;
+        margin-right: auto;
+      }
+    </style>
+  </head>
+
+  <!-- Courses -->
+  <section class="section">
+    <div class="">
+      <div class="row">
+        <div class="card-deck">
+          <div class="card">
+            <img
+              class="card-img-top"
+              src="https://picsum.photos/400/200"
+              alt="Card image cap"
+            />
+            <div class="card-body">
+              <h5 class="card-title text-center">COURSE 1</h5>
+              <p class="card-text">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem,
+                reiciendis!
+              </p>
+              <p class="card-text">
+                <small class="text-muted">Last updated 3 mins ago</small>
+              </p>
+              <a href="#" class="btn btn-dark btn-block">Watch More</a>
+            </div>
+          </div>
+          <div class="card">
+            <img
+              class="card-img-top"
+              src="https://picsum.photos/400/200"
+              alt="Card image cap"
+            />
+            <div class="card-body">
+              <h5 class="card-title text-center">COURSE 2</h5>
+              <p class="card-text">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem,
+                reiciendis!
+              </p>
+              <p class="card-text">
+                <small class="text-muted">Last updated 3 mins ago</small>
+              </p>
+              <a href="#" class="btn btn-dark btn-block">Watch More</a>
+            </div>
+          </div>
+          <div class="card">
+            <img
+              class="card-img-top"
+              src="https://picsum.photos/400/200"
+              alt="Card image cap"
+            />
+            <div class="card-body">
+              <h5 class="card-title text-center">COURSE 3</h5>
+              <p class="card-text">
+                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt,
+                facilis!
+              </p>
+              <p class="card-text">
+                <small class="text-muted">Last updated 3 mins ago</small>
+              </p>
+              <a href="#" class="btn btn-dark btn-block">Watch More</a>
+            </div>
+          </div>
+          <div class="card">
+            <img
+              class="card-img-top"
+              src="https://picsum.photos/400/200"
+              alt="Card image cap"
+            />
+            <div class="card-body">
+              <h5 class="card-title text-center">COURSE 4</h5>
+              <p class="card-text">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                Quaerat, itaque.
+              </p>
+              <p class="card-text">
+                <small class="text-muted">Last updated 3 mins ago</small>
+              </p>
+              <a href="#" class="btn btn-dark btn-block">Watch More</a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="card-deck">
+          <div class="card">
+            <img
+              class="card-img-top"
+              src="https://picsum.photos/400/200"
+              alt="Card image cap"
+            />
+            <div class="card-body">
+              <h5 class="card-title text-center">COURSE 5</h5>
+              <p class="card-text">
+                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+                Blanditiis, perferendis.
+              </p>
+              <p class="card-text">
+                <small class="text-muted">Last updated 3 mins ago</small>
+              </p>
+              <a href="#" class="btn btn-dark btn-block">Watch More</a>
+            </div>
+          </div>
+          <div class="card">
+            <img
+              class="card-img-top"
+              src="https://picsum.photos/400/200"
+              alt="Card image cap"
+            />
+            <div class="card-body">
+              <h5 class="card-title text-center">COURSE 6</h5>
+              <p class="card-text">
+                Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+                Ratione, error?
+              </p>
+              <p class="card-text">
+                <small class="text-muted">Last updated 3 mins ago</small>
+              </p>
+              <a href="#" class="btn btn-dark btn-block">Watch More</a>
+            </div>
+          </div>
+          <div class="card">
+            <img
+              class="card-img-top"
+              src="https://picsum.photos/400/200"
+              alt="Card image cap"
+            />
+            <div class="card-body">
+              <h5 class="card-title text-center">COURSE 7</h5>
+              <p class="card-text">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                Molestiae, suscipit!
+              </p>
+              <p class="card-text">
+                <small class="text-muted">Last updated 3 mins ago</small>
+              </p>
+              <a href="#" class="btn btn-dark btn-block">Watch More</a>
+            </div>
+          </div>
+          <div class="card">
+            <img
+              class="card-img-top"
+              src="https://picsum.photos/400/200"
+              alt="Card image cap"
+            />
+            <div class="card-body">
+              <h5 class="card-title text-center">COURSE 8</h5>
+              <p class="card-text">
+                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+                Perferendis, qui.
+              </p>
+              <p class="card-text">
+                <small class="text-muted">Last updated 3 mins ago</small>
+              </p>
+              <a href="#" class="btn btn-dark btn-block">Watch More</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <body>
+    <script
+      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
+      integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
+      integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
+      crossorigin="anonymous"
+    ></script>
+    <script src="/courseify/courses/static/courses/jquery.min.js"></script>
+    <script src="/courseify/courses/static/courses/skel.min.js"></script>
+    <script src="/courseify/courses/static/courses/main.js"></script>
+    <script src="/courseify/courses/static/courses/jquery.scrolly.min.js"></script>
+    <script src="/courseify/courses/static/courses/skel.min.js"></script>
+    <script src="/courseify/courses/static/courses/util.js"></script>
+  </body>
+</html>
+
+<!-- {% extends 'courses/base.html' %} {% block content %} {% if
+request.user.is_authenticated %} Hello {{request.user}}
 <a href="{% url 'logout' %}">Logout</a>
 <a href="{% url 'courses:purchased_course_list' %}">My Course List</a>
 <a href="{% url 'profile' %}">My Profile</a>
 {% else %}
 <a href="{% url 'login' %}">Login</a>
 {% endif %}
-<br>
+<br />
 {% for c in object_list %}
 <a href="{% url 'courses:courseDetail' c.pk %}">{{c.course_name}}</a>
 <p>{{c.description}}</p>
 <small>{{c.price}}</small>
-<br>
-{% endfor %}
-{% endblock %}
\ No newline at end of file
+<br />
+{% endfor %} {% endblock %} -->
