diff --git a/components/menu.js b/components/menu.js
index 532710c..eccc69c 100644
--- a/components/menu.js
+++ b/components/menu.js
@@ -13,6 +13,8 @@ export default function Menu() {
                 <a href="#">Home</a>
                 <span>//</span>
                 <a href="/music">Music Feed</a>
+                <span>//</span>
+                <a href="/models">Models</a>
             </div>
         </section>
     )
diff --git a/pages/index.js b/pages/index.js
index edb726e..ce622e2 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -20,73 +20,73 @@ export default function Index() {
                 <title>Invesvpo | Landing Page</title>
             </Head>
 
-            <div className={styles.leftsidetint + " slide-in-down"}>
+            <section className={styles.leftsidetint + " slide-in-down"}>
                 <a href="/"><img src="/logo.png"/></a>
                 <footer>
                     <a href="https://dubbelnull.com/" target="_blank">Made by DubbelNull</a> with NextJS and Vercel
                 </footer>
-            </div>
+            </section>
 
-            <div className={styles.topcontainerbackg + " slide-in-right"}></div>
+            <section className={styles.content}>
+                <div className={styles.topcontainerbackg + " slide-in-right"}></div>
 
-            <div className={styles.topcontainer + " slide-in-left"}>
-                <div className={styles.topcontent}>
+                <div className={styles.topcontainer + " slide-in-left"}>
                     <Menu/>
-                </div>
-                <div className={styles.topcontent}>
-                    <h1>INVESVPO</h1>
-                    <p><div className="badge"><span>aka</span></div> Fuhz — Elikas — C2RW</p>
-                </div>
-            </div>
-
-            <div className={styles.bottomcontainer + " slide-in-up"}>
-                <div className={styles.topcontent}>
-                    <h3>
-                        {`Hey I'm Invesvpo, I make some cool 3d models including guns and I'm trying to learn more about it.`} <br/>
-                        {`I also make music, so check out my Spotify and SoundCloud below. `}<br/>
-                        {`A lot of my songs are made to be downtempo ambient songs.`}
-                    </h3>
+                    <div>
+                        <h1>INVESVPO</h1>
+                        <p><div className="badge"><span>aka</span></div> Fuhz — Elikas — C2RW</p>
+                    </div>
                 </div>
 
-                <div className={styles.topcontent + " " + styles.links}>
+                <div className={styles.bottomcontainer + " slide-in-up"}>
                     <div>
-                        <a target="_blank" href="https://twitter.com/invesvpo">
-                            <span>
-                                <p>Twitter</p>
-                                <FontAwesomeIcon icon={faTwitter} />
-                            </span>
-                        </a>
+                        <h3>
+                            {`Hey I'm Invesvpo, I make some cool 3d models including guns and I'm trying to learn more about it.`} <br/>
+                            {`I also make music, so check out my Spotify and SoundCloud below. `}<br/>
+                            {`A lot of my songs are made to be downtempo ambient songs.`}
+                        </h3>
+                    </div>
+
+                    <div className={styles.topcontent + " " + styles.links}>
+                        <div>
+                            <a target="_blank" href="https://twitter.com/invesvpo">
+                                <span>
+                                    <p>Twitter</p>
+                                    <FontAwesomeIcon icon={faTwitter} />
+                                </span>
+                            </a>
 
-                        <a target="_blank" href="https://discord.com/users/221984151161667585">
-                            <span>
-                                <p>Discord</p>
-                                <FontAwesomeIcon icon={faDiscord} />
-                            </span>
-                        </a>
+                            <a target="_blank" href="https://discord.com/users/221984151161667585">
+                                <span>
+                                    <p>Discord</p>
+                                    <FontAwesomeIcon icon={faDiscord} />
+                                </span>
+                            </a>
 
-                        <a target="_blank" href="https://soundcloud.com/invesvpo">
-                            <span>
-                                <p>SoundCloud</p>
-                                <FontAwesomeIcon icon={faSoundcloud} />
-                            </span>
-                        </a>
+                            <a target="_blank" href="https://soundcloud.com/invesvpo">
+                                <span>
+                                    <p>SoundCloud</p>
+                                    <FontAwesomeIcon icon={faSoundcloud} />
+                                </span>
+                            </a>
 
-                        <a target="_blank" href="mailto:">
-                            <span>
-                                <p>Email</p>
-                                <FontAwesomeIcon icon={faEnvelope} />
-                            </span>
-                        </a>
+                            <a target="_blank" href="mailto:">
+                                <span>
+                                    <p>Email</p>
+                                    <FontAwesomeIcon icon={faEnvelope} />
+                                </span>
+                            </a>
 
-                        <a target="_blank" href="https://steamcommunity.com/id/Invesvpo/">
-                            <span>
-                                <p>Steam</p>
-                                <FontAwesomeIcon icon={faSteam} />
-                            </span>
-                        </a>
+                            <a target="_blank" href="https://steamcommunity.com/id/Invesvpo/">
+                                <span>
+                                    <p>Steam</p>
+                                    <FontAwesomeIcon icon={faSteam} />
+                                </span>
+                            </a>
+                        </div>
                     </div>
                 </div>
-            </div>
+            </section>
         </div>
     )
 }
