diff --git a/fonts/AUTHENTICSans-60.otf b/fonts/AUTHENTICSans-60.otf
old mode 100755
new mode 100644
index 6f1c166..1db0101
Binary files a/fonts/AUTHENTICSans-60.otf and b/fonts/AUTHENTICSans-60.otf differ
diff --git a/fonts/AUTHENTICSans-90.otf b/fonts/AUTHENTICSans-90.otf
old mode 100755
new mode 100644
index e1793b6..f296a65
Binary files a/fonts/AUTHENTICSans-90.otf and b/fonts/AUTHENTICSans-90.otf differ
diff --git a/makefile b/makefile
index 0810f74..3d06fef 100644
--- a/makefile
+++ b/makefile
@@ -4,7 +4,9 @@ RSYNC  := rsync -chavzP
 SRC    := dist/*
 SSH    := ssh -t
 BUILD  := npm run build
+RUN    := npm run serve
 
+default: serve
 all: publish
 
 build:
@@ -12,3 +14,6 @@ build:
 
 publish: build
 	$(RSYNC) $(SRC) $(REMOTE):$(DEST)
+
+serve:
+	$(RUN)
diff --git a/src/App.vue b/src/App.vue
index a58d378..bbf79a2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,24 @@
 <template>
    <b-container fluid>
      <transition
-        name="fade"
-        mode="out-in">
+        :name="transitionName"
+        mode="out-in"
+        >
      <router-view></router-view>
       </transition>
    </b-container>
 </template>
 
 <script>
+const DEFAULT_TRANSITION = 'fade';
+
 export default {
   name: 'app',
+  data() {
+    return {
+      transitionName: DEFAULT_TRANSITION,
+    };
+  }
 }
 </script>
 
@@ -26,4 +34,26 @@ export default {
 .fade-leave-active {
   opacity: 0
 }
+
+.slide-leave-active,
+.slide-enter-active {
+  transition: 0.5s;
+}
+.slide-enter {
+  transform: translate(100%, 0);
+}
+.slide-leave-to {
+  transform: translate(-100%, 0);
+}
+
+.slideback-leave-active,
+.slideback-enter-active {
+  transition: 0.5s;
+}
+.slideback-enter {
+  transform: translate(-100%, 0);
+}
+.slideback-leave-to {
+  transform: translate(100%, 0);
+}
 </style>
diff --git a/src/components/ThirdEdition.vue b/src/components/ThirdEdition.vue
new file mode 100644
index 0000000..41cf51e
--- /dev/null
+++ b/src/components/ThirdEdition.vue
@@ -0,0 +1,268 @@
+<style scoped>
+
+@import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Raleway&family=Work+Sans:wght@900&display=swap');
+@font-face {
+  font-family: 'Happy Times';
+  src: url('../../fonts/happy-times-NG_regular_master.otf');
+}
+@font-face {
+  font-family: 'Semi Light Dots';
+  src: url('../../fonts/AC1-SemiLightDots.otf');
+}
+@font-face {
+  font-family: 'ED Regular';
+  src: url('../../fonts/ED-Regular.otf');
+}
+
+@font-face {
+  font-family: 'AUTHENTICSans';
+  src: url('../../fonts/AUTHENTICSans-90.otf');
+  font-weight: 400;
+}
+* {
+    border: 0px black solid;
+    background-color: #E6F2FB;
+
+}
+
+body {
+  background-color: #E6F2FB;
+  min-height: 100vh;
+}
+
+#magi {
+  background-color: transparent;
+  /*padding: 20px;*/
+  /*--color-stop: #fff5f5;*/
+  /*--color-bot: #333042;*/
+}
+
+.img-fluid {
+  /*fill: url(#magi) #ffcccc;*/
+}
+
+#mag_title {
+  font-size: 500%;
+  /*color: #ffcccc;*/
+  color: black;
+  font-family: 'Work Sans', sans-serif;
+  text-align: left;
+  /*position: fixed;*/
+  /*padding: 6px;*/
+  background-color: transparent;
+  z-index: 1;
+
+}
+
+
+#mag_subtitle {
+  font-size: 250%;
+  font-family: 'AUTHENTICSans';
+  color: black;
+  background-color: transparent;
+  height: auto;
+  text-align: left;
+}
+
+.summary {
+  border-left: 3px solid #ffcccc;
+  border-top: 3px dotted #ffcccc;
+  padding: 20px;
+}
+
+.icons img {
+  width: 60%;
+}
+
+.author {
+  font-family: 'ED-Regular', sans-serif;;
+  text-align: center;
+  color: #FA00FF;
+}
+
+.container_width {
+  max-width: 100%;
+}
+
+#toc {
+  color: #1B75BC;
+  font-family: 'AUTHENTICSans';
+  font-size: 120%;
+  text-align: center;
+  padding: 24px;
+  max-width: 100%;
+  min-width: 70%;
+  margin: 18px;
+}
+
+a {
+  color: #1B75BC;
+}
+
+.author {
+  color: #1B75BC;
+}
+
+#edition {
+  color: black;
+  font-size: 18px;
+  font-family: 'AUTHENTICSans';
+  letter-spacing: 1px;
+  margin-top: 80px;
+  text-align: left;
+  background-colour: transparent;
+}
+
+@media (max-width: 1217px) {
+  #mag_title {
+    font-size: 500%;
+    padding-top: 12px;
+  }
+  #mag_subtitle {
+    font-size: 150%;
+    text-align: left;
+    padding-top: inherit;
+  }
+}
+
+@media (max-width: 575px) {
+  #mag_title {
+    font-size: 80px;
+    padding-top: inherit;
+  }
+
+  #mag_subtitle {
+    padding-top: inherit;
+    text-align: right;
+  }
+
+  #edition {
+    font-size: 18px;
+    text-align: right;
+    margin-top: -36px;
+    background-color: transparent;
+  }
+
+  .icons img {
+    width: 80%;
+  }
+
+  .icons p {
+    padding-top: 10%;
+  }
+
+  #magi {
+    width: 50%;
+    text-align: right;
+    margin-top: -24px;
+  }
+
+  .col-md-2 {
+  border: none;
+  }
+
+  #main_container {
+  padding-top: 64px;
+  }
+}
+
+
+
+#main_container {
+  padding-top: 72px;
+  padding-bottom: 120px;
+}
+
+
+
+.footer_page {
+  font-family: 'Poppins', sans-serif;
+  font-size: 12px;
+  text-align: center;
+  margin-top: 20px;
+}
+
+
+</style>
+
+<template>
+  <div>
+    <MenuBar/>
+    <b-container fluid class="p-0">
+      <b-row id="main_container">
+        <b-col md="6">
+          <b-row>
+            <b-col md="6" offset-md="2">
+              <router-link to="/about"><p id="mag_title">Magiun</p></router-link>
+            </b-col>
+            <b-col id="edition">Winter 2021
+            </b-col>
+          </b-row>
+
+          <b-row>
+            <b-col md="6" offset-md="2">
+              <p id="mag_subtitle">#3 On Routine</p>
+            </b-col>
+          </b-row>
+        </b-col>
+        <b-col md="4" offset-md="1">
+          <b-row>
+            <b-col id="toc">
+              <p class="recipe_title">Contents</p>
+              <p class="item"><router-link to="/twoberries">Floating on Habit</router-link><br>
+                <span class="author">Alina Turdean</span>
+              </p>
+              <p class="item"><router-link to="/workfromhome">Freestyle Platouaș</router-link><br>
+                <span class="author">Ileana Sebe</span>
+              </p>
+              <p class="item"><router-link to="/bananas">[each] Tuesday Afternoon</router-link><br>
+                <span class="author">Sylvie van Wijk</span>
+              </p>
+              <p class="item"><router-link to="/popcorn">Yes, Chef</router-link><br>
+                <span class="author">Esmeralda Anstrauta</span>
+              </p>
+              <p class="item"><router-link to="/potato">One Way with Potatoes</router-link><br>
+                <span class="author">Honey Jones-Hughes</span>
+              </p>
+              <p class="item"><router-link to="/bowl">Cooking Apart Together</router-link><br>
+                <span class="author">Louisa Bufardeci and Inge Hoonte</span>
+              </p>
+              <p class="item"><router-link to="/threeeggs">Me, My Mom and those Three Eggs</router-link><br>
+                <span class="author">Patricia Cîrtog</span>
+              </p>
+              <p class="item"><router-link to="/olives">A Jar of Green Olives</router-link><br>
+                <span class="author">Raluca Chereji</span>
+              </p>
+              <p class="item"><router-link to="/vodka">Spoiled</router-link><br>
+                <span class="author">Ana-Maria Gușu</span>
+              </p>
+              <p class="item"><router-link to="/mittens">How to Poach an Egg (Perfectly)</router-link><br>
+                <span class="author">Valentina Vella</span>
+              </p>
+            </b-col>
+          </b-row>
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col>
+          <footer>
+            <p class="footer_page">This web publication was created by Alice Strete with Simon Browne</p>
+          </footer>
+        </b-col>
+      </b-row>
+  </b-container>
+</div>
+</template>
+
+<script>
+import MenuBar from './MenuBar'
+export default {
+    name: 'ThirdEdition',
+    components: {
+        MenuBar
+    }
+}
+
+</script>
diff --git a/src/components/edition2/knife.vue b/src/components/edition2/knife.vue
index 67201cc..cb8225e 100644
--- a/src/components/edition2/knife.vue
+++ b/src/components/edition2/knife.vue
@@ -152,7 +152,7 @@ a {
       <b-row class="controls">
         <b-col md="12" class="arrows">
         <router-link to="/" id="leftarrow">←</router-link>
-          <a href="/simmered" id="rightarrow">→</a>
+          <router-link to="/simmered" id="rightarrow">→</router-link>
         </b-col>
       </b-row>
 
@@ -220,9 +220,20 @@ export default {
         return {
         }
     },
-    components: {
-        MenuBar
-    }
+//    components: {
+//        MenuBar
+//    },
+//    beforeRouteLeave(to, from, next) {
+//      let transitionName = to.meta.transitionName || from.meta.transitionName;
+
+//      if (document.activeElement.id === 'leftarrow') {
+//        this.transitionName = 'slide';
+//      }
+
+//      console.log('thisistransition', this.transitionName);
+
+//      next();
+//    },
 }
 
 </script>
