diff --git a/web-app/src/components/AddValueRecordModal.vue b/web-app/src/components/AddValueRecordModal.vue
index 695b7f2..9a94abd 100644
--- a/web-app/src/components/AddValueRecordModal.vue
+++ b/web-app/src/components/AddValueRecordModal.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { ref, useTemplateRef, type Ref } from 'vue';
-import AppForm from './form/AppForm.vue';
-import FormControl from './form/FormControl.vue';
-import FormGroup from './form/FormGroup.vue';
-import ModalWrapper from './ModalWrapper.vue';
-import AppButton from './AppButton.vue';
+import AppForm from '@/components/common/form/AppForm.vue';
+import FormControl from '@/components/common/form/FormControl.vue';
+import FormGroup from '@/components/common/form/FormGroup.vue';
+import ModalWrapper from '@/components/common/ModalWrapper.vue';
+import AppButton from '@/components/common/AppButton.vue';
 import { AccountApiClient, AccountValueRecordType, type Account, type AccountValueRecord, type AccountValueRecordCreationPayload } from '@/api/account';
 import { datetimeLocalToISO, getDatetimeLocalValueForNow } from '@/util/time';
-import FileSelector from './FileSelector.vue';
+import FileSelector from '@/components/common/FileSelector.vue';
 import { useRoute } from 'vue-router';
 
 const route = useRoute()
diff --git a/web-app/src/components/CategoryDisplayItem.vue b/web-app/src/components/CategoryDisplayItem.vue
index 92238cd..404a2c7 100644
--- a/web-app/src/components/CategoryDisplayItem.vue
+++ b/web-app/src/components/CategoryDisplayItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { TransactionCategoryTree } from '@/api/transaction';
-import AppButton from './AppButton.vue';
+import AppButton from './common/AppButton.vue';
 import { computed, ref } from 'vue';
 
 const props = defineProps<{
diff --git a/web-app/src/components/EditCategoryModal.vue b/web-app/src/components/EditCategoryModal.vue
index 4198e5d..7c725bc 100644
--- a/web-app/src/components/EditCategoryModal.vue
+++ b/web-app/src/components/EditCategoryModal.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { TransactionApiClient, type TransactionCategory } from '@/api/transaction';
-import ModalWrapper from './ModalWrapper.vue';
+import ModalWrapper from '@/components/common/ModalWrapper.vue';
 import { ref, useTemplateRef, type Ref } from 'vue';
-import AppForm from './form/AppForm.vue';
-import FormGroup from './form/FormGroup.vue';
-import FormControl from './form/FormControl.vue';
-import AppButton from './AppButton.vue';
+import AppForm from '@/components/common/form/AppForm.vue';
+import FormGroup from '@/components/common/form/FormGroup.vue';
+import FormControl from '@/components/common/form/FormControl.vue';
+import AppButton from '@/components/common/AppButton.vue';
 import CategorySelect from './CategorySelect.vue';
 import { useRoute } from 'vue-router';
 import { getSelectedProfile } from '@/api/profile';
diff --git a/web-app/src/components/EditVendorModal.vue b/web-app/src/components/EditVendorModal.vue
index f654c01..d5344f5 100644
--- a/web-app/src/components/EditVendorModal.vue
+++ b/web-app/src/components/EditVendorModal.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { ref, useTemplateRef } from 'vue';
-import AppForm from './form/AppForm.vue';
-import FormControl from './form/FormControl.vue';
-import FormGroup from './form/FormGroup.vue';
-import ModalWrapper from './ModalWrapper.vue';
+import AppForm from '@/components/common/form/AppForm.vue';
+import FormControl from '@/components/common/form/FormControl.vue';
+import FormGroup from '@/components/common/form/FormGroup.vue';
+import ModalWrapper from '@/components/common/ModalWrapper.vue';
 import { TransactionApiClient, type TransactionVendor } from '@/api/transaction';
-import AppButton from './AppButton.vue';
+import AppButton from './common/AppButton.vue';
 import { useRoute } from 'vue-router';
 import { getSelectedProfile } from '@/api/profile';
 
diff --git a/web-app/src/components/GlobalAlertModal.vue b/web-app/src/components/GlobalAlertModal.vue
index b7d98be..9a83d1e 100644
--- a/web-app/src/components/GlobalAlertModal.vue
+++ b/web-app/src/components/GlobalAlertModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTemplateRef } from 'vue';
-import ModalWrapper from './ModalWrapper.vue';
-import AppButton from './AppButton.vue';
+import ModalWrapper from '@/components/common/ModalWrapper.vue';
+import AppButton from '@/components/common/AppButton.vue';
 
 const globalAlertModal = useTemplateRef('global-alert-modal')
 </script>
