diff --git a/web/satellite/src/components/common/VSearch.vue b/web/satellite/src/components/common/VSearch.vue
index c88b409ef..23a7d6a76 100644
--- a/web/satellite/src/components/common/VSearch.vue
+++ b/web/satellite/src/components/common/VSearch.vue
@@ -51,7 +51,7 @@ const style = computed((): SearchStyle => {
  */
 function onMouseEnter(): void {
     inputWidth.value = '540px';
-    input.value.focus();
+    input.value?.focus();
 }
 
 /**
@@ -60,7 +60,7 @@ function onMouseEnter(): void {
 function onMouseLeave(): void {
     if (!searchQuery.value) {
         inputWidth.value = '56px';
-        input.value.blur();
+        input.value?.blur();
     }
 }
 
diff --git a/web/satellite/src/components/team/HeaderArea.vue b/web/satellite/src/components/team/HeaderArea.vue
index 43d17939c..570f789f0 100644
--- a/web/satellite/src/components/team/HeaderArea.vue
+++ b/web/satellite/src/components/team/HeaderArea.vue
@@ -77,8 +77,8 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref } from 'vue';
 
 import { RouteConfig } from '@/router';
 import { PROJECTS_ACTIONS } from '@/store/modules/projects';
@@ -89,6 +89,7 @@ import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { MODALS } from '@/utils/constants/appStatePopUps';
+import { useNotify, useRouter, useStore } from '@/utils/hooks';
 
 import VInfo from '@/components/common/VInfo.vue';
 import VHeader from '@/components/common/VHeader.vue';
@@ -100,133 +101,123 @@ declare interface ClearSearch {
     clearSearch(): void;
 }
 
-// @vue/component
-@Component({
-    components: {
-        VButton,
-        VHeader,
-        VInfo,
-        InfoIcon,
-    },
-})
-export default class HeaderArea extends Vue {
-    @Prop({ default: ProjectMemberHeaderState.DEFAULT })
-    private readonly headerState: ProjectMemberHeaderState;
-    @Prop({ default: 0 })
-    public readonly selectedProjectMembersCount: number;
-    @Prop({ default: false })
-    public readonly isAddButtonDisabled: boolean;
+const store = useStore();
+const notify = useNotify();
+const router = useRouter();
 
-    private FIRST_PAGE = 1;
+const props = withDefaults(defineProps<{
+    headerState: ProjectMemberHeaderState;
+    selectedProjectMembersCount: number;
+    isAddButtonDisabled: boolean;
+}>(), {
+    headerState: ProjectMemberHeaderState.DEFAULT,
+    selectedProjectMembersCount: 0,
+    isAddButtonDisabled: false,
+});
 
-    public readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
+const emit = defineEmits(['onSuccessAction']);
 
-    /**
-     * Indicates if state after first delete click is active.
-     */
-    public isDeleteClicked = false;
+const FIRST_PAGE = 1;
+const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
 
-    public $refs!: {
-        headerComponent: VHeader & ClearSearch;
-    };
+const isDeleteClicked = ref<boolean>(false);
+const headerComponent = ref<VHeader & ClearSearch>();
 
-    /**
-     * Lifecycle hook before component destruction.
-     * Clears selection and search query for team members page.
-     */
-    public beforeDestroy(): void {
-        this.onClearSelection();
-        this.$store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, '');
+const isDefaultState = computed((): boolean => {
+    return props.headerState === 0;
+});
+
+const areProjectMembersSelected = computed((): boolean => {
+    return props.headerState === 1 && !isDeleteClicked.value;
+});
+
+const areSelectedProjectMembersBeingDeleted = computed((): boolean => {
+    return props.headerState === 1 && isDeleteClicked.value;
+});
+
+const userCountTitle = computed((): string => {
+    return props.selectedProjectMembersCount === 1 ? 'user' : 'users';
+});
+
+/**
+ * Opens add team members modal.
+ */
+function toggleTeamMembersModal(): void {
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTeamMember);
+}
+
+function onFirstDeleteClick(): void {
+    isDeleteClicked.value = true;
+}
+
+/**
+ * Clears selection and returns area state to default.
+ */
+function onClearSelection(): void {
+    store.dispatch(PM_ACTIONS.CLEAR_SELECTION);
+    isDeleteClicked.value = false;
+
+    emit('onSuccessAction');
+}
+
+/**
+ * Removes user from selected project.
+ */
+async function onDelete(): Promise<void> {
+    try {
+        await store.dispatch(PM_ACTIONS.DELETE);
+        await setProjectState();
+    } catch (error) {
+        await notify.error(`Error while deleting users from projectMembers. ${error.message}`, AnalyticsErrorEventSource.PROJECT_MEMBERS_HEADER);
+        isDeleteClicked.value = false;
+        return;
     }
 
-    public get userCountTitle(): string {
-        return this.selectedProjectMembersCount === 1 ? 'user' : 'users';
-    }
+    emit('onSuccessAction');
+    await notify.success('Members were successfully removed from project');
+    isDeleteClicked.value = false;
+}
 
-    /**
-     * Opens add team members modal.
-     */
-    public toggleTeamMembersModal(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTeamMember);
-    }
-
-    public onFirstDeleteClick(): void {
-        this.isDeleteClicked = true;
-    }
-
-    /**
-     * Clears selection and returns area state to default.
-     */
-    public onClearSelection(): void {
-        this.$store.dispatch(PM_ACTIONS.CLEAR_SELECTION);
-        this.isDeleteClicked = false;
-
-        this.$emit('onSuccessAction');
-    }
-
-    /**
-     * Removes user from selected project.
-     */
-    public async onDelete(): Promise<void> {
-        try {
-            await this.$store.dispatch(PM_ACTIONS.DELETE);
-            await this.setProjectState();
-        } catch (error) {
-            await this.$notify.error(`Error while deleting users from projectMembers. ${error.message}`, AnalyticsErrorEventSource.PROJECT_MEMBERS_HEADER);
-            this.isDeleteClicked = false;
-
-            return;
-        }
-
-        this.$emit('onSuccessAction');
-        await this.$notify.success('Members were successfully removed from project');
-        this.isDeleteClicked = false;
-    }
-
-    /**
-     * Fetches team members of current project depends on search query.
-     * @param search
-     */
-    public async processSearchQuery(search: string): Promise<void> {
-        await this.$store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, search);
-        try {
-            await this.$store.dispatch(PM_ACTIONS.FETCH, this.FIRST_PAGE);
-        } catch (error) {
-            await this.$notify.error(`Unable to fetch project members. ${error.message}`, AnalyticsErrorEventSource.PROJECT_MEMBERS_HEADER);
-        }
-    }
-
-    public get isDefaultState(): boolean {
-        return this.headerState === 0;
-    }
-
-    public get areProjectMembersSelected(): boolean {
-        return this.headerState === 1 && !this.isDeleteClicked;
-    }
-
-    public get areSelectedProjectMembersBeingDeleted(): boolean {
-        return this.headerState === 1 && this.isDeleteClicked;
-    }
-
-    private async setProjectState(): Promise<void> {
-        const projects: Project[] = await this.$store.dispatch(PROJECTS_ACTIONS.FETCH);
-        if (!projects.length) {
-            const onboardingPath = RouteConfig.OnboardingTour.with(RouteConfig.FirstOnboardingStep).path;
-
-            this.analytics.pageVisit(onboardingPath);
-            await this.$router.push(onboardingPath);
-
-            return;
-        }
-
-        if (!projects.includes(this.$store.getters.selectedProject)) {
-            await this.$store.dispatch(PROJECTS_ACTIONS.SELECT, projects[0].id);
-        }
-
-        await this.$store.dispatch(PM_ACTIONS.FETCH, this.FIRST_PAGE);
-        this.$refs.headerComponent.clearSearch();
+/**
+ * Fetches team members of current project depends on search query.
+ * @param search
+ */
+async function processSearchQuery(search: string): Promise<void> {
+    await store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, search);
+    try {
+        await store.dispatch(PM_ACTIONS.FETCH, FIRST_PAGE);
+    } catch (error) {
+        await notify.error(`Unable to fetch project members. ${error.message}`, AnalyticsErrorEventSource.PROJECT_MEMBERS_HEADER);
     }
 }
