diff --git a/django_project/settings.py b/django_project/settings.py
index 85d47deb..de412a9a 100644
--- a/django_project/settings.py
+++ b/django_project/settings.py
@@ -119,6 +119,7 @@
 
 STATICFILES_DIRS = [
   BASE_DIR / 'static',
+  BASE_DIR/'static'
 ]
 # Default primary key field type
 # https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field
diff --git a/django_project/views.py b/django_project/views.py
index f9042b4c..114fa492 100644
--- a/django_project/views.py
+++ b/django_project/views.py
@@ -3,15 +3,19 @@
 
 def home(request):
   # USING APIS => Example 1
-  response = requests.get('https://api.github.com/events')
-  data = response.json()
-  result = data[0]["repo"]
+  # views.py
+  import requests
+from django.shortcuts import render
 
-  # Example 2
-  reponse2 = requests.get('https://dog.ceo/api/breeds/image/random')
-  data2 = reponse2.json()
-  result2 = data2["message"]
+def home(request):
+    # Fetching data from the Car API
+    car_response = requests.get('https://api.Bentley.com/cars')
+    car_data = car_response.json()
+    car_result = car_data["cars"]
 
+    # Fetching data from the Ship API
+    ship_response = requests.get('https://api.maersk.com/ships')
+    ship_data = ship_response.json()
+    ship_result = ship_data["ships"]
 
-  
-  return render(request, 'templates/index.html', {'result': result, 'result2': result2})
\ No newline at end of file
+    return render(request, 'index.html', {'car_result': car_result, 'ship_result': ship_result})
diff --git a/static/styles.css b/static/styles.css
index 530d510b..d4fd503d 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1,9 +1,44 @@
-body{
-  background: hotpink
+/* styles.css */
+
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+h1 {
+  color: #333;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  margin-bottom: 10px;
+}
+
+/* Styling for Car Data */
+.car-section {
+  margin-bottom: 30px;
+}
+
+.car-section h1 {
+  color: #007bff; /* Blue color */
+}
+
+/* Styling for Ship Data */
+.ship-section {
+  margin-top: 30px;
 }
 
-img{
-  width: 100px;
-  height: 100px;
-  border-radius: 9999;
+.ship-section h1 {
+  color: #28a745; /* Green color */
 }
diff --git a/templates/index.html b/templates/index.html
index b0f60817..ef93539e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,22 +1,25 @@
-{% load static%}
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="{% static 'styles.css' %}" />
-   <!-- <link rel="stylesheet" href="/static/styles.css" /> -->
-  <title>Document</title>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="{% static 'styles.css' %}">
+    <title>Welcome to see land and water transport machines</title>
 </head>
 <body>
-  <h1>Hello, My name is Evans </h1>
+    <h1>Car Data</h1>
+    <ul>
+        {% for car in car_result %}
+            <li>{{ car }}</li>
+        {% endfor %}
+    </ul>
 
-  {{result}}
-
-  <h1>Random Pet</h1>
-{{result2}}
-  <img src={{result2}} alt="random pet" />
-  
+    <h1>Ship Data</h1>
+    <ul>
+        {% for ship in ship_result %}
+            <li>{{ ship }}</li>
+        {% endfor %}
+    </ul>
 </body>
-</html>
\ No newline at end of file
+</html>