diff --git a/web-app/src/components/HomeModule.vue b/web-app/src/components/HomeModule.vue
index d613ad7..c7e477b 100644
--- a/web-app/src/components/HomeModule.vue
+++ b/web-app/src/components/HomeModule.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ButtonBar from '@/components/ButtonBar.vue';
+import ButtonBar from '@/components/common/ButtonBar.vue';
 
 
 defineProps<{ title: string }>()
diff --git a/web-app/src/components/LineItemsEditor.vue b/web-app/src/components/LineItemsEditor.vue
index 5f49d76..1bc106d 100644
--- a/web-app/src/components/LineItemsEditor.vue
+++ b/web-app/src/components/LineItemsEditor.vue
@@ -5,11 +5,11 @@ modal for adding a new one.
 -->
 <script setup lang="ts">
 import { type TransactionCategoryTree, type TransactionDetailLineItem } from '@/api/transaction';
-import AppButton from './AppButton.vue';
-import FormGroup from './form/FormGroup.vue';
+import AppButton from '@/components/common/AppButton.vue';
+import FormGroup from '@/components/common/form/FormGroup.vue';
 import { formatMoney, type Currency } from '@/api/data';
-import ModalWrapper from './ModalWrapper.vue';
-import FormControl from './form/FormControl.vue';
+import ModalWrapper from '@/components/common/ModalWrapper.vue';
+import FormControl from '@/components/common/form/FormControl.vue';
 import { ref, type Ref, useTemplateRef } from 'vue';
 import CategorySelect from './CategorySelect.vue';
 
diff --git a/web-app/src/components/AppButton.vue b/web-app/src/components/common/AppButton.vue
similarity index 100%
rename from web-app/src/components/AppButton.vue
rename to web-app/src/components/common/AppButton.vue
diff --git a/web-app/src/components/AppPage.vue b/web-app/src/components/common/AppPage.vue
similarity index 100%
rename from web-app/src/components/AppPage.vue
rename to web-app/src/components/common/AppPage.vue
diff --git a/web-app/src/components/ButtonBar.vue b/web-app/src/components/common/ButtonBar.vue
similarity index 92%
rename from web-app/src/components/ButtonBar.vue
rename to web-app/src/components/common/ButtonBar.vue
index 04cb4c3..7adb14c 100644
--- a/web-app/src/components/ButtonBar.vue
+++ b/web-app/src/components/common/ButtonBar.vue
@@ -8,6 +8,7 @@
 <style lang="css">
 .button-bar {
   display: flex;
+  flex-wrap: wrap;
   justify-content: end;
   align-items: center;
 }
diff --git a/web-app/src/components/ConfirmModal.vue b/web-app/src/components/common/ConfirmModal.vue
similarity index 85%
rename from web-app/src/components/ConfirmModal.vue
rename to web-app/src/components/common/ConfirmModal.vue
index f5e0840..2e06477 100644
--- a/web-app/src/components/ConfirmModal.vue
+++ b/web-app/src/components/common/ConfirmModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTemplateRef } from 'vue';
-import AppButton from './AppButton.vue';
-import ModalWrapper from './ModalWrapper.vue';
+import AppButton from '@/components/common/AppButton.vue';
+import ModalWrapper from '@/components/common/ModalWrapper.vue';
 
 const modal = useTemplateRef('modal')
 
