diff --git a/index.html b/index.html
index b9193bd..c0ea732 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,56 @@
 	</head>
 	<body class="w-full sm:h-screen max-w-screen-xl mx-auto p-4 md:py-8">
 		<h1 class="text-2xl">I'm lazy, that's why I do this...</h1>
-		<h1>OK TEST</h1>
+		<ul id="resultList" class="mt-10 space-y-4 text-gray-500 list-decimal list-inside dark:text-gray-400"></ul>
+		<script>
+			// const myFetch = async () => {
+			// 	const response = await fetch('https://soulinmaikadua.github.io/slms-projects/api/data.json')
+			// 	console.log(response)
+			// }
+			// myFetch()
+			// fetch('https://soulinmaikadua.github.io/slms-projects/api/data.json')
+			// 	.then(response => response.json())
+			// 	.then(json => console.log(json))
+			document.addEventListener('DOMContentLoaded', fetchData)
+
+			async function fetchData() {
+				try {
+					// Fetch data from an API (replace with your API endpoint)
+					const response = await fetch('https://soulinmaikadua.github.io/slms-projects/api/data.json')
+					console.log(response)
+					const data = await response.json()
+					console.log(data)
+
+					// Process the data and generate an unordered list
+					const resultList = document.getElementById('resultList')
+					for (const item of data) {
+						const listItem = document.createElement('li')
+						listItem.textContent = item.title // Adjust property based on your data structure
+						listItem.classList.add('text-xl', 'font-bold')
+						if (item.projects && item.projects.length > 0) {
+							const projectsList = document.createElement('ul')
+							projectsList.classList.add('ps-5', 'mt-2', 'space-y-1', 'list-disc', 'list-inside')
+							for (const project of item.projects) {
+								const projectItem = document.createElement('li')
+								const link = document.createElement('a')
+								link.href = project.url
+								link.textContent = project.title
+								link.target = '_blank'
+								link.classList.add('underline', 'blue-text-500')
+								projectItem.appendChild(link)
+								projectItem.classList.add('font-normal', 'text-md')
+								projectsList.appendChild(projectItem)
+							}
+							listItem.appendChild(projectsList)
+						}
+
+						resultList.appendChild(listItem)
+					}
+					console.log('resultList')
+				} catch (error) {
+					console.error('Error fetching data:', error)
+				}
+			}
+		</script>
 	</body>
 </html>
