diff --git a/.gitignore b/.gitignore
index 10b7838..cdfd32f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,6 @@
 dist
+.DS_Store
+*/.DS_Store
 node_modules
 package-lock.json
 yarn-error.log
diff --git a/package.json b/package.json
index 51f61ab..eca8903 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "vue": "^2.5.2",
     "vue-axios": "^2.1.2",
     "vue-resource": "^1.5.1",
+    "vue-router": "^3.0.2",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index 7a6e6dd..b150251 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app" class="container">
-    <home></home>
+    <router-view />
 
   </div>
 </template>
@@ -8,6 +8,7 @@
 <script>
   import Vue from 'vue'
   import Home from '@/components/Home.vue'
+  import routes from '@/routes'
 
   export default {
     name: 'App',
diff --git a/src/assets/fonts/ambroise-std-demi.ttf b/src/assets/fonts/ambroise-std-demi.ttf
new file mode 100644
index 0000000..37b83c1
Binary files /dev/null and b/src/assets/fonts/ambroise-std-demi.ttf differ
diff --git a/src/assets/fonts/nova.ttf b/src/assets/fonts/nova.ttf
new file mode 100644
index 0000000..f254387
Binary files /dev/null and b/src/assets/fonts/nova.ttf differ
diff --git a/src/assets/fonts/proxima-nova-thin.ttf b/src/assets/fonts/proxima-nova-thin.ttf
new file mode 100644
index 0000000..aa7749d
Binary files /dev/null and b/src/assets/fonts/proxima-nova-thin.ttf differ
diff --git a/src/assets/fonts/proxima-nova.ttf b/src/assets/fonts/proxima-nova.ttf
new file mode 100644
index 0000000..aa7749d
Binary files /dev/null and b/src/assets/fonts/proxima-nova.ttf differ
diff --git a/src/components/EditEvent.vue b/src/components/EditEvent.vue
new file mode 100644
index 0000000..23556c7
--- /dev/null
+++ b/src/components/EditEvent.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="parent">
+    <h1>add new event</h1>
+
+<div class="container">
+  <div class="cont2" data-block-type="9">
+    <div class="sqs-block-content">
+      <div class="form-wrapper">
+        <div class="form-inner-wrapper">
+          <form>
+            <div class="field-list clear">
+              <fieldset class="form-item fields name required">
+              <div class="title">name <span class="required">*</span></div>
+                <div class="field first-name">
+                  <label class="caption"><input class="field-element field-control" name="fname" x-autocompletetype="given-name" type="date" spellcheck="false" maxlength="30" data-title="First">
+                  Fra Dato</label>
+                </div>
+                <div class="field last-name">
+                  <label class="caption"><input class="field-element field-control" name="lname" x-autocompletetype="surname" type="text" spellcheck="false" maxlength="30" data-title="Last">
+                  Til Dato</label>
+                </div>
+              </fieldset>
+           
+
+
+
+              <div class="form-item field email required">
+                <label class="title" for="email2-field">email address <span class="required">*</span></label>
+                
+                <input class="field-element" name="email" x-autocompletetype="email" type="text" spellcheck="false">
+              </div>            
+              <div class="form-item field text required">
+                <label class="title" for="text3-field">subject <span class="required">*</span></label>
+                
+                <input class="field-element text" type="text">
+              </div>
+
+              <div class="form-item field textarea required">
+                <label class="title" for="textarea4-field">love letter <span class="required">*</span></label>
+                
+                <textarea class="field-element "></textarea>
+              </div>
+
+        </div> 
+      <div class="form-button-wrapper form-button-wrapper--align-left">
+        <input class="button sqs-system-button sqs-editable-button" type="submit" value="Submit">
+      </div>
+
+      <div class="hidden form-submission-text">Thank you!</div>
+
+      <div class="hidden form-submission-html" data-submission-html=""></div>
+    </form>
+
+  </div>
+
+</div>
+</div></div></div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  components: {
+
+  },
+  data() {
+    return {
+
+    }
+  },
+  created() {},
+  beforeMount() {},
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .parent {
+    display: block;
+    width: 900px;
+    margin: 4rem auto;
+  }
+
+
+  .container {
+    color: rgba(0, 0, 0, 0.701961);
+    display: block;
+    margin: 0 auto;
+    font-family: 'Proxima Nova';
+    margin-top: 3rem;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 300;
+    height: 502px;
+    letter-spacing: normal;
+    line-height: 22.399999618530273px;
+    padding-right: 0px;
+    width: 612px;
+  }
+
+  .cont2 {
+    box-shadow: rgba(128, 128, 128, 0) 0px 0px 0px 1px inset;
+    clear: both;
+    color: rgba(0, 0, 0, 0.701961);
+    display: block;
+    font-family: 'Proxima Nova';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 300;
+    height: 485px;
+    letter-spacing: normal;
+    line-height: 22.399999618530273px;
+    outline-color: rgba(0, 0, 0, 0.701961);
+    outline-style: none;
+    outline-width: 0px;
+    padding-bottom: 17px;
+    padding-left: 15px;
+    padding-right: 15px;
+    padding-top: 0px;
+    position: relative;
+    transition-delay: 0s;
+    transition-duration: 0.2s;
+    transition-property: box-shadow;
+    transition-timing-function: ease-in-out;
+    width: 582px;
+  }
+
+  .form-item {
+    border-bottom-color: rgba(0, 0, 0, 0.701961);
+    border-bottom-style: none;
+    border-bottom-width: 0px;
+    border-image-outset: 0px;
+    border-image-repeat: stretch;
+    border-image-slice: 100%;
+    border-image-source: none;
+    border-image-width: 1;
+    border-left-color: rgba(0, 0, 0, 0.701961);
+    border-left-style: none;
+    border-left-width: 0px;
+    border-right-color: rgba(0, 0, 0, 0.701961);
+    border-right-style: none;
+    border-right-width: 0px;
+    border-top-color: rgba(0, 0, 0, 0.701961);
+    border-top-style: none;
+    border-top-width: 0px;
+    color: rgba(0, 0, 0, 0.701961);
+    display: block;
+    font-family: 'Proxima Nova';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 300;
+    height: 110px;
+    letter-spacing: normal;
+    line-height: 17px;
+    margin-bottom: 0px;
+    margin-left: -11.625px;
+    margin-right: 0px;
+    margin-top: 0px;
+    min-width: min-content;
+    padding-bottom: 0px;
+    padding-left: 0px;
+    padding-right: 0px;
+    padding-top: 0px;
+
+    & .title {
+      color: rgba(0, 0, 0, 0.701961);
+      display: block;
+      font-family: 'Proxima Nova';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 300;
+      height: 17px;
+      letter-spacing: normal;
+      line-height: 17px;
+      width: 581.765625px;
+    }
+
+    & .field {
+      color: rgba(0, 0, 0, 0.701961);
+      display: block;
+      float: left;
+      font-family: 'Proxima Nova';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 300;
+      height: 69px;
+      letter-spacing: normal;
+      line-height: 17px;
+      margin-bottom: 24px;
+      margin-right: 0px;
+      margin-top: 0px;
+      position: relative;
+      width: 284.9375px;
+
+      &:last-of-type {
+        margin-left: 11px;
+      }
+
+      & .caption {
+        color: rgba(0, 0, 0, 0.701961);
+        cursor: pointer;
+        display: inline;
+        font-family: 'Proxima Nova';
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 300;
+        height: auto;
+        letter-spacing: normal;
+        line-height: 14px;
+      }
+    }
+
+    & input {
+      -webkit-appearance: none;
+      -webkit-rtl-ordering: logical;
+      -webkit-user-select: text;
+      background-attachment: scroll;
+      background-clip: border-box;
+      background-color: rgb(250, 250, 250);
+      background-image: none;
+      background-origin: padding-box;
+      background-size: auto;
+      border-bottom-color: rgb(204, 204, 204);
+      border-bottom-left-radius: 2px;
+      border-bottom-right-radius: 2px;
+      border-bottom-style: solid;
+      border-bottom-width: 1px;
+      border-image-outset: 0px;
+      border-image-repeat: stretch;
+      border-image-slice: 100%;
+      border-image-source: none;
+      border-image-width: 1;
+      border-left-color: rgb(204, 204, 204);
+      border-left-style: solid;
+      border-left-width: 1px;
+      border-right-color: rgb(204, 204, 204);
+      border-right-style: solid;
+      border-right-width: 1px;
+      border-top-color: rgb(204, 204, 204);
+      border-top-left-radius: 2px;
+      border-top-right-radius: 2px;
+      border-top-style: solid;
+      border-top-width: 1px;
+      box-sizing: border-box;
+      color: rgb(0, 0, 0);
+      cursor: auto;
+      display: inline-block;
+      font-family: sans-serif;
+      font-size: 14px;
+      font-style: normal;
+      font-variant-caps: normal;
+      font-weight: normal;
+      height: 42px;
+      letter-spacing: normal;
+      line-height: 16px;
+      margin-bottom: 4px;
+      margin-left: 0px;
+      margin-right: 0px;
+      margin-top: 6px;
+      padding-bottom: 12px;
+      padding-left: 12px;
+      padding-right: 12px;
+      padding-top: 12px;
+      text-align: start;
+      text-indent: 0px;
+      text-shadow: none;
+      text-transform: none;
+      vertical-align: baseline;
+      width: 284.9375px;
+      word-spacing: 0px;
+      writing-mode: horizontal-tb;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/EventPage.vue b/src/components/EventPage.vue
new file mode 100644
index 0000000..b8bb7e5
--- /dev/null
+++ b/src/components/EventPage.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="gallery">
+    <div class="gallery--header">
+      <h1>Topptur til gaustadtoppen æøå {{ id }}</h1>
+      <p class="gallery--info">{{ eventDate.from }} - {{ eventDate.until }}</p>
+      <p class="gallery--info">{{ eventLocation }}. <a href="#">Se kart</a></p>
+    </div>
+
+    <!-- <map-view :cords="cords"></map-view> -->
+    <gallery></gallery>
+  </div>
+</template>
+
+<script>
+import Gallery from '@/components/Gallery'
+
+export default {
+  components: {
+    Gallery
+  },
+  props: ['id'],
+  data() {
+    return {
+      eventLocation: 'Oslo, Gardermoen, Norge',
+      startDate: undefined,
+      endDate: undefined
+    }
+  },
+  computed: {
+    eventDate: function() {
+      return { 
+        from: this.startDate || '28.09.18',
+        until: this.endDate || '12.10.19'
+      }
+    }
+  },
+  created() {},
+  beforeMount() {
+    console.log('routes', this.$router, this.id)
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.gallery {
+  margin: 2.1rem;
+
+  &--header {
+    padding-bottom: 4rem;
+    // background-color: NavajoWhite;
+  }
+
+  &--info {
+    font-family: 'proxima-nova-thin';
+    font-weight: 300;
+    font-style: normal;
+    font-size: 18px;
+    line-height: 1.6rem;
+    letter-spacing: 0rem;
+    color: rgba(0, 0, 0, .7);
+
+    &:first-of-type {
+      margin-top: 0.8rem;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
new file mode 100644
index 0000000..c85dd27
--- /dev/null
+++ b/src/components/Gallery.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="gallery-container">
+    <div v-for="item in gallery">
+      <gallery-image v-if="item.type === 'image'" :image="item"></gallery-image> 
+      <gallery-text v-if="item.type === 'text'" :text="item"></gallery-text> 
+    </div>
+  </div>
+</template>
+
+<script>
+import GalleryImage from '@/components/GalleryImage'
+import GalleryText from '@/components/GalleryText'
+
+export default {
+  name: 'Gallery-Item',
+  components: { GalleryImage, GalleryText },
+  data() {
+    return {
+      gallery: [
+        {
+          type: 'image',
+          name: 'Dress to impress', 
+          url: "https://static1.squarespace.com/static/585040955016e131e74667b0/5a4eeae7ec212d38915e64cd/5a4eeae7419202bdaaeaffc1/1515121386282/The-Marias-Art-2.jpg"
+        },
+        {
+          type: 'image',
+          name: 'Couple',
+          url: 'https://static1.squarespace.com/static/585040955016e131e74667b0/5a4eeae7ec212d38915e64cd/5a4eeaebec212d38915e659c/1515121395460/The-Marias-Art-6.PNG'
+        },
+        {
+          type: 'image',
+          name: 'Nice jacket',
+          url: 'https://static1.squarespace.com/static/585040955016e131e74667b0/5a4eeae7ec212d38915e64cd/5a4eeae8ec212d38915e64d2/1515121386336/The-Marias-Art-3.jpg?format=500w'
+        },
+        {
+          type: 'text',
+          title: 'title',
+          subtext: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+        },
+        {
+          type: 'image',
+          name: 'plants 4 life',
+          url: 'https://static1.squarespace.com/static/585040955016e131e74667b0/5a4eeae7ec212d38915e64cd/5a4eeaee0852296d709ba5a6/1515121396456/The-Marias-Art-10.PNG?format=500w'
+        }
+      ]
+    }
+  },
+  created() {},
+  beforeMount() {},
+  methods: {
+    popOver(image) {
+      console.log('Emitting to popover Image', JSON.stringify(image));
+      this.$emit('popover', image);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .gallery-container {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/GalleryImage.vue b/src/components/GalleryImage.vue
new file mode 100644
index 0000000..9a706f9
--- /dev/null
+++ b/src/components/GalleryImage.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+      <img :src="image.url" @click="popOver(image)"/>
+      <p>{{ image.name }}</p>
+  </div>
+</template>
+
+<script>
+
+export default {
+  components: {
+
+  },
+  props: {
+    image: {
+      type: Object,
+      required: false
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  created() {},
+  beforeMount() {},
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  img {
+    height: 300px;
+    cursor: pointer;
+
+    @media screen and (max-width: 600px) {
+      background-color: red;
+      height: unset;
+      width: 100%;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/GalleryText.vue b/src/components/GalleryText.vue
new file mode 100644
index 0000000..81459d3
--- /dev/null
+++ b/src/components/GalleryText.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <h3>{{ text.title }}</h3>
+    <p>{{ text.subtext }}</p>
+  </div>
+</template>
+
+<script>
+
+export default {
+  components: {
+
+  },
+  props: {
+    text: {
+      type: Object,
+      required: false
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  created() {},
+  beforeMount() {},
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000..4443489
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,38 @@
+<template>
+  <header>
+    <div class="navigate-back">Tilbake</div>
+  </header>
+</template>
+
+<script>
+
+export default {
+  components: {
+
+  },
+  data() {
+    return {
+
+    }
+  },
+  created() {},
+  beforeMount() {},
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  header {
+    width: 100%;
+    height: 3.5rem;
+    background-color: NavajoWhite;
+  }
+
+  .navigate-back {
+    height: 100%;
+    display: inline-block;
+    background-color: blue;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 1e9f1cc..cbd5511 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -1,15 +1,21 @@
 <template>
-  <div class="col-md-10 col-sm-12">
-    <h1>Leifs opplevelser</h1>
+  <div class="site-header">
+<!--     <h1>{{ title }}</h1>
     <h2>Han har ikke hatt nok etter 60 år!</h2>
-    {{ date }}
+    {{ date }} -->
+    <!-- <Header></Header> -->
+    <router-link to="edit">Edit Page</router-link>
+
+    <event-page></event-page>
   </div>
 </template>
 
 <script>
-  // import '' from ''
+  import Header from '@/components/Header'
+  import EventPage from '@/components/EventPage'
 
   export default {
+    components: { Header, EventPage },
     data() {
       return {
         title: 'Leifs opplevelser',
@@ -19,19 +25,17 @@
     },
     created() {
       this.date = new Date();
+    },
+    methods: {
+      navigate: function() {
+        console.log(this.$router)
+        this.$router.push('/edit');
+      }
     }
   }
 </script>
 
 <style language="scss">
-  h1 {
-    font-size: 6rem;
-    font-weight: 400;
-    font-style: normal;
-    text-align: center;
-    text-transform: uppercase;
-  }
-
   h2 {
     text-align: center;
     font-weight: normal;
diff --git a/src/main.js b/src/main.js
index 14cb6b3..7b57edd 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,14 +2,17 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
+import router from './routes'
 import axios from 'axios'
 import BootstrapVue from 'bootstrap-vue'
 
+
 Vue.config.productionTip = false
 
 new Vue({
   el: '#app',
   axios,
+  router,
   BootstrapVue,
   components: { App },
   template: '<App/>'
diff --git a/src/routes.js b/src/routes.js
new file mode 100644
index 0000000..400b1aa
--- /dev/null
+++ b/src/routes.js
@@ -0,0 +1,44 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+
+Vue.use(Router)
+
+let routes = [
+  {
+    name: 'Home',
+    path: '/',
+    components: require('@/components/Home')
+  },
+  {
+    name: 'Event page',
+    path: '/event/:id',
+    props: { default: true },
+    components: require('@/components/EventPage')
+  },
+  {
+    name: 'Edit event',
+    path: '/edit',
+    components: require('@/components/EditEvent')
+  },
+  {
+    name: 'Calendar',
+    path: '/calendar',
+    // components: require('@/components/EditEvent')
+  },
+  {
+    name: '404',
+    path: '*',
+    // components: require('')
+  }
+];
+
+const router = new Router({
+  routes
+});
+
+router.beforeEach((to, from, next) => {
+  console.log(to)
+  next();
+})
+
+export default router;
\ No newline at end of file
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 1047a98..cd6bade 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -13,6 +13,8 @@ html, body {
   font-weight: 400;
 }
 
-
+.site-header {
+  border-bottom: 1px solid #e8e8e1;
+}
 
 
diff --git a/src/scss/typography.scss b/src/scss/typography.scss
index 3c1af08..85115c6 100644
--- a/src/scss/typography.scss
+++ b/src/scss/typography.scss
@@ -1,10 +1,45 @@
-@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
+// @import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
+
+@font-face {
+  font-family: "Proxima Nova";
+  src: url("assets/fonts/proxima-nova.ttf");
+}
+
+@font-face {
+  font-family: "proxima-nova-thin";
+  src: url("assets/fonts/proxima-nova-thin.ttf");
+}
+
+@font-face {
+  font-family: "Proxima-cocker";
+  src: url("assets/fonts/nova.ttf");
+}
+
+
+@font-face {
+  font-family: "Ambroise std demi";
+  src: url("assets/fonts/ambroise-std-demi.ttf");
+}
 
 html {
-  font-family: 'Noto Sans JP', sans-serif;
+  font-family: 'Arial', sans-serif;
 }
 
 h1, h2, h3, h4, h5, p {
   font-weight: normal;
   font-style: normal;
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-family: 'Ambroise std demi', sans-serif;
+  font-weight: 400;
+  line-height: 1.2em;
+  font-size: 36px;
+  text-transform: lowercase;
+  text-decoration: none;
+  text-align: left;
+  letter-spacing: .01em;
+  color: #cb0b0b;
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 2d0fd59..6b159b5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6249,6 +6249,11 @@ vue-resource@^1.5.1:
   dependencies:
     got "^8.0.3"
 
+vue-router@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.2.tgz#dedc67afe6c4e2bc25682c8b1c2a8c0d7c7e56be"
+  integrity sha512-opKtsxjp9eOcFWdp6xLQPLmRGgfM932Tl56U9chYTnoWqKxQ8M20N7AkdEbM5beUh6wICoFGYugAX9vQjyJLFg==
+
 vue-style-loader@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-3.1.2.tgz#6b66ad34998fc9520c2f1e4d5fa4091641c1597a"