diff --git a/web-app/src/components/FileSelector.vue b/web-app/src/components/common/FileSelector.vue
similarity index 98%
rename from web-app/src/components/FileSelector.vue
rename to web-app/src/components/common/FileSelector.vue
index d9ab697..528f2a0 100644
--- a/web-app/src/components/FileSelector.vue
+++ b/web-app/src/components/common/FileSelector.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref, useTemplateRef, watch, type Ref } from 'vue';
-import AppButton from './AppButton.vue';
+import AppButton from '@/components/common/AppButton.vue';
 
 interface ExistingFile {
   id: number
diff --git a/web-app/src/components/ModalWrapper.vue b/web-app/src/components/common/ModalWrapper.vue
similarity index 95%
rename from web-app/src/components/ModalWrapper.vue
rename to web-app/src/components/common/ModalWrapper.vue
index 4dcaf39..76f3612 100644
--- a/web-app/src/components/ModalWrapper.vue
+++ b/web-app/src/components/common/ModalWrapper.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, type Ref } from 'vue';
-import AppButton from './AppButton.vue';
+import AppButton from '@/components/common/AppButton.vue';
 
 defineProps<{ id?: string }>()
 
diff --git a/web-app/src/components/PaginationControls.vue b/web-app/src/components/common/PaginationControls.vue
similarity index 95%
rename from web-app/src/components/PaginationControls.vue
rename to web-app/src/components/common/PaginationControls.vue
index 0f6fae2..cad883c 100644
--- a/web-app/src/components/PaginationControls.vue
+++ b/web-app/src/components/common/PaginationControls.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Page, PageRequest } from '@/api/pagination';
-import AppButton from './AppButton.vue';
+import AppButton from '@/components/common/AppButton.vue';
 
 
 const props = defineProps<{ page?: Page<unknown> }>()
diff --git a/web-app/src/components/form/AppForm.vue b/web-app/src/components/common/form/AppForm.vue
similarity index 100%
rename from web-app/src/components/form/AppForm.vue
rename to web-app/src/components/common/form/AppForm.vue
diff --git a/web-app/src/components/form/FormActions.vue b/web-app/src/components/common/form/FormActions.vue
similarity index 100%
rename from web-app/src/components/form/FormActions.vue
rename to web-app/src/components/common/form/FormActions.vue
diff --git a/web-app/src/components/form/FormControl.vue b/web-app/src/components/common/form/FormControl.vue
similarity index 100%
rename from web-app/src/components/form/FormControl.vue
rename to web-app/src/components/common/form/FormControl.vue
diff --git a/web-app/src/components/form/FormGroup.vue b/web-app/src/components/common/form/FormGroup.vue
similarity index 100%
rename from web-app/src/components/form/FormGroup.vue
rename to web-app/src/components/common/form/FormGroup.vue
diff --git a/web-app/src/components/history/ValueRecordHistoryItem.vue b/web-app/src/components/history/ValueRecordHistoryItem.vue
index 6c27a90..da15387 100644
--- a/web-app/src/components/history/ValueRecordHistoryItem.vue
+++ b/web-app/src/components/history/ValueRecordHistoryItem.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { AccountApiClient, type AccountHistoryValueRecordItem } from '@/api/account';
 import { formatMoney } from '@/api/data';
-import AppButton from '../AppButton.vue';
+import AppButton from '../common/AppButton.vue';
 import { showConfirm } from '@/util/alert';
 import { useRoute } from 'vue-router';
-import ButtonBar from '../ButtonBar.vue';
+import ButtonBar from '../common/ButtonBar.vue';
 
 const route = useRoute()
 
diff --git a/web-app/src/pages/AccountPage.vue b/web-app/src/pages/AccountPage.vue
index f18acdb..84033d6 100644
--- a/web-app/src/pages/AccountPage.vue
+++ b/web-app/src/pages/AccountPage.vue
@@ -3,9 +3,9 @@ import { AccountApiClient, type Account } from '@/api/account';
 import { formatMoney } from '@/api/data';
 import { getSelectedProfile } from '@/api/profile';
 import AddValueRecordModal from '@/components/AddValueRecordModal.vue';
