diff --git a/website/settings.py b/website/settings.py
index 87d386d..0f96f7f 100644
--- a/website/settings.py
+++ b/website/settings.py
@@ -116,6 +116,7 @@ USE_TZ = True
 # https://docs.djangoproject.com/en/5.2/howto/static-files/
 
 STATIC_URL = 'static/'
+STATICFILES_DIRS = [BASE_DIR / "static"]
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field
diff --git a/websiteapp/static/css/styles.css b/websiteapp/static/css/styles.css
new file mode 100644
index 0000000..976497d
--- /dev/null
+++ b/websiteapp/static/css/styles.css
@@ -0,0 +1,73 @@
+@font-face {
+    font-family: 'CynthoBold';
+    src: 
+    url('/static/font/CynthoNextBold.otf') format('opentype');
+
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'CynthoRegular';
+    src: 
+    url('/static/font/CynthoNextRegular.otf') format('opentype');
+
+    font-weight: normal;
+    font-style: normal;
+}
+
+/* This sets the font color for all text */
+body {
+    background-color:rgba(250, 184, 0);
+    color: #006cab;
+    font-size: 20px;
+    font-family: "CynthoRegular", sans-serif;;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+}
+
+button {
+    background-color: rgba(0, 108, 171);
+    color: rgba(250, 184, 0);
+    font-size: 20px;
+    font-family: "CynthoRegular", sans-serif;
+    font-weight: bold;
+    padding: 25px 25px;
+    border: none;       /* removes default border */
+    border-radius: 5px; /* rounded corners */
+    cursor: pointer;    /* pointer on hover */
+    align-items: center;        /* aligns vertically */
+    margin-top: 20px;
+}
+
+#map {
+    height: 550px;
+    width: 100%;
+}
+
+textarea {
+    width: 80%;
+    height: 300px;
+    padding: 12px;
+    box-sizing: border-box;
+    border: 4px solid rgba(0, 108, 171);
+    border-radius: 5px;
+    background-color: rgb(255, 199, 44);
+    font-size: 18px;
+    color: #006cab;
+    resize: none;
+    margin-top: 20px;
+}
+
+.btn-group {
+    display: flex;              /* places buttons side-by-side */
+    justify-content: center;    /* centers them horizontally */      /* aligns vertically */
+    gap: 15px;   
+    margin-top: 10px;
+}
+
+img {
+    align-items: center; 
+    width: 80%;
+}
diff --git a/websiteapp/static/font/CynthoNextBold.otf b/websiteapp/static/font/CynthoNextBold.otf
new file mode 100644
index 0000000..789826f
Binary files /dev/null and b/websiteapp/static/font/CynthoNextBold.otf differ
diff --git a/websiteapp/static/font/CynthoNextExtraBold.otf b/websiteapp/static/font/CynthoNextExtraBold.otf
new file mode 100644
index 0000000..8e609d2
Binary files /dev/null and b/websiteapp/static/font/CynthoNextExtraBold.otf differ
diff --git a/websiteapp/static/font/CynthoNextExtraLight.otf b/websiteapp/static/font/CynthoNextExtraLight.otf
new file mode 100644
index 0000000..0c303bf
Binary files /dev/null and b/websiteapp/static/font/CynthoNextExtraLight.otf differ
diff --git a/websiteapp/static/font/CynthoNextLight.otf b/websiteapp/static/font/CynthoNextLight.otf
new file mode 100644
index 0000000..9523820
Binary files /dev/null and b/websiteapp/static/font/CynthoNextLight.otf differ
diff --git a/websiteapp/static/font/CynthoNextMedium.otf b/websiteapp/static/font/CynthoNextMedium.otf
new file mode 100644
index 0000000..0f89e26
Binary files /dev/null and b/websiteapp/static/font/CynthoNextMedium.otf differ
diff --git a/websiteapp/static/font/CynthoNextRegular.otf b/websiteapp/static/font/CynthoNextRegular.otf
new file mode 100644
index 0000000..cdc1e25
Binary files /dev/null and b/websiteapp/static/font/CynthoNextRegular.otf differ
diff --git a/websiteapp/static/font/CynthoNextSemiBold.otf b/websiteapp/static/font/CynthoNextSemiBold.otf
new file mode 100644
index 0000000..4508dc1
Binary files /dev/null and b/websiteapp/static/font/CynthoNextSemiBold.otf differ
diff --git a/websiteapp/static/font/CynthoNextThin.otf b/websiteapp/static/font/CynthoNextThin.otf
new file mode 100644
index 0000000..0d303ec
Binary files /dev/null and b/websiteapp/static/font/CynthoNextThin.otf differ
diff --git a/websiteapp/static/img/drawing.png b/websiteapp/static/img/drawing.png
new file mode 100644
index 0000000..80cc4b8
Binary files /dev/null and b/websiteapp/static/img/drawing.png differ
diff --git a/websiteapp/templates/websiteapp/base.html b/websiteapp/templates/websiteapp/base.html
index 30f048c..8c44160 100644
--- a/websiteapp/templates/websiteapp/base.html
+++ b/websiteapp/templates/websiteapp/base.html
@@ -1,14 +1,33 @@
+{% load static %}
 <!DOCTYPE html>
 
 <html>
     <head>
