diff --git a/frontend/src/Components/LandingPage.tsx b/frontend/src/Components/LandingPage.tsx
index 4645a7f940a898de4a893bad19d0d67f82f8bd92..2e3bc0d97d6945df4df64200947cb527b9cf95c2 100644
--- a/frontend/src/Components/LandingPage.tsx
+++ b/frontend/src/Components/LandingPage.tsx
@@ -45,12 +45,14 @@ class LandingPage extends React.Component<props, state> {
                     <p>Favorites</p>
                     <ul>{this.state.favorites}</ul>
                 </div>
+                <div className={'flex2'}>
                 <div className={'navbutton left'}>
                     <NavButton direction={"left"}/>
                 </div>
                 <div className={'navbutton right'}>
                     <NavButton direction={"right"}/>
                 </div>
+                </div>
             </div>
         );
     }
diff --git a/frontend/src/SVGs.tsx b/frontend/src/SVGs.tsx
index 0832b241b3816051cd66bb7225f475e1217382d6..1338ecdf69d0b72a4a388ab473b27fb3f0667760 100644
--- a/frontend/src/SVGs.tsx
+++ b/frontend/src/SVGs.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 export default [ // Collection of Artworks that will be displayed
-  <svg viewBox={"0 0 200 80"}>
+  <svg>
     <rect width={"200"} height={80} fill={"blue"} />
   </svg>,
   <svg viewBox={"0 0 200 80"}>
diff --git a/frontend/src/Style/LandingPage.css b/frontend/src/Style/LandingPage.css
index 7695dfb2d6487dc89c9a39975fdf2442420aad44..a0a6f9ae173b4da368ea50b1f6ec0ec2a2294b1c 100644
--- a/frontend/src/Style/LandingPage.css
+++ b/frontend/src/Style/LandingPage.css
@@ -15,9 +15,9 @@
     font-family: Arial, Helvetica, sans-serif; 
 }
 
-.welcome-svg { 
+.welcome-svg {
     grid-area: welcomesvg;
-    place-self: center; 
+    place-self: center;
 }
 
 .favorites {
@@ -43,9 +43,82 @@
 }
 
 .navbutton.right {
-    grid-area: right;
-    place-self: center;
-    position: fixed;
-    top: 50%;
-    right: 5%;   
+    grid-area: navbutton-right;
+}
+
+.flex2 {
+
+}
+
+@media (orientation: portrait){
+    .title {
+        font-size: xx-large;
+    }
+
+    .landing-page {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .favorites {
+        font-size: large;
+        padding: 0;
+    }
+
+    .welcome-p {
+        margin: 0px;
+        margin-bottom: 10px;
+        font-size: large;
+    }
+
+    .navbutton.right {
+    }
+
+    .navbutton.left {
+    }
+
+    .flex2 {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+    }
+}
+/**
+@media (orientation: portrait){
+    .title {
+        font-size: xx-large;
+    }
+
+    .landing-page {
+        grid-template-columns: 1fr;
+        grid-template-rows: 0.5fr 1fr 1fr 1fr;
+        grid-template-areas:
+    ". Title ."
+    ". welcome-svg ."
+    ". welcome-p ."
+    ". navbuttons .";
+        justify-content: start;
+    }
+
+    .favorites {
+        padding-top: 10rem;
+        font-size: large;
+    }
+
+    .welcome-p {
+        margin: 0px;
+        margin-bottom: 10px;
+        font-size: large;
+    }
+
+    .navbutton.right {
+        grid-area: navbuttons;
+        place-self: center;
+    }
+
+    .navbutton.left {
+        grid-area: navbuttons;
+    }
 }
+**/
\ No newline at end of file
diff --git a/frontend/src/Style/MainPage.css b/frontend/src/Style/MainPage.css
index c3f53d6544978fcf5afa09bd15881ee919bc3924..17ba418a6486bedc1f4246db31c1d2728783753a 100644
--- a/frontend/src/Style/MainPage.css
+++ b/frontend/src/Style/MainPage.css
@@ -4,4 +4,26 @@
 
 .header {
     background-color: grey;
+}
+
+.navbutton {
+    grid-row: 3 / 4;
+    display: flex;
+}
+
+.navbutton.left {
+    grid-column: 1 / 2;
+    flex-direction: row-reverse;
+    margin-right: 10rem;
+}
+.navbutton.right {
+    grid-column: 3 / 4;
+    margin-left: 10rem;
+}
+
+.navbutton button {
+    font-size: large;
+    width: 5rem;
+    height: 2rem;
+    margin-bottom: 3rem;
 }
\ No newline at end of file