diff --git a/components/back-anchor/back-anchor.js b/components/back-anchor/back-anchor.js
index 789ad5d..9f843dc 100644
--- a/components/back-anchor/back-anchor.js
+++ b/components/back-anchor/back-anchor.js
@@ -1,20 +1,11 @@
-const template = `
-    <a href="javascript:history.back()">
-        <img class="img-back" src="studio/assets/icons/arrow-back.svg" alt="go back" />
-    </a>`;
-
 class BackAnchor extends HTMLElement {
-    constructor() {
-        super();
-
-        var shadow = this.attachShadow({ mode: 'open' });
-        shadow.innerHTML = template;
-    }
-
     connectedCallback() {
         this.classList.add('primary-button');
         this.classList.add('back-anchor');
-        this.shadowRoot.querySelector('.img-back').src = `${this.getAttribute('assetsUrl')}/icons/arrow-back.svg`;
+        var shadow = this.attachShadow({ mode: 'open' });
+        shadow.innerHTML = `<a href="${this.getAttribute('href')}">
+            <img class="img-back" src="${this.getAttribute('assetsUrl')}/icons/arrow-back.svg" alt="go back" />
+        </a>`;
     }
 }
 
diff --git a/components/file-holder/file-holder.js b/components/file-holder/file-holder.js
index 9ea5d4e..b40101c 100644
--- a/components/file-holder/file-holder.js
+++ b/components/file-holder/file-holder.js
@@ -1,11 +1,20 @@
 const fileHolderTemplate = `
   <style>
+    .image-placeholder-wrapper {
+      position: relative;
+      width: 100%;
+      padding-top: 100%;
+    }
+
     .image-placeholder {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
-      height: 23.75em;
-      width: 23.75em;
       background: var(--passive-color);
       border: 1px solid var(--passive-color-dark);
       box-sizing: border-box;
@@ -20,7 +29,7 @@ const fileHolderTemplate = `
     }
   </style>
 
-  <div>
+  <div class="image-placeholder-wrapper">
     <div class="image-placeholder">
       Click to upload
     </div>
diff --git a/components/footer/footer.js b/components/footer/footer.js
index cc3a4a6..66f6df4 100644
--- a/components/footer/footer.js
+++ b/components/footer/footer.js
@@ -1,7 +1,7 @@
 const FooterContent = `
   <style>
     #footer{
-      padding: 2em 12vw;
+      padding: 2em 1.875em;
     }
 
     .lead {
@@ -14,7 +14,7 @@ const FooterContent = `
 
     .buttons > button,
     .buttons > a {
-        margin-right: 3.125em;
+        margin-right: 2em;
         cursor: pointer;
     }
 
diff --git a/components/map/map-elements.js b/components/map/map-elements.js
index 955c541..540180d 100644
--- a/components/map/map-elements.js
+++ b/components/map/map-elements.js
@@ -7,10 +7,16 @@ crossorigin=""/>`;
 // styles to hold classnames for the main map and additional maps
 const map_styles = `
 <style>
