diff --git a/app/READMR.md b/app/READMR.md
new file mode 100644
index 00000000000..3b262fbc326
--- /dev/null
+++ b/app/READMR.md
@@ -0,0 +1,39 @@
+## Setup
+
+1. **Prerequisites:**
+
+   - Ensure you have a working GeoNode project setup.
+   - MapStore is integrated within your GeoNode instance.
+
+2. **Installation:**
+   - Clone this repository into your project directory.
+   - Ensure all dependencies are installed by running `pip install -r requirements.txt` for Python dependencies and `npm install` for JavaScript dependencies.
+
+## Usage
+
+1. **Python Setup:**
+
+   - Integrate the `models.py` and `views.py` into your Django app. These files handle the STA data fetching from the backend.
+
+2. **JavaScript Integration:**
+   - Place `staDataFetcher.js` and `staLayerAdder.js` in the `src/utils/` directory of your frontend project.
+   - Import and utilize these utilities in your MapComponent or similar component responsible for MapStore integration to fetch STA data and add it as a map layer.
+
+## Features
+
+- Fetches STA data through a Django backend setup.
+- Visualizes STA data as a new layer in MapStore within GeoNode.
+- Provides a flexible foundation for further customization and integration of additional data sources.
+
+## Contributing
+
+We welcome contributions! Please read our [Contributing Guide](CONTRIBUTING.md) for details on how to submit pull requests, file issues, and participate in the development process.
+
+## License
+
+This project is licensed under the [MIT License](LICENSE.md) - see the LICENSE file for details.
+
+## Acknowledgments
+
+- The GeoNode team for providing an excellent platform for geospatial data sharing and management.
+- The MapStore team for their versatile GIS web mapping solution.
diff --git a/app/src/components/index.html b/app/src/components/index.html
new file mode 100644
index 00000000000..e7a0a89eb78
--- /dev/null
+++ b/app/src/components/index.html
@@ -0,0 +1,16 @@
+<div id="map" style="height: 400px;"></div>
+
+<script>
+  var map = L.map('map').setView([YOUR_DEFAULT_LATITUDE, YOUR_DEFAULT_LONGITUDE], 13);
+  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+  }).addTo(map);
+
+  var markers = L.geoJSON(processedData, {
+    pointToLayer: function(feature, latlng) {
+      return L.marker(latlng, { icon: L.icon({ iconUrl: 'your-icon.png' }) });
+    }
+  });
+
+  markers.addTo(map);
+</script>
diff --git a/app/src/components/models.py b/app/src/components/models.py
new file mode 100644
index 00000000000..9b9be9b3929
--- /dev/null
+++ b/app/src/components/models.py
@@ -0,0 +1,9 @@
+# app/models.py
+from django.db import models
+
+class STAService(models.Model):
+    name = models.CharField(max_length=255)
+    url = models.URLField()
+
+    def __str__(self):
+        return self.name
diff --git a/app/src/components/utils.py b/app/src/components/utils.py
new file mode 100644
index 00000000000..9d9a596f35a
--- /dev/null
+++ b/app/src/components/utils.py
@@ -0,0 +1,9 @@
+# app/utils.py
+import requests
+
+def fetch_sta_data(sta_url):
+    response = requests.get(sta_url)
+    if response.status_code == 200:
+        return response.json()
+    else:
+        return None
diff --git a/app/src/components/utils/APIFeaturesClient.js b/app/src/components/utils/APIFeaturesClient.js
new file mode 100644
index 00000000000..e103c65839d
--- /dev/null
+++ b/app/src/components/utils/APIFeaturesClient.js
@@ -0,0 +1,43 @@
+const baseUrl = "https://developer.ogc.org/collections/{collectionId}/items";
+async function fetchData(url) {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Error fetching data: ${response.statusText}`);
+  }
+  return await response.json();
+}
+
+async function getCollections() {
+  const url = `${baseUrl}/collections`;
+  const data = await fetchData(url);
+  console.log("Collections:", data);
+  return data;
+}
+
+async function getCollectionInfo(collectionId) {
+  const url = `${baseUrl}/collections/${collectionId}`;
+  const data = await fetchData(url);
+  console.log("Collection Info:", data);
+  return data;
+}
+
+async function getCollectionData(collectionId) {
+  const url = `${baseUrl}/collections/${collectionId}/items`;
+  const data = await fetchData(url);
+  console.log("Collection Data:", data);
+  return data;
+}
+
+// A simple example usage of the follwoing functions
+getCollections()
+  .then((collections) => {
+    if (collections.length > 0) {
+      const firstCollectionId = collections[0].id;
+      getCollectionInfo(firstCollectionId)
+        .then(() => getCollectionData(firstCollectionId))
+        .catch((error) => console.error("Error:", error));
+    } else {
+      console.log("No collections found.");
+    }
+  })
+  .catch((error) => console.error("Error:", error));
diff --git a/app/src/components/utils/staDataFetcher.js b/app/src/components/utils/staDataFetcher.js
new file mode 100644
index 00000000000..790739c8d1a
--- /dev/null
+++ b/app/src/components/utils/staDataFetcher.js
@@ -0,0 +1,7 @@
+async function fetchSTAData() {
+    const response = await fetch('/api/sta-data/');
+    if (!response.ok) {
+        throw new Error('Network response was not ok');
+    }
+    return await response.json(); // Assuming the data is returned as GeoJSON
+}
diff --git a/app/src/components/utils/staLayerAdder.js b/app/src/components/utils/staLayerAdder.js
new file mode 100644
index 00000000000..c5cff68e160
--- /dev/null
+++ b/app/src/components/utils/staLayerAdder.js
@@ -0,0 +1,20 @@
+import { Vector as VectorLayer } from 'ol/layer';
+import { Vector as VectorSource } from 'ol/source';
+import { GeoJSON } from 'ol/format';
+
+async function addSTALayerToMap(map) {
+    // Fetch the STA data
+    const staData = await fetchSTAData();
+    
+    // Create a new vector source and layer using the fetched GeoJSON data
+    const vectorSource = new VectorSource({
+        features: new GeoJSON().readFeatures(staData),
+    });
+
+    const vectorLayer = new VectorLayer({
+        source: vectorSource,
+    });
+
+    // Add the layer to the map
+    map.addLayer(vectorLayer);
+}
diff --git a/app/src/components/views.py b/app/src/components/views.py
new file mode 100644
index 00000000000..d3a65bd1379
--- /dev/null
+++ b/app/src/components/views.py
@@ -0,0 +1,10 @@
+# app/views.py
+from django.shortcuts import render
+from .models import STAService
+from .utils import fetch_sta_data
+
+def sta_service_view(request, service_id):
+    service = STAService.objects.get(id=service_id)
+    sta_data = fetch_sta_data(service.url)
+    # For simplicity, passing the data directly to the template. In a real scenario, you'd likely process this data or use a Django REST Framework serializer for AJAX.
+    return render(request, 'sta_service_template.html', {'sta_data': sta_data})