-import AppButton from '@/components/AppButton.vue';
-import AppPage from '@/components/AppPage.vue';
-import ButtonBar from '@/components/ButtonBar.vue';
+import AppButton from '@/components/common/AppButton.vue';
+import AppPage from '@/components/common/AppPage.vue';
+import ButtonBar from '@/components/common/ButtonBar.vue';
 import AccountHistory from '@/components/history/AccountHistory.vue';
 import PropertiesTable from '@/components/PropertiesTable.vue';
 import { showConfirm } from '@/util/alert';
diff --git a/web-app/src/pages/CategoriesPage.vue b/web-app/src/pages/CategoriesPage.vue
index fd80804..6da0bdf 100644
--- a/web-app/src/pages/CategoriesPage.vue
+++ b/web-app/src/pages/CategoriesPage.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { getSelectedProfile } from '@/api/profile';
 import { TransactionApiClient, type TransactionCategory, type TransactionCategoryTree } from '@/api/transaction';
-import AppButton from '@/components/AppButton.vue';
-import AppPage from '@/components/AppPage.vue';
-import ButtonBar from '@/components/ButtonBar.vue';
+import AppButton from '@/components/common/AppButton.vue';
+import AppPage from '@/components/common/AppPage.vue';
+import ButtonBar from '@/components/common/ButtonBar.vue';
 import CategoryDisplayItem from '@/components/CategoryDisplayItem.vue';
 import EditCategoryModal from '@/components/EditCategoryModal.vue';
 import { showConfirm } from '@/util/alert';
diff --git a/web-app/src/pages/LoginPage.vue b/web-app/src/pages/LoginPage.vue
index c3fc422..3be9e80 100644
--- a/web-app/src/pages/LoginPage.vue
+++ b/web-app/src/pages/LoginPage.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { AuthApiClient } from '@/api/auth';
 import { ApiError } from '@/api/base';
-import AppButton from '@/components/AppButton.vue';
-import AppForm from '@/components/form/AppForm.vue';
-import FormControl from '@/components/form/FormControl.vue';
-import FormGroup from '@/components/form/FormGroup.vue';
+import AppButton from '@/components/common/AppButton.vue';
+import AppForm from '@/components/common/form/AppForm.vue';
+import FormControl from '@/components/common/form/FormControl.vue';
+import FormGroup from '@/components/common/form/FormGroup.vue';
 import { useAuthStore } from '@/stores/auth-store';
 import { showAlert } from '@/util/alert';
 import { hideLoader, showLoader } from '@/util/loader';
diff --git a/web-app/src/pages/MyUserPage.vue b/web-app/src/pages/MyUserPage.vue
index ed33e23..8eb7163 100644
--- a/web-app/src/pages/MyUserPage.vue
+++ b/web-app/src/pages/MyUserPage.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { AuthApiClient } from '@/api/auth';
 import { ApiError } from '@/api/base';
-import AppButton from '@/components/AppButton.vue';
-import AppPage from '@/components/AppPage.vue';
-import AppForm from '@/components/form/AppForm.vue';
-import FormControl from '@/components/form/FormControl.vue';
-import FormGroup from '@/components/form/FormGroup.vue';
-import ModalWrapper from '@/components/ModalWrapper.vue';
+import AppButton from '@/components/common/AppButton.vue';
+import AppPage from '@/components/common/AppPage.vue';
+import AppForm from '@/components/common/form/AppForm.vue';
+import FormControl from '@/components/common/form/FormControl.vue';
+import FormGroup from '@/components/common/form/FormGroup.vue';
+import ModalWrapper from '@/components/common/ModalWrapper.vue';
 import { useAuthStore } from '@/stores/auth-store';
 import { showAlert, showConfirm } from '@/util/alert';
 import { hideLoader, showLoader } from '@/util/loader';
