diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index e766f6a4..f881b16f 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -62,14 +62,14 @@
     "/chunks/platform~chunks/settings-subscription~chunks/shared~chunks/user-subscription.js": "/chunks/platform~chunks/settings-subscription~chunks/shared~chunks/user-subscription.js?id=8656b69a97cace919251",
     "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=aafbc2aab40dc434335a",
     "/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js": "/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js?id=7d983dfdc91de607d737",
-    "/chunks/profile.js": "/chunks/profile.js?id=f588150c33883516722c",
+    "/chunks/profile.js": "/chunks/profile.js?id=b616d1ec5aa4eb40feae",
     "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=58edfb3a35062e1ba4e0",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=f8b2619e393a5823bf29",
     "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=22f629caf127051898e9",
     "/chunks/settings.js": "/chunks/settings.js?id=b7a593ddda1ac39edc94",
     "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=0920151cdeb1c2bdb36a",
     "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=f73f0faf411f750a1c07",
-    "/chunks/settings-password.js": "/chunks/settings-password.js?id=8e6097bde7181d6800fa",
+    "/chunks/settings-password.js": "/chunks/settings-password.js?id=827cf60e265ad37bcc16",
     "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=979e74627582832e7a79",
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=9a1352324cbee9630496",
     "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=b1e1ae3cff004140701e",
@@ -612,5 +612,20 @@
     "/chunks/app-appearance.410a8f88442b1ed3bf8c.hot-update.js": "/chunks/app-appearance.410a8f88442b1ed3bf8c.hot-update.js",
     "/chunks/app-index.c6fb3b854535a11c2ab6.hot-update.js": "/chunks/app-index.c6fb3b854535a11c2ab6.hot-update.js",
     "/chunks/app-index.d560d8c2fede89054f8d.hot-update.js": "/chunks/app-index.d560d8c2fede89054f8d.hot-update.js",
-    "/chunks/app-settings.2a085a06d96ac8997cf9.hot-update.js": "/chunks/app-settings.2a085a06d96ac8997cf9.hot-update.js"
+    "/chunks/app-settings.2a085a06d96ac8997cf9.hot-update.js": "/chunks/app-settings.2a085a06d96ac8997cf9.hot-update.js",
+    "/chunks/profile.17274a769ca64dfe2f2b.hot-update.js": "/chunks/profile.17274a769ca64dfe2f2b.hot-update.js",
+    "/chunks/profile.32570f9750196041bc15.hot-update.js": "/chunks/profile.32570f9750196041bc15.hot-update.js",
+    "/chunks/profile.2082d7b94b298250149e.hot-update.js": "/chunks/profile.2082d7b94b298250149e.hot-update.js",
+    "/chunks/profile.77f5323b01412e116f90.hot-update.js": "/chunks/profile.77f5323b01412e116f90.hot-update.js",
+    "/chunks/profile.da2d3e2373f3ac0a9f12.hot-update.js": "/chunks/profile.da2d3e2373f3ac0a9f12.hot-update.js",
+    "/chunks/profile.5692971d63592bd5beb8.hot-update.js": "/chunks/profile.5692971d63592bd5beb8.hot-update.js",
+    "/chunks/profile.f04c15a23f406c227feb.hot-update.js": "/chunks/profile.f04c15a23f406c227feb.hot-update.js",
+    "/chunks/profile.5ffcc9880700109dc1c6.hot-update.js": "/chunks/profile.5ffcc9880700109dc1c6.hot-update.js",
+    "/chunks/profile.520ca99d2685c4ef3054.hot-update.js": "/chunks/profile.520ca99d2685c4ef3054.hot-update.js",
+    "/chunks/profile.2372e852f089418c45cb.hot-update.js": "/chunks/profile.2372e852f089418c45cb.hot-update.js",
+    "/chunks/settings-password.df8c1bd4185b511e7822.hot-update.js": "/chunks/settings-password.df8c1bd4185b511e7822.hot-update.js",
+    "/chunks/settings-password.87743b19122f780b950c.hot-update.js": "/chunks/settings-password.87743b19122f780b950c.hot-update.js",
+    "/chunks/settings-password.378b875252bdd254d1ff.hot-update.js": "/chunks/settings-password.378b875252bdd254d1ff.hot-update.js",
+    "/chunks/settings-password.7015c03dc9f51ad03680.hot-update.js": "/chunks/settings-password.7015c03dc9f51ad03680.hot-update.js",
+    "/chunks/settings-password.55be9251fdc82b46822e.hot-update.js": "/chunks/settings-password.55be9251fdc82b46822e.hot-update.js"
 }
