diff --git a/index.html b/index.html
index 35591275..4ae31919 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Skunkworks Academy</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://unpkg.com/carbon-components/css/carbon-components.min.css">
+    <script src="https://unpkg.com/carbon-components/scripts/carbon-components.min.js"></script>
     <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
-        <style>
+    <link rel="stylesheet" href="css/main.css">
+    <style>
         /* Additional styles for sidebar */
         #sidebar {
             transform: translateX(-100%);
@@ -16,6 +18,7 @@
         #sidebar.open {
             transform: translateX(0);
         }
+
         /* Dropdown menu style */
         .dropdown-content {
             display: none;
@@ -26,124 +29,105 @@
             padding: 12px 16px;
             z-index: 1;
         }
+
         .dropdown:hover .dropdown-content {
             display: block;
         }
     </style>
 </head>
 <body class="font-roboto flex flex-col min-h-screen bg-light-blue text-gray-900">
-    <!-- Menu Bar -->
-    <header class="bg-blue-800 text-white p-4">
-        <nav class="container mx-auto flex justify-between items-center">
-            <a href="https://github.skunkworks.africa/" class="text-xl font-bold">Skunkworks Academy</a>
-            <div class="flex justify-center space-x-4">
-                    <!-- Navigation links with dropdowns -->
-                     <div class="dropdown">
-                       <a href="https://github.skunkworks.africa/Courses" class="text-white hover:underline px-4 py-2 rounded-md hover:bg-blue-700">Courses</a>
-                        <div class="dropdown-content">
-                       <!-- Dropdown menu -->
-                        <div class="absolute hidden group-hover:block bg-white text-gray-900">
-                            <a href="https://github.skunkworks.africa/Courses/course1">Course 1</a>
-                            <a href="https://github.skunkworks.africa/Courses/course2">Course 2</a>
-                            <a href="https://github.skunkworks.africa/Courses/course3">Course 3</a>
-                        </div>
-                        </div>
+    <header class="bx--header">
+        <a class="bx--header__name" href="index.html">Skunkworks Academy</a>
+        <nav class="bx--header__nav">
+            <ul class="bx--header__menu-bar">
+                <li class="bx--header__menu-item dropdown">
+                    <a class="bx--header__menu-item" href="courses.html">Courses</a>
+                    <div class="dropdown-content">
+                        <a href="course1.html">Course 1</a>
+                        <a href="course2.html">Course 2</a>
+                        <a href="course3.html">Course 3</a>
                     </div>
-                    <a href="https://github.skunkworks.africa/Services" class="text-white hover:underline px-4 py-2 rounded-md hover:bg-blue-700">Services</a>
-                    <a href="https://github.skunkworks.africa/About" class="text-white hover:underline px-4 py-2 rounded-md hover:bg-blue-700">About</a>
-                    <a href="https://github.skunkworks.africa/Contact" class="text-white hover:underline px-4 py-2 rounded-md hover:bg-blue-700">Contact</a>
-                </nav>
-            </div>
+                </li>
+                <li class="bx--header__menu-item">
+                    <a class="bx--header__menu-item" href="services.html">Services</a>
+                </li>
+                <li class="bx--header__menu-item">
+                    <a class="bx--header__menu-item" href="about.html">About</a>
+                </li>
+                <li class="bx--header__menu-item">
+                    <a class="bx--header__menu-item" href="contact.html">Contact</a>
+                </li>
+                <li class="bx--header__menu-item">
+                    <a class="bx--header__menu-item" href="docs/index.html">Documentation</a>
+                </li>
+            </ul>
         </nav>
     </header>
