diff --git a/web/satellite/src/components/onboardingTour/steps/cliFlow/AGName.vue b/web/satellite/src/components/onboardingTour/steps/cliFlow/AGName.vue
index 539adad53..5c99ae8da 100644
--- a/web/satellite/src/components/onboardingTour/steps/cliFlow/AGName.vue
+++ b/web/satellite/src/components/onboardingTour/steps/cliFlow/AGName.vue
@@ -24,8 +24,8 @@
     </CLIFlowContainer>
 </template>
 
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+<script setup lang="ts">
+import { computed, ref } from 'vue';
 
 import { RouteConfig } from '@/router';
 import { AccessGrant } from '@/types/accessGrants';
@@ -33,87 +33,82 @@ import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { useNotify, useRouter, useStore } from '@/utils/hooks';
 
 import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue';
 import VInput from '@/components/common/VInput.vue';
 
 import Icon from '@/../static/images/onboardingTour/accessGrant.svg';
 
-// @vue/component
-@Component({
-    components: {
-        CLIFlowContainer,
-        VInput,
-        Icon,
-    },
-})
-export default class AGName extends Vue {
-    private name = '';
-    private errorMessage = '';
-    private isLoading = false;
+const store = useStore();
+const router = useRouter();
+const notify = useNotify();
 
-    private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
+const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
 
-    /**
-     * Changes name data from input value.
-     * @param value
-     */
-    public onChangeName(value: string): void {
-        this.name = value.trim();
-        this.errorMessage = '';
+const name = ref<string>('');
+const errorMessage = ref<string>('');
+const isLoading = ref<boolean>(false);
+
+/**
+ * Returns back route from store.
+ */
+const backRoute = computed((): string => {
+    return store.state.appStateModule.viewsState.onbAGStepBackRoute;
+});
+
+/**
+ * Changes name data from input value.
+ * @param value
+ */
+function onChangeName(value: string): void {
+    name.value = value.trim();
+    errorMessage.value = '';
+}
+
+/**
+ * Holds on back button click logic.
+ * Navigates to previous screen.
+ */
+async function onBackClick(): Promise<void> {
+    analytics.pageVisit(RouteConfig.OverviewStep.path);
+    backRoute.value ?
+        await router.push(backRoute.value).catch(() => {return; }) :
+        await router.push({ name: RouteConfig.OverviewStep.name });
+}
+
+/**
+ * Holds on next button click logic.
+ */
+async function onNextClick(): Promise<void> {
+    if (isLoading.value) return;
+
+    if (!name.value) {
+        errorMessage.value = 'Access Grant name can\'t be empty';
+        analytics.errorEventTriggered(AnalyticsErrorEventSource.ONBOARDING_NAME_STEP);
+
+        return;
     }
 
-    /**
-     * Holds on back button click logic.
-     * Navigates to previous screen.
-     */
-    public async onBackClick(): Promise<void> {
-        this.analytics.pageVisit(RouteConfig.OverviewStep.path);
-        this.backRoute ?
-            await this.$router.push(this.backRoute).catch(() => {return; }) :
-            await this.$router.push({ name: RouteConfig.OverviewStep.name });
+    isLoading.value = true;
+
+    let createdAccessGrant: AccessGrant;
+    try {
+        createdAccessGrant = await store.dispatch(ACCESS_GRANTS_ACTIONS.CREATE, name.value);
+
+        await notify.success('New clean access grant was generated successfully.');
+    } catch (error) {
+        await notify.error(error.message, AnalyticsErrorEventSource.ONBOARDING_NAME_STEP);
+        return;
+    } finally {
+        isLoading.value = false;
     }
 
-    /**
-     * Holds on next button click logic.
-     */
-    public async onNextClick(): Promise<void> {
-        if (this.isLoading) return;
+    store.commit(APP_STATE_MUTATIONS.SET_ONB_CLEAN_API_KEY, createdAccessGrant.secret);
+    name.value = '';
 
-        if (!this.name) {
-            this.errorMessage = 'Access Grant name can\'t be empty';
-            this.analytics.errorEventTriggered(AnalyticsErrorEventSource.ONBOARDING_NAME_STEP);
-
-            return;
-        }
-
-        this.isLoading = true;
-
-        let createdAccessGrant: AccessGrant;
-        try {
-            createdAccessGrant = await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.CREATE, this.name);
-
-            await this.$notify.success('New clean access grant was generated successfully.');
-        } catch (error) {
-            await this.$notify.error(error.message, AnalyticsErrorEventSource.ONBOARDING_NAME_STEP);
-            return;
-        } finally {
-            this.isLoading = false;
-        }
-
-        this.$store.commit(APP_STATE_MUTATIONS.SET_ONB_CLEAN_API_KEY, createdAccessGrant.secret);
-        this.name = '';
-
-        this.analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.AGPermissions)).path);
-        await this.$router.push({ name: RouteConfig.AGPermissions.name });
-    }
-
-    /**
-     * Returns back route from store.
-     */
-    private get backRoute(): string {
-        return this.$store.state.appStateModule.viewsState.onbAGStepBackRoute;
-    }
+    analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.AGPermissions)).path);
+    await router.push({ name: RouteConfig.AGPermissions.name });
 }
 </script>