diff --git a/resources/js/views/User/Password.vue b/resources/js/views/User/Password.vue
index beb6ad65..ce588565 100644
--- a/resources/js/views/User/Password.vue
+++ b/resources/js/views/User/Password.vue
@@ -1,83 +1,51 @@
 <template>
     <PageTab>
-
-		<div class="card shadow-card">
-			<div class="form block-form">
-				<FormLabel icon="smartphone">
-					{{ $t('2fa.settings.title') }}
-				</FormLabel>
-				<div class="block-wrapper">
-					<div class="input-wrapper">
-						<div class="inline-wrapper">
-							<div class="switch-label">
-								<label class="input-label">
-									{{ $t('popup_2fa.switch_title') }}
-								</label>
-								<small class="input-help" v-html="$t('popup_2fa.switch_info')"></small>
-							</div>
-							<SwitchInput @click.native.prevent.stop="open2faPopup"
-										 class="switch"
-										 :state="user.data.attributes.two_factor_authentication"
-							/>
-						</div>
-					</div>
-				</div>
-			</div>
-
-            <div v-if="user && user.data.attributes.two_factor_authentication" class="block-wrapper">
-				<div class="input-wrapper">
-					<div class="inline-wrapper button-block">
-						<div class="switch-label">
-							<label class="input-label">
-								{{ $t('popup_2fa.codes_title') }}
-							</label>
-							<small class="input-help">
-								{{ $t('popup_2fa.codes_info') }}
-							</small>
-						</div>
-						<ButtonBase
-							class="popup-button"
-							button-style="secondary"
-							@click.native="showRecoveryCodes"
-						>
-							{{ $t('popup_2fa.codes_button') }}
-						</ButtonBase>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<div class="card shadow-card">
-			<div class="form block-form">
-				<FormLabel icon="key">
-					{{ $t('personal_token.section_title') }}
-				</FormLabel>
-				<InfoBox v-if="tokens.length === 0">
-					<p>{{ $t("personal_token.section_description") }}</p>
-				</InfoBox>
-
-				<InfoBox v-if="tokens.length > 0">
-					<ul class="tokens-wrapper">
-						<li class="token-item" v-for="token in tokens" :key="token.id">
-							<div class="tokens-details">
-								<b class="name">{{ token.name}}</b>
-								<time class="last-used">{{ $t('last_used') }}: {{ token.last_used_at ? formatDate(token.last_used_at) : $t('never') }}</time>
-							</div>
-							<div @click="confirmDeleteToken(token)" class="tokens-destroyer">
-								<x-icon size="16" class="close-icon hover-text-theme" />
-							</div>
-						</li>
-					</ul>
-				</InfoBox>
-
-				<ButtonBase @click.native="openCreateTokenPopup" type="submit" button-style="theme" class="confirm-form">
-					{{ $t('personal_token.create_token') }}
-				</ButtonBase>
-			</div>
-		</div>
-
-		<div class="card shadow-card">
-			<ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form" class="form block-form">
+        <div class="card shadow-card">
+            <FormLabel icon="smartphone">
+                {{ $t('2fa.settings.title') }}
+            </FormLabel>
+            <AppInputSwitch :title="$t('popup_2fa.switch_title')" :description="$t('popup_2fa.switch_info')">
+                <SwitchInput @click.native.prevent.stop="open2faPopup"
+							 class="switch"
+							 :state="user.data.attributes.two_factor_authentication"
+				/>
+            </AppInputSwitch>
+            <AppInputSwitch v-if="user && user.data.attributes.two_factor_authentication" :title="$t('popup_2fa.codes_title')" :description="$t('popup_2fa.codes_info')">
+                <ButtonBase
+					class="popup-button"
+					button-style="secondary"
+					@click.native="showRecoveryCodes"
+				>
+                    {{ $t('popup_2fa.codes_button') }}
+                </ButtonBase>
+            </AppInputSwitch>
+        </div>
+        <div class="card shadow-card">
+            <FormLabel icon="key">
+                {{ $t('personal_token.section_title') }}
+            </FormLabel>
+            <InfoBox v-if="tokens.length === 0">
+                <p>{{ $t("personal_token.section_description") }}</p>
+            </InfoBox>
+            <InfoBox v-if="tokens.length > 0">
+                <ul class="tokens-wrapper">
+                    <li class="token-item" v-for="token in tokens" :key="token.id">
+                        <div class="tokens-details">
+                            <b class="name">{{ token.name}}</b>
+                            <time class="last-used">{{ $t('last_used') }}: {{ token.last_used_at ? formatDate(token.last_used_at) : $t('never') }}</time>
+                        </div>
+                        <div @click="confirmDeleteToken(token)" class="tokens-destroyer">
+                            <x-icon size="16" class="close-icon hover-text-theme" />
+                        </div>
+                    </li>
+                </ul>
+            </InfoBox>
+            <ButtonBase @click.native="openCreateTokenPopup" type="submit" button-style="theme" class="confirm-form">
+                {{ $t('personal_token.create_token') }}
+            </ButtonBase>
+        </div>
+        <div class="card shadow-card">
+            <ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form" class="form block-form">
                 <FormLabel>{{ $t('user_password.title') }}</FormLabel>
                 <div class="block-wrapper">
                     <label>{{ $t('page_create_password.label_new_pass') }}:</label>
