diff --git a/assets/global.scss b/assets/global.scss
index 48f1bcc..d7c22c1 100644
--- a/assets/global.scss
+++ b/assets/global.scss
@@ -1,4 +1,5 @@
 @import "./colors";
+@import "./transitions";
 @import url('https://fonts.googleapis.com/css?family=Raleway');
 
 html, body, #__nuxt, #__layout {
diff --git a/assets/transitions.scss b/assets/transitions.scss
new file mode 100644
index 0000000..36b8d65
--- /dev/null
+++ b/assets/transitions.scss
@@ -0,0 +1,29 @@
+.page-enter-active, .page-leave-active {
+  transition: opacity 0.5s;
+}
+
+.page-enter, .page-leave-to {
+  opacity: 0;
+}
+
+.layout-enter-active {
+  transition: transform 0.5s ease, opacity 0.6s ease;
+}
+
+.layout-leave-active {
+  transition: transform 0.5s ease, opacity 0.1s ease;
+}
+
+.layout-enter {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+
+.layout-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+.layout-enter-to, .layout-leave {
+  opacity: 1;
+}
diff --git a/layouts/default.vue b/layouts/default.vue
index a151ab4..e12d064 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -2,6 +2,12 @@
   <nuxt/>
 </template>
 
+<script>
+  export default {
+    name: "default"
+  }
+</script>
+
 <style lang="scss">
 
 </style>
diff --git a/layouts/secondLevel.vue b/layouts/secondLevel.vue
index 5fecb91..730e61b 100644
--- a/layouts/secondLevel.vue
+++ b/layouts/secondLevel.vue
@@ -1,10 +1,10 @@
 <template>
-    <div id="layout">
-      <nuxt-link class="button" to="/"></nuxt-link>
-      <div class="content">
-        <nuxt/>
-      </div>
+  <div id="layout">
+    <nuxt-link class="button" to="/"></nuxt-link>
+    <div class="content">
+      <nuxt/>
     </div>
+  </div>
 </template>
 
 <script>