diff --git a/web/satellite/src/App.vue b/web/satellite/src/App.vue
index d3b2f06a1..3b0ea9f4a 100644
--- a/web/satellite/src/App.vue
+++ b/web/satellite/src/App.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div id="app" v-on:click="onClick">
+    <div id="app" @click="onClick">
         <router-view/>
         <!-- Area for displaying notification -->
         <NotificationArea/>
@@ -49,7 +49,7 @@ export default class App extends Vue {
 
 <style lang="scss">
     body {
-        margin: 0px !important;
+        margin: 0 !important;
         height: 100vh;
         zoom: 100%;
     }
diff --git a/web/satellite/src/components/account/AccountPaymentMethods.vue b/web/satellite/src/components/account/AccountPaymentMethods.vue
index e6ad17a9e..d5993f191 100644
--- a/web/satellite/src/components/account/AccountPaymentMethods.vue
+++ b/web/satellite/src/components/account/AccountPaymentMethods.vue
@@ -39,7 +39,7 @@
             label="Add Card"
             width="140px"
             height="48px"
-            isDisabled="true" />
+            is-disabled="true"/>
     </div>
 </template>
 
diff --git a/web/satellite/src/components/account/ChangePasswordPopup.vue b/web/satellite/src/components/account/ChangePasswordPopup.vue
index abe0074a5..7e8a3197b 100644
--- a/web/satellite/src/components/account/ChangePasswordPopup.vue
+++ b/web/satellite/src/components/account/ChangePasswordPopup.vue
@@ -23,7 +23,7 @@
                     label="Old Password"
                     placeholder ="Enter Old Password"
                     width="100%"
-                    isPassword="true"
+                    is-password="true"
                     ref="oldPasswordInput"
                     :error="oldPasswordError"
                     @setData="setOldPassword" />
@@ -33,7 +33,7 @@
                     placeholder ="Enter New Password"
                     width="100%"
                     ref="newPasswordInput"
-                    isPassword="true"
+                    is-password="true"
                     :error="newPasswordError"
                     @setData="setNewPassword" />
                 <HeaderlessInput
@@ -42,12 +42,12 @@
                     placeholder="Confirm password"
                     width="100%"
                     ref="confirmPasswordInput"
-                    isPassword="true"
+                    is-password="true"
                     :error="confirmationPasswordError"
                     @setData="setPasswordConfirmation" />
                 <div class="change-password-popup__form-container__button-container">
-                    <Button label="Cancel" width="205px" height="48px" :onPress="onCloseClick" isWhite="true" />
-                    <Button label="Update" width="205px" height="48px" :onPress="onUpdateClick" />
+                    <Button label="Cancel" width="205px" height="48px" :on-press="onCloseClick" is-white="true" />
+                    <Button label="Update" width="205px" height="48px" :on-press="onUpdateClick" />
                 </div>
             </div>
             <div class="change-password-popup__close-cross-container" @click="onCloseClick">
diff --git a/web/satellite/src/components/account/DeleteAccountPopup.vue b/web/satellite/src/components/account/DeleteAccountPopup.vue
index 6537c504b..ae00e686a 100644
--- a/web/satellite/src/components/account/DeleteAccountPopup.vue
+++ b/web/satellite/src/components/account/DeleteAccountPopup.vue
@@ -44,13 +44,13 @@
                     placeholder='Your Password'
                     class='full-input'
                     width='100%'
-                    isPassword
+                    is-password="true"
                     :error='passwordError'
                     @setData='setPassword'>
                 </HeaderedInput>
                 <div class='delete-account__form-container__button-container'>
-                    <Button label='Cancel' width='205px' height='48px' :onPress='onCloseClick' isWhite="true"/>
-                    <Button label='Delete' width='205px' height='48px' class='red' :onPress='onDeleteAccountClick'/>
+                    <Button label='Cancel' width='205px' height='48px' :on-press='onCloseClick' is-white="true"/>
+                    <Button label='Delete' width='205px' height='48px' class='red' :on-press='onDeleteAccountClick'/>
                 </div>
             </div>
             <div class='delete-account__close-cross-container' @click='onCloseClick'>
diff --git a/web/satellite/src/components/account/EditProfilePopup.vue b/web/satellite/src/components/account/EditProfilePopup.vue
index ad0842ef1..91d474605 100644
--- a/web/satellite/src/components/account/EditProfilePopup.vue
+++ b/web/satellite/src/components/account/EditProfilePopup.vue
@@ -18,7 +18,7 @@
                     width="100%"
                     ref="fullNameInput"
                     :error="fullNameError"
-                    :initValue="userInfo.fullName"
+                    :init-value="userInfo.fullName"
                     @setData="setFullName" />
                 <HeaderedInput
                     class="full-input"
@@ -26,11 +26,11 @@
                     placeholder="Enter Nickname"
                     width="100%"
                     ref="shortNameInput"
-                    :initValue="userInfo.shortName"
+                    :init-value="userInfo.shortName"
                     @setData="setShortName"/>
                 <div class="edit-profile-popup__form-container__button-container">
-                    <Button label="Cancel" width="205px" height="48px" :onPress="onCloseClick" isWhite="true" />
-                    <Button label="Update" width="205px" height="48px" :onPress="onUpdateClick" />
+                    <Button label="Cancel" width="205px" height="48px" :on-press="onCloseClick" isWhite="true" />
+                    <Button label="Update" width="205px" height="48px" :on-press="onUpdateClick" />
                 </div>
             </div>
             <div class="edit-profile-popup__close-cross-container" @click="onCloseClick">
diff --git a/web/satellite/src/components/account/Profile.vue b/web/satellite/src/components/account/Profile.vue
index 55ceba325..0a71ff25f 100644
--- a/web/satellite/src/components/account/Profile.vue
+++ b/web/satellite/src/components/account/Profile.vue
@@ -58,8 +58,8 @@
                 label="Delete account"
                 width="210px"
                 height="56px"
-                :onPress="toggleDeleteAccountPopup"
-                isDeletion="true"/>
+                :on-press="toggleDeleteAccountPopup"
+                is-deletion="true"/>
         </div>
         <ChangePasswordPopup v-if="isChangePasswordPopupShown"/>
         <EditProfilePopup v-if="isEditProfilePopupShown"/>
diff --git a/web/satellite/src/components/account/billing/AccountBalance.vue b/web/satellite/src/components/account/billing/AccountBalance.vue
index f26a40046..15764824b 100644
--- a/web/satellite/src/components/account/billing/AccountBalance.vue
+++ b/web/satellite/src/components/account/billing/AccountBalance.vue
@@ -19,7 +19,7 @@
                 label="Earn Credits"
                 width="153px"
                 height="48px"
-                :onPress="onEarnCredits"/>
+                :on-press="onEarnCredits"/>
         </div>
     </div>
 </template>
diff --git a/web/satellite/src/components/account/billing/BillingHistory.vue b/web/satellite/src/components/account/billing/BillingHistory.vue
index 6da1c6c80..83ed47ccb 100644
--- a/web/satellite/src/components/account/billing/BillingHistory.vue
+++ b/web/satellite/src/components/account/billing/BillingHistory.vue
@@ -63,7 +63,7 @@ export default class BillingHistory extends Vue {
             display: flex;
             align-items: center;
             cursor: pointer;
-            width: 183px;
+            width: 184px;
             margin-bottom: 27px;
 
             &__back-button {
diff --git a/web/satellite/src/components/apiKeys/ApiKeysArea.vue b/web/satellite/src/components/apiKeys/ApiKeysArea.vue
index 8e3c2c8ba..60cc1bc16 100644
--- a/web/satellite/src/components/apiKeys/ApiKeysArea.vue
+++ b/web/satellite/src/components/apiKeys/ApiKeysArea.vue
@@ -8,25 +8,25 @@
             <ApiKeysCreationPopup
                 @closePopup="closeNewApiKeyPopup"
                 @showCopyPopup="showCopyApiKeyPopup"
-                :isPopupShown="isNewApiKeyPopupShown"/>
+                :is-popup-shown="isNewApiKeyPopupShown"/>
             <ApiKeysCopyPopup
-                :isPopupShown="isCopyApiKeyPopupShown"
-                :apiKeySecret="apiKeySecret"
+                :is-popup-shown="isCopyApiKeyPopupShown"
+                :api-key-secret="apiKeySecret"
                 @closePopup="closeCopyNewApiKeyPopup"/>
             <div v-if="!isEmpty || hasSearchQuery" class="api-keys-header">
-                <HeaderComponent ref="headerComponent" placeHolder="API Key" :search="onSearchQueryCallback">
+                <HeaderComponent ref="headerComponent" placeholder="API Key" :search="onSearchQueryCallback">
                     <div class="header-default-state" v-if="headerState === 0">
-                        <Button class="button" label="+Create API Key" width="180px" height="48px" :onPress="onCreateApiKeyClick"/>
+                        <Button class="button" label="+Create API Key" width="180px" height="48px" :on-press="onCreateApiKeyClick"/>
                     </div>
                     <div class="header-selected-api-keys" v-if="headerState === 1 && !isDeleteClicked">
-                        <Button class="button deletion" label="Delete" width="122px" height="48px" :onPress="onFirstDeleteClick"/>
-                        <Button class="button" label="Cancel" width="122px" height="48px" isWhite="true" :onPress="onClearSelection"/>
+                        <Button class="button deletion" label="Delete" width="122px" height="48px" :on-press="onFirstDeleteClick"/>
+                        <Button class="button" label="Cancel" width="122px" height="48px" is-white="true" :on-press="onClearSelection"/>
                     </div>
                     <div class="header-after-delete-click" v-if="headerState === 1 && isDeleteClicked">
                         <span>Are you sure you want to delete {{selectedAPIKeysCount}} {{apiKeyCountTitle}} ?</span>
                         <div class="header-after-delete-click__button-area">
-                            <Button class="button deletion" label="Delete" width="122px" height="48px" :onPress="onDelete"/>
-                            <Button class="button" label="Cancel" width="122px" height="48px" isWhite="true" :onPress="onClearSelection"/>
+                            <Button class="button deletion" label="Delete" width="122px" height="48px" :on-press="onDelete"/>
+                            <Button class="button" label="Cancel" width="122px" height="48px" is-white="true" :on-press="onClearSelection"/>
                         </div>
                     </div>
                 </HeaderComponent>
@@ -37,9 +37,9 @@
                 <SortingHeader :onHeaderClickCallback="onHeaderSectionClickCallback"/>
                 <div class="api-keys-items__content">
                     <List
-                        :dataSet="apiKeyList"
-                        :itemComponent="itemComponent"
-                        :onItemClick="toggleSelection"/>
+                        :data-set="apiKeyList"
+                        :item-component="itemComponent"
+                        :on-item-click="toggleSelection"/>
                 </div>
                 <Pagination
                     class="pagination-area"
@@ -82,13 +82,13 @@
                 </svg>
             </div>
             <EmptyState
-                :onButtonClick="onCreateApiKeyClick"
+                :on-button-click="onCreateApiKeyClick"
                 v-if="isEmpty && !isNewApiKeyPopupShown && !hasSearchQuery"
-                mainTitle="Let's create your first API Key"
+                main-title="Let's create your first API Key"
                 additional-text="<p>API keys give access to the project allowing you to create buckets, upload files, and read them. Once you’ve created an API key, you’re ready to interact with the network through our Uplink CLI.</p>"
-                :imageSource="emptyImage"
-                buttonLabel="Create an API Key"
-                isButtonShown="true" />
+                :image-source="emptyImage"
+                button-label="Create an API Key"
+                is-button-shown="true" />
         </div>
     </div>
 </template>
diff --git a/web/satellite/src/components/apiKeys/ApiKeysCreationPopup.vue b/web/satellite/src/components/apiKeys/ApiKeysCreationPopup.vue
index ab404201d..8d7da40d6 100644
--- a/web/satellite/src/components/apiKeys/ApiKeysCreationPopup.vue
+++ b/web/satellite/src/components/apiKeys/ApiKeysCreationPopup.vue
@@ -10,7 +10,7 @@
             placeholder="Enter API Key Name"
             class="full-input"
             width="100%" />
-        <Button class="next-button" label="Next >" width="128px" height="48px" :onPress="onNextClick" />
+        <Button class="next-button" label="Next >" width="128px" height="48px" :on-press="onNextClick" />
         <div class="new-api-key__close-cross-container" @click="onCloseClick">
             <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/>
diff --git a/web/satellite/src/components/buckets/BucketArea.vue b/web/satellite/src/components/buckets/BucketArea.vue
index da671cdfe..681db3483 100644
--- a/web/satellite/src/components/buckets/BucketArea.vue
+++ b/web/satellite/src/components/buckets/BucketArea.vue
@@ -7,7 +7,7 @@
         <div class="buckets-overflow" v-else>
             <div class="buckets-header">
                 <p>Buckets</p>
-                <HeaderComponent class="buckets-header-component" placeHolder="Buckets" :search="fetch"/>
+                <HeaderComponent class="buckets-header-component" placeholder="Buckets" :search="fetch"/>
             </div>
             <div class="buckets-notification-container">
                 <div class="buckets-notification">
@@ -20,14 +20,14 @@
             </div>
             <div v-if="buckets.length" class="buckets-container">
                 <SortingHeader />
-                <List :dataSet="buckets" :itemComponent="itemComponent" :onItemClick="doNothing"/>
-                <Pagination v-if="totalPageCount > 1" :totalPageCount="totalPageCount" :onPageClickCallback="onPageClick" />
+                <List :data-set="buckets" :item-component="itemComponent" :on-item-click="doNothing"/>
+                <Pagination v-if="totalPageCount > 1" :total-page-count="totalPageCount" :on-page-click-callback="onPageClick" />
             </div>
             <EmptyState
                 class="empty-container"
                 v-if="!totalPageCount && search"
-                mainTitle="Nothing found :("
-                :imageSource="emptyImage" />
+                main-title="Nothing found :("
+                :image-source="emptyImage" />
         </div>
     </div>
 </template>
diff --git a/web/satellite/src/components/common/Button.vue b/web/satellite/src/components/common/Button.vue
index 5514af706..24dae6d48 100644
--- a/web/satellite/src/components/common/Button.vue
+++ b/web/satellite/src/components/common/Button.vue
@@ -4,10 +4,10 @@
 <template>
     <!-- if isDisabled check onPress in parent element -->
     <div
-        v-bind:class="containerClassName"
+        :class="containerClassName"
         :style="style"
-        v-on:click="onPress">
-            <h1 v-bind:class="[isWhite ? 'label white' : 'label']">{{label}}</h1>
+        @click="onPress">
+            <h1 :class="[isWhite ? 'label white' : 'label']">{{label}}</h1>
     </div>
 </template>
 
diff --git a/web/satellite/src/components/common/Checkbox.vue b/web/satellite/src/components/common/Checkbox.vue
index 836ed05b6..3fe30ad2b 100644
--- a/web/satellite/src/components/common/Checkbox.vue
+++ b/web/satellite/src/components/common/Checkbox.vue
@@ -4,7 +4,7 @@
 <template>
     <label class="container">
         <input type="checkbox" v-model="checked" @change="onChange">
-        <span v-bind:class="[isCheckboxError ? 'checkmark error': 'checkmark']"></span>
+        <span :class="[isCheckboxError ? 'checkmark error': 'checkmark']"></span>
     </label>
 </template>
 
diff --git a/web/satellite/src/components/common/EmptyStateArea.vue b/web/satellite/src/components/common/EmptyStateArea.vue
index 4cf197306..f58660135 100644
--- a/web/satellite/src/components/common/EmptyStateArea.vue
+++ b/web/satellite/src/components/common/EmptyStateArea.vue
@@ -8,7 +8,7 @@
             <div class="empty-state__wrap__additional-text" v-html="additionalText"/>
             <div id="addApiKeysPopupEmptyButton" v-if="isButtonShown">
                 <Button
-                    :onPress="onButtonClick"
+                    :on-press="onButtonClick"
                     :label="buttonLabel"
                     width="190px"
                     height="50px"/>
diff --git a/web/satellite/src/components/common/HeaderComponent.vue b/web/satellite/src/components/common/HeaderComponent.vue
index 72e5e77b0..c08941d75 100644
--- a/web/satellite/src/components/common/HeaderComponent.vue
+++ b/web/satellite/src/components/common/HeaderComponent.vue
@@ -6,7 +6,7 @@
         <div class="header-container__buttons-area">
             <slot></slot>
         </div>
-        <SearchComponent ref="search" :placeHolder="placeHolder" :search="search"/>
+        <SearchComponent ref="search" :placeholder="placeholder" :search="search"/>
     </div>
 </template>
 
@@ -27,7 +27,7 @@ declare interface ClearSearch {
 })
 export default class HeaderComponent extends Vue {
     @Prop({default: ''})
-    private readonly placeHolder: string;
+    private readonly placeholder: string;
     @Prop({default: () => ''})
     private readonly search: searchCallback;
 
diff --git a/web/satellite/src/components/common/HeaderedInput.vue b/web/satellite/src/components/common/HeaderedInput.vue
index 808df6111..1daab898d 100644
--- a/web/satellite/src/components/common/HeaderedInput.vue
+++ b/web/satellite/src/components/common/HeaderedInput.vue
@@ -29,7 +29,7 @@
             v-if="!isMultiline"
             :id="this.$props.label"
             :placeholder="this.$props.placeholder"
-            v-bind:type="[isPassword ? 'password': 'text']"
+            :type="[isPassword ? 'password': 'text']"
             @input="onInput"
             @change="onInput"
             v-model="value"
diff --git a/web/satellite/src/components/common/List.vue b/web/satellite/src/components/common/List.vue
index e332cf78f..d9f910115 100644
--- a/web/satellite/src/components/common/List.vue
+++ b/web/satellite/src/components/common/List.vue
@@ -7,7 +7,7 @@
             v-for="item in dataSet"
             class="item-component__item"
             :is="itemComponent"
-            :itemData="item"
+            :item-data="item"
             @click.native="onItemClick(item)"
             :class="{ selected: item.isSelected }"/>
     </div>
diff --git a/web/satellite/src/components/common/PagesBlock.vue b/web/satellite/src/components/common/PagesBlock.vue
index cb04deb58..d0df0cebe 100644
--- a/web/satellite/src/components/common/PagesBlock.vue
+++ b/web/satellite/src/components/common/PagesBlock.vue
@@ -5,7 +5,7 @@
     <div class="pages-container">
         <span
             v-for="page in pages"
-            :class="{'selected': checkSelected(page.index)}"
+            :class="{'selected': isSelected(page.index)}"
             @click="page.select()"
             :key="page.index">{{page.index}}</span>
     </div>
@@ -21,7 +21,7 @@ export default class PagesBlock extends Vue {
     @Prop({default: () => []})
     public readonly pages: Page[];
     @Prop({default: () => false})
-    public readonly checkSelected: CheckSelected;
+    public readonly isSelected: CheckSelected;
 }
 </script>
 
diff --git a/web/satellite/src/components/common/Pagination.vue b/web/satellite/src/components/common/Pagination.vue
index e2e8a1005..3c8a7b6a5 100644
--- a/web/satellite/src/components/common/Pagination.vue
+++ b/web/satellite/src/components/common/Pagination.vue
@@ -6,11 +6,11 @@
         <div class="pagination-container__pages">
             <div v-html="arrowLeft" @click="prevPage" class="pagination-container__button"></div>
             <div class="pagination-container__items">
-                <PagesBlock :pages="firstBlockPages" :checkSelected="isSelected"/>
+                <PagesBlock :pages="firstBlockPages" :is-selected="isSelected"/>
                 <span v-if="isFirstDotsShown">...</span>
-                <PagesBlock :pages="middleBlockPages" :checkSelected="isSelected"/>
+                <PagesBlock :pages="middleBlockPages" :is-selected="isSelected"/>
                 <span v-if="isSecondDotsShown">...</span>
-                <PagesBlock :pages="lastBlockPages" :checkSelected="isSelected"/>
+                <PagesBlock :pages="lastBlockPages" :is-selected="isSelected"/>
             </div>
             <div v-html="arrowRight" @click="nextPage" class="pagination-container__button"></div>
         </div>
diff --git a/web/satellite/src/components/common/SearchComponent.vue b/web/satellite/src/components/common/SearchComponent.vue
index 8816f493c..7196fad80 100644
--- a/web/satellite/src/components/common/SearchComponent.vue
+++ b/web/satellite/src/components/common/SearchComponent.vue
@@ -8,7 +8,7 @@
         @mouseleave="onMouseLeave"
         @input="processSearchQuery"
         v-model="searchQuery"
-        :placeholder="`Search ${placeHolder}`"
+        :placeholder="`Search ${placeholder}`"
         :style="style"
         type="text"
         autocomplete="off">
@@ -25,7 +25,7 @@ declare interface SearchStyle {
 @Component
 export default class SearchComponent extends Vue {
     @Prop({default: ''})
-    private readonly placeHolder: string;
+    private readonly placeholder: string;
     @Prop({default: () => ''})
     private readonly search: searchCallback;
 
diff --git a/web/satellite/src/components/common/registrationSuccessPopup.html b/web/satellite/src/components/common/registrationSuccessPopup.html
index dd3e53aab..73a22245f 100644
--- a/web/satellite/src/components/common/registrationSuccessPopup.html
+++ b/web/satellite/src/components/common/registrationSuccessPopup.html
@@ -19,7 +19,7 @@
             <p>You have almost finished registering your account on the Tardigrade Satellite. Only one step left. Please check your inbox for a verification email.</p>
             <h3>Didn’t receive a verification email?<b> {{timeToEnableResendEmailButton}}</b></h3>
             <div class="register-success-popup__form-container__button-container">
-                <Button label="Resend Email" width="450px" height="50px" :onPress="onResendEmailButtonClick" :isDisabled="isResendEmailButtonDisabled"/>
+                <Button label="Resend Email" width="450px" height="50px" :on-press="onResendEmailButtonClick" :is-disabled="isResendEmailButtonDisabled"/>
             </div>
         </div>
         <div class="register-success-popup__close-cross-container" @click="onCloseClick">
diff --git a/web/satellite/src/components/common/test/TestList.vue b/web/satellite/src/components/common/test/TestList.vue
index 1880ac6e0..40445caf6 100644
--- a/web/satellite/src/components/common/test/TestList.vue
+++ b/web/satellite/src/components/common/test/TestList.vue
@@ -3,9 +3,9 @@
 
 <template>
     <List
-        :dataSet="dataSetItems"
-        :itemComponent="getItemComponent"
-        :onItemClick="onItemClick"/>
+        :data-set="dataSetItems"
+        :item-component="getItemComponent"
+        :on-item-click="onItemClick"/>
 </template>
 
 <script lang="ts">
diff --git a/web/satellite/src/components/dashboard/DashboardArea.vue b/web/satellite/src/components/dashboard/DashboardArea.vue
index c97b90ff6..5c1d1ce11 100644
--- a/web/satellite/src/components/dashboard/DashboardArea.vue
+++ b/web/satellite/src/components/dashboard/DashboardArea.vue
@@ -4,8 +4,8 @@
 <template>
     <div>
         <EmptyState
-            mainTitle="Create your first new project"
-            :imageSource="emptyImage" />
+            main-title="Create your first new project"
+            :image-source="emptyImage" />
     </div>
 </template>
 
diff --git a/web/satellite/src/components/header/AccountButton.vue b/web/satellite/src/components/header/AccountButton.vue
index 673d76173..a4a6d4366 100644
--- a/web/satellite/src/components/header/AccountButton.vue
+++ b/web/satellite/src/components/header/AccountButton.vue
@@ -3,7 +3,7 @@
 
 <template>
     <div class="account-button-container" id="accountDropdownButton">
-        <div class="account-button-toggle-container" v-on:click="toggleSelection" >
+        <div class="account-button-toggle-container" @click="toggleSelection" >
             <!-- background of this div generated and stores in store -->
             <div class="account-button-toggle-container__avatar">
                 <!-- First digit of firstName after Registration -->
diff --git a/web/satellite/src/components/header/AccountDropdown.vue b/web/satellite/src/components/header/AccountDropdown.vue
index bbbb20746..00695c3fa 100644
--- a/web/satellite/src/components/header/AccountDropdown.vue
+++ b/web/satellite/src/components/header/AccountDropdown.vue
@@ -6,7 +6,7 @@
     <div class="account-dropdown-choice-container" id="accountDropdown">
         <div class="account-dropdown-overflow-container">
             <!-- TODO: add selection logic onclick -->
-            <div class="account-dropdown-item-container settings" v-on:click="onAccountSettingsClick" >
+            <div class="account-dropdown-item-container settings" @click="onAccountSettingsClick" >
                 <div class="account-dropdown-item-container__image-container">
                     <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M20 8.72549C20 9.60784 20 10.4902 20 11.2745C19.9024 11.5686 19.7073 11.6667 19.4146 11.7647C18.7317 11.9608 18.1463 12.0588 17.4634 12.2549C17.3659 12.2549 17.2683 12.3529 17.2683 12.451C17.1707 12.7451 16.9756 13.0392 16.878 13.4314C16.878 13.5294 16.878 13.6275 16.878 13.7255C17.1707 14.2157 17.4634 14.7059 17.7561 15.2941C17.9512 15.6863 17.9512 15.8824 17.6585 16.1765C17.1707 16.6667 16.6829 17.1569 16.1951 17.6471C15.9024 17.9412 15.6098 17.9412 15.3171 17.7451C14.8293 17.451 14.3415 17.1569 13.8537 16.8627C13.7561 16.7647 13.6585 16.7647 13.561 16.8627C13.2683 17.0588 12.878 17.1569 12.5854 17.2549C12.4878 17.2549 12.3902 17.3529 12.3902 17.451C12.1951 18.1373 12.0976 18.7255 11.9024 19.4118C11.8049 19.7059 11.7073 19.902 11.4146 20C10.5366 20 9.65854 20 8.87805 20C8.58537 19.902 8.48781 19.7059 8.39024 19.4118C8.19512 18.7255 8.09756 18.1373 7.90244 17.451C7.90244 17.3529 7.80488 17.2549 7.70732 17.2549C7.41463 17.1569 7.02439 16.9608 6.73171 16.8627C6.63415 16.7647 6.53659 16.8627 6.43902 16.8627C5.95122 17.1569 5.46341 17.451 4.97561 17.7451C4.58537 17.9412 4.39024 17.9412 4.09756 17.6471C3.60976 17.1569 3.12195 16.6667 2.63415 16.1765C2.34146 15.8824 2.34146 15.5882 2.53659 15.2941C2.82927 14.8039 3.12195 14.3137 3.41463 13.8235C3.5122 13.7255 3.5122 13.6275 3.41463 13.5294C3.21951 13.2353 3.12195 12.8431 3.02439 12.549C3.02439 12.451 2.92683 12.3529 2.82927 12.3529C2.14634 12.1569 1.46341 12.0588 0.780488 11.8627C0.195122 11.7647 0 11.5686 0 11.1765C0 10.4902 0 9.70588 0 9.01961C0 8.62745 0.195122 8.43137 0.585366 8.33333C1.26829 8.13725 1.95122 7.94118 2.53659 7.7451C2.63415 7.7451 2.73171 7.64706 2.73171 7.54902C2.92683 7.35294 3.02439 7.05882 3.12195 6.76471C3.12195 6.66667 3.12195 6.56863 3.12195 6.47059C2.82927 5.88235 2.43902 5.39216 2.14634 4.80392C1.95122 4.41176 1.95122 4.21569 2.2439 3.92157C2.73171 3.43137 3.21951 2.94118 3.70732 2.45098C4 2.15686 4.29268 2.15686 4.58537 2.35294C5.17073 2.64706 5.65854 3.03922 6.2439 3.33333C6.34146 3.33333 6.43902 3.33333 6.53659 3.33333C6.82927 3.13725 7.21951 2.94118 7.5122 2.84314C7.60976 2.84314 7.70732 2.7451 7.70732 2.64706C7.90244 1.96078 8 1.27451 8.19512 0.588235C8.39024 0.196078 8.58537 0 8.97561 0C9.65854 0 10.439 0 11.122 0C11.5122 0 11.7073 0.196078 11.8049 0.588235C12 1.27451 12.0976 1.96078 12.2927 2.64706C12.2927 2.7451 12.3902 2.84314 12.4878 2.84314C12.7805 2.94118 13.1707 3.13725 13.4634 3.23529C13.561 3.33333 13.6585 3.23529 13.7561 3.23529C14.2439 2.94118 14.7317 2.64706 15.2195 2.35294C15.6098 2.15686 15.8049 2.15686 16.1951 2.45098C16.6829 2.94118 17.1707 3.43137 17.6585 3.92157C17.9512 4.21569 18.0488 4.5098 17.7561 4.90196C17.4634 5.39216 17.1707 5.88235 16.878 6.47059C16.878 6.56863 16.878 6.66667 16.878 6.76471C16.9756 7.05882 17.1707 7.45098 17.2683 7.7451C17.2683 7.84314 17.3659 7.94118 17.4634 7.94118C18.1463 8.13726 18.7317 8.23529 19.4146 8.43137C19.7073 8.33333 19.9024 8.52941 20 8.72549ZM10.0488 5.98039C7.80488 5.98039 5.95122 7.84314 5.95122 10.098C5.95122 12.3529 7.80488 14.2157 10.0488 14.2157C12.2927 14.2157 14.1463 12.3529 14.1463 10.098C14.1463 7.7451 12.2927 5.98039 10.0488 5.98039Z" fill="#354049"/>
@@ -14,7 +14,7 @@
                 </div>
                 <h2>Account Settings</h2>
             </div>
-            <div class="account-dropdown-item-container logout" v-on:click="onLogoutClick">
+            <div class="account-dropdown-item-container logout" @click="onLogoutClick">
                 <div class="account-dropdown-item-container__image-container">
                     <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path fill-rule="evenodd" clip-rule="evenodd" d="M9.53516 1C4.28906 1 0 5.25293 0 10.5C0 15.7471 4.28906 20 9.53516 20C14.3887 20 18.4229 16.3604 19 11.6611H10.2783L11.8682 13.2441C12.1562 13.5322 12.248 14.0156 12.1436 14.4277C12.0947 14.6211 12.0029 14.7988 11.8682 14.9336C11.4443 15.3555 10.5967 15.3555 10.1729 14.9336L5.72266 10.5L10.1729 6.06641C10.5967 5.64453 11.4443 5.64453 11.8682 6.06641C12.291 6.48926 12.291 7.33301 11.8682 7.75586L10.2783 9.33887H19C18.4229 4.63965 14.3887 1 9.53516 1Z" fill="#354049"/>
diff --git a/web/satellite/src/components/header/projectSelection/ProjectSelectionDropdown.vue b/web/satellite/src/components/header/projectSelection/ProjectSelectionDropdown.vue
index 3070a3c78..52b06d980 100644
--- a/web/satellite/src/components/header/projectSelection/ProjectSelectionDropdown.vue
+++ b/web/satellite/src/components/header/projectSelection/ProjectSelectionDropdown.vue
@@ -6,13 +6,13 @@
         <div class="project-selection-overflow-container">
             <!-- loop for rendering projects -->
             <!-- TODO: add selection logic onclick -->
-            <div class="project-selection-overflow-container__project-choice" v-on:click="onProjectSelected(project.id)" v-for="project in projects" v-bind:key="project.id" >
+            <div class="project-selection-overflow-container__project-choice" @click="onProjectSelected(project.id)" v-for="project in projects" :key="project.id" >
                 <div class="project-selection-overflow-container__project-choice__mark-container">
                     <svg v-if="project.isSelected" width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M14.0928 3.02746C14.6603 2.4239 14.631 1.4746 14.0275 0.907152C13.4239 0.339699 12.4746 0.368972 11.9072 0.972536L14.0928 3.02746ZM4.53846 11L3.44613 12.028C3.72968 12.3293 4.12509 12.5001 4.53884 12.5C4.95258 12.4999 5.34791 12.3289 5.63131 12.0275L4.53846 11ZM3.09234 7.27469C2.52458 6.67141 1.57527 6.64261 0.971991 7.21036C0.36871 7.77812 0.339911 8.72743 0.907664 9.33071L3.09234 7.27469ZM11.9072 0.972536L3.44561 9.97254L5.63131 12.0275L14.0928 3.02746L11.9072 0.972536ZM5.6308 9.97199L3.09234 7.27469L0.907664 9.33071L3.44613 12.028L5.6308 9.97199Z" fill="#2683FF"/>
                     </svg>
                 </div>
-                <h2 v-bind:class="[project.isSelected ? 'project-selection-overflow-container__project-choice--selected' : 'project-selection-overflow-container__project-choice--unselected']">{{project.name}}</h2>
+                <h2 :class="[project.isSelected ? 'project-selection-overflow-container__project-choice--selected' : 'project-selection-overflow-container__project-choice--unselected']">{{project.name}}</h2>
             </div>
         </div>
     </div>
diff --git a/web/satellite/src/components/navigation/navigationArea.html b/web/satellite/src/components/navigation/navigationArea.html
index de93de10d..03f2e43e0 100644
--- a/web/satellite/src/components/navigation/navigationArea.html
+++ b/web/satellite/src/components/navigation/navigationArea.html
@@ -24,7 +24,7 @@
         </div>
         <ProjectSelectionArea class="project-selection-area"/>
         <p class="navigation-area__project-title">PROJECT</p>
-        <router-link :aria-label="navItem.name" class="navigation-area__item-container" v-bind:class="{disabled: isProjectNotSelected && navItem.path !== '/project-details'}" v-for="navItem in navigation" v-bind:key="navItem.name" :to="navItem.path">
+        <router-link :aria-label="navItem.name" class="navigation-area__item-container" :class="{disabled: isProjectNotSelected && navItem.path !== '/project-details'}" v-for="navItem in navigation" :key="navItem.name" :to="navItem.path">
             <div class="navigation-area__item-container__link-container" >
                 <div v-html="navItem.icon"></div>
                 <h1>{{navItem.name}}</h1>
@@ -60,7 +60,7 @@
             <p v-if="!areAccountItemsShown && isAccountButtonShown" @click="toggleAccountItemsVisibility" class="navigation-area__account-title__button">Show</p>
             <p v-if="areAccountItemsShown && isAccountButtonShown" @click="toggleAccountItemsVisibility" class="navigation-area__account-title__button">Hide</p>
         </div>
-        <router-link v-if="areAccountItemsShown" class="navigation-area__item-container account-item" v-for="navItem in accountNavigation" v-bind:key="navItem.name" :to="navItem.path">
+        <router-link v-if="areAccountItemsShown" class="navigation-area__item-container account-item" v-for="navItem in accountNavigation" :key="navItem.name" :to="navItem.path">
             <div class="navigation-area__item-container__link-container" >
                 <h1 class="account-item">{{navItem.name}}</h1>
             </div>
diff --git a/web/satellite/src/components/project/DeleteProjectPopup.vue b/web/satellite/src/components/project/DeleteProjectPopup.vue
index c693da950..ec579046f 100644
--- a/web/satellite/src/components/project/DeleteProjectPopup.vue
+++ b/web/satellite/src/components/project/DeleteProjectPopup.vue
@@ -56,17 +56,17 @@
                         type="text" 
                         placeholder="Enter Project Name"
                         v-model="projectName"
-                        v-on:keyup="resetError" >
+                        @keyup="resetError" >
                 </div>
                 <div class="delete-project-popup__form-container__button-container">
-                    <Button label="Cancel" width="205px" height="48px" :onPress="onCloseClick" isWhite="true"/>
+                    <Button label="Cancel" width="205px" height="48px" :on-press="onCloseClick" is-white="true"/>
                     <Button 
                         label="Delete"
                         width="205px" 
                         height="48px" 
                         class="red"
-                        :onPress="onDeleteProjectClick" 
-                        :isDisabled="isDeleteButtonDisabled" />
+                        :on-press="onDeleteProjectClick"
+                        :is-disabled="isDeleteButtonDisabled" />
                 </div>
             </div>
             <div class="delete-project-popup__close-cross-container" @click="onCloseClick">
diff --git a/web/satellite/src/components/project/NewProjectPopup.vue b/web/satellite/src/components/project/NewProjectPopup.vue
index 9153c87b4..57d136052 100644
--- a/web/satellite/src/components/project/NewProjectPopup.vue
+++ b/web/satellite/src/components/project/NewProjectPopup.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="new-project-popup-container" v-on:keyup.enter="createProjectClick" v-on:keyup.esc="onCloseClick">
+    <div class="new-project-popup-container" @keyup.enter="createProjectClick" @keyup.esc="onCloseClick">
         <div class="new-project-popup" id="newProjectPopup" >
             <div class="new-project-popup__info-panel-container">
                 <h2 class="new-project-popup__info-panel-container__main-label-text">Create a Project</h2>
@@ -11,11 +11,11 @@
             <div class="new-project-popup__form-container">
                 <HeaderedInput
                     label="Project Name"
-                    additionalLabel="Up To 20 Characters"
+                    additional-label="Up To 20 Characters"
                     placeholder="Enter Project Name"
                     class="full-input"
                     width="100%"
-                    maxSymbols="20"
+                    max-symbols="20"
                     :error="nameError"
                     @setData="setProjectName">
                 </HeaderedInput>
@@ -24,14 +24,14 @@
                     placeholder="Enter Project Description"
                     additional-label="Optional"
                     class="full-input"
-                    isMultiline="true"
+                    is-multiline="true"
                     height="100px"
                     width="100%"
                     @setData="setProjectDescription">
                 </HeaderedInput>
                 <div class="new-project-popup__form-container__button-container">
-                    <Button label="Cancel" width="205px" height="48px" :onPress="onCloseClick" isWhite="true"/>
-                    <Button label="Next" width="205px" height="48px" :onPress="createProjectClick"/>
+                    <Button label="Cancel" width="205px" height="48px" :on-press="onCloseClick" is-white="true"/>
+                    <Button label="Next" width="205px" height="48px" :on-press="createProjectClick"/>
                 </div>
             </div>
             <div class="new-project-popup__close-cross-container" @click="onCloseClick">
diff --git a/web/satellite/src/components/project/ProjectCreationSuccessPopup.vue b/web/satellite/src/components/project/ProjectCreationSuccessPopup.vue
index ae6f3a06f..768ad6df1 100644
--- a/web/satellite/src/components/project/ProjectCreationSuccessPopup.vue
+++ b/web/satellite/src/components/project/ProjectCreationSuccessPopup.vue
@@ -35,8 +35,8 @@
                     <a href="https://github.com/storj/storj/wiki/Uplink-CLI" target="_blank">Uplink CLI.</a>
                 </p>
                 <div class="project-creation-success-popup__form-container__button-container">
-                    <Button label="I will do it later" width="214px" height="50px" :onPress="onCloseClick" isWhite="true" />
-                    <Button label="Create first API Key" width="214px" height="50px" :onPress="onCreateAPIKeyClick" />
+                    <Button label="I will do it later" width="214px" height="50px" :on-press="onCloseClick" is-white="true" />
+                    <Button label="Create first API Key" width="214px" height="50px" :on-press="onCreateAPIKeyClick" />
                 </div>
             </div>
             <div class="project-creation-success-popup__close-cross-container" @click="onCloseClick">
diff --git a/web/satellite/src/components/project/ProjectDetails.vue b/web/satellite/src/components/project/ProjectDetails.vue
index 5133af9ff..9ff1b873e 100644
--- a/web/satellite/src/components/project/ProjectDetails.vue
+++ b/web/satellite/src/components/project/ProjectDetails.vue
@@ -18,7 +18,7 @@
                         <h3>{{description}}</h3>
                     </div>
                     <div title="Edit">
-                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" v-on:click="toggleEditing">
+                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" @click="toggleEditing">
                             <rect width="40" height="40" rx="4" fill="#E2ECF7"/>
                             <path d="M19.0901 21.4605C19.3416 21.7259 19.6695 21.8576 19.9995 21.8576C20.3295 21.8576 20.6574 21.7259 20.9089 21.4605L28.6228 13.3181C29.1257 12.7871 29.1257 11.9291 28.6228 11.3982C28.1198 10.8673 27.3069 10.8673 26.8039 11.3982L19.0901 19.5406C18.5891 20.0715 18.5891 20.9295 19.0901 21.4605ZM27.7134 19.1435C27.0031 19.1435 26.4277 19.7509 26.4277 20.5005V27.2859H13.5713V13.7152H19.9995C20.7097 13.7152 21.2851 13.1078 21.2851 12.3581C21.2851 11.6085 20.7097 11.0011 19.9995 11.0011H13.5713C12.1508 11.0011 11 12.2158 11 13.7152V27.2859C11 28.7852 12.1508 30 13.5713 30H26.4277C27.8482 30 28.999 28.7852 28.999 27.2859V20.5005C28.999 19.7509 28.4236 19.1435 27.7134 19.1435Z" fill="#2683FF"/>
                         </svg>
@@ -30,16 +30,16 @@
                         placeholder="Enter Description"
                         width="70vw"
                         height="10vh"
-                        isMultiline="true"
+                        is-multiline="true"
                         @setData="setNewDescription" />
                     <div class="project-details-info-container__description-container__buttons-area">
-                        <Button label="Cancel" width="180px" height="48px" :onPress="toggleEditing" isWhite="true"/>
-                        <Button label="Save" width="180px" height="48px" :onPress="onSaveButtonClick"/>
+                        <Button label="Cancel" width="180px" height="48px" :on-press="toggleEditing" is-white="true"/>
+                        <Button label="Save" width="180px" height="48px" :on-press="onSaveButtonClick"/>
                     </div>
                 </div>
             </div>
             <div class="project-details__button-area" id="deleteProjectPopupButton">
-                <Button class="delete-project" label="Delete project" width="180px" height="48px" :onPress="toggleDeleteDialog" isDeletion="true"/>
+                <Button class="delete-project" label="Delete project" width="180px" height="48px" :on-press="toggleDeleteDialog" is-deletion="true"/>
             </div>
         </div>
         <DeleteProjectPopup v-if="isPopupShown" />
diff --git a/web/satellite/src/components/project/ProjectOverviewArea.vue b/web/satellite/src/components/project/ProjectOverviewArea.vue
index 435449ed7..171aafaa3 100644
--- a/web/satellite/src/components/project/ProjectOverviewArea.vue
+++ b/web/satellite/src/components/project/ProjectOverviewArea.vue
@@ -10,9 +10,9 @@
         <router-view v-if="isProjectSelected"/>
         <EmptyState
             v-if="!isProjectSelected"
-            mainTitle="Create your first project"
+            main-title="Create your first project"
             additional-text='<p>Please click the button <b>"New Project"</b> in the right corner</p>'
-            :imageSource="emptyImage" />
+            :image-source="emptyImage" />
     </div>
 </template>
 
diff --git a/web/satellite/src/components/project/ProjectPaymentMethods.vue b/web/satellite/src/components/project/ProjectPaymentMethods.vue
index 5b204b549..31d7024a2 100644
--- a/web/satellite/src/components/project/ProjectPaymentMethods.vue
+++ b/web/satellite/src/components/project/ProjectPaymentMethods.vue
@@ -7,7 +7,7 @@
         <div class="scroll-container">
             <NewPaymentMethodPopup/>
             <div v-for="method in paymentMethods" class="payment-methods-container__card-container">
-                <CardComponent :paymentMethod="method"/>
+                <CardComponent :payment-method="method"/>
             </div>
         </div>
     </div>
diff --git a/web/satellite/src/components/team/AddUserPopup.vue b/web/satellite/src/components/team/AddUserPopup.vue
index 5db42c583..74542abc3 100644
--- a/web/satellite/src/components/team/AddUserPopup.vue
+++ b/web/satellite/src/components/team/AddUserPopup.vue
@@ -10,19 +10,20 @@
                     <div v-html='imageSource'></div>
                 </div>
                 <div class='add-user__form-container'>
-                    <p v-if="!formError">Email Address</p>
+                    <p class='add-user__form-container__common-label' v-if="!formError">Email Address</p>
                     <div v-if="formError" class="add-user__form-container__label">
                         <img src="../../../static/images/register/ErrorInfo.svg"/>
-                        <p>{{formError}}</p>
+                        <p class="add-user__form-container__label__error">{{formError}}</p>
                     </div>
-                    <div :class="[inputs.length > 4 ? 'add-user__form-container__inputs-group scrollable' : 'add-user__form-container__inputs-group']">
+                    <div class="add-user__form-container__inputs-group" :class="{ 'scrollable': inputs.length > 4 }">
                         <div v-for="(input, index) in inputs"
                             class="add-user__form-container__inputs-group__item"
                             :key="index" >
                                 <input
                                     placeholder="email@example.com"
                                     v-model="input.value"
-                                    :class="[input.error ? 'error' : 'no-error']"
+                                    class="no-error-input"
+                                    :class="{ 'error-input': input.error }"
                                     @keyup="resetFormErrors(index)" />
                                 <svg @click="deleteInput(index)" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <path d="M11.7803 1.28033C12.0732 0.987437 12.0732 0.512563 11.7803 0.21967C11.4874 -0.0732233 11.0126 -0.0732233 10.7197 0.21967L11.7803 1.28033ZM0.21967 10.7197C-0.0732233 11.0126 -0.0732233 11.4874 0.21967 11.7803C0.512563 12.0732 0.987437 12.0732 1.28033 11.7803L0.21967 10.7197ZM1.28033 0.21967C0.987437 -0.0732233 0.512563 -0.0732233 0.21967 0.21967C-0.0732233 0.512563 -0.0732233 0.987437 0.21967 1.28033L1.28033 0.21967ZM10.7197 11.7803C11.0126 12.0732 11.4874 12.0732 11.7803 11.7803C12.0732 11.4874 12.0732 11.0126 11.7803 10.7197L10.7197 11.7803ZM10.7197 0.21967L0.21967 10.7197L1.28033 11.7803L11.7803 1.28033L10.7197 0.21967ZM0.21967 1.28033L10.7197 11.7803L11.7803 10.7197L1.28033 0.21967L0.21967 1.28033Z" fill="#AFB7C1"/>
@@ -31,18 +32,18 @@
                     </div>
                     <div class="add-user-row">
                         <div @click='addInput' class="add-user-row__item" id="addUserButton">
-                            <div :class="[isMaxInputsCount ? 'inactive-image' : '']">
+                            <div :class="{ 'inactive-image': isMaxInputsCount }">
                                 <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <rect width="40" height="40" rx="20" fill="#2683FF" />
                                     <path d="M25 18.977V21.046H20.9722V25H19.0046V21.046H15V18.977H19.0046V15H20.9722V18.977H25Z" fill="white" />
                                 </svg>
                             </div>
-                            <p :class="[ isMaxInputsCount ? 'inactive-label' : '' ]">Add Another</p>
+                            <p class="add-user-row__item__label" :class="{ 'inactive-label': isMaxInputsCount }">Add Another</p>
                         </div>
                     </div>
                     <div class='add-user__form-container__button-container'>
-                        <Button label='Cancel' width='205px' height='48px' :onPress="onClose" isWhite="true"/>
-                        <Button label='Add Team Members' width='205px' height='48px' :onPress="isButtonActive ? onAddUsersClick : () => {}" :isDisabled="!isButtonActive"/>
+                        <Button label='Cancel' width='205px' height='48px' :on-press="onClose" is-white="true"/>
+                        <Button label='Add Team Members' width='205px' height='48px' :on-press="onAddUsersClick" :is-disabled="!isButtonActive"/>
                     </div>
                 </div>
                 <div class='add-user__close-cross-container' @click='onClose'>
@@ -56,8 +57,8 @@
                     <rect width="40" height="40" rx="10" fill="#2683FF"/>
                     <path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"/>
                 </svg>
-                <div class="notification-wrap__text">
-                    <p>If the team member you want to invite to join the project is still not on this Satellite, please share this link to the signup page and ask them to register here: <router-link target="_blank" exact to="/register" >{{registerPath}}</router-link></p>
+                <div class="notification-wrap__text-area">
+                    <p class="notification-wrap__text-area__text">If the team member you want to invite to join the project is still not on this Satellite, please share this link to the signup page and ask them to register here: <router-link target="_blank" exact to="/register" >{{registerPath}}</router-link></p>
                 </div>
             </div>
         </div>
@@ -237,6 +238,7 @@ export default class AddUserPopup extends Vue {
         justify-content: center;
         align-items: center;
         flex-direction: column;
+        font-family: 'font_regular';
     }
 
     .add-user-row {
@@ -262,13 +264,13 @@ export default class AddUserPopup extends Vue {
                     margin-right: 20px;
                 }
 
-                p {
+                &__label {
                     font-family: 'font_medium';
                     font-size: 16px;
                     margin-left: 0;
                     padding-left: 0;
-                    margin-block-start: 0em;
-                    margin-block-end: 0em;
+                    margin-block-start: 0;
+                    margin-block-end: 0;
                 }
             }
         }
@@ -278,7 +280,7 @@ export default class AddUserPopup extends Vue {
         color: #DADDE5;
     }
 
-    .error {
+    .error-input {
         border: 1px solid red !important;
     }
 
@@ -304,22 +306,6 @@ export default class AddUserPopup extends Vue {
         background-color: #EB5757;
     }
 
-    .text {
-        margin: 0 !important;
-        font-family: 'font_regular' !important;
-        font-size: 16px;
-        line-height: 25px;
-
-        a {
-            color: #2683FF;
-            cursor: pointer;
-
-            &:hover {
-                text-decoration: underline;
-            }
-        }
-    }
-
     .add-user {
         width: 100%;
         max-width: 1200px;
@@ -352,7 +338,6 @@ export default class AddUserPopup extends Vue {
             padding: 0 50px;
 
             &__text {
-                font-family: 'font_regular';
                 font-size: 16px;
                 margin-top: 0;
                 margin-bottom: 50px;
@@ -381,11 +366,11 @@ export default class AddUserPopup extends Vue {
                 display: flex;
                 flex-direction: row;
                 padding-left: 50px;
-                margin-bottom: 10px;
+                margin-bottom: 15px;
 
-                p {
-                    margin: 0 !important;
-                    padding-left: 10px !important;
+                &__error {
+                    margin: 0;
+                    padding-left: 10px;
                     color: #EB5757;
                 }
             }
@@ -396,16 +381,11 @@ export default class AddUserPopup extends Vue {
                 padding-left: 50px;
                 padding-right: 50px;
 
-                &.scrollable {
-                    overflow-y: scroll;
-                }
-
                 &__item {
                     display: flex;
                     align-items: center;
 
-                    input {
-                        font-family: 'font_regular';
+                    .no-error-input {
                         font-size: 16px;
                         line-height: 21px;
                         resize: none;
@@ -441,21 +421,13 @@ export default class AddUserPopup extends Vue {
                 }
             }
 
-            p {
-                margin: 0;
-                margin-bottom: 10px;
-                font-family: 'font_regular';
+            &__common-label {
+                margin: 0 0 10px 0;
                 font-size: 16px;
                 line-height: 25px;
                 padding-left: 50px;
             }
 
-            a {
-                font-family: 'font_medium';
-                font-size: 16px;
-                color: #2683FF;
-            }
-
             &__button-container {
                 display: flex;
                 flex-direction: row;
@@ -494,31 +466,22 @@ export default class AddUserPopup extends Vue {
         border-bottom-left-radius: 6px;
         border-bottom-right-radius: 6px;
 
-        &__text {
+        &__text-area {
             display: flex;
             align-items: center;
 
-            p {
+            &__text {
                 font-family: 'font_medium';
                 font-size: 16px;
                 margin-left: 40px;
-
-                span {
-                    margin-right: 10px;
-                }
-            }
-
-            a {
-                cursor: pointer;
-                color: #2683FF;
-
-                &:hover {
-                    text-decoration: underline;
-                }
             }
         }
     }
 
+    .scrollable {
+        overflow-y: scroll;
+    }
+
     @media screen and (max-width: 1025px) {
         .add-user {
             padding: 10px;
@@ -526,8 +489,8 @@ export default class AddUserPopup extends Vue {
 
             &__main {
                 width: 100%;
-                padding-right: 0px;
-                padding-left: 0px;
+                padding-right: 0;
+                padding-left: 0;
             }
 
             &__info-panel-container {
@@ -535,7 +498,6 @@ export default class AddUserPopup extends Vue {
             }
 
             &__form-container {
-
                 max-width: 800px;
             }
 
diff --git a/web/satellite/src/components/team/HeaderArea.vue b/web/satellite/src/components/team/HeaderArea.vue
index 79687704a..c145b2c9a 100644
--- a/web/satellite/src/components/team/HeaderArea.vue
+++ b/web/satellite/src/components/team/HeaderArea.vue
@@ -5,20 +5,20 @@
     <div class="team-header-container">
 	    <h1>Project Members</h1>
 	    <div class="team-header-container__wrapper">
-            <HeaderComponent ref="headerComponent" placeHolder="Team Members" :search="processSearchQuery">
+            <HeaderComponent ref="headerComponent" placeholder="Team Members" :search="processSearchQuery">
                 <div class="header-default-state" v-if="headerState === 0">
                     <span>The only project role currently available is Admin, which gives <b>full access</b> to the project.</span>
-                    <Button class="button" label="+Add" width="122px" height="48px" :onPress="onAddUsersClick"/>
+                    <Button class="button" label="+Add" width="122px" height="48px" :on-press="onAddUsersClick"/>
                 </div>
                 <div class="header-selected-members" v-if="headerState === 1 && !isDeleteClicked">
-                    <Button class="button deletion" label="Delete" width="122px" height="48px" :onPress="onFirstDeleteClick"/>
-                    <Button class="button" label="Cancel" width="122px" height="48px" isWhite="true" :onPress="onClearSelection"/>
+                    <Button class="button deletion" label="Delete" width="122px" height="48px" :on-press="onFirstDeleteClick"/>
+                    <Button class="button" label="Cancel" width="122px" height="48px" is-white="true" :on-press="onClearSelection"/>
                 </div>
                 <div class="header-after-delete-click" v-if="headerState === 1 && isDeleteClicked">
                     <span>Are you sure you want to delete {{selectedProjectMembersCount}} {{userCountTitle}}?</span>
                     <div class="header-after-delete-click__button-area">
-                        <Button class="button deletion" label="Delete" width="122px" height="48px" :onPress="onDelete"/>
-                        <Button class="button" label="Cancel" width="122px" height="48px" isWhite="true" :onPress="onClearSelection"/>
+                        <Button class="button deletion" label="Delete" width="122px" height="48px" :on-press="onDelete"/>
+                        <Button class="button" label="Cancel" width="122px" height="48px" is-white="true" :on-press="onClearSelection"/>
                     </div>
                 </div>
             </HeaderComponent>
diff --git a/web/satellite/src/components/team/ProjectMembersArea.vue b/web/satellite/src/components/team/ProjectMembersArea.vue
index 6c9e55185..222173183 100644
--- a/web/satellite/src/components/team/ProjectMembersArea.vue
+++ b/web/satellite/src/components/team/ProjectMembersArea.vue
@@ -4,21 +4,21 @@
 <template>
     <div class="team-area">
         <div class="team-area__header">
-            <HeaderArea :headerState="headerState" :selectedProjectMembersCount="selectedProjectMembers.length"/>
+            <HeaderArea :header-state="headerState" :selected-project-members-count="selectedProjectMembers.length"/>
         </div>
         <div class="team-area__container" id="team-container" v-if="projectMembersCount > 0 || projectMembersTotalCount > 0">
-            <SortingListHeader :onHeaderClickCallback="onHeaderSectionClickCallback"/>
+            <SortingListHeader :on-header-click-callback="onHeaderSectionClickCallback"/>
             <div class="team-area__container__content">
                 <List
-                    :dataSet="projectMembers"
-                    :itemComponent="getItemComponent"
-                    :onItemClick="onMemberClick"/>
+                    :data-set="projectMembers"
+                    :item-component="getItemComponent"
+                    :on-item-click="onMemberClick"/>
             </div>
             <Pagination
                 class="pagination-area"
                 ref="pagination"
-                :totalPageCount="totalPageCount"
-                :onPageClickCallback="onPageClick"/>
+                :total-page-count="totalPageCount"
+                :on-page-click-callback="onPageClick"/>
         </div>
         <div class="team-area__empty-search-result-area" v-if="(projectMembersCount === 0 && projectMembersTotalCount === 0)">
             <h1>No results found</h1>
diff --git a/web/satellite/src/components/team/SortingListHeader.vue b/web/satellite/src/components/team/SortingListHeader.vue
index e4ab32667..bfb56008c 100644
--- a/web/satellite/src/components/team/SortingListHeader.vue
+++ b/web/satellite/src/components/team/SortingListHeader.vue
@@ -6,19 +6,19 @@
         <div class="sort-header-container__name-container" @click="onHeaderItemClick(ProjectMemberOrderBy.NAME)">
             <p>Name</p>
             <VerticalArrows
-                :isActive="getSortBy === ProjectMemberOrderBy.NAME"
+                :is-active="getSortBy === ProjectMemberOrderBy.NAME"
                 :direction="getSortDirection"/>
         </div>
         <div class="sort-header-container__added-container" @click="onHeaderItemClick(ProjectMemberOrderBy.CREATED_AT)">
             <p>Added</p>
             <VerticalArrows
-                :isActive="getSortBy === ProjectMemberOrderBy.CREATED_AT"
+                :is-active="getSortBy === ProjectMemberOrderBy.CREATED_AT"
                 :direction="getSortDirection"/>
         </div>
         <div class="sort-header-container__email-container" @click="onHeaderItemClick(ProjectMemberOrderBy.EMAIL)">
             <p>Email</p>
             <VerticalArrows
-                :isActive="getSortBy === ProjectMemberOrderBy.EMAIL"
+                :is-active="getSortBy === ProjectMemberOrderBy.EMAIL"
                 :direction="getSortDirection"/>
         </div>
     </div>
diff --git a/web/satellite/src/views/forgotPassword/forgotPassword.html b/web/satellite/src/views/forgotPassword/forgotPassword.html
index 8c2dfbbfd..38dd01b35 100644
--- a/web/satellite/src/views/forgotPassword/forgotPassword.html
+++ b/web/satellite/src/views/forgotPassword/forgotPassword.html
@@ -2,7 +2,7 @@
 <!--See LICENSE for copying information.-->
 
 <div class="forgot-password-container">
-    <div v-bind:class="loadingClassName">
+    <div :class="loadingClassName">
         <img src="../../../static/images/register/Loading.gif">
     </div>
     <img class="image" src="../../../static/images/AuthImage.svg" alt="" >
diff --git a/web/satellite/src/views/login/login.html b/web/satellite/src/views/login/login.html
index 96e33ede0..431228eb6 100644
--- a/web/satellite/src/views/login/login.html
+++ b/web/satellite/src/views/login/login.html
@@ -32,7 +32,7 @@
                     @setData="setPassword"
                     width="100%"
                     height="46px"
-                    isPassword="true">
+                    is-password="true">
                 </HeaderlessInput>
                 <div class="login-area__submit-area">
                     <router-link :to="forgotPasswordPath" class="login-area__navigation-area__nav-link" exact>
diff --git a/web/satellite/src/views/register/register.html b/web/satellite/src/views/register/register.html
index 0d284a594..0905900bc 100644
--- a/web/satellite/src/views/register/register.html
+++ b/web/satellite/src/views/register/register.html
@@ -53,9 +53,9 @@
                         @setData="setPassword"
                         width="100%"
                         height="46px"
-                        isPassword="true">
+                        is-password="true">
                     </HeaderlessInput>
-                    <InfoComponent class="register-input__info-button" boldText="Use 6 or more characters with a mix of letters, numbers & symbols" >
+                    <InfoComponent class="register-input__info-button" bold-text="Use 6 or more characters with a mix of letters, numbers & symbols" >
                         <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <rect width="18" height="18" rx="9" fill="#007AFF"/>
                             <path d="M8.99928 8.00325C8.44956 8.00325 7.99979 8.48247 7.99979 9.06819L7.99979 13.3351C7.99979 13.3883 8.00312 13.4451 8.00978 13.4984C8.08308 14.006 8.49953 14.4 8.99928 14.4C9.54901 14.4 9.99878 13.9208 9.99878 13.3351L9.99878 9.07174C9.99878 8.48247 9.54901 8.00325 8.99928 8.00325Z" fill="white"/>
@@ -72,9 +72,9 @@
                         @setData="setRepeatedPassword"
                         width="100%"
                         height="46px"
-                        isPassword="true">
+                        is-password="true">
                     </HeaderlessInput>
-                    <InfoComponent class="register-input__info-button" boldText="Use 6 or more characters with a mix of letters, numbers & symbols" isCustomPosition>
+                    <InfoComponent class="register-input__info-button" bold-text="Use 6 or more characters with a mix of letters, numbers & symbols">
                         <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <rect width="18" height="18" rx="9" fill="#007AFF"/>
                             <path d="M8.99928 8.00325C8.44956 8.00325 7.99979 8.48247 7.99979 9.06819L7.99979 13.3351C7.99979 13.3883 8.00312 13.4451 8.00978 13.4984C8.08308 14.006 8.49953 14.4 8.99928 14.4C9.54901 14.4 9.99878 13.9208 9.99878 13.3351L9.99878 9.07174C9.99878 8.48247 9.54901 8.00325 8.99928 8.00325Z" fill="white"/>
diff --git a/web/satellite/tests/unit/common/HeaderComponent.spec.ts b/web/satellite/tests/unit/common/HeaderComponent.spec.ts
index c2d1a49b7..59998bd47 100644
--- a/web/satellite/tests/unit/common/HeaderComponent.spec.ts
+++ b/web/satellite/tests/unit/common/HeaderComponent.spec.ts
@@ -17,7 +17,7 @@ describe('HeaderComponent.vue', () => {
     it('renders correctly with default props', () => {
         const wrapper = mount(HeaderComponent);
 
-        expect(wrapper.vm.$props.placeHolder).toMatch('');
+        expect(wrapper.vm.$props.placeholder).toMatch('');
         expect(wrapper.vm.$props.search).toMatch('');
     });
 
diff --git a/web/satellite/tests/unit/common/PagesBlock.spec.ts b/web/satellite/tests/unit/common/PagesBlock.spec.ts
index e454dd8f5..014367e42 100644
--- a/web/satellite/tests/unit/common/PagesBlock.spec.ts
+++ b/web/satellite/tests/unit/common/PagesBlock.spec.ts
@@ -27,7 +27,7 @@ describe('Pagination.vue', () => {
         const wrapper = shallowMount(PagesBlock, {
             propsData: {
                 pages: pagesArray,
-                checkSelected: (i: number) => i === SELECTED_PAGE_INDEX,
+                isSelected: (i: number) => i === SELECTED_PAGE_INDEX,
             },
         });
 
@@ -47,7 +47,7 @@ describe('Pagination.vue', () => {
         const wrapper = shallowMount(PagesBlock, {
             propsData: {
                 pages: pagesArray,
-                checkSelected: () => false,
+                isSelected: () => false,
             },
         });
 
diff --git a/web/satellite/tests/unit/common/SearchComponent.spec.ts b/web/satellite/tests/unit/common/SearchComponent.spec.ts
index c1f75c220..26190059b 100644
--- a/web/satellite/tests/unit/common/SearchComponent.spec.ts
+++ b/web/satellite/tests/unit/common/SearchComponent.spec.ts
@@ -17,7 +17,7 @@ describe('SearchComponent.vue', () => {
     it('renders correctly with default props', () => {
         const wrapper = mount(SearchComponent);
 
-        expect(wrapper.vm.$props.placeHolder).toMatch('');
+        expect(wrapper.vm.$props.placeholder).toMatch('');
         expect(wrapper.vm.$props.search).toMatch('');
     });
 
diff --git a/web/satellite/tests/unit/common/__snapshots__/Pagination.spec.ts.snap b/web/satellite/tests/unit/common/__snapshots__/Pagination.spec.ts.snap
index d33fe20e4..5da615639 100644
--- a/web/satellite/tests/unit/common/__snapshots__/Pagination.spec.ts.snap
+++ b/web/satellite/tests/unit/common/__snapshots__/Pagination.spec.ts.snap
@@ -7,11 +7,11 @@ exports[`Pagination.vue renders correctly 1`] = `
         <path d="M2.80077e-07 4.26316L6 0L6 9L2.80077e-07 4.26316Z" fill="#354049"></path>
       </svg></div>
     <div class="pagination-container__items">
-      <pagesblock-stub pages="" checkselected="function () { [native code] }"></pagesblock-stub>
+      <pagesblock-stub pages="" isselected="function () { [native code] }"></pagesblock-stub>
       <!---->
-      <pagesblock-stub pages="" checkselected="function () { [native code] }"></pagesblock-stub>
+      <pagesblock-stub pages="" isselected="function () { [native code] }"></pagesblock-stub>
       <!---->
-      <pagesblock-stub pages="" checkselected="function () { [native code] }"></pagesblock-stub>
+      <pagesblock-stub pages="" isselected="function () { [native code] }"></pagesblock-stub>
     </div>
     <div class="pagination-container__button"><svg width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M6 4.73684L0 9L1.20219e-06 -9.53674e-07L6 4.73684Z" fill="#354049"></path>
@@ -28,10 +28,10 @@ exports[`Pagination.vue renders correctly with props 1`] = `
         <path d="M2.80077e-07 4.26316L6 0L6 9L2.80077e-07 4.26316Z" fill="#354049"></path>
       </svg></div>
     <div class="pagination-container__items">
-      <pagesblock-stub pages="[object Object],[object Object],[object Object]" checkselected="function () { [native code] }"></pagesblock-stub> <span>...</span>
-      <pagesblock-stub pages="" checkselected="function () { [native code] }"></pagesblock-stub>
+      <pagesblock-stub pages="[object Object],[object Object],[object Object]" isselected="function () { [native code] }"></pagesblock-stub> <span>...</span>
+      <pagesblock-stub pages="" isselected="function () { [native code] }"></pagesblock-stub>
       <!---->
-      <pagesblock-stub pages="[object Object]" checkselected="function () { [native code] }"></pagesblock-stub>
+      <pagesblock-stub pages="[object Object]" isselected="function () { [native code] }"></pagesblock-stub>
     </div>
     <div class="pagination-container__button"><svg width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M6 4.73684L0 9L1.20219e-06 -9.53674e-07L6 4.73684Z" fill="#354049"></path>
diff --git a/web/storagenode/src/app/components/BandwidthChart.vue b/web/storagenode/src/app/components/BandwidthChart.vue
index dce7108b8..4c13c8b77 100644
--- a/web/storagenode/src/app/components/BandwidthChart.vue
+++ b/web/storagenode/src/app/components/BandwidthChart.vue
@@ -5,10 +5,10 @@
     <div class="chart">
         <Chart
             id="bandwidth-chart"
-            :chartData="chartData"
+            :chart-data="chartData"
             :width="400"
             :height="200"
-            :tooltipConstructor="bandwidthTooltip" />
+            :tooltip-constructor="bandwidthTooltip" />
     </div>
 </template>
 
diff --git a/web/storagenode/src/app/components/ChecksAreaContainer.vue b/web/storagenode/src/app/components/ChecksAreaContainer.vue
index 07c979576..058f217ae 100644
--- a/web/storagenode/src/app/components/ChecksAreaContainer.vue
+++ b/web/storagenode/src/app/components/ChecksAreaContainer.vue
@@ -5,7 +5,7 @@
     <div class="checks-area-container">
         <div class="checks-area-container__header">
             <p class="checks-area-container__header__title">{{label}}</p>
-            <InfoComponent :text="infoText" isExtraPadding="true" isCustomPosition="true">
+            <InfoComponent :text="infoText" is-extra-padding="true" is-custom-position="true">
                 <div>
                     <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="info image">
                         <rect width="18" height="18" rx="9" fill="#5A667C"/>
diff --git a/web/storagenode/src/app/components/DiskSpaceChart.vue b/web/storagenode/src/app/components/DiskSpaceChart.vue
index 46592c950..25a9a4a56 100644
--- a/web/storagenode/src/app/components/DiskSpaceChart.vue
+++ b/web/storagenode/src/app/components/DiskSpaceChart.vue
@@ -5,10 +5,10 @@
     <div class="chart">
         <Chart
             id="disk-space-chart"
-            :chartData="chartData"
+            :chart-data="chartData"
             :width="400"
             :height="200"
-            :tooltipConstructor="diskSpaceTooltip" />
+            :tooltip-constructor="diskSpaceTooltip" />
     </div>
 </template>
 
diff --git a/web/storagenode/src/app/components/SNOContentFilling.vue b/web/storagenode/src/app/components/SNOContentFilling.vue
index 26df1dd66..1eb6c386a 100644
--- a/web/storagenode/src/app/components/SNOContentFilling.vue
+++ b/web/storagenode/src/app/components/SNOContentFilling.vue
@@ -36,21 +36,21 @@
         <div v-if="selectedSatellite.id">
             <p class="info-area__title">Uptime & Audit Checks by Satellite</p>
             <div class="info-area__checks-area">
-                <ChecksAreaContainer label="Uptime Checks" :amount="checks.uptime" infoText="Uptime checks occur to make sure  your node is still online. This is the percentage of uptime checks you’ve passed."/>
-                <ChecksAreaContainer label="Audit Checks" :amount="checks.audit" infoText="Percentage of successful pings/communication between the node & satellite."/>
+                <ChecksAreaContainer label="Uptime Checks" :amount="checks.uptime" info-text="Uptime checks occur to make sure  your node is still online. This is the percentage of uptime checks you’ve passed."/>
+                <ChecksAreaContainer label="Audit Checks" :amount="checks.audit" info-text="Percentage of successful pings/communication between the node & satellite."/>
             </div>
         </div>
         <div>
             <p class="info-area__title">Remaining on the Node</p>
             <div class="info-area__remaining-space-area">
                 <BarInfoContainer label="Bandwidth Remaining" :amount="bandwidth.remaining"
-                    infoText="of bandwidth left" :currentBarAmount="bandwidth.used" :maxBarAmount="bandwidth.available" />
+                    info-text="of bandwidth left" :current-bar-amount="bandwidth.used" :max-bar-amount="bandwidth.available" />
                 <BarInfoContainer label="Disk Space Remaining" :amount="diskSpace.remaining"
-                    infoText="of disk space left" :currentBarAmount="diskSpace.used" :maxBarAmount="diskSpace.available" />
+                    info-text="of disk space left" :current-bar-amount="diskSpace.used" :max-bar-amount="diskSpace.available" />
             </div>
         </div>
         <p class="info-area__title">Payout</p>
-        <PayoutContainer label="STORJ Wallet Address" :walletAddress="wallet" />
+        <PayoutContainer label="STORJ Wallet Address" :wallet-address="wallet" />
     </div>
 </template>
 
diff --git a/web/storagenode/src/app/components/SNOContentTitle.vue b/web/storagenode/src/app/components/SNOContentTitle.vue
index e9709c12a..bda596185 100644
--- a/web/storagenode/src/app/components/SNOContentTitle.vue
+++ b/web/storagenode/src/app/components/SNOContentTitle.vue
@@ -24,7 +24,7 @@
             <p class="online-status"><b>{{info.status}}</b></p>
             <p><b>Node Version</b></p>
             <p class="version">{{version}}</p>
-            <InfoComponent v-if="info.isLastVersion" text="Running the minimal allowed version:" boldText="v.0.0.0" isCustomPosition="true">
+            <InfoComponent v-if="info.isLastVersion" text="Running the minimal allowed version:" bold-text="v.0.0.0" is-custom-position="true">
                 <div class="version-svg-container">
                     <svg class="version-svg" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="version status image">
                         <path d="M9 0.5C13.6942 0.5 17.5 4.3058 17.5 9C17.5 13.6942 13.6942 17.5 9 17.5C4.3058 17.5 0.5 13.6942 0.5 9C0.5 4.3058 4.3058 0.5 9 0.5Z" fill="#00CE7D" stroke="#F4F6F9"/>
@@ -32,7 +32,7 @@
                     </svg>
                 </div>
             </InfoComponent>
-            <InfoComponent v-else text="Your node is outdated. Please update to:" boldText="v.0.0.0" isCustomPosition="true">
+            <InfoComponent v-else text="Your node is outdated. Please update to:" bold-text="v.0.0.0" is-custom-position="true">
                 <div class="version-svg-container">
                     <svg class="version-svg" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="version status image">
                         <path d="M9 0.5C13.6942 0.5 17.5 4.3058 17.5 9C17.5 13.6942 13.6942 17.5 9 17.5C4.3058 17.5 0.5 13.6942 0.5 9C0.5 4.3058 4.3058 0.5 9 0.5Z" fill="#E62929" stroke="#F4F6F9"/>
diff --git a/web/storagenode/src/app/components/SatelliteSelectionDropdown.vue b/web/storagenode/src/app/components/SatelliteSelectionDropdown.vue
index bc1dc541a..4b6901a5e 100644
--- a/web/storagenode/src/app/components/SatelliteSelectionDropdown.vue
+++ b/web/storagenode/src/app/components/SatelliteSelectionDropdown.vue
@@ -6,7 +6,7 @@
         <div class="satellite-selection-overflow-container">
             <!-- loop for rendering satellites -->
             <div class="satellite-selection-overflow-container__satellite-choice"
-                v-for="satellite in satellites" v-bind:key="satellite.id"
+                v-for="satellite in satellites" :key="satellite.id"
                 @click.stop="onSatelliteClick(satellite.id)" >
                 <svg v-if="satellite.disqualified" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="disqualified image">
                     <path d="M16.6625 13.9324C16.441 13.5232 16.2181 13.1133 15.996 12.702C15.5825 11.9391 15.1698 11.1762 14.7571 10.4133C14.2614 9.4992 13.7671 8.58373 13.2721 7.66969C12.7939 6.78728 12.3172 5.90625 11.8391 5.02459C11.4875 4.37631 11.1374 3.72733 10.7858 3.07843C10.6909 2.90265 10.596 2.72688 10.501 2.55249C10.4026 2.36968 10.2985 2.1939 10.1495 2.04484C9.62918 1.521 8.76574 1.42045 8.13997 1.81633C7.87137 1.98648 7.67732 2.22766 7.52826 2.50398C7.29975 2.92587 7.07122 3.34773 6.84271 3.77102C6.42646 4.54093 6.00951 5.31087 5.59326 6.08078C5.09192 6.99977 4.59482 7.92092 4.0956 8.84198C3.6231 9.71527 3.1499 10.5871 2.6767 11.4612C2.33076 12.101 1.98411 12.7394 1.63749 13.3792C1.54608 13.548 1.45468 13.7167 1.36328 13.8855C1.23531 14.1231 1.13477 14.3636 1.10312 14.6378C1.01383 15.4127 1.55663 16.1763 2.30687 16.3661C2.50516 16.4167 2.70062 16.4189 2.90102 16.4189H15.276H15.2957C15.7035 16.4104 16.0902 16.2571 16.3891 15.9794C16.6773 15.7122 16.8461 15.3466 16.8939 14.9599C16.9396 14.5957 16.8341 14.2511 16.6626 13.9326L16.6625 13.9324ZM8.29666 6.27882C8.29666 5.88507 8.6187 5.59327 8.99978 5.5757C9.37947 5.55812 9.70289 5.9118 9.70289 6.27882V11.2303C9.70289 11.624 9.38085 11.9158 8.99978 11.9334C8.62008 11.951 8.29666 11.5973 8.29666 11.2303V6.27882ZM8.99978 14.3282C8.60462 14.3282 8.28399 14.0083 8.28399 13.6124C8.28399 13.2173 8.6039 12.8967 8.99978 12.8967C9.39493 12.8967 9.71556 13.2166 9.71556 13.6124C9.71556 14.0076 9.39495 14.3282 8.99978 14.3282Z" fill="#F4D638"/>