\ No newline at end of file
diff --git a/pages/models.js b/pages/models.js
new file mode 100644
index 0000000..d03ebbf
--- /dev/null
+++ b/pages/models.js
@@ -0,0 +1,9 @@
+import Head from 'next/head'
+
+export default function Models() {
+    return (
+        <div>
+            
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/pages/music.js b/pages/music.js
index dfb34fc..0689bdb 100644
--- a/pages/music.js
+++ b/pages/music.js
@@ -1,13 +1,4 @@
 import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Index.module.css'
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faDiscord } from '@fortawesome/free-brands-svg-icons'
-import { faTwitter } from '@fortawesome/free-brands-svg-icons'
-import { faSpotify } from '@fortawesome/free-brands-svg-icons'
-import { faSoundcloud } from '@fortawesome/free-brands-svg-icons'
-import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
 
 export default function Music() {
     return (
diff --git a/styles/Index.module.css b/styles/Index.module.css
index 1021c60..4848e3b 100644
--- a/styles/Index.module.css
+++ b/styles/Index.module.css
@@ -10,14 +10,22 @@
 
 
 /* page layout */
+.page {
+    display: flex;
+}
+
+.page .content {
+    flex-grow: 1;
+}
 
-.topcontent {
-    width: var(--page-width);
-    margin: 0 auto;
+.content {
+    position: relative;
+    width: 100%;
 }
 
 .topcontainerbackg {
     height: 40vh;
+    z-index: 0;
     background-color: #2940D3;
 
     -ms-transform: skewX(-20deg);
@@ -26,20 +34,22 @@
 }
 
 .topcontainer {
-    position: absolute;
+    padding: 0 var(--padding-xl);
     top: 0;
+    right: 0;
     left: 0;
-    width: 100vw;
+    bottom: 0;
+    position: absolute;
     height: 40vh;
     display: flex;
     flex-direction: column;
-    align-items: end;
+    align-items: start;
     justify-content: space-between;
     color: white;
     background-image: url('/gun.png');
     background-size: contain;
     background-repeat: no-repeat;
-    background-position: right;
+    background-position: right center;
 }
 
 .topcontainer h1 {
@@ -52,6 +62,7 @@
 }
 
 .bottomcontainer {
+    padding: 0 var(--padding-xl);
     height: 60vh;
     background-color: #232323;
     display: flex;
@@ -63,12 +74,8 @@
 }
 
 .leftsidetint {
-    position: absolute;
-    z-index: 10;
-    top: 0;
-    left: 0;
+    z-index: 1;
     width: 10vw;
-    height: 100vh;
     background-color: #1a1a1a;
     display: flex;
     flex-direction: column;
@@ -84,6 +91,7 @@
 /* items */
 
 .links {
+    width: 100%;
     display: flex;
     flex-grow: 1;  
     align-items: center;
@@ -99,7 +107,7 @@
 
 .links div a {
     text-align: center;
-    padding: var(--padding) var(--padding-lg) var(--padding) var(--padding-xl);
+    padding: var(--padding) var(--padding-xl);
     transition-duration: var(--transition-speed);
     background-color: #2940D3;
 
@@ -108,14 +116,30 @@
     transform: skewX(-20deg);
 }
 
+.links div a:hover {
+    -ms-transform: skewX(0deg);
+    -webkit-transform: skewX(0deg);
+    transform: skewX(0deg);
+    transition-duration: var(--transition-speed);
+}
+
+.links div a:hover span {
+    -ms-transform: skewX(0deg);
+    -webkit-transform: skewX(0deg);
+    transform: skewX(0deg);
+    transition-duration: var(--transition-speed);
+}
+
 .links div p {
     margin: unset;
 }
 
 .links div a span {
+    transition-duration: var(--transition-speed);
     -ms-transform: skewX(20deg);
     -webkit-transform: skewX(20deg);
-    transform: skewX(20deg);  
+    transform: skewX(20deg); 
+
     display: inline-flex;
     align-items: center;
     justify-content: space-between;
@@ -158,7 +182,7 @@
     }
 }
 
-@media (max-aspect-ratio: 5/3) {
+@media (max-aspect-ratio: 5/4) {
     .leftsidetint {
         display: none;
     }
diff --git a/styles/globals.css b/styles/globals.css
index c9e0aa5..6f3ebaa 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -3,6 +3,7 @@
   --padding: 10px;
   --padding-lg: 20px;
   --padding-xl: 50px;
+  --padding-xxl: 100px;
 
   --font-xl: 5em;
   --font-lg: 1.5em;
@@ -90,7 +91,8 @@ img {
 .slide-in-right {
   animation-name: slide-in-right;
   animation-duration: 1s;
-  margin-right: 10vw;
+  margin-right: var(--padding-xxl);
+  margin-left: -50vw;
   animation-timing-function: ease-in-out;
 }
 
@@ -98,8 +100,11 @@ img {
   0% {
     margin-right: 150vw;
   }
+  25% {
+    margin-right: 150vw;
+  }
   100% {
-      margin-right: 10vw;
+      margin-right: var(--padding-xxl);
   }
 
 }
@@ -147,15 +152,15 @@ img {
   animation-name: slide-in-down;
   animation-duration: 0.4s;
   overflow-y: hidden;
-  top: 0vh;
+  margin-top: 0vh;
   animation-timing-function: ease-in-out;
 }
 
 @keyframes slide-in-down {
   0% {
-    top: 100vh;
+    margin-top: 100vh;
   }
   100% {
-    top: 0vh;
+    margin-top: 0vh;
   }
 }
\ No newline at end of file