diff --git a/public/index.html b/public/index.html
index f191e22..607f9a2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,7 +12,10 @@
 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 	<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-    
+  
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Moul&display=swap" rel="stylesheet">
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-1S5BF4RKRZ"></script>
     <script>
diff --git a/src/components/Landing.js b/src/components/Landing.js
index 43c90eb..edd3d35 100644
--- a/src/components/Landing.js
+++ b/src/components/Landing.js
@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import StarIcon from "../images/Star.svg";
 
 const Container = styled.div`
   width: 100%;
@@ -7,6 +8,7 @@ const Container = styled.div`
   position: relative;
   margin: auto;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   background: #d5e7f2;
@@ -15,17 +17,73 @@ const Container = styled.div`
   z-index: 1;
 `;
 
+const TitleContainer = styled.div`
+  width: 100%;
+  justify-content: center;
+  background: #265ca9;
+  background-position: center;
+  display: flex;
+`;
+
+const Star = styled.div`
+  background-image: url(${StarIcon});
+  background-size: contain; 
+  background-repeat: no-repeat; 
+  background-position: center; 
+  z-index: 2;
+  width: 3em;
+  margin-bottom: 0.75em;
+`;
+
+const Title = styled.div`
+    width: auto;
+    font-family: "Moul";
+    font-size: clamp(40px, 5vw, 75px);
+    font-weight: 400;
+    line-height: normal;
+    text-align: center;
+    color: #FBFBFB;
+    margin: 0 1.25em;
+`
+
+const WhiteStripe = styled.div`
+  width: 100%;
+  height: 1em;
+  margin: 0 auto;
+  background: #ffffff;
+  position: relative;
+  z-index: 1;
+`;
+
+const RedStripe = styled.div`
+  width: 100%;
+  height: 1em;
+  margin: 0 auto;
+  background: #cd2027;
+  position: relative;
+  z-index: 1;
+`;
+
+
 const Landing = () => {
     
     return (
         <>
             <Container>
+            <TitleContainer>
+            <Star />
+            <Title>POLLING AVERAGES</Title>
+            <Star />
+            </TitleContainer>
+            <WhiteStripe />
+            <RedStripe />
             <iframe src="https://public.flourish.studio/visualisation/20011174/embed" 
         width="100%" 
         height="600px" 
         frameborder="0" 
         scrolling="no" 
-        allowfullscreen>
+        allowfullscreen
+        title="polling averages">
         </iframe>
             </Container>
         </>
diff --git a/src/images/Star.svg b/src/images/Star.svg
new file mode 100644
index 0000000..f388752
--- /dev/null
+++ b/src/images/Star.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="91" height="87" viewBox="0 0 91 87" fill="none">
+  <path d="M45.8429 0.687561L56.4429 33.311H90.7452L62.994 53.4734L73.594 86.0969L45.8429 65.9345L18.0917 86.0969L28.6917 53.4734L0.940536 33.311H35.2429L45.8429 0.687561Z" fill="#FBFBFB"/>
+</svg>
\ No newline at end of file