diff --git a/web-app/src/pages/ProfilesPage.vue b/web-app/src/pages/ProfilesPage.vue
index c4c5a07..e57d380 100644
--- a/web-app/src/pages/ProfilesPage.vue
+++ b/web-app/src/pages/ProfilesPage.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ProfileApiClient, type Profile } from '@/api/profile';
-import AppButton from '@/components/AppButton.vue';
-import AppPage from '@/components/AppPage.vue';
-import ModalWrapper from '@/components/ModalWrapper.vue';
+import AppButton from '@/components/common/AppButton.vue';
+import AppPage from '@/components/common/AppPage.vue';
+import ModalWrapper from '@/components/common/ModalWrapper.vue';
 import { onMounted, type Ref, ref, useTemplateRef } from 'vue';
 import { useRouter } from 'vue-router';
 const router = useRouter()
diff --git a/web-app/src/pages/TransactionPage.vue b/web-app/src/pages/TransactionPage.vue
index 5f5e607..33e24b0 100644
--- a/web-app/src/pages/TransactionPage.vue
+++ b/web-app/src/pages/TransactionPage.vue
@@ -3,8 +3,8 @@ import { ApiError } from '@/api/base';
 import { formatMoney } from '@/api/data';
 import { getSelectedProfile } from '@/api/profile';
 import { TransactionApiClient, type TransactionDetail } from '@/api/transaction';
-import AppButton from '@/components/AppButton.vue';
-import AppPage from '@/components/AppPage.vue';
+import AppButton from '@/components/common/AppButton.vue';
+import AppPage from '@/components/common/AppPage.vue';
 import CategoryLabel from '@/components/CategoryLabel.vue';
 import PropertiesTable from '@/components/PropertiesTable.vue';
 import TagLabel from '@/components/TagLabel.vue';
diff --git a/web-app/src/pages/VendorsPage.vue b/web-app/src/pages/VendorsPage.vue
index 3d47731..677a572 100644
--- a/web-app/src/pages/VendorsPage.vue
+++ b/web-app/src/pages/VendorsPage.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { getSelectedProfile } from '@/api/profile';
 import { TransactionApiClient, type TransactionVendor } from '@/api/transaction';
-import AppButton from '@/components/AppButton.vue';
-import AppPage from '@/components/AppPage.vue';
-import ButtonBar from '@/components/ButtonBar.vue';
+import AppButton from '@/components/common/AppButton.vue';
+import AppPage from '@/components/common/AppPage.vue';
+import ButtonBar from '@/components/common/ButtonBar.vue';
 import EditVendorModal from '@/components/EditVendorModal.vue';
 import { showConfirm } from '@/util/alert';
 import { onMounted, ref, useTemplateRef, type Ref } from 'vue';
diff --git a/web-app/src/pages/forms/EditAccountPage.vue b/web-app/src/pages/forms/EditAccountPage.vue
index d0feca9..36a51fa 100644
--- a/web-app/src/pages/forms/EditAccountPage.vue
+++ b/web-app/src/pages/forms/EditAccountPage.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { AccountApiClient, AccountTypes, type Account, type AccountType } from '@/api/account';
 import { getSelectedProfile } from '@/api/profile';
