diff --git a/components/Banner.module.scss b/components/Banner.module.scss
index 3f3bcf6..d148ae6 100644
--- a/components/Banner.module.scss
+++ b/components/Banner.module.scss
@@ -13,7 +13,7 @@
   font-weight: bold;
   position: relative;
   top: 40vh;
-  margin-left: 85vw;
+  text-align: right;
   margin-right: 4vw;
   text-decoration: underline;
   text-underline-offset: 0.3em;
diff --git a/components/SideNav.scss b/components/SideNav.scss
new file mode 100644
index 0000000..7ab7dd3
--- /dev/null
+++ b/components/SideNav.scss
@@ -0,0 +1,28 @@
+.SideNav{
+  width: max-content;
+  height: max-content;
+  font-size: 1.1rem;
+  background-color: var(--clr-grey-850);
+  padding-right: 1em;
+  border-color:var(--clr-grey-100) ;
+  border-style: solid;
+  border-width: thin;
+  position: sticky;
+  top: 4.3em;
+  // 4.3 so the navigation box lines up under the navigation bar which is also sticky (I wasn't sure if there was a better way to line them up than using ems)
+  z-index: 1;
+
+
+  a:link{
+    color: var(--clr-grey-100);
+    font-weight: normal;
+  }
+  a:visited{
+    color: var(--clr-grey-100);
+    font-weight: normal;
+  }
+
+  a:hover{
+    border-bottom-style: solid;
+  }
+}
\ No newline at end of file
diff --git a/components/SideNav.tsx b/components/SideNav.tsx
new file mode 100644
index 0000000..720f13e
--- /dev/null
+++ b/components/SideNav.tsx
@@ -0,0 +1,20 @@
+import React, { ReactPropTypes } from 'react';
+import styles from './SideNav.module.scss'
+
+type Props = {
+  list?: string 
+  link?: string
+}
+const ListArray = ({list}: Props) => [list]
+const LinkArray = ({link}: Props) => [link]
+
+const NavigationAnchor = ({list}: Props) => (
+  <div className= {styles.SideNav}>
+    <ul>
+      <li><a>{ListArray}</a></li>
+    </ul>
+  </div>
+)
+
+
+export default NavigationAnchor
diff --git a/pages/global.scss b/pages/global.scss
index 2d5ea33..c3d21d2 100644
--- a/pages/global.scss
+++ b/pages/global.scss
@@ -44,6 +44,7 @@
   --clr-accent-500: hsl(32, 98%, 53%);
 
   --clr-grey-900: hsl(0, 0%, 7%);
+  --clr-grey-850: hsl(0, 0%, 14%);
   --clr-grey-800: hsl(0, 0%, 20%);
   --clr-grey-700: hsl(0, 0%, 41%);
   --clr-grey-200: hsl(0, 0%, 87%);
diff --git a/pages/guides.tsx b/pages/guides.tsx
deleted file mode 100644
index 1dc619d..0000000
--- a/pages/guides.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import Link from 'next/link'
-import Layout from '../components/Layout'
-import Banner from '../components/Banner';
-import Button from '../components/ButtonPrimary';
-import Card from '../components/Card'
-
-const GuidesPage = () => (
-  <Layout title="Home | Next.js + TypeScript Example">
-    <Banner>Guides</Banner>
-    <h1>Hehehaha</h1>
-    <Button>eat my</Button>
-  </Layout>
-);
-  
-export default GuidesPage;
diff --git a/pages/resources.tsx b/pages/resources.tsx
index d2d2364..02a7839 100644
--- a/pages/resources.tsx
+++ b/pages/resources.tsx
@@ -1,9 +1,18 @@
-import Layout from '../components/Layout';
+import Layout from '../components/Layout'
+import Banner from '../components/Banner';
+import Button from '../components/ButtonPrimary';
+import Card from '../components/Card'
+import SideNav from '../components/SideNav';
 
-const ResourcesPage = () => (
+const GuidesPage = () => (
   <Layout title="Home | Next.js + TypeScript Example">
-    <h1>Resources</h1>
+    <Banner>Resources</Banner>
+    <SideNav list = 'dsa'></SideNav>
+    <h1>Hehehaha</h1>
+    <Button>eat my</Button>
+    <Card heading='BLSS' link='View full guide'>Blss is a staple of Breath of the wild speedrunning allowing you to traverse large distances almost instantly</Card>
+    <Card heading='BLSS' link='View full guide'>Blss is a staple of Breath of the wild speedrunning allowing you to traverse large distances almost instantly</Card>
   </Layout>
 );
-
-export default ResourcesPage;
+  
+export default GuidesPage;