diff --git a/home/templates/home/course_index_page.html b/home/templates/home/course_index_page.html
new file mode 100644
index 0000000..11f57c3
--- /dev/null
+++ b/home/templates/home/course_index_page.html
@@ -0,0 +1,52 @@
+{% extends "base.html" %}
+{% load static i18n wagtailcore_tags wagtailimages_tags %}
+
+{% block title %}{% trans "Courses" %}{% endblock title %}
+
+{% block body_class %}template-courseindex{% endblock body_class %}
+
+
+{% block content %}
+<h1 class="text-3xl font-bold mb-6 text-center">{% trans "Courses" %}</h1>
+
+<h2 class="text-2xl font-semibold mb-4">{% trans "Purchased Courses" %}</h2>
+<div class="flex flex-wrap -mx-4">
+  {% for course in purchased_courses %}
+    <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
+      <a href="{{ course.url }}" class="block bg-green-50 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
+        {% image course.specific.course_image original %}
+        <div class="p-4">
+          <div class="flex items-center justify-between mb-2">
+            <h2 class="text-xl font-semibold">{{ course.specific.title }}</h2>
+            <div class="relative w-8 h-8 rounded-full bg-green-500">
+              <i class="fi fi-br-lock-open-alt leading-0 absolute left-0 top-1/2 translate-x-1/2 -translate-y-1/2 text-white" title="{% trans "Purchased" %}"></i>
+            </div>
+          </div>
+          <p class="text-gray-600">{{ course.specific.description|truncatewords:20 }}</p>
+        </div>
+      </a>
+    </div>
+  {% endfor %}
+</div>
+
+<h2 class="text-2xl font-semibold mb-4">{% trans "Available Courses" %}</h2>
+<div class="flex flex-wrap -mx-4">
+  {% for course in other_courses %}
+    <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
+      <a href="{{ course.url }}" class="block bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
+        {% image course.specific.course_image original %}
+        <div class="p-4">
+          <div class="flex items-center justify-between mb-2">
+            <h2 class="text-xl font-semibold">{{ course.specific.title }}</h2>
+            <div class="relative w-8 h-8 rounded-full bg-gray-200">
+              <i class="fi fi-br-shopping-basket leading-0 absolute left-0 top-1/2 translate-x-1/2 -translate-y-1/2 text-gray-700" title="{% trans "Not Purchased" %}"></i>
+            </div>
+          </div>
+          <p class="text-gray-600">{{ course.specific.description|truncatewords:20 }}</p>
+        </div>
+      </a>
+    </div>
+  {% endfor %}
+</div>
+
+{% endblock content %}