-        <title>Hello World</title>
+        
+        <!-- Link your custom CSS -->
+        <link rel="stylesheet" href="{% static 'css/styles.css' %}">
+
+        <title>GREGGORDINATES</title>
+
+        <!-- Global CSS -->
+         <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+
     </head>
 
     <body>
-        <h1>Greggordinates</h1>
+        <br>
+        <br>
+        <h1 style="color:#ffffff ; margin-top: 20px; margin-bottom: 10px; 
+            letter-spacing: 1.5px;" >
+            GREGGordinates
+        </h1>
+        <p> "Everything is relative to greggs, and only that is absolute." </p>
 
         {% block content %}
         {% endblock %}
+
+        <!-- Global JS -->
+        <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+
     </body>
 </html>
diff --git a/websiteapp/templates/websiteapp/decode.html b/websiteapp/templates/websiteapp/decode.html
index 78c7d9f..4cf9fd1 100644
--- a/websiteapp/templates/websiteapp/decode.html
+++ b/websiteapp/templates/websiteapp/decode.html
@@ -2,6 +2,28 @@
 
 {% block content %}
 
-<p> Landing Page </p>
+<br><br>
+<h3>What's your cool GREGGordinates :3</h3>
+<textarea id="greggordinates" name="greggordinates" rows="4" cols="50">
+
+</textarea>
+
+<br><br>
+
+
+<div class="btn-group">
+    <a href="{% url 'landing_page' %}">
+        <button>
+            ←
+        </button>
+    </a>
+    <a href="{% url 'encode_result' %}">
+        <button onclick="saveAndGo()">
+            Get lame location :/
+        </button>
+    </a>
+</div>
+
+
 
 {% endblock %}
diff --git a/websiteapp/templates/websiteapp/encode.html b/websiteapp/templates/websiteapp/encode.html
index 78c7d9f..fa060c0 100644
--- a/websiteapp/templates/websiteapp/encode.html
+++ b/websiteapp/templates/websiteapp/encode.html
@@ -2,6 +2,79 @@
 
 {% block content %}
 