diff --git a/src/components/edition3/bananas.vue b/src/components/edition3/bananas.vue
index 452e515..ec57c5e 100644
--- a/src/components/edition3/bananas.vue
+++ b/src/components/edition3/bananas.vue
@@ -1,18 +1,5 @@
 <style scoped>
-@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
-@font-face {
-  font-family: 'Happy Times';
-  src: url('../../../fonts/happy-times-NG_regular_master.otf');
-}
-@font-face {
-  font-family: 'Semi Light Dots';
-  src: url('../../../fonts/AC1-SemiLightDots.otf');
-}
-@font-face {
-  font-family: 'ED Regular';
-  src: url('../../../fonts/ED-Regular.otf');
-}
+
 @font-face {
   font-family: 'AUTHENTICSansLight';
   src: url('../../../fonts/AUTHENTICSans-60.otf');
@@ -215,7 +202,7 @@ visibility: hidden;
         <b-col md="4" class="color_back">
           <b-row class="controls">
               <b-col md="12" class="arrows">
-                <a href="/workfromhome" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
+                <router-link to="/workfromhome" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></router-link>
                 <p id="onhover_left">Freestyle Platouaș</p>
               </b-col>
             </b-row>
@@ -294,7 +281,7 @@ A concluding consideration: it’s a hot paradox. The practice of collecting cas
       <b-col md="4" class="color_next">
         <b-row class="controls">
             <b-col md="12" class="arrows">
-              <a href="/popcorn" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
+              <router-link to="/popcorn" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
               <p id="onhover_right">Yes, Chef</p>
             </b-col>
           </b-row>
diff --git a/src/components/edition3/bowl.vue b/src/components/edition3/bowl.vue
index 4408f74..287c437 100644
--- a/src/components/edition3/bowl.vue
+++ b/src/components/edition3/bowl.vue
@@ -178,7 +178,7 @@ a {
         <b-col md="4" class="color_back">
           <b-row class="controls">
               <b-col md="12" class="arrows">
-                <a href="/potato" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
+                <router-link to="/potato" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></router-link>
                 <p id="onhover_left">One Way with Potatoes</p>
               </b-col>
             </b-row>
@@ -315,7 +315,7 @@ In our house we all eat different foods for dinner. Usually my partner has some
       <b-col md="4" class="color_next">
         <b-row class="controls">
             <b-col md="12" class="arrows">
-              <a href="/threeeggs" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
+              <router-link to="/threeeggs" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
               <p id="onhover_right">Me, My Mom and Those Three Eggs</p>
             </b-col>
           </b-row>
diff --git a/src/components/edition3/mittens.vue b/src/components/edition3/mittens.vue
index 28e81ff..dde16cc 100644
--- a/src/components/edition3/mittens.vue
+++ b/src/components/edition3/mittens.vue
@@ -160,7 +160,7 @@ visibility: hidden;
       <b-col md="3" class="color_back">
         <b-row class="controls">
             <b-col md="12" class="arrows">
-              <a href="/vodka" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
+              <router-link to="/vodka" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></router-link>
               <p id="onhover_left">Spoiled</p>
             </b-col>
           </b-row>
@@ -277,7 +277,7 @@ And buying up our housing stock).<br>
 <b-col md="4" class="color_next">
   <b-row class="controls">
       <b-col md="12" class="arrows">
-        <a href="/vodka" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
+        <router-link to="/vodka" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
         <p id="onhover_right">Colophon</p>
       </b-col>
     </b-row>
diff --git a/src/components/edition3/olives.vue b/src/components/edition3/olives.vue
index 2c47fa1..502a4ce 100644
--- a/src/components/edition3/olives.vue
+++ b/src/components/edition3/olives.vue
@@ -160,7 +160,7 @@ visibility: hidden;
       <b-col md="4" class="color_back">
         <b-row class="controls">
             <b-col md="12" class="arrows">
-              <a href="/threeeggs" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
+              <router-link to="/threeeggs" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></router-link>
               <p id="onhover_left">Me, My Mom and Those Three Eggs</p>
             </b-col>
           </b-row>
@@ -209,7 +209,7 @@ I still buy olives on my way home.
       <b-col md="4" class="color_next">
         <b-row class="controls">
             <b-col md="12" class="arrows">
-              <a href="/vodka" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
+              <router-link to="/vodka" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
               <p id="onhover_right">Spoiled</p>
             </b-col>
           </b-row>
diff --git a/src/components/edition3/popcorn.vue b/src/components/edition3/popcorn.vue
index c3aa854..5e76e8d 100644
--- a/src/components/edition3/popcorn.vue
+++ b/src/components/edition3/popcorn.vue
@@ -182,7 +182,7 @@ visibility: hidden;
         <b-col md="4" class="color_back">
           <b-row class="controls">
               <b-col md="12" class="arrows">
-                <a href="/bananas" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
+                <router-link to="/bananas" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></router-link>
                 <p id="onhover_left">[each] Tuesday Afternoon</p>
               </b-col>
             </b-row>
@@ -217,7 +217,7 @@ Don't get me wrong, I dearly love being a chef and the starched-white aesthetics
       <b-col md="4" class="color_next">
         <b-row class="controls">
             <b-col md="12" class="arrows">
-              <a href="/potato" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
+              <router-link to="/potato" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
               <p id="onhover_right">One Way with Potatoes</p>
             </b-col>
           </b-row>
diff --git a/src/components/edition3/potato.vue b/src/components/edition3/potato.vue
index be8963f..e40eea7 100644
--- a/src/components/edition3/potato.vue
+++ b/src/components/edition3/potato.vue
@@ -183,7 +183,7 @@ visibility: hidden;
         <b-col md="4" class="color_back">
           <b-row class="controls">
               <b-col md="12" class="arrows">
-                <a href="/bananas" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
+                <router-link to="/bananas" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></router-link>
                 <p id="onhover_left">Yes, Chef</p>
               </b-col>
             </b-row>
@@ -235,7 +235,7 @@ hot as it goes, until their edges crisp.
       <b-col md="4" class="color_next">
         <b-row class="controls">
             <b-col md="12" class="arrows">
-              <a href="/bowl" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
+              <router-link to="/bowl" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
               <p id="onhover_right">Cooking Apart Together</p>
             </b-col>
           </b-row>
diff --git a/src/components/edition3/threeeggs.vue b/src/components/edition3/threeeggs.vue
index 8e40082..b4bba6e 100644
--- a/src/components/edition3/threeeggs.vue
+++ b/src/components/edition3/threeeggs.vue
@@ -160,7 +160,7 @@ visibility: hidden;
       <b-col md="4" class="color_back">
         <b-row class="controls">
             <b-col md="12" class="arrows">
-              <a href="/bowl" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
+              <router-link to="/bowl" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></router-link>
               <p id="onhover_left">Cooking Apart Together</p>
             </b-col>
           </b-row>
@@ -205,7 +205,7 @@ In college, I don’t eat omelet anymore. If I don’t hear the sound of my moth
       <b-col md="4" class="color_next">
         <b-row class="controls">
             <b-col md="12" class="arrows">
-              <a href="/olives" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
+              <router-link to="/olives" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
               <p id="onhover_right">A Jar of Green Olives</p>
             </b-col>
           </b-row>
diff --git a/src/components/edition3/twoberries.vue b/src/components/edition3/twoberries.vue
index 3f76732..dce0a3f 100644
--- a/src/components/edition3/twoberries.vue
+++ b/src/components/edition3/twoberries.vue
@@ -184,7 +184,7 @@ visibility: hidden;
       <b-col md="4" class="color_back">
         <b-row class="controls">
             <b-col md="12" class="arrows">
-              <a href="/whatwecan" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
+              <a href="/EditorNote3" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
               <p id="onhover_left">Editor's note</p>
             </b-col>
           </b-row>
diff --git a/src/components/edition3/vodka.vue b/src/components/edition3/vodka.vue
index cc9ee74..d10bc64 100644
--- a/src/components/edition3/vodka.vue
+++ b/src/components/edition3/vodka.vue
@@ -176,7 +176,7 @@ visibility: hidden;
 }
 
 .color_back {
-  background-color: #FFF5F5;
+  background-color: #FBFFF0;
 }
 
 .color_next {
@@ -216,7 +216,7 @@ visibility: hidden;
         <b-col md="4" class="color_back">
           <b-row class="controls">
               <b-col md="12" class="arrows">
-                <a href="/olives" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
+                <router-link to="/olives" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></router-link>
                 <p id="onhover_left">A Jar of Green Olives</p>
               </b-col>
             </b-row>
@@ -274,7 +274,7 @@ visibility: hidden;
       <b-col md="4" class="color_next">
         <b-row class="controls">
             <b-col md="12" class="arrows">
-              <a href="/mittens" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
+              <router-link to="/mittens" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
               <p id="onhover_right">How to Poach an Egg (Perfectly)</p>
             </b-col>
           </b-row>
diff --git a/src/components/edition3/workfromhome.vue b/src/components/edition3/workfromhome.vue
index 127ae3b..b4e9aa3 100644
--- a/src/components/edition3/workfromhome.vue
+++ b/src/components/edition3/workfromhome.vue
@@ -213,7 +213,7 @@ visibility: hidden;
       <b-col md="4" class="color_back">
         <b-row class="controls">
             <b-col md="12" class="arrows">
-              <a href="/twoberries" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
+              <router-link to="/twoberries" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></router-link>
               <p id="onhover_left">Floating on Habit</p>
             </b-col>
           </b-row>
@@ -281,7 +281,7 @@ Not the usual combinations, but very satisfying for my taste buds and so easy to
       <b-col md="4" class="color_next">
         <b-row class="controls">
             <b-col md="12" class="arrows">
-              <a href="/bananas" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
+              <router-link to="/bananas" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
               <p id="onhover_right">[each] Tuesday Afternoon</p>
             </b-col>
           </b-row>
diff --git a/src/main.js b/src/main.js
index 5d15f5f..1edd54b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -53,6 +53,8 @@ import vodka from './components/edition3/vodka'
 import workfromhome from './components/edition3/workfromhome'
 import bowl from './components/edition3/bowl'
 import EditorNote3 from './components/edition3/EditorNote3'
+import ThirdEdition from './components/ThirdEdition'
+
 
 
 
@@ -103,7 +105,9 @@ const router = new VueRouter({
     { path: '/vodka', component: vodka },
     { path: '/workfromhome', component: workfromhome },
     { path: '/bowl', component: bowl },
-    { path: '/EditorNote3', component: EditorNote3 }
+    { path: '/EditorNote3', component: EditorNote3 },
+    { path: '/thirdedition', component: ThirdEdition }
+
 
   ]