diff --git a/src/assets/base.css b/src/assets/base.css
index ed538a46637341865b93fe021f92ff0bb44ce032..ef9aa2129e6fcceddbc2bdcfc9dcddf877b616b9 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -111,8 +111,44 @@ body {
     'Droid Sans',
     'Helvetica Neue',
     sans-serif;
-  font-size: 15px;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+:root{
+  font-size: 12.5px;
+}
+
+@media only screen and (max-width: 1000px) {
+  :root{
+    font-size: 10px;
+  }
+}
+
+@media only screen and (min-width: 1200px){
+  :root{
+    font-size: 15px;
+  }
+
+}
+
+h1{
+  font-size: 5em;
+}
+
+h2{
+  font-size: 2.5em;
+}
+
+h3{
+  font-size: 1em;
+}
+
+h4{
+  font-size: 0.5em;
+}
+
+h5{
+  font-size: 0.25em;
+}
\ No newline at end of file
diff --git a/src/components/InfoComponent.vue b/src/components/InfoComponent.vue
index 95ef22aeba5aaef528934533550e94cb16ffe5e4..ef764c20eef3e9d63558610ace46c2e1ccc6a71f 100644
--- a/src/components/InfoComponent.vue
+++ b/src/components/InfoComponent.vue
@@ -4,8 +4,8 @@
 
 <template>
   <div id = InfoComponent>
-    <h1 id = Quote><strong>Sparetips: </strong>Sett av et jevnt beløp hver måned på sparekonto eller lignende.</h1>
-    <h1 id = TotalSavings>VÃ¥re brukere har spart til sammen <strong>5000</strong> nok</h1>
+    <h2 id = Quote><strong>Sparetips: </strong>Sett av et jevnt beløp hver måned på sparekonto eller lignende.</h2>
+    <h2 id = TotalSavings>VÃ¥re brukere har spart til sammen <strong>5000</strong> nok</h2>
   </div>
 </template>
 
diff --git a/src/views/FrontPage/StartView.vue b/src/views/FrontPage/StartView.vue
index 4e81d7df490e91587dbfba58a45a5a666d7f83fb..87deeb1f0fe77d58b4518da86aba9e6a286b4156 100644
--- a/src/views/FrontPage/StartView.vue
+++ b/src/views/FrontPage/StartView.vue
@@ -28,6 +28,8 @@ function navigateToLogin(){
 
 #StartPage{
   background-image: url("../../assets/farm.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
   min-width: 100%;
   max-width: 100%;
   min-height: 100%;
@@ -39,7 +41,6 @@ function navigateToLogin(){
 
 #heading{
   text-align: center;
-  font-size: 250%;
   background-color: rgba(255,255,255,0.8);
   border-radius: 20px;
   border: 2px solid var(--color-border);
@@ -78,7 +79,6 @@ function navigateToLogin(){
 #LogInButton{
   min-width: 100%;
   padding: 30px;
-  font-size: 200%;
   background-color: var(--color-confirm-button);
   color: var(--color-buttonText);
   border: 0;