-import AppPage from '@/components/AppPage.vue';
-import AppForm from '@/components/form/AppForm.vue';
-import FormActions from '@/components/form/FormActions.vue';
-import FormControl from '@/components/form/FormControl.vue';
-import FormGroup from '@/components/form/FormGroup.vue';
+import AppPage from '@/components/common/AppPage.vue';
+import AppForm from '@/components/common/form/AppForm.vue';
+import FormActions from '@/components/common/form/FormActions.vue';
+import FormControl from '@/components/common/form/FormControl.vue';
+import FormGroup from '@/components/common/form/FormGroup.vue';
 import { computed, onMounted, ref, type Ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
diff --git a/web-app/src/pages/forms/EditTransactionPage.vue b/web-app/src/pages/forms/EditTransactionPage.vue
index 549ac82..1a7f17c 100644
--- a/web-app/src/pages/forms/EditTransactionPage.vue
+++ b/web-app/src/pages/forms/EditTransactionPage.vue
@@ -14,13 +14,13 @@ import { AccountApiClient, type Account } from '@/api/account';
 import { DataApiClient, type Currency } from '@/api/data';
 import { getSelectedProfile } from '@/api/profile';
 import { TransactionApiClient, type AddTransactionPayload, type TransactionDetail, type TransactionDetailLineItem, type TransactionVendor } from '@/api/transaction';
-import AppPage from '@/components/AppPage.vue';
+import AppPage from '@/components/common/AppPage.vue';
 import CategorySelect from '@/components/CategorySelect.vue';
-import FileSelector from '@/components/FileSelector.vue';
-import AppForm from '@/components/form/AppForm.vue';
-import FormActions from '@/components/form/FormActions.vue';
-import FormControl from '@/components/form/FormControl.vue';
-import FormGroup from '@/components/form/FormGroup.vue';
+import FileSelector from '@/components/common/FileSelector.vue';
+import AppForm from '@/components/common/form/AppForm.vue';
+import FormActions from '@/components/common/form/FormActions.vue';
+import FormControl from '@/components/common/form/FormControl.vue';
+import FormGroup from '@/components/common/form/FormGroup.vue';
 import LineItemsEditor from '@/components/LineItemsEditor.vue';
 import TagLabel from '@/components/TagLabel.vue';
 import { getDatetimeLocalValueForNow } from '@/util/time';
diff --git a/web-app/src/pages/home/AccountsModule.vue b/web-app/src/pages/home/AccountsModule.vue
index 3faf20a..190c4f2 100644
--- a/web-app/src/pages/home/AccountsModule.vue
+++ b/web-app/src/pages/home/AccountsModule.vue
@@ -3,7 +3,7 @@ import { AccountApiClient, type Account, type CurrencyBalance } from '@/api/acco
 import { formatMoney } from '@/api/data'
 import { getSelectedProfile } from '@/api/profile'
 import AccountCard from '@/components/AccountCard.vue'
-import AppButton from '@/components/AppButton.vue'
+import AppButton from '@/components/common/AppButton.vue'
 import HomeModule from '@/components/HomeModule.vue'
 import { onMounted, ref, type Ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
diff --git a/web-app/src/pages/home/ProfileModule.vue b/web-app/src/pages/home/ProfileModule.vue
index a631f10..a709635 100644
--- a/web-app/src/pages/home/ProfileModule.vue
+++ b/web-app/src/pages/home/ProfileModule.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { getSelectedProfile, ProfileApiClient, type Profile } from '@/api/profile';
-import AppButton from '@/components/AppButton.vue';
-import ConfirmModal from '@/components/ConfirmModal.vue';
+import AppButton from '@/components/common/AppButton.vue';
+import ConfirmModal from '@/components/common/ConfirmModal.vue';
 import HomeModule from '@/components/HomeModule.vue';
 import { showAlert } from '@/util/alert';
 import { onMounted, ref, useTemplateRef, type Ref } from 'vue';
diff --git a/web-app/src/pages/home/TransactionsModule.vue b/web-app/src/pages/home/TransactionsModule.vue
index ac2fe01..043de56 100644
--- a/web-app/src/pages/home/TransactionsModule.vue
+++ b/web-app/src/pages/home/TransactionsModule.vue
@@ -3,9 +3,9 @@ import { formatMoney } from '@/api/data';
 import type { Page, PageRequest } from '@/api/pagination';
 import { getSelectedProfile } from '@/api/profile';
 import { TransactionApiClient, type TransactionsListItem } from '@/api/transaction';
-import AppButton from '@/components/AppButton.vue';
+import AppButton from '@/components/common/AppButton.vue';
 import HomeModule from '@/components/HomeModule.vue';
-import PaginationControls from '@/components/PaginationControls.vue';
+import PaginationControls from '@/components/common/PaginationControls.vue';
 import { onMounted, ref, type Ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';