diff --git a/.eslintrc.js b/.eslintrc.js
index ed6d110..ce1a92e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -14,5 +14,11 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+      },
+    ],
   },
 }
diff --git a/.prettierrc.js b/.prettierrc.js
index 0614ee7..2f44711 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -3,4 +3,5 @@ module.exports = {
   tabWidth: 2,
   semi: false,
   singleQuote: true,
+  endOfLine: 'auto',
 }
diff --git a/src/App.vue b/src/App.vue
index 3e0499c..df72cf7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,140 +1 @@
-<template>
-  <div id="app">
-    <div class="container">
-      <b-navbar>
-        <template #start>
-          <b-navbar-item href="#"> Home </b-navbar-item>
-          <b-navbar-dropdown label="Info">
-            <b-navbar-item href="#"> About </b-navbar-item>
-            <b-navbar-item href="#"> Contact </b-navbar-item>
-          </b-navbar-dropdown>
-        </template>
-
-        <template #end>
-          <b-navbar-item tag="div">
-            <div class="buttons">
-              <a class="button is-light">
-                <strong>Sign up</strong>
-              </a>
-              <a class="button is-light"> Log in </a>
-            </div>
-          </b-navbar-item>
-        </template>
-      </b-navbar>
-      <div class="notification is-primary">
-        This container is <strong>centered</strong> on desktop and larger
-        viewports.
-      </div>
-      <div class="card">
-        <div class="card-content">
-          <div class="content">
-            Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros.
-            Donec id elit non mi porta gravida at eget metus. Cum sociis natoque
-            penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-            Cras mattis consectetur purus sit amet fermentum.
-          </div>
-          <footer class="card-footer">
-            <a href="#" class="card-footer-item">Save</a>
-            <a href="#" class="card-footer-item">Edit</a>
-            <a href="#" class="card-footer-item">Delete</a>
-          </footer>
-        </div>
-      </div>
-      <b-table :data="data" :columns="columns"></b-table>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      data: [
-        {
-          id: 1,
-          first_name: 'Jesse',
-          last_name: 'Simmons',
-          date: '2016-10-15 13:43:27',
-          gender: 'Male',
-        },
-        {
-          id: 2,
-          first_name: 'John',
-          last_name: 'Jacobs',
-          date: '2016-12-15 06:00:53',
-          gender: 'Male',
-        },
-        {
-          id: 3,
-          first_name: 'Tina',
-          last_name: 'Gilbert',
-          date: '2016-04-26 06:26:28',
-          gender: 'Female',
-        },
-        {
-          id: 4,
-          first_name: 'Clarence',
-          last_name: 'Flores',
-          date: '2016-04-10 10:28:46',
-          gender: 'Male',
-        },
-        {
-          id: 5,
-          first_name: 'Anne',
-          last_name: 'Lee',
-          date: '2016-12-06 14:38:38',
-          gender: 'Female',
-        },
-      ],
-      columns: [
-        {
-          field: 'id',
-          label: 'ID',
-          width: '40',
-          numeric: true,
-        },
-        {
-          field: 'first_name',
-          label: 'First Name',
-        },
-        {
-          field: 'last_name',
-          label: 'Last Name',
-        },
-        {
-          field: 'date',
-          label: 'Date',
-          centered: true,
-        },
-        {
-          field: 'gender',
-          label: 'Gender',
-        },
-      ],
-    }
-  },
-}
-</script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-nav {
-  padding: 30px;
-}
-
-nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-nav a.router-link-exact-active {
-  color: #42b983;
-}
-</style>
+<template>
  <div id="app">
    <div class="container">
      <b-navbar>
        <template #start>
          <b-navbar-item href="#"> Home </b-navbar-item>
          <b-navbar-dropdown label="Info">
            <b-navbar-item href="#"> About </b-navbar-item>
            <b-navbar-item href="#"> Contact </b-navbar-item>
          </b-navbar-dropdown>
        </template>

        <template #end>
          <b-navbar-item tag="div">
            <div class="buttons">
              <a class="button is-light">
                <strong>Sign up</strong>
              </a>
              <a class="button is-light"> Log in </a>
            </div>
          </b-navbar-item>
        </template>
      </b-navbar>
      <div class="notification is-primary">
        This container is <strong>centered</strong> on desktop and larger
        viewports.
      </div>
      <div class="card">
        <div class="card-content">
          <div class="content">
            Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros.
            Donec id elit non mi porta gravida at eget metus. Cum sociis natoque
            penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            Cras mattis consectetur purus sit amet fermentum.
          </div>
          <footer class="card-footer">
            <a href="#" class="card-footer-item">Save</a>
            <a href="#" class="card-footer-item">Edit</a>
            <a href="#" class="card-footer-item">Delete</a>
          </footer>
        </div>
      </div>
      <b-table :data="data" :columns="columns"></b-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          first_name: 'Jesse',
          last_name: 'Simmons',
          date: '2016-10-15 13:43:27',
          gender: 'Male',
        },
        {
          id: 2,
          first_name: 'John',
          last_name: 'Jacobs',
          date: '2016-12-15 06:00:53',
          gender: 'Male',
        },
        {
          id: 3,
          first_name: 'Tina',
          last_name: 'Gilbert',
          date: '2016-04-26 06:26:28',
          gender: 'Female',
        },
        {
          id: 4,
          first_name: 'Clarence',
          last_name: 'Flores',
          date: '2016-04-10 10:28:46',
          gender: 'Male',
        },
        {
          id: 5,
          first_name: 'Anne',
          last_name: 'Lee',
          date: '2016-12-06 14:38:38',
          gender: 'Female',
        },
      ],
      columns: [
        {
          field: 'id',
          label: 'ID',
          width: '40',
          numeric: true,
        },
        {
          field: 'first_name',
          label: 'First Name',
        },
        {
          field: 'last_name',
          label: 'Last Name',
        },
        {
          field: 'date',
          label: 'Date',
          centered: true,
        },
        {
          field: 'gender',
          label: 'Gender',
        },
      ],
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
\ No newline at end of file