diff --git a/jsapp/js/account/add-ons/addOnList.component.tsx b/jsapp/js/account/addOns/addOnList.component.tsx
similarity index 99%
rename from jsapp/js/account/add-ons/addOnList.component.tsx
rename to jsapp/js/account/addOns/addOnList.component.tsx
index 7ff128c6a8..270fbfc6c1 100644
--- a/jsapp/js/account/add-ons/addOnList.component.tsx
+++ b/jsapp/js/account/addOns/addOnList.component.tsx
@@ -9,7 +9,7 @@ import type {
 } from 'js/account/stripe.types';
 import {isAddonProduct} from 'js/account/stripe.utils';
 import styles from './addOnList.module.scss';
-import {OneTimeAddOnRow} from 'js/account/add-ons/oneTimeAddOnRow.component';
+import {OneTimeAddOnRow} from 'jsapp/js/account/addOns/oneTimeAddOnRow.component';
 import type {BadgeColor} from 'jsapp/js/components/common/badge';
 import Badge from 'jsapp/js/components/common/badge';
 import {formatDate} from 'js/utils';
diff --git a/jsapp/js/account/add-ons/addOnList.module.scss b/jsapp/js/account/addOns/addOnList.module.scss
similarity index 100%
rename from jsapp/js/account/add-ons/addOnList.module.scss
rename to jsapp/js/account/addOns/addOnList.module.scss
diff --git a/jsapp/js/account/add-ons/addOns.component.tsx b/jsapp/js/account/addOns/addOns.component.tsx
similarity index 100%
rename from jsapp/js/account/add-ons/addOns.component.tsx
rename to jsapp/js/account/addOns/addOns.component.tsx
diff --git a/jsapp/js/account/add-ons/addOns.module.scss b/jsapp/js/account/addOns/addOns.module.scss
similarity index 100%
rename from jsapp/js/account/add-ons/addOns.module.scss
rename to jsapp/js/account/addOns/addOns.module.scss
diff --git a/jsapp/js/account/add-ons/oneTimeAddOnRow.component.tsx b/jsapp/js/account/addOns/oneTimeAddOnRow.component.tsx
similarity index 98%
rename from jsapp/js/account/add-ons/oneTimeAddOnRow.component.tsx
rename to jsapp/js/account/addOns/oneTimeAddOnRow.component.tsx
index fc25ebe296..05c19d9735 100644
--- a/jsapp/js/account/add-ons/oneTimeAddOnRow.component.tsx
+++ b/jsapp/js/account/addOns/oneTimeAddOnRow.component.tsx
@@ -1,4 +1,4 @@
-import styles from 'js/account/add-ons/addOnList.module.scss';
+import styles from 'js/account/addOns/addOnList.module.scss';
 import React, {useMemo, useState} from 'react';
 import type {
   Product,
diff --git a/jsapp/js/account/add-ons/updateBadge.component..tsx b/jsapp/js/account/addOns/updateBadge.component.tsx
similarity index 100%
rename from jsapp/js/account/add-ons/updateBadge.component..tsx
rename to jsapp/js/account/addOns/updateBadge.component.tsx
diff --git a/jsapp/js/account/plans/plan.component.tsx b/jsapp/js/account/plans/plan.component.tsx
index 3627fd2437..7031d599de 100644
--- a/jsapp/js/account/plans/plan.component.tsx
+++ b/jsapp/js/account/plans/plan.component.tsx
@@ -18,7 +18,7 @@ import {ACTIVE_STRIPE_STATUSES} from 'js/constants';
 import type {FreeTierThresholds} from 'js/envStore';
 import envStore from 'js/envStore';
 import useWhen from 'js/hooks/useWhen.hook';
-import AddOnList from 'js/account/add-ons/addOnList.component';
+import AddOnList from 'jsapp/js/account/addOns/addOnList.component';
 import subscriptionStore from 'js/account/subscriptionStore';
 import {when} from 'mobx';
 import {
diff --git a/jsapp/js/account/routes.constants.ts b/jsapp/js/account/routes.constants.ts
index 11ee1897e3..9d29ccebed 100644
--- a/jsapp/js/account/routes.constants.ts
+++ b/jsapp/js/account/routes.constants.ts
@@ -11,7 +11,7 @@ export const PlansRoute = React.lazy(
   () => import(/* webpackPrefetch: true */ './plans/plan.component')
 );
 export const AddOnsRoute = React.lazy(
-  () => import(/* webpackPrefetch: true */ './add-ons/addOns.component')
+  () => import(/* webpackPrefetch: true */ './addOns/addOns.component')
 );
 export const AccountSettings = React.lazy(
   () => import(/* webpackPrefetch: true */ './accountSettingsRoute')
diff --git a/jsapp/js/account/usage/one-time-add-on-usage-modal/one-time-add-on-list/oneTimeAddOnList.component.tsx b/jsapp/js/account/usage/oneTimeAddOnUsageModal/oneTimeAddOnList/oneTimeAddOnList.component.tsx
similarity index 100%
rename from jsapp/js/account/usage/one-time-add-on-usage-modal/one-time-add-on-list/oneTimeAddOnList.component.tsx
rename to jsapp/js/account/usage/oneTimeAddOnUsageModal/oneTimeAddOnList/oneTimeAddOnList.component.tsx
diff --git a/jsapp/js/account/usage/one-time-add-on-usage-modal/one-time-add-on-list/oneTimeAddOnList.module.scss b/jsapp/js/account/usage/oneTimeAddOnUsageModal/oneTimeAddOnList/oneTimeAddOnList.module.scss
similarity index 100%
rename from jsapp/js/account/usage/one-time-add-on-usage-modal/one-time-add-on-list/oneTimeAddOnList.module.scss
rename to jsapp/js/account/usage/oneTimeAddOnUsageModal/oneTimeAddOnList/oneTimeAddOnList.module.scss
diff --git a/jsapp/js/account/usage/one-time-add-on-usage-modal/oneTimeAddOnUsageModal.component.tsx b/jsapp/js/account/usage/oneTimeAddOnUsageModal/oneTimeAddOnUsageModal.component.tsx
similarity index 97%
rename from jsapp/js/account/usage/one-time-add-on-usage-modal/oneTimeAddOnUsageModal.component.tsx
rename to jsapp/js/account/usage/oneTimeAddOnUsageModal/oneTimeAddOnUsageModal.component.tsx
index a347149937..c1e32895e6 100644
--- a/jsapp/js/account/usage/one-time-add-on-usage-modal/oneTimeAddOnUsageModal.component.tsx
+++ b/jsapp/js/account/usage/oneTimeAddOnUsageModal/oneTimeAddOnUsageModal.component.tsx
@@ -4,7 +4,7 @@ import KoboModalHeader from 'js/components/modals/koboModalHeader';
 import styles from './oneTimeAddOnUsageModal.module.scss';
 import {OneTimeAddOn, RecurringInterval, USAGE_TYPE} from '../../stripe.types';
 import {useLimitDisplay} from '../../stripe.utils';
-import OneTimeAddOnList from './one-time-add-on-list/oneTimeAddOnList.component';
+import OneTimeAddOnList from './oneTimeAddOnList/oneTimeAddOnList.component';
 
 interface OneTimeAddOnUsageModalProps {
   type: USAGE_TYPE;
diff --git a/jsapp/js/account/usage/one-time-add-on-usage-modal/oneTimeAddOnUsageModal.module.scss b/jsapp/js/account/usage/oneTimeAddOnUsageModal/oneTimeAddOnUsageModal.module.scss
similarity index 100%
rename from jsapp/js/account/usage/one-time-add-on-usage-modal/oneTimeAddOnUsageModal.module.scss
rename to jsapp/js/account/usage/oneTimeAddOnUsageModal/oneTimeAddOnUsageModal.module.scss
diff --git a/jsapp/js/account/usage/usageContainer.tsx b/jsapp/js/account/usage/usageContainer.tsx
index 6768dfaf30..40bca8edc5 100644
--- a/jsapp/js/account/usage/usageContainer.tsx
+++ b/jsapp/js/account/usage/usageContainer.tsx
@@ -13,7 +13,7 @@ import cx from 'classnames';
 import subscriptionStore from 'js/account/subscriptionStore';
 import Badge from 'js/components/common/badge';
 import useWhenStripeIsEnabled from 'js/hooks/useWhenStripeIsEnabled.hook';
-import OneTimeAddOnUsageModal from './one-time-add-on-usage-modal/oneTimeAddOnUsageModal.component';
+import OneTimeAddOnUsageModal from './oneTimeAddOnUsageModal/oneTimeAddOnUsageModal.component';
 
 interface UsageContainerProps {
   usage: number;