-<p> Landing Page </p>
+<p id="result"></p>
+
+<br>
+
+<div id="map" data-mode=""></div>
+
+<input
+    type="hidden"
+    data-map-markers=""
+    value=""
+    name="map-geojson-data"
+    id="mapData"
+/>
+
+
+<p id="coords">Click on the map to choose your lame location</p>
+
+
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        // Initialize map
+        const map = L.map('map').setView([54.5, -3], 6); 
+
+        // Add OpenStreetMap tiles
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+            attribution:
+            '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
+        }).addTo(map);
+
+        let marker;
+
+        // When the user clicks the map
+        map.on('click', function (e) {
+            const lat = e.latlng.lat.toFixed(6);
+            const lng = e.latlng.lng.toFixed(6);
+
+            // Remove existing marker (if any)
+            if (marker) map.removeLayer(marker);
+
+            // Add marker at clicked location
+            marker = L.marker([lat, lng]).addTo(map);
+
+            // Show coordinates
+            document.getElementById('coords').textContent = `Coordinates: ${lat}, ${lng}`;
+
+            // Save coordinates in hidden input as JSON
+            const geoData = JSON.stringify({ lat: lat, lng: lng });
+            document.getElementById('mapData').value = geoData;
+
+            console.log("Saved to hidden input:", geoData);
+        });
+    });
+</script>
+
+
+<div class="btn-group">
+    <a href="{% url 'landing_page' %}">
+        <button>
+            ←
+        </button>
+    </a>
+    <a href="{% url 'encode_result' %}">
+        <button onclick="saveAndGo()">
+            GREGG IT!
+        </button>
+    </a>
+</div>
+
+<style>
+
+</style>
+
+<!-- pass coordinates to django and directs to result page -->
 
 {% endblock %}
diff --git a/websiteapp/templates/websiteapp/encode_result.html b/websiteapp/templates/websiteapp/encode_result.html
index 78c7d9f..adf06d1 100644
--- a/websiteapp/templates/websiteapp/encode_result.html
+++ b/websiteapp/templates/websiteapp/encode_result.html
@@ -2,6 +2,6 @@
 
 {% block content %}
 
-<p> Landing Page </p>
+<p> encode result </p>
 
 {% endblock %}
diff --git a/websiteapp/templates/websiteapp/landing_page.html b/websiteapp/templates/websiteapp/landing_page.html
index 78c7d9f..709b053 100644
--- a/websiteapp/templates/websiteapp/landing_page.html
+++ b/websiteapp/templates/websiteapp/landing_page.html
@@ -1,7 +1,37 @@
 {% extends 'websiteapp/base.html' %}
+{% load static %}
 
 {% block content %}
 
-<p> Landing Page </p>
+<img src="{% static 'img/drawing.png' %}" alt="Cute map drawing">
+
+<div class="btn-group">
+    <a href="{% url 'encode' %}">
+        <button>Encode</button>
+    </a>   
+    <a href="{% url 'decode' %}">
+        <button>Decode</button>
+    </a>   
+</div>
+
+<style>
+.btn-group {
+    display: flex;              /* places buttons side-by-side */
+    justify-content: center;    /* centers them horizontally */
+    align-items: center;        /* aligns vertically */
+    gap: 30px;   
+    margin-top: 0px;
+}
+
+.btn-group {
+    padding: 120px 120px;
+}
+
+.btn-group button {
+    padding: 40px 40px;
+    font-size:25px;
+    margin-top: 0px;
+}
+</style>
 
 {% endblock %}
diff --git a/websiteapp/urls.py b/websiteapp/urls.py
index ccdd49b..d6d9ed6 100644
--- a/websiteapp/urls.py
+++ b/websiteapp/urls.py
@@ -2,9 +2,9 @@ from django.urls import path
 from . import views
 
 urlpatterns = [
-    path('', views.landing_page),
-    path('encode', views.encode_view),
-    path('encode/result', views.encode_result_view),
-    path('decode', views.decode_view),
-    path('decode/result', views.decode_result_view),
+    path('', views.landing_page, name='landing_page'),
+    path('encode', views.encode_view, name='encode'),
+    path('encode/result', views.encode_result_view, name='encode_result'),
+    path('decode', views.decode_view, name='decode'),
+    path('decode/result', views.decode_result_view, name='decode_result'),
 ]