-    <!-- Main content -->
-    <main class="flex-grow container mx-auto flex flex-col items-center justify-center p-4">
-        <div class="w-full max-w-3xl text-center mb-4">
-            <h1 class="text-2xl mb-4">How can I help you today?</h1>
-            <!-- Buttons to guide the user to different services -->
-            <button onclick="explainService('popcorn')" class="bg-blue-600 text-white rounded px-4 py-2 m-2 hover:bg-blue-700">Create your own learning path</button>
-            <button onclick="explainService('optionsTrading')" class="bg-blue-600 text-white rounded px-4 py-2 m-2 hover:bg-blue-700">Search for a Course</button>
-            <button onclick="explainService('dishRecommendation')" class="bg-blue-600 text-white rounded px-4 py-2 m-2 hover:bg-blue-700">Create your professional profile</button>
-            <button onclick="explainService('edgeCases')" class="bg-blue-600 text-white rounded px-4 py-2 m-2 hover:bg-blue-700">Create your SaaS Architecural Structure</button>
-        </div>
-    </main>
-    <main class="flex-grow container mx-auto p-4">
-        <div id="chat-container" class="bg-white rounded-lg p-4 flex flex-col space-y-4">
-            <!-- Chat messages will go here -->
-        </div>
-    </main>
-    <!-- Body: Search/Chat/Query Prompt -->
-    <main class="flex-grow container mx-auto flex items-center justify-center p-4">
-        <div class="w-full max-w-md">
-            <input type="text" placeholder="Search courses, ask a question..." class="w-full p-4 rounded border border-gray-300 focus:border-blue-500 focus:outline-none" autofocus>
-        </div>
-        <div class="mt-4">
-            <input type="text" id="chat-input" placeholder="Type your message..." class="border border-gray-300 p-2 rounded w-full" onkeydown="if(event.key === 'Enter'){ sendMessage(); }">
-            <button onclick="sendMessage()" class="bg-blue-600 text-white rounded px-4 py-2 mt-2 hover:bg-blue-700">Send</button>
+    <main class="bx--content">
+        <div class="bx--grid">
+            <div class="bx--row">
+                <div class="bx--col-lg-12 bx--col-md-8 text-center">
+                    <h1 class="bx--type-expressive-heading-04 mb-4">How can I help you today?</h1>
+                    <button class="bx--btn bx--btn--primary" onclick="explainService('learning-path')">Create your own learning path</button>
+                    <button class="bx--btn bx--btn--primary" onclick="explainService('search-course')">Search for a Course</button>
+                    <button class="bx--btn bx--btn--primary" onclick="explainService('professional-profile')">Create your professional profile</button>
+                    <button class="bx--btn bx--btn--primary" onclick="explainService('saas-architecture')">Create your SaaS Architectural Structure</button>
+                </div>
+            </div>
+            <div class="bx--row">
+                <div class="bx--col-lg-12 bx--col-md-8">
+                    <div id="chat-container" class="bg-white rounded-lg p-4 flex flex-col space-y-4">
+                        <!-- Chat messages will go here -->
+                    </div>
+                </div>
+            </div>
+            <div class="bx--row">
+                <div class="bx--col-lg-12 bx--col-md-8 flex items-center justify-center">
+                    <div class="w-full max-w-md">
+                        <input type="text" placeholder="Search courses, ask a question..." class="w-full p-4 rounded border border-gray-300 focus:border-blue-500 focus:outline-none" autofocus>
+                        <div class="mt-4 flex">
+                            <input type="text" id="chat-input" placeholder="Type your message..." class="border border-gray-300 p-2 rounded w-full" onkeydown="if(event.key === 'Enter'){ sendMessage(); }">
+                            <button onclick="sendMessage()" class="bx--btn bx--btn--primary ml-2">Send</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </main>
-    <!-- Left Sidebar (Placeholder for actual sliding functionality) -->
-    <aside class="fixed top-0 left-0 w-64 h-full bg-blue-900 text-white p-4 transform -translate-x-full transition-transform duration-300">
+    <!-- Left Sidebar -->
+    <aside id="sidebar" class="fixed top-0 left-0 w-64 h-full bg-blue-900 text-white p-4">
         <p class="mb-4">Left Sidebar Content</p>
-        <button class="bg-blue-500 rounded px-4 py-2 m-2 hover:bg-blue-600">Close</button>
+        <button class="bx--btn bx--btn--secondary" onclick="toggleSidebar()">Close</button>
     </aside>
     <!-- Footer -->
-    <footer class="bg-blue-800 text-white p-4 text-center">
-        <p>© 2024 Skunkworks Academy. All rights reserved.</p>
+    <footer class="bx--footer">
+        <div class="bx--grid">
+            <div class="bx--row">
+                <div class="bx--col-lg-12 bx--col-md-8">
+                    <p class="bx--type-body-long-01">© 2024 Skunkworks Academy. All rights reserved.</p>
+                </div>
+            </div>
+        </div>
     </footer>
+    <script src="js/script.js"></script>
     <script>
-        function explainService(service)     
-    {
-        // Placeholder function - Implement logic to display service explanations or navigate to service pages
-        alert(`This would lead to the ${service} service page or display an explanation about the service.`);
+        function explainService(service) {
+            alert(`This would lead to the ${service} service page or display an explanation about the service.`);
         }
-    </script>
-</body>
-</html>
 
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Skunkworks Academy LMS</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
-    <style>
-        /* Additional styles for sidebar */
-        #sidebar {
-            transform: translateX(-100%);
-            transition: transform 0.3s ease-in-out;
+        function sendMessage() {
+            const input = document.getElementById('chat-input');
+            if (input.value.trim() !== '') {
+                // Implement the logic to send the message
+                alert(`Sending message: ${input.value}`);
+                input.value = '';
+            }
         }
 
-        #sidebar.open {
-            transform: translateX(0);
-        }
-        /* Dropdown menu style */
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-            padding: 12px 16px;
-            z-index: 1;
+        function toggleSidebar() {
+            const sidebar = document.getElementById('sidebar');
+            sidebar.classList.toggle('open');
         }
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-    </style>
-</head>
-<body class="font-roboto flex flex-col min-h-screen bg-light-blue text-gray-900">
-    </header>
-
-
-
-
-    </footer>
-
-
-
+    </script>
 </body>
 </html>