-    .map-pick-location{
+    :host {
+        display: block;
+        width: 100%;
+    }
+
+    .map-pick-location {
+        width: 100%;
         height: 380px;
-        width: 800px;
     }
+
     .map-foo-bar {
         height: 100px;
         width: 200px;
@@ -31,8 +37,7 @@ const map_styles = `
         padding-top: 0.3em;
     }
     .location-set-display {
-        visibility: hidden;
-        padding-top: 0;
+        display: none;
     }
     .use-my-location-button{
         background-color: white;
diff --git a/index.html b/index.html
index 37f048f..35aba55 100644
--- a/index.html
+++ b/index.html
@@ -30,8 +30,7 @@
             You can start creating your first AR project right now.
         </p>
 
-        <img class="splashscreen" src="./assets/img/splashscreen.png" alt="Demo image home page"/>
-
+        <img draggable="false" class="splashscreen" src="./assets/img/splashscreen.png"/>
         <p class="lead">Pick your project type</p>
 
         <div>
diff --git a/pages/location/index.html b/pages/location/index.html
index 1bfaddb..450ccf4 100644
--- a/pages/location/index.html
+++ b/pages/location/index.html
@@ -9,6 +9,7 @@
 
     <!-- import the webpage's stylesheet -->
     <link rel="stylesheet" href="../../style.css" />
+    <link rel="stylesheet" href="./location.css" />
 
     <!-- import the leaflet css and script -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" crossorigin=""
@@ -49,7 +50,7 @@
     <page-header assetsUrl="../../assets"></page-header>
 
     <div class="pages-content">
-        <back-anchor assetsUrl="../../assets"></back-anchor>
+        <back-anchor href="/" assetsUrl="../../assets"></back-anchor>
         <div class="pages-content-container">
             <div class="pages-content-element">
                 <p class="title">Location-based</p>
@@ -113,7 +114,8 @@
                 </label>
                 <p id="content-error" class="error"></p>
             </div>
-            <div id="content-preview" target="content-file">
+            <div id="content-preview" class="pages-content-element" target="content-file">
+                <file-holder></file-holder>
             </div>
         </div>
     </div>
diff --git a/pages/location/location.css b/pages/location/location.css
new file mode 100644
index 0000000..ce98baf
--- /dev/null
+++ b/pages/location/location.css
@@ -0,0 +1,46 @@
+.coordinates-input-container {
+    display: flex;
+    margin-bottom: 1em;
+}
+
+.coordinates-input-container > div {
+    padding: 1rem;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    text-align: justify;
+}
+
+.coordinates-input-container .input-number-tags {
+    padding-top: 2.5rem;
+    padding-left: 0;
+}
+
+.coordinates-input-wrapper {
+    margin-bottom: 1rem;
+}
+
+/* TODO: Remove duplicate */
+.add-location-container {
+    width: fit-content;
+    cursor: pointer;
+}
+
+/* TODO: Remove duplicate */
+.add-location-container {
+    display: flex;
+}
+
+.delete-coordinates-container > svg {
+margin-top: 2.5rem;
+}
+
+.remove-location-container {
+    display: flex;
+    cursor: pointer;
+}
+
+.add-location-icon {
+    margin-right: 0.4rem;
+}
+  
\ No newline at end of file
diff --git a/pages/main/main.css b/pages/main/main.css
index 20003e6..f2c5547 100644
--- a/pages/main/main.css
+++ b/pages/main/main.css
@@ -2,27 +2,28 @@
 .background {
   display: flex;
   flex-direction: column;
+  flex: 1 auto;
   width: 70vw;
-  min-height: 100vh;
   background: var(--secondary-color);
 }
 
 .content {
-  margin-left: 1.5em;
-  padding: 1.5em;
-  padding-right: 20vw;
-  padding-bottom: 0;
-}
-
-.content .title {
-    margin-top: 2em;
+  padding: 1.5em 1.875em;
+  width: 75ch;
+  max-width: 100%;
 }
 
 .splashscreen {
-  top: 0%;
-  position: absolute;
-  right: 8vw;
+  top: 10%;
+  position: fixed;
+  right: 10vw;
+  width: 40vw;
   height: 90%;
+  object-position: top center;
+  object-fit: contain;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
 }
 
 .main-content {
@@ -54,16 +55,14 @@
 }
 
 .radio-container .radio-title {
-    font-weight: bold;
-}
-
-.radio-container span {
-    margin-top: 1em;
+  font-weight: bold;
 }
 
 /* Hide the browser's default radio button */
 .radio-container input {
   position: absolute;
+  width: 0;
+  height: 0;
   opacity: 0;
   cursor: pointer;
 }
@@ -71,7 +70,7 @@
 /* Create a custom radio button */
 .checkmark {
   position: absolute;
-  top: 0;
+  top: 0.125em;
   left: 0;
   height: 1.3em;
   width: 1.3em;
@@ -114,13 +113,11 @@
 }
 
 /* Responsive */
-@media screen and (max-width: 900px) {
+@media screen and (max-width: 1280px) {
   .background {
     width: 100%;
   }
-}
 
-@media screen and (max-width: 1280px) {
   .splashscreen {
     display: none;
   }
diff --git a/pages/marker/index.html b/pages/marker/index.html
index 865de44..25952ed 100644
--- a/pages/marker/index.html
+++ b/pages/marker/index.html
@@ -9,7 +9,7 @@
 
     <!-- import the webpage's stylesheet -->
     <link rel="stylesheet" href="../../style.css" />
-    <link rel="stylesheet" href="../../pages/marker/marker.css" />
+    <link rel="stylesheet" href="./marker.css" />
 
     <!-- import studio-backend api -->
     <script
@@ -43,7 +43,7 @@
     <page-header assetsUrl="../../assets"></page-header>
     <img class="default-marker-hidden" style="position: absolute; top: 0; right: -1000px;" src="../../assets/default-marker-no-border.png"/>
     <div class="pages-content">
-        <back-anchor assetsUrl="../../assets"></back-anchor>
+        <back-anchor href="/" assetsUrl="../../assets"></back-anchor>
         <div class="pages-content-container">
             <div class="pages-content-element">
                 <p class="title">Marker-based</p>
@@ -71,9 +71,11 @@
                 </label>
                 <p id="marker-error" class="error"></p>
             </div>
-            <div id="marker-preview" target="marker-file">
-                <div class="marker">
-                    <img src="../../assets/default-marker.png" alt="Default marker png"/>
+            <div id="marker-preview" class="pages-content-element" target="marker-file">
+                <div class="marker-wrapper">
+                    <div class="marker">
+                        <img src="../../assets/default-marker.png"/>
+                    </div>
                 </div>
                 <div class="download-marker" style="display: flex; justify-content: flex-end; padding: 1em 0;">
                     <div class="download-default-marker">
@@ -110,12 +112,10 @@
                 </label>
                 <p id="content-error" class="error"></p>
             </div>
-            <div id="content-preview" target="content-file">
+            <div id="content-preview" class="pages-content-element" target="content-file">
                 <file-holder></file-holder>
             </div>
         </div>
-
-        <hr>
     </div>
     <page-footer></page-footer>
     <feedback-button></feedback-button>
diff --git a/pages/marker/marker.css b/pages/marker/marker.css
index b9e1f78..6e6ce7e 100644
--- a/pages/marker/marker.css
+++ b/pages/marker/marker.css
@@ -1,16 +1,23 @@
 #marker-preview {
     display: flex;
     flex-direction: column;
-    padding: 1em;
+}
+
+.marker-wrapper {
+    position: relative;
+    width: 100%;
+    padding-top: 100%;
 }
 
 .marker {
-    margin: 0 auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 23.75em;
-    width: 23.75em;
     background: var(--passive-color);
     border: 1px solid var(--passive-color-dark);
     box-sizing: border-box;
diff --git a/pages/publish-confirm/index.html b/pages/publish-confirm/index.html
index 179dd86..9c23e29 100644
--- a/pages/publish-confirm/index.html
+++ b/pages/publish-confirm/index.html
@@ -26,7 +26,7 @@
     <page-header assetsUrl="../../assets"></page-header>
 
     <div class="pages-content">
-        <back-anchor assetsUrl="../../assets"></back-anchor>
+        <back-anchor href="/publish/index.html" assetsUrl="../../assets"></back-anchor>
 
         <div class="pages-content-container">
             <div class="pages-content-element">
diff --git a/pages/publish/index.html b/pages/publish/index.html
index 8a39123..b356d3f 100644
--- a/pages/publish/index.html
+++ b/pages/publish/index.html
@@ -28,7 +28,7 @@
     <page-header assetsUrl="../../assets"></page-header>
 
     <div class="pages-content">
-        <back-anchor assetsUrl="../../assets"></back-anchor>
+        <back-anchor href="/" assetsUrl="../../assets"></back-anchor>
 
         <div class="pages-content-container">
             <div class="pages-content-element">
diff --git a/style.css b/style.css
index bc0d360..945aaa1 100644
--- a/style.css
+++ b/style.css
@@ -2,6 +2,22 @@
 @import url("https://fonts.googleapis.com/css?family=Chakra+Petch&display=swap");
 @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap");
 
+/* HTML & body */
+html, body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}
+
+body * {
+  box-sizing: border-box;
+}
+
 /* Color Variables */
 :root {
   --primary-color: #fff700;
@@ -122,11 +138,6 @@
   cursor: pointer;
 }
 
-/* body */
-body {
-  margin: 0;
-}
-
 hr {
   margin: 2.25em 0.625em;
   border: 1px solid var(--passive-color);
@@ -134,109 +145,67 @@ hr {
 
 page-header {
   display: flex;
+  flex: none;
   align-items: center;
-  position: fixed;
+  position: sticky;
+  top: 0;
   width: 100%;
   background: var(--passive-color);
   z-index: var(--max-z-index);
 }
 
 page-footer {
-  position: absolute;
   background: var(--secondary-color);
   width: 100%;
 }
 
 .pages-content {
   font-family: Source Sans Pro;
-  padding: 4em 12vw;
+  padding: 1.875em;
 }
 
 .pages-content-container {
   display: flex;
   align-items: flex-start;
-  margin-bottom: 2em;
+  width: 110ch;
+  max-width: 100%;
+}
+
+.pages-content-container + .pages-content-container{
+  margin-top: 2em;
 }
 
 .pages-content-element {
-  width: 50%;
-  padding: 1em;
-  max-width: 30em;
-  margin-right: 1em;
+  flex: 1;
+}
+
+.pages-content-element + * {
+  margin-left: 2em;
 }
 
-/* TODO: move this to location.css */
 .pages-content-element .lead {
   margin-top: 0;
 }
 
-/* TODO: move this to location.css */
 .pages-content-container:first-of-type {
   margin-bottom: 2.25em;
 }
 
-/* TODO: resolve duplicate conflict. move this to the back-anchor component. */
+/* TODO: move this to the back-anchor component. */
 .back-anchor {
-  padding: 1em 0em;
   height: 3rem;
-}
-.coordinates-input-wrapper {
-  margin-bottom: 1rem;
-}
-
-.back-anchor {
   padding: 1em;
   font-size: 1em;
 }
 
-/* TODO: move .coordinates-input-container to location.css */
-.coordinates-input-container {
-  display: flex;
-  margin-bottom: 1em;
-}
-
-.coordinates-input-container .input-number-tags {
-    padding-left: 0;
-}
-
-.add-location-container {
-    width: fit-content;
-    cursor: pointer;
-}
-
-.coordinates-input-container > div {
-  padding: 1rem;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  text-align: justify;
-}
-
-.delete-coordinates-container > svg {
-  margin-top: 2.5rem;
-}
-
-.remove-location-container {
-    display: flex;
-    cursor: pointer;
-}
-
-.add-location-container {
-  display: flex;
-}
-
-.add-location-icon {
-  margin-right: 0.4rem;
-}
-
 .input-container label {
   font-family: Source Sans Pro;
   font-size: 0.875rem;
 }
 
 .map-buttons-container {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 }
 
 .text-input {
@@ -257,21 +226,26 @@ input:focus {
 #content-preview {
   display: flex;
   flex-direction: column;
+  width: 100%;
 }
 
 .download-default-marker {
   display: flex;
-  vertical-align: middle;
-  font-style: italic;
+  align-items: center;
   font-weight: bold;
   font-size: 18px;
+  line-height: 1;
+}
+
+.download-default-marker svg {
+  display: block;
+  margin-right: 0.5em;
 }
 
 .beta {
   font-family: Source Sans Pro;
-  margin-top: 5em;
   background-color: #fff700;
-  padding: 1em;
+  padding: 1em 1.875em;
 }
 
 .repo-url {
@@ -310,6 +284,11 @@ input:focus {
   .pages-content-container {
     flex-direction: column;
   }
+
+  .pages-content-container > * {
+    margin-left: 0;
+  }
+
   .pages-content-element {
     width: 100%;
   }