diff --git a/frontend/src/_services/custom_styles.service.js b/frontend/src/_services/custom_styles.service.js
index d3c98d6382..73de321466 100644
--- a/frontend/src/_services/custom_styles.service.js
+++ b/frontend/src/_services/custom_styles.service.js
@@ -3,13 +3,13 @@ import { authHeader, handleResponse, handleResponseWithoutValidation } from '@/_
 
 function save(body) {
   const requestOptions = { method: 'POST', headers: authHeader(), credentials: 'include', body: JSON.stringify(body) };
-  return fetch(`${config.apiUrl}/custom-styles/`, requestOptions).then(handleResponse);
+  return fetch(`${config.apiUrl}/custom-styles`, requestOptions).then(handleResponse);
 }
 
 function get(validateResponse = true) {
   const requestOptions = { method: 'GET', headers: authHeader(), credentials: 'include' };
   const handleOutput = validateResponse ? handleResponse : handleResponseWithoutValidation;
-  return fetch(`${config.apiUrl}/custom-styles/`, requestOptions).then(handleOutput);
+  return fetch(`${config.apiUrl}/custom-styles`, requestOptions).then(handleOutput);
 }
 
 function getForAppViewerEditor(validateResponse = true) {
diff --git a/server/src/modules/app/module.ts b/server/src/modules/app/module.ts
index 1f3939cd32..c0ca97e4be 100644
--- a/server/src/modules/app/module.ts
+++ b/server/src/modules/app/module.ts
@@ -40,6 +40,7 @@ import { ImportExportResourcesModule } from '@modules/import-export-resources/mo
 import { TooljetDbModule } from '@modules/tooljet-db/module';
 import { WorkflowsModule } from '@modules/workflows/module';
 import { AiModule } from '@modules/ai/module';
+import { CustomStylesModule } from '@modules/custom-styles/module';
 
 export class AppModule implements OnModuleInit {
   static async register(configs: { IS_GET_CONTEXT: boolean }): Promise<DynamicModule> {
@@ -92,6 +93,7 @@ export class AppModule implements OnModuleInit {
       await TooljetDbModule.register(configs),
       await WorkflowsModule.register(configs),
       await AiModule.register(configs),
+      await CustomStylesModule.register(configs),
     ];
 
     return {
diff --git a/server/src/modules/custom-styles/module.ts b/server/src/modules/custom-styles/module.ts
index 9ff9dc290b..20608341f2 100644
--- a/server/src/modules/custom-styles/module.ts
+++ b/server/src/modules/custom-styles/module.ts
@@ -1,11 +1,21 @@
-import { Module } from '@nestjs/common';
-import { CustomStylesController } from '@modules/custom-styles/controller';
-import { CustomStylesService } from '@modules/custom-styles/service';
+import { DynamicModule } from '@nestjs/common';
+import { getImportPath } from '@modules/app/constants';
+import { OrganizationsModule } from '@modules/organizations/module';
+import { FeatureAbilityFactory } from './ability';
+import { OrganizationRepository } from '@modules/organizations/repository';
+import { AppsRepository } from '@modules/apps/repository';
 
-@Module({
-  imports: [],
-  providers: [CustomStylesService],
-  controllers: [CustomStylesController],
-  exports: [],
-})
-export class CustomStylesModule {}
+export class CustomStylesModule {
+  static async register(configs?: { IS_GET_CONTEXT: boolean }): Promise<DynamicModule> {
+    const importPath = await getImportPath(configs?.IS_GET_CONTEXT);
+    const { CustomStylesController } = await import(`${importPath}/custom-styles/controller`);
+    const { CustomStylesService } = await import(`${importPath}/custom-styles/service`);
+    return {
+      module: CustomStylesModule,
+      imports: [await OrganizationsModule.register(configs)],
+      providers: [CustomStylesService, FeatureAbilityFactory, OrganizationRepository, AppsRepository],
+      controllers: [CustomStylesController],
+      exports: [],
+    };
+  }
+}