+
+async function setProjectState(): Promise<void> {
+    const projects: Project[] = await store.dispatch(PROJECTS_ACTIONS.FETCH);
+    if (!projects.length) {
+        const onboardingPath = RouteConfig.OnboardingTour.with(RouteConfig.FirstOnboardingStep).path;
+
+        analytics.pageVisit(onboardingPath);
+        await router.push(onboardingPath);
+
+        return;
+    }
+
+    if (!projects.includes(store.getters.selectedProject)) {
+        await store.dispatch(PROJECTS_ACTIONS.SELECT, projects[0].id);
+    }
+
+    await store.dispatch(PM_ACTIONS.FETCH, FIRST_PAGE);
+    headerComponent.value?.clearSearch();
+}
+
+/**
+ * Lifecycle hook before component destruction.
+ * Clears selection and search query for team members page.
+ */
+onBeforeUnmount((): void => {
+    onClearSelection();
+    store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, '');
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/web/satellite/src/components/team/SortingListHeader.vue b/web/satellite/src/components/team/SortingListHeader.vue
deleted file mode 100644
index bd68b207d..000000000
--- a/web/satellite/src/components/team/SortingListHeader.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-// Copyright (C) 2019 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-<template>
-    <div class="sort-header-container">
-        <div class="sort-header-container__name-container" @click="onHeaderItemClick(ProjectMemberOrderBy.NAME)">
-            <p class="sort-header-container__name-container__title">Name</p>
-            <VerticalArrows
-                :is-active="areProjectMembersSortedByName"
-                :direction="getSortDirection"
-            />
-        </div>
-        <div class="sort-header-container__added-container" @click="onHeaderItemClick(ProjectMemberOrderBy.CREATED_AT)">
-            <p class="sort-header-container__added-container__title">Added</p>
-            <VerticalArrows
-                :is-active="areProjectMembersSortedByDate"
-                :direction="getSortDirection"
-            />
-        </div>
-        <div class="sort-header-container__email-container" @click="onHeaderItemClick(ProjectMemberOrderBy.EMAIL)">
-            <p class="sort-header-container__email-container__title">Email</p>
-            <VerticalArrows
-                :is-active="areProjectMembersSortedByEmail"
-                :direction="getSortDirection"
-            />
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-
-import { SortDirection } from '@/types/common';
-import { OnHeaderClickCallback, ProjectMemberOrderBy } from '@/types/projectMembers';
-
-import VerticalArrows from '@/components/common/VerticalArrows.vue';
-
-// @vue/component
-@Component({
-    components: {
-        VerticalArrows,
-    },
-})
-export default class SortingListHeader extends Vue {
-    @Prop({ default: () => () => new Promise(() => false) })
-    private readonly onHeaderClickCallback: OnHeaderClickCallback;
-
-    public ProjectMemberOrderBy = ProjectMemberOrderBy;
-
-    public sortBy: ProjectMemberOrderBy = ProjectMemberOrderBy.NAME;
-    public sortDirection: SortDirection = SortDirection.ASCENDING;
-
-    /**
-     * Used for arrow styling.
-     */
-    public get getSortDirection(): SortDirection {
-        return this.sortDirection === SortDirection.DESCENDING ? SortDirection.ASCENDING : SortDirection.DESCENDING;
-    }
-
-    public get areProjectMembersSortedByName(): boolean {
-        return this.sortBy === ProjectMemberOrderBy.NAME;
-    }
-
-    public get areProjectMembersSortedByDate(): boolean {
-        return this.sortBy === ProjectMemberOrderBy.CREATED_AT;
-    }
-
-    public get areProjectMembersSortedByEmail(): boolean {
-        return this.sortBy === ProjectMemberOrderBy.EMAIL;
-    }
-
-    /**
-     * Sets sorting kind if different from current.
-     * If same, changes sort direction.
-     * @param sortBy
-     */
-    public async onHeaderItemClick(sortBy: ProjectMemberOrderBy): Promise<void> {
-        if (this.sortBy !== sortBy) {
-            this.sortBy = sortBy;
-            this.sortDirection = SortDirection.ASCENDING;
-
-            await this.onHeaderClickCallback(this.sortBy, this.sortDirection);
-
-            return;
-        }
-
-        if (this.sortDirection === SortDirection.DESCENDING) {
-            this.sortDirection = SortDirection.ASCENDING;
-        } else {
-            this.sortDirection = SortDirection.DESCENDING;
-        }
-
-        await this.onHeaderClickCallback(this.sortBy, this.sortDirection);
-    }
-}
-</script>
-
-<style scoped lang="scss">
-    .sort-header-container {
-        display: flex;
-        flex-direction: row;
-        height: 40px;
-        background-color: rgb(255 255 255 / 30%);
-        margin-top: 31px;
-
-        &__name-container,
-        &__added-container,
-        &__email-container {
-
-            &__title {
-                font-family: 'font_medium', sans-serif;
-                font-size: 16px;
-                line-height: 23px;
-                color: #2a2a32;
-                margin: 0;
-            }
-        }
-
-        &__name-container {
-            display: flex;
-            width: calc(50% - 70px);
-            cursor: pointer;
-            text-align: left;
-            margin-left: 70px;
-            align-items: center;
-            justify-content: flex-start;
-        }
-
-        &__added-container {
-            width: 25%;
-            cursor: pointer;
-            text-align: left;
-            margin-left: 30px;
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-        }
-
-        &__email-container {
-            width: 25%;
-            cursor: pointer;
-            text-align: left;
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-        }
-    }
-</style>
diff --git a/web/satellite/tests/unit/projectMembers/ProjectMembersArea.spec.ts b/web/satellite/tests/unit/ignore/projectMembers/ProjectMemberArea.spec.ts
similarity index 96%
rename from web/satellite/tests/unit/projectMembers/ProjectMembersArea.spec.ts
rename to web/satellite/tests/unit/ignore/projectMembers/ProjectMemberArea.spec.ts
index 32088693a..1211ccb82 100644
--- a/web/satellite/tests/unit/projectMembers/ProjectMembersArea.spec.ts
+++ b/web/satellite/tests/unit/ignore/projectMembers/ProjectMemberArea.spec.ts
@@ -4,10 +4,9 @@
 import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 
-import { ProjectMembersApiMock } from '../mock/api/projectMembers';
-import { ProjectsApiMock } from '../mock/api/projects';
-import { FrontendConfigApiMock } from '../mock/api/config';
-
+import { ProjectMembersApiMock } from '@/../tests/unit/mock/api/projectMembers';
+import { ProjectsApiMock } from '@/../tests/unit/mock/api/projects';
+import { FrontendConfigApiMock } from '@/../tests/unit/mock/api/config';
 import { makeAppStateModule } from '@/store/modules/appState';
 import { makeProjectMembersModule, PROJECT_MEMBER_MUTATIONS } from '@/store/modules/projectMembers';
 import { makeProjectsModule } from '@/store/modules/projects';
diff --git a/web/satellite/tests/unit/projectMembers/ProjectMemberListItem.spec.ts b/web/satellite/tests/unit/ignore/projectMembers/ProjectMemberListItem.spec.ts
similarity index 100%
rename from web/satellite/tests/unit/projectMembers/ProjectMemberListItem.spec.ts
rename to web/satellite/tests/unit/ignore/projectMembers/ProjectMemberListItem.spec.ts
diff --git a/web/satellite/tests/unit/ignore/projectMembers/SortingListHeader.spec.ts b/web/satellite/tests/unit/ignore/projectMembers/SortingListHeader.spec.ts
deleted file mode 100644
index a1ed6686d..000000000
--- a/web/satellite/tests/unit/ignore/projectMembers/SortingListHeader.spec.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-// Copyright (C) 2019 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-import { mount } from '@vue/test-utils';
-
-import { SortDirection } from '@/types/common';
-import { ProjectMemberOrderBy } from '@/types/projectMembers';
-
-import SortingListHeader from '@/components/team/SortingListHeader.vue';
-
-describe('SortingListHeader.vue', () => {
-    it('should render correctly', function () {
-        const wrapper = mount(SortingListHeader);
-
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should retrieve callback', function () {
-        const onPressSpy = jest.fn();
-
-        const wrapper = mount(SortingListHeader, {
-            propsData: {
-                onHeaderClickCallback: onPressSpy,
-            },
-        });
-        wrapper.find('.sort-header-container__name-container').trigger('click');
-        expect(onPressSpy).toHaveBeenCalledTimes(1);
-    });
-
-    it('should change sort direction', function () {
-        const onPressSpy = jest.fn();
-
-        const wrapper = mount(SortingListHeader, {
-            propsData: {
-                onHeaderClickCallback: onPressSpy,
-            },
-        });
-
-        expect(wrapper.vm.$data.sortBy).toBe(ProjectMemberOrderBy.NAME);
-        expect(wrapper.vm.$data.sortDirection).toBe(SortDirection.ASCENDING);
-
-        wrapper.find('.sort-header-container__name-container').trigger('click');
-        expect(onPressSpy).toHaveBeenCalledTimes(1);
-
-        expect(wrapper.vm.$data.sortBy).toBe(ProjectMemberOrderBy.NAME);
-        expect(wrapper.vm.$data.sortDirection).toBe(SortDirection.DESCENDING);
-    });
-
-    it('should change sort by value', function () {
-        const onPressSpy = jest.fn();
-
-        const wrapper = mount(SortingListHeader, {
-            propsData: {
-                onHeaderClickCallback: onPressSpy,
-            },
-        });
-
-        expect(wrapper.vm.$data.sortBy).toBe(ProjectMemberOrderBy.NAME);
-        expect(wrapper.vm.$data.sortDirection).toBe(SortDirection.ASCENDING);
-
-        wrapper.find('.sort-header-container__added-container').trigger('click');
-        expect(onPressSpy).toHaveBeenCalledTimes(1);
-
-        expect(wrapper.vm.$data.sortBy).toBe(ProjectMemberOrderBy.CREATED_AT);
-        expect(wrapper.vm.$data.sortDirection).toBe(SortDirection.ASCENDING);
-    });
-});
diff --git a/web/satellite/tests/unit/projectMembers/__snapshots__/ProjectMemberListItem.spec.ts.snap b/web/satellite/tests/unit/projectMembers/__snapshots__/ProjectMemberListItem.spec.ts.snap
deleted file mode 100644
index 526a06388..000000000
--- a/web/satellite/tests/unit/projectMembers/__snapshots__/ProjectMemberListItem.spec.ts.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[` should render correctly 1`] = `
-<table-item-stub item="[object Object]" selectable="true" select-disabled="true" on-click="function (_) {
-        return _vm.$emit(&quot;memberClick&quot;, _vm.itemData)
-      }" class="owner"></table-item-stub>
-`;
-
-exports[` should render correctly with item row highlighted 1`] = `
-<table-item-stub item="[object Object]" selectable="true" select-disabled="true" selected="true" on-click="function (_) {
-        return _vm.$emit(&quot;memberClick&quot;, _vm.itemData)
-      }" class="owner"></table-item-stub>
-`;
diff --git a/web/satellite/tests/unit/projectMembers/__snapshots__/ProjectMembersArea.spec.ts.snap b/web/satellite/tests/unit/projectMembers/__snapshots__/ProjectMembersArea.spec.ts.snap
deleted file mode 100644
index ce5a66b0a..000000000
--- a/web/satellite/tests/unit/projectMembers/__snapshots__/ProjectMembersArea.spec.ts.snap
+++ /dev/null
@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ProjectMembersArea.vue empty search result area render correctly 1`] = `
-<div class="team-area">
-  <div class="team-area__header">
-    <headerarea-stub headerstate="0" selectedprojectmemberscount="0"></headerarea-stub>
-  </div>
-  <!---->
-  <div class="team-area__empty-search-result-area">
-    <h1 class="team-area__empty-search-result-area__title">No results found</h1>
-    <emptysearchresulticon-stub class="team-area__empty-search-result-area__image"></emptysearchresulticon-stub>
-  </div>
-  <!---->
-</div>
-`;
-
-exports[`ProjectMembersArea.vue renders correctly 1`] = `
-<div class="team-area">
-  <div class="team-area__header">
-    <headerarea-stub headerstate="0" selectedprojectmemberscount="0"></headerarea-stub>
-  </div>
-  <!---->
-  <!---->
-  <v-table-stub items-label="project members" selectable="true" limit="6" total-page-count="1" total-items-count="1" on-page-click-callback="function () { [native code] }" class="team-area__table"></v-table-stub>
-</div>
-`;
-
-exports[`ProjectMembersArea.vue team area renders correctly 1`] = `
-<div class="team-area">
-  <div class="team-area__header">
-    <headerarea-stub headerstate="0" selectedprojectmemberscount="0"></headerarea-stub>
-  </div>
-  <!---->
-  <!---->
-  <v-table-stub items-label="project members" selectable="true" limit="6" total-page-count="1" total-items-count="1" on-page-click-callback="function () { [native code] }" class="team-area__table"></v-table-stub>
-</div>
-`;