diff --git a/.eslintrc.js b/.eslintrc.js
index b28fdf4..4de4c1f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,7 +3,7 @@
   env: {
     node: true
   },
-  extends: ['plugin:vue/recommended', '@vue/prettier'],
+  extends: ['plugin:vue/essential', '@vue/prettier'],
   rules: {
     'no-console': 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
@@ -12,8 +12,7 @@
       {
         singleQuote: true
       }
-    ],
-    'vue/component-name-in-template-casing': ['error', 'kebab-case']
+    ]
   },
   parserOptions: {
     parser: 'babel-eslint'
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index b2d29c9..5c2c333 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -42,6 +42,9 @@
 export default {
   name: 'AppHeader',
   components: { IconAvatar, IconRenew, StatusIcon },
+  created() {
+    this.getHostInfo();
+  },
   computed: {
     hostStatus() {
       return this.$store.getters['global/hostStatus'];
@@ -58,9 +61,6 @@
       }
     }
   },
-  created() {
-    this.getHostInfo();
-  },
   methods: {
     getHostInfo() {
       this.$store.dispatch('global/getHostStatus');
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 47609d9..c246b53 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -7,7 +7,7 @@
         <icon-health />Health
         <icon-expand class="icon-expand" />
       </b-button>
-      <b-collapse id="health-menu" tag="ul" class="nav-item__nav">
+      <b-collapse tag="ul" id="health-menu" class="nav-item__nav">
         <b-nav-item href="javascript:void(0)">Event Log</b-nav-item>
         <b-nav-item href="javascript:void(0)">Hardware Status</b-nav-item>
         <b-nav-item href="javascript:void(0)">Sensors</b-nav-item>
@@ -19,7 +19,7 @@
         <icon-control />Control
         <icon-expand class="icon-expand" />
       </b-button>
-      <b-collapse id="control-menu" tag="ul" class="nav-item__nav">
+      <b-collapse tag="ul" id="control-menu" class="nav-item__nav">
         <b-nav-item href="javascript:void(0)">
           Server power operations
         </b-nav-item>
@@ -33,7 +33,7 @@
         <icon-configuration />Configuration
         <icon-expand class="icon-expand" />
       </b-button>
-      <b-collapse id="configuration-menu" tag="ul" class="nav-item__nav">
+      <b-collapse tag="ul" id="configuration-menu" class="nav-item__nav">
         <b-nav-item href="javascript:void(0)">Network settings</b-nav-item>
         <b-nav-item href="javascript:void(0)">SNMP settings</b-nav-item>
         <b-nav-item href="javascript:void(0)">Firmware</b-nav-item>
@@ -45,7 +45,7 @@
         <icon-access-control />Access Control
         <icon-expand class="icon-expand" />
       </b-button>
-      <b-collapse id="access-control-menu" tag="ul" class="nav-item__nav">
+      <b-collapse tag="ul" id="access-control-menu" class="nav-item__nav">
         <b-nav-item href="javascript:void(0)">LDAP</b-nav-item>
         <b-nav-item to="/access-control/local-user-management">
           Local user management
diff --git a/src/components/Global/PageSection.vue b/src/components/Global/PageSection.vue
index 03040b2..678fd31 100644
--- a/src/components/Global/PageSection.vue
+++ b/src/components/Global/PageSection.vue
@@ -8,12 +8,7 @@
 <script>
 export default {
   name: 'PageSection',
-  props: {
-    sectionTitle: {
-      type: String,
-      required: true
-    }
-  }
+  props: ['sectionTitle']
 };
 </script>
 
diff --git a/src/components/Global/PageTitle.vue b/src/components/Global/PageTitle.vue
index 26588ca..0231424 100644
--- a/src/components/Global/PageTitle.vue
+++ b/src/components/Global/PageTitle.vue
@@ -8,12 +8,7 @@
 <script>
 export default {
   name: 'PageTitle',
-  props: {
-    description: {
-      type: String,
-      default: ''
-    }
-  },
+  props: ['description'],
   data() {
     return {
       title: this.$route.meta.title
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index a2c7f04..63155c9 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -13,16 +13,11 @@
 
 export default {
   name: 'StatusIcon',
+  props: ['status'],
   components: {
     iconSuccess: IconCheckmark,
     iconDanger: IconWarning,
     iconSecondary: IconError
-  },
-  props: {
-    status: {
-      type: String,
-      default: ''
-    }
   }
 };
 </script>
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index e1bb410..e5a5501 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
-    <app-header ref="focusTarget" />
+    <AppHeader ref="focusTarget" />
     <b-container fluid class="page-container">
       <b-row no-gutters>
         <b-col tag="nav" cols="12" md="3" lg="2">
-          <app-navigation />
+          <AppNavigation />
         </b-col>
         <b-col cols="12" md="9" lg="10">
-          <page-container>
+          <PageContainer>
             <router-view ref="routerView" />
-          </page-container>
+          </PageContainer>
         </b-col>
       </b-row>
     </b-container>
diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
index b016dcc..6ca43f3 100644
--- a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
+++ b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
@@ -1,13 +1,13 @@
 <template>
   <b-container class="ml-0">
-    <page-title />
+    <PageTitle />
     <b-row>
       <b-col lg="10">
-        <b-button variant="link" @click="initModalSettings">
+        <b-button @click="initModalSettings" variant="link">
           Account policy settings
           <icon-settings />
         </b-button>
-        <b-button variant="primary" @click="initModalUser(null)">
+        <b-button @click="initModalUser(null)" variant="primary">
           Add user
           <icon-add />
         </b-button>
@@ -49,9 +49,9 @@
       </b-col>
     </b-row>
     <!-- Modals -->
-    <modal-settings :settings="settings"></modal-settings>
+    <modal-settings v-bind:settings="settings"></modal-settings>
     <modal-user
-      :user="activeUser"
+      v-bind:user="activeUser"
       @ok="saveUser"
       @hidden="clearActiveUser"
     ></modal-user>
@@ -70,7 +70,7 @@
 import PageTitle from '../../../components/Global/PageTitle';
 
 export default {
-  name: 'LocalUsers',
+  name: 'local-users',
   components: {
     IconAdd,
     IconEdit,
@@ -87,6 +87,9 @@
       settings: null
     };
   },
+  created() {
+    this.getUsers();
+  },
   computed: {
     allUsers() {
       return this.$store.getters['localUsers/allUsers'];
@@ -110,9 +113,6 @@
       });
     }
   },
-  created() {
-    this.getUsers();
-  },
   methods: {
     getUsers() {
       this.$store.dispatch('localUsers/getUsers');
diff --git a/src/views/AccessControl/LocalUserManagement/ModalSettings.vue b/src/views/AccessControl/LocalUserManagement/ModalSettings.vue
index a0d6294..dae4d90 100644
--- a/src/views/AccessControl/LocalUserManagement/ModalSettings.vue
+++ b/src/views/AccessControl/LocalUserManagement/ModalSettings.vue
@@ -4,11 +4,6 @@
 
 <script>
 export default {
-  props: {
-    settings: {
-      type: String,
-      default: ''
-    }
-  }
+  props: ['settings']
 };
 </script>
diff --git a/src/views/AccessControl/LocalUserManagement/ModalUser.vue b/src/views/AccessControl/LocalUserManagement/ModalUser.vue
index d84fb6d..73aa164 100644
--- a/src/views/AccessControl/LocalUserManagement/ModalUser.vue
+++ b/src/views/AccessControl/LocalUserManagement/ModalUser.vue
@@ -22,7 +22,7 @@
         >
       </b-form-group>
       <b-form-group label="Username">
-        <b-form-input v-model="form.username" type="text" />
+        <b-form-input type="text" v-model="form.username" />
       </b-form-group>
       <b-form-group label="Privilege">
         <b-form-select
@@ -31,7 +31,7 @@
         ></b-form-select>
       </b-form-group>
       <b-form-group label="Password">
-        <b-form-input v-model="form.password" type="password" />
+        <b-form-input type="password" v-model="form.password" />
       </b-form-group>
     </b-form>
     <template v-slot:modal-ok>
@@ -47,12 +47,7 @@
 
 <script>
 export default {
-  props: {
-    user: {
-      type: Object,
-      default: null
-    }
-  },
+  props: ['user'],
   data() {
     return {
       privilegeTypes: ['Administrator', 'Operator', 'ReadOnly', 'NoAccess']
diff --git a/src/views/AccessControl/LocalUserManagement/TableRoles.vue b/src/views/AccessControl/LocalUserManagement/TableRoles.vue
index ad313be..b401966 100644
--- a/src/views/AccessControl/LocalUserManagement/TableRoles.vue
+++ b/src/views/AccessControl/LocalUserManagement/TableRoles.vue
@@ -2,22 +2,22 @@
   <b-table bordered small head-variant="dark" :items="items" :fields="fields">
     <template v-slot:cell(administrator)="data">
       <template v-if="data.value">
-        <checkmark20 />
+        <Checkmark20 />
       </template>
     </template>
     <template v-slot:cell(operator)="data">
       <template v-if="data.value">
-        <checkmark20 />
+        <Checkmark20 />
       </template>
     </template>
     <template v-slot:cell(readonly)="data">
       <template v-if="data.value">
-        <checkmark20 />
+        <Checkmark20 />
       </template>
     </template>
     <template v-slot:cell(noaccess)="data">
       <template v-if="data.value">
-        <checkmark20 />
+        <Checkmark20 />
       </template>
     </template>
   </b-table>
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index ea1eac6..706d3ec 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -15,10 +15,10 @@
         </b-col>
 
         <b-col md="6">
-          <b-form class="login-form" novalidate @submit.prevent="login">
+          <b-form class="login-form" @submit.prevent="login" novalidate>
             <b-alert
-              v-if="authStatus == 'error'"
               class="login-error"
+              v-if="authStatus == 'error'"
               show
               variant="danger"
             >
@@ -72,6 +72,11 @@
 <script>
 export default {
   name: 'Login',
+  computed: {
+    authStatus() {
+      return this.$store.getters['authentication/authStatus'];
+    }
+  },
   data() {
     return {
       errorMsg: {
@@ -85,11 +90,6 @@
       disableSubmitButton: false
     };
   },
-  computed: {
-    authStatus() {
-      return this.$store.getters['authentication/authStatus'];
-    }
-  },
   methods: {
     resetState: function() {
       this.errorMsg.title = null;
diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue
index 1c4ba55..4412d19 100644
--- a/src/views/Overview/Overview.vue
+++ b/src/views/Overview/Overview.vue
@@ -1,12 +1,12 @@
 <template>
   <b-container fluid>
-    <page-title />
+    <PageTitle />
     <div class="quicklinks-section">
-      <overview-quick-links />
+      <OverviewQuickLinks />
     </div>
     <b-row>
       <b-col>
-        <page-section section-title="Server Information">
+        <PageSection sectionTitle="Server Information">
           <b-row>
             <b-col sm="6">
               <dl>
@@ -33,8 +33,8 @@
               </dl>
             </b-col>
           </b-row>
-        </page-section>
-        <page-section section-title="BMC information">
+        </PageSection>
+        <PageSection sectionTitle="BMC information">
           <b-row>
             <b-col sm="6">
               <dl>
@@ -51,7 +51,7 @@
             <b-col sm="6">
               <dl>
                 <dt>IP address</dt>
-                <dd v-for="ip in ipAddress" :key="ip.id">{{ ip }}</dd>
+                <dd v-for="ip in ipAddress" v-bind:key="ip.id">{{ ip }}</dd>
               </dl>
             </b-col>
             <b-col sm="6">
@@ -61,8 +61,8 @@
               </dl>
             </b-col>
           </b-row>
-        </page-section>
-        <page-section section-title="Power consumption">
+        </PageSection>
+        <PageSection sectionTitle="Power consumption">
           <b-row>
             <b-col sm="6">
               <dl>
@@ -77,12 +77,12 @@
               </dl>
             </b-col>
           </b-row>
-        </page-section>
+        </PageSection>
       </b-col>
     </b-row>
-    <page-section section-title="High priority events">
-      <overview-events />
-    </page-section>
+    <PageSection sectionTitle="High priority events">
+      <OverviewEvents />
+    </PageSection>
   </b-container>
 </template>
 
@@ -100,6 +100,9 @@
     PageTitle,
     PageSection
   },
+  created() {
+    this.getOverviewInfo();
+  },
   computed: mapState({
     serverModel: state => state.overview.serverModel,
     serverManufacturer: state => state.overview.serverManufacturer,
@@ -112,9 +115,6 @@
     ipAddress: state => state.networkSettings.ipAddress,
     macAddress: state => state.networkSettings.macAddress
   }),
-  created() {
-    this.getOverviewInfo();
-  },
   methods: {
     getOverviewInfo() {
       this.$store.dispatch('overview/getServerInfo');
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index 5820e61..07aab1d 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -8,7 +8,7 @@
           <small>{{
             logData.Timestamp | date('MMM DD YYYY HH:MM:SS A ZZ')
           }}</small>
-          <chevron-right16 />
+          <ChevronRight16 />
         </div>
         <p class="mb-1">{{ logData.eventID }}: {{ logData.description }}</p>
       </b-list-group-item>
@@ -22,18 +22,18 @@
 <script>
 import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
 export default {
-  name: 'Events',
+  name: 'events',
   components: {
     ChevronRight16
   },
+  created() {
+    this.getEventLogData();
+  },
   computed: {
     eventLogData() {
       return this.$store.getters['eventLog/eventLogData'];
     }
   },
-  created() {
-    this.getEventLogData();
-  },
   methods: {
     getEventLogData() {
       this.$store.dispatch('eventLog/getEventLogData');
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index f36c264..e8ed4dd 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -31,7 +31,7 @@
         class="d-flex justify-content-between align-items-center"
       >
         <span>Edit network settings</span>
-        <icon-arrow-right />
+        <IconArrowRight />
       </b-button>
     </div>
     <div>
@@ -42,7 +42,7 @@
         class="d-flex justify-content-between align-items-center"
       >
         <span>Serial over LAN console</span>
-        <icon-arrow-right />
+        <IconArrowRight />
       </b-button>
     </div>
   </div>
@@ -52,27 +52,27 @@
 import ArrowRight16 from '@carbon/icons-vue/es/arrow--right/16';
 
 export default {
-  name: 'QuickLinks',
+  name: 'quickLinks',
   components: {
     IconArrowRight: ArrowRight16
   },
-  data() {
-    return {
-      serverLEDChecked: false
-    };
+  created() {
+    this.getBmcTime();
   },
   computed: {
     bmcTime() {
       return this.$store.getters['global/bmcTime'];
     }
   },
-  created() {
-    this.getBmcTime();
-  },
   methods: {
     getBmcTime() {
       this.$store.dispatch('global/getBmcTime');
     }
+  },
+  data() {
+    return {
+      serverLedChecked: false
+    };
   }
 };
 </script>
diff --git a/src/views/Unauthorized/Unauthorized.vue b/src/views/Unauthorized/Unauthorized.vue
index d420359..446270d 100644
--- a/src/views/Unauthorized/Unauthorized.vue
+++ b/src/views/Unauthorized/Unauthorized.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <page-title :description="description" />
+    <PageTitle :description="description" />
   </div>
 </template>
 <script>