@@ -107,11 +75,12 @@
                     </ButtonBase>
                 </div>
             </ValidationObserver>
-		</div>
+        </div>
     </PageTab>
 </template>
 
 <script>
+	import AppInputSwitch from "../../components/Admin/AppInputSwitch";
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
 	import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
 	import UserImageInput from '/resources/js/components/Others/UserImageInput'
@@ -132,6 +101,7 @@
 	export default {
 		name: 'Password',
 		components: {
+			AppInputSwitch,
 			PageTabGroup,
 			FormLabel,
 			PageTab,
diff --git a/resources/js/views/User/Settings.vue b/resources/js/views/User/Settings.vue
index 68bd18d3..0f12cc22 100644
--- a/resources/js/views/User/Settings.vue
+++ b/resources/js/views/User/Settings.vue
@@ -1,214 +1,178 @@
 <template>
     <PageTab>
-
-		<div class="card shadow-card">
-			<div class="form block-form">
-                <FormLabel>{{ $t('user_settings.title_account') }}</FormLabel>
-                <div class="block-wrapper">
-                    <label>{{ $t('page_registration.label_email') }}:</label>
-                    <div class="input-wrapper">
-                        <input :value="userInfo.email"
-							   :placeholder="$t('page_registration.placeholder_email')"
-							   type="email"
-							   disabled
-							   class="focus-border-theme input-dark"
-						/>
-                    </div>
-                </div>
-                <div class="block-wrapper">
-                    <label>{{ $t('page_registration.label_name') }}:</label>
-                    <div class="input-wrapper">
-                        <input @keyup="changeUserName"
-							   v-model="userInfo.name"
-							   :placeholder="$t('page_registration.placeholder_name')"
-							   type="text"
-							   class="focus-border-theme input-dark"
-						/>
-                    </div>
-                </div>
+        <div class="card shadow-card">
+            <FormLabel>{{ $t('user_settings.title_account') }}</FormLabel>
+            <AppInputText :title="$t('page_registration.label_email')">
+                <input :value="userInfo.email"
+					   :placeholder="$t('page_registration.placeholder_email')"
+					   type="email"
+					   disabled
+					   class="focus-border-theme input-dark"
+			   >
+            </AppInputText>
+            <AppInputText :title="$t('page_registration.label_name')">
+                <input @keyup="changeUserName"
+					   v-model="userInfo.name"
+					   :placeholder="$t('page_registration.placeholder_name')"
+					   type="text"
+					   class="focus-border-theme input-dark"
+				/>
+            </AppInputText>
+        </div>
+        <div class="card shadow-card">
+            <FormLabel>{{ $t('user_settings.timezone') }}</FormLabel>
+            <AppInputText :title="$t('GMT')">
+                <SelectInput @input="$updateText('/user/settings', 'timezone', userInfo.timezone)"
+							 v-model="userInfo.timezone"
+							 :default="userInfo.timezone"
+							 :options="timezones"
+							 :placeholder="$t('user_settings.timezone_plac')" />
+            </AppInputText>
+        </div>
+        <div class="card shadow-card">
+            <FormLabel>
+                {{ $t('user_settings.title_billing') }}
+            </FormLabel>
+            <AppInputText :title="$t('user_settings.name')">
+                <input @keyup="$updateText('/user/settings', 'name', billingInfo.name)"
+					   v-model="billingInfo.name"
+					   :placeholder="$t('user_settings.name_plac')"
+					   type="text"
+					   class="focus-border-theme input-dark"
+				/>
+            </AppInputText>
+            <AppInputText :title="$t('user_settings.address')">
+                <input @keyup="$updateText('/user/settings', 'address', billingInfo.address)"
+					   v-model="billingInfo.address"
+					   :placeholder="$t('user_settings.address_plac')"
+					   type="text"
+					   class="focus-border-theme input-dark"
+				/>
+            </AppInputText>
+            <div class="flex space-x-4">
+                <AppInputText :title="$t('user_settings.city')" class="w-full">
+                    <input @keyup="$updateText('/user/settings', 'city', billingInfo.city)"
+						   v-model="billingInfo.city"
+						   :placeholder="$t('user_settings.city_plac')"
+						   type="text"
+						   class="focus-border-theme input-dark"
+					/>
+                </AppInputText>
+                <AppInputText :title="$t('user_settings.postal_code')" class="w-full">
+                    <input @keyup="$updateText('/user/settings', 'postal_code', billingInfo.postal_code)"
+						   v-model="billingInfo.postal_code"
+						   :placeholder="$t('user_settings.postal_code_plac')"
+						   type="text"
+						   class="focus-border-theme input-dark"
+					/>
+                </AppInputText>
             </div>
-		</div>
-		<div class="card shadow-card">
-			<div class="form block-form">
-                <FormLabel>{{$t('user_settings.timezone')}}</FormLabel>
-                <div class="block-wrapper">
-                    <label>GMT:</label>
-                    <div class="input-wrapper">
-                        <SelectInput @input="$updateText('/user/settings', 'timezone', userInfo.timezone)"
-									 v-model="userInfo.timezone"
-									 :default="userInfo.timezone"
-									 :options="timezones"
-									 :placeholder="$t('user_settings.timezone_plac')"/>
-                    </div>
-                </div>
-            </div>
-		</div>
-		<div class="card shadow-card">
-			<div class="form block-form">
-                <FormLabel>{{ $t('user_settings.title_billing') }}</FormLabel>
-                <div class="block-wrapper">
-                    <label>{{ $t('user_settings.name') }}:</label>
-                    <div class="input-wrapper">
-                        <input @keyup="$updateText('/user/settings', 'name', billingInfo.name)"
-							   v-model="billingInfo.name"
-							   :placeholder="$t('user_settings.name_plac')"
-							   type="text"
-							   class="focus-border-theme input-dark"
-						/>
-                    </div>
-                </div>
-                <div class="block-wrapper">
-                    <label>{{ $t('user_settings.address') }}:</label>
-                    <div class="input-wrapper">
-                        <input @keyup="$updateText('/user/settings', 'address', billingInfo.address)"
-							   v-model="billingInfo.address"
-							   :placeholder="$t('user_settings.address_plac')"
-							   type="text"
-							   class="focus-border-theme input-dark"
-						/>
-                    </div>
-                </div>
-                <div class="wrapper-inline">
-                    <div class="block-wrapper">
-                        <label>{{ $t('user_settings.city') }}:</label>
-                        <div class="input-wrapper">
-                            <input @keyup="$updateText('/user/settings', 'city', billingInfo.city)"
-								   v-model="billingInfo.city"
-								   :placeholder="$t('user_settings.city_plac')"
-								   type="text"
-								   class="focus-border-theme input-dark"
-							/>
-                        </div>
-                    </div>
-                    <div class="block-wrapper">
-                        <label>{{ $t('user_settings.postal_code') }}:</label>
-                        <div class="input-wrapper">
-                            <input @keyup="$updateText('/user/settings', 'postal_code', billingInfo.postal_code)"
-								   v-model="billingInfo.postal_code"
-								   :placeholder="$t('user_settings.postal_code_plac')"
-								   type="text"
-								   class="focus-border-theme input-dark"
-							/>
-                        </div>
-                    </div>
-                </div>
-                <div class="block-wrapper">
-                    <label>{{ $t('user_settings.country') }}:</label>
-                    <div class="input-wrapper">
-                        <SelectInput @input="$updateText('/user/settings', 'country', billingInfo.country)"
-									 v-model="billingInfo.country"
-									 :default="billingInfo.country"
-									 :options="countries"
-									 :placeholder="$t('user_settings.country_plac')"
-						/>
-                    </div>
-                </div>
-                <div class="block-wrapper">
-                    <label>{{ $t('user_settings.state') }}:</label>
-                    <div class="input-wrapper">
-                        <input @keyup="$updateText('/user/settings', 'state', billingInfo.state)"
-							   v-model="billingInfo.state"
-							   :placeholder="$t('user_settings.state_plac')"
-							   type="text"
-							   class="focus-border-theme input-dark"
-						/>
-                        <small class="input-help">
-                            State, county, province, or region.
-                        </small>
-                    </div>
-                </div>
-                <div class="block-wrapper">
-                    <label>{{ $t('user_settings.phone_number') }}:</label>
-                    <div class="input-wrapper">
-                        <input @keyup="$updateText('/user/settings', 'phone_number', billingInfo.phone_number)"
-							   v-model="billingInfo.phone_number"
-							   :placeholder="$t('user_settings.phone_number_plac')"
-							   type="text"
-							   class="focus-border-theme input-dark"
-						/>
-                    </div>
-                </div>
-            </div>
-		</div>
+            <AppInputText :title="$t('user_settings.country')">
+                <SelectInput @input="$updateText('/user/settings', 'country', billingInfo.country)"
+							 v-model="billingInfo.country"
+							 :default="billingInfo.country"
+							 :options="countries"
+							 :placeholder="$t('user_settings.country_plac')"
+				/>
+            </AppInputText>
+            <AppInputText :title="$t('user_settings.state')" :description="$t('State, county, province, or region.')">
+                <input @keyup="$updateText('/user/settings', 'state', billingInfo.state)"
+					   v-model="billingInfo.state"
+					   :placeholder="$t('user_settings.state_plac')"
+					   type="text"
+					   class="focus-border-theme input-dark"
+				/>
+            </AppInputText>
+            <AppInputText :title="$t('user_settings.phone_number')">
+                <input @keyup="$updateText('/user/settings', 'phone_number', billingInfo.phone_number)"
+					   v-model="billingInfo.phone_number"
+					   :placeholder="$t('user_settings.phone_number_plac')"
+					   type="text"
+					   class="focus-border-theme input-dark"
+				/>
+            </AppInputText>
+        </div>
     </PageTab>
 </template>
 
 <script>
+	import AppInputText from "../../components/Admin/AppInputText";
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-    import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
-    import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
-    import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
-    import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
-    import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
-    import PageTab from '/resources/js/components/Others/Layout/PageTab'
-    import PageHeader from '/resources/js/components/Others/PageHeader'
-    import ThemeLabel from '/resources/js/components/Others/ThemeLabel'
-    import {required} from 'vee-validate/dist/rules'
-    import { mapGetters } from 'vuex'
-    import {debounce} from 'lodash'
+	import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
+	import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
+	import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
+	import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
+	import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
+	import PageTab from '/resources/js/components/Others/Layout/PageTab'
+	import PageHeader from '/resources/js/components/Others/PageHeader'
+	import ThemeLabel from '/resources/js/components/Others/ThemeLabel'
+	import {required} from 'vee-validate/dist/rules'
+	import {mapGetters} from 'vuex'
+	import {debounce} from 'lodash'
 
-    export default {
-        name: 'Settings',
-        props: [
-            'user'
-        ],
-        components: {
-            ValidationProvider,
-            ValidationObserver,
-            PageTabGroup,
-            MobileHeader,
-            SelectInput,
-            PageHeader,
-            ButtonBase,
-            ThemeLabel,
-            FormLabel,
-            required,
-            PageTab,
-        },
-        computed: {
-            ...mapGetters(['config', 'countries', 'timezones']),
-        },
-        data() {
-            return {
-                userInfo: undefined,
-                billingInfo: undefined,
-                isLoading: false,
-            }
-        },
-        methods: {
-            changeUserName() {
-                this.$store.commit('UPDATE_NAME', this.userInfo.name)
-                this.$updateText('/user/settings', 'name', this.userInfo.name)
-            }
-        },
-        created() {
+	export default {
+		name: 'Settings',
+		props: [
+			'user'
+		],
+		components: {
+			AppInputText,
+			ValidationProvider,
+			ValidationObserver,
+			PageTabGroup,
+			MobileHeader,
+			SelectInput,
+			PageHeader,
+			ButtonBase,
+			ThemeLabel,
+			FormLabel,
+			required,
+			PageTab,
+		},
+		computed: {
+			...mapGetters(['config', 'countries', 'timezones']),
+		},
+		data() {
+			return {
+				userInfo: undefined,
+				billingInfo: undefined,
+				isLoading: false,
+			}
+		},
+		methods: {
+			changeUserName() {
+				this.$store.commit('UPDATE_NAME', this.userInfo.name)
+				this.$updateText('/user/settings', 'name', this.userInfo.name)
+			}
+		},
+		created() {
 
-            this.userInfo = {
-                timezone: this.user.data.relationships.settings.data.attributes.timezone,
-                name: this.user.data.relationships.settings.data.attributes.name,
-                email: this.user.data.attributes.email
-            }
+			this.userInfo = {
+				timezone: this.user.data.relationships.settings.data.attributes.timezone,
+				name: this.user.data.relationships.settings.data.attributes.name,
+				email: this.user.data.attributes.email
+			}
 
-            this.billingInfo = {
-                name: this.user.data.relationships.settings.data.attributes.name,
-                address: this.user.data.relationships.settings.data.attributes.address,
-                state: this.user.data.relationships.settings.data.attributes.state,
-                city: this.user.data.relationships.settings.data.attributes.city,
-                postal_code: this.user.data.relationships.settings.data.attributes.postal_code,
-                country: this.user.data.relationships.settings.data.attributes.country,
-                phone_number: this.user.data.relationships.settings.data.attributes.phone_number,
-            }
-        }
-    }
+			this.billingInfo = {
+				name: this.user.data.relationships.settings.data.attributes.name,
+				address: this.user.data.relationships.settings.data.attributes.address,
+				state: this.user.data.relationships.settings.data.attributes.state,
+				city: this.user.data.relationships.settings.data.attributes.city,
+				postal_code: this.user.data.relationships.settings.data.attributes.postal_code,
+				country: this.user.data.relationships.settings.data.attributes.country,
+				phone_number: this.user.data.relationships.settings.data.attributes.phone_number,
+			}
+		}
+	}
 </script>
 
 <style lang="scss" scoped>
     @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-    @import '/resources/sass/vuefilemanager/_forms';
+	@import '/resources/sass/vuefilemanager/_mixins';
+	@import '/resources/sass/vuefilemanager/_forms';
 
-    .block-form {
-        max-width: 100%;
-    }
+	.block-form {
+		max-width: 100%;
+	}
 
 </style>