diff --git a/_config.yml b/_config.yml
index 890bef2..0fcf0d8 100644
--- a/_config.yml
+++ b/_config.yml
@@ -72,6 +72,9 @@ collections:
   training:
     output: true
     permalink: /:title/
+   courses:
+    output: true
+    permalink: /:collection/:path/
 
 
 # 6. Jekyll collections settings
diff --git a/_courses/salesforce.md b/_courses/salesforce.md
new file mode 100644
index 0000000..cfeaed2
--- /dev/null
+++ b/_courses/salesforce.md
@@ -0,0 +1,35 @@
+---
+title: "Salesforce Fundamentals: Master the Basics of Salesforce"
+description: "Discover the essentials of Salesforce, the world's leading CRM platform."
+duration: "1 Hour 30 Minutes"
+level: "Beginner"
+total_enrolled: 3
+last_updated: "June 25, 2024"
+lessons:
+  - title: "Introduction to Salesforce"
+    items:
+      - name: "Test Quiz"
+        duration: "01:01:00"
+      - name: "What is Salesforce?"
+        duration: "00:00"
+      - name: "Understanding the Salesforce Ecosystem"
+        duration: "00:00"
+      - name: "Setting Up Your Salesforce Account"
+        duration: "00:00"
+  - title: "Salesforce Basics"
+    items:
+      - name: "Navigating Salesforce: Interface and Key Features"
+        duration: "00:00"
+      - name: "Customizing Your Salesforce Experience"
+        duration: "00:00"
+      - name: "Introduction to Objects and Fields"
+        duration: "00:00"
+  - title: "Managing Data in Salesforce"
+    items: []
+  - title: "Automation and Workflow"
+    items: []
+  - title: "Sales and Service Cloud Basics"
+    items: []
+  - title: "Security and User Management"
+    items: []
+---
diff --git a/_layouts/course.html b/_layouts/course.html
new file mode 100644
index 0000000..7f67106
--- /dev/null
+++ b/_layouts/course.html
@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<html lang="{{ site.lang | default: "en-US" }}">
+{% include head.html %}
+<style>
+    body {
+        font-family: 'Work Sans', sans-serif;
+    }
+    .lesson-content {
+        display: flex;
+        flex-direction: row;
+        height: 100vh;
+    }
+    .course-content {
+        width: 25%;
+        border-right: 1px solid #ddd;
+        padding: 1rem;
+        overflow-y: auto;
+        transition: width 0.3s ease;
+    }
+    .main-content {
+        width: 75%;
+        padding: 1rem;
+        position: relative;
+        transition: width 0.3s ease;
+    }
+    .quiz-card {
+        padding: 1rem;
+        background-color: #f5f5f5;
+        border-radius: 8px;
+        margin-bottom: 1rem;
+    }
+    .main-content-header {
+        background-color: #00d1b2;
+        color: white;
+        padding: 1rem;
+        border-radius: 8px;
+        margin-bottom: 1rem;
+    }
+    .ad-space {
+        width: 100%;
+        background-color: #ddd;
+        text-align: center;
+        line-height: 600px;
+        color: #555;
+        margin-bottom: 1rem;
+    }
+    .collapse-button {
+        position: absolute;
+        top: 1rem;
+        left: calc(100% + 10px);
+        z-index: 10;
+        cursor: pointer;
+    }
+    .collapse-button .fas {
+        font-size: 1.5rem;
+    }
+    .is-collapsed .course-content {
+        width: 0;
+        padding: 0;
+        overflow: hidden;
+    }
+    .is-collapsed .main-content {
+        width: 100%;
+    }
+    .menu .menu-list ul {
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease;
+    }
+    .menu .menu-list ul.is-expanded {
+        max-height: 500px; /* arbitrary max-height, should be enough to show content */
+    }
+    .nav-buttons {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 1rem;
+    }
+    @media (max-width: 768px) {
+        .lesson-content {
+            flex-direction: column;
+        }
+        .course-content {
+            width: 100%;
+            display: none;
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: white;
+            height: 100vh;
+            z-index: 100;
+        }
+        .course-content.is-active {
+            display: block;
+        }
+        .main-content {
+            width: 100%;
+        }
+        .ad-space {
+            position: static;
+            width: 100%;
+            height: 100px;
+            line-height: 100px;
+        }
+    }
+</style>
+<body class="layout-{{ page.layout | default: 'default' }}{% if page.title %} {{ page.title | slugify }}{% endif %}">
+    {% include site-header.html %}
+    <header class="header">
+        <nav class="navbar is-primary" role="navigation" aria-label="main navigation">
+            <div class="navbar-brand">
+                <a class="navbar-item" href="#">
+                    <img src="logo.png" alt="Namaste Salesforce">
+                </a>
+                <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="courseContent">
+                    <span aria-hidden="true"></span>
+                    <span aria-hidden="true"></span>
+                    <span aria-hidden="true"></span>
+                </a>
+            </div>
+        </nav>
+    </header>
+
+    <div class="lesson-content">
+        <aside class="course-content" id="courseContent">
+            <h2 class="title">Course Content <span class="collapse-button" id="collapseButton"><i class="fas fa-angle-double-left"></i></span></h2>
+            <div class="menu">
+                <ul class="menu-list">
+                    {% for section in page.lessons %}
+                    <li>
+                        <a class="has-text-weight-semibold" onclick="toggleSection(this)">{{ section.title }} <i class="fas fa-chevron-down"></i></a>
+                        <ul>
+                            {% for item in section.items %}
+                            <li><a>{{ item.name }} <span class="has-text-grey-light">({{ item.duration }})</span></a></li>
+                            {% endfor %}
+                        </ul>
+                    </li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </aside>
+
+        <main class="main-content">
+            <div class="main-content-header">
+                <h2>{{ page.title }}</h2>
+                <p>{{ page.description }}</p>
+                <p>Duration: {{ page.duration }}</p>
+                <p>Level: {{ page.level }}</p>
+                <p>Total Enrolled: {{ page.total_enrolled }}</p>
+                <p>Last Updated: {{ page.last_updated }}</p>
+            </div>
+            <div class="quiz-card">
+                <p>Questions No: <strong>1/1</strong> | Attempts Allowed: <strong>1</strong></p>
+                <h3>1. Are You Extreme Newbie In Salesforce</h3>
+                <p>As this course is designed for newbie thats why confirming if you are right audience for the course or not.</p>
+                <div class="field">
+                    <div class="control">
+                        <label class="radio">
+                            <input type="radio" name="question1">
+                            True
+                        </label>
+                    </div>
+                    <div class="control">
+                        <label class="radio">
+                            <input type="radio" name="question1">
+                            False
+                        </label>
+                    </div>
+                </div>
+                <button class="button is-primary">Submit Quiz</button>
+            </div>
+            <div class="ad-space">
+                Ad Space
+            </div>
+            <div class="nav-buttons">
+                <button class="button is-primary">Previous</button>
+                <button class="button is-primary">Next</button>
+            </div>
+        </main>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const burger = document.querySelector('.navbar-burger');
+            const menu = document.querySelector('#courseContent');
+            const collapseButton = document.querySelector('#collapseButton');
+            const lessonContent = document.querySelector('.lesson-content');
+
+            burger.addEventListener('click', () => {
+                menu.classList.toggle('is-active');
+            });
+
+            collapseButton.addEventListener('click', () => {
+                lessonContent.classList.toggle('is-collapsed');
+                const icon = collapseButton.querySelector('.fas');
+                if (lessonContent.classList.contains('is-collapsed')) {
+                    icon.classList.replace('fa-angle-double-left', 'fa-angle-double-right');
+                } else {
+                    icon.classList.replace('fa-angle-double-right', 'fa-angle-double-left');
+                }
+            });
+        });
+
+        function toggleSection(element) {
+            const icon = element.querySelector('.fas');
+            const subMenu = element.nextElementSibling;
+            subMenu.classList.toggle('is-expanded');
+            if (subMenu.classList.contains('is-expanded')) {
+                icon.classList.replace('fa-chevron-down', 'fa-chevron-up');
+            } else {
+                icon.classList.replace('fa-chevron-up', 'fa-chevron-down');
+            }
+        }
+    </script>
+  {% include site-before-end.html %}
+</body>
+</html>
+   
+
+  
\ No newline at end of file
diff --git a/courses.html b/courses.html
new file mode 100644
index 0000000..9aafc87
--- /dev/null
+++ b/courses.html
@@ -0,0 +1,22 @@
+---
+layout: default
+title: Courses
+permalink : /courses
+---
+
+<div class="container">
+    <h1 class="title">Courses</h1>
+    <div class="columns is-multiline">
+        {% for course in site.courses %}
+        <div class="column is-one-third">
+            <div class="box">
+                <h2 class="title">{{ course.title }}</h2>
+                <p>{{ course.description }}</p>
+                <p>Duration: {{ course.duration }}</p>
+                <p>Level: {{ course.level }}</p>
+                <a href="{{ course.url }}" class="button is-primary">View Course</a>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</div>
