diff --git a/apps/api/src/app/common/common.controller.ts b/apps/api/src/app/common/common.controller.ts
index d9538852c..d2dd0be93 100644
--- a/apps/api/src/app/common/common.controller.ts
+++ b/apps/api/src/app/common/common.controller.ts
@@ -35,7 +35,7 @@ export class CommonController {
     summary: 'Check if request is valid (Checks Auth)',
   })
   async isRequestValid(@Body() body: ValidRequestDto): Promise<{ success: boolean }> {
-    return this.validRequest.execute(
+    return await this.validRequest.execute(
       ValidRequestCommand.create({
         projectId: body.projectId,
         templateId: body.templateId,
diff --git a/apps/api/src/app/common/usecases/get-import-config/get-import-config.usecase.ts b/apps/api/src/app/common/usecases/get-import-config/get-import-config.usecase.ts
index 1ee737506..cf33a891f 100644
--- a/apps/api/src/app/common/usecases/get-import-config/get-import-config.usecase.ts
+++ b/apps/api/src/app/common/usecases/get-import-config/get-import-config.usecase.ts
@@ -1,6 +1,6 @@
 import { BadRequestException, Injectable } from '@nestjs/common';
 import { UserRepository, TemplateRepository, TemplateEntity } from '@impler/dal';
-import { IImportConfig } from '@impler/shared';
+import { AVAILABLE_BILLABLEMETRIC_CODE_ENUM, IImportConfig } from '@impler/shared';
 import { PaymentAPIService } from '@impler/services';
 import { APIMessages } from '@shared/constants';
 
@@ -15,7 +15,10 @@ export class GetImportConfig {
   async execute(projectId: string, templateId?: string): Promise<IImportConfig> {
     const userEmail = await this.userRepository.findUserEmailFromProjectId(projectId);
 
-    const removeBrandingAvailable = await this.paymentAPIService.checkEvent(userEmail, 'REMOVE_BRANDING');
+    const removeBrandingAvailable = await this.paymentAPIService.checkEvent({
+      email: userEmail,
+      billableMetricCode: AVAILABLE_BILLABLEMETRIC_CODE_ENUM.REMOVE_BRANDING,
+    });
 
     let template: TemplateEntity;
     if (templateId) {
diff --git a/apps/api/src/app/common/usecases/valid-request/valid-request.usecase.ts b/apps/api/src/app/common/usecases/valid-request/valid-request.usecase.ts
index 5b680d543..533493080 100644
--- a/apps/api/src/app/common/usecases/valid-request/valid-request.usecase.ts
+++ b/apps/api/src/app/common/usecases/valid-request/valid-request.usecase.ts
@@ -5,15 +5,18 @@ import { Injectable, HttpStatus, HttpException, UnauthorizedException } from '@n
 import { APIMessages } from '@shared/constants';
 import { SchemaDto } from 'app/common/dtos/Schema.dto';
 import { ValidRequestCommand } from './valid-request.command';
-import { ProjectRepository, TemplateRepository } from '@impler/dal';
+import { ProjectRepository, TemplateRepository, UserEntity } from '@impler/dal';
 import { UniqueColumnException } from '@shared/exceptions/unique-column.exception';
 import { DocumentNotFoundException } from '@shared/exceptions/document-not-found.exception';
+import { PaymentAPIService } from '@impler/services';
+import { AVAILABLE_BILLABLEMETRIC_CODE_ENUM } from '@impler/shared';
 
 @Injectable()
 export class ValidRequest {
   constructor(
     private projectRepository: ProjectRepository,
-    private templateRepository: TemplateRepository
+    private templateRepository: TemplateRepository,
+    private paymentAPIService: PaymentAPIService
   ) {}
 
   async execute(command: ValidRequestCommand): Promise<{ success: boolean }> {
@@ -38,6 +41,22 @@ export class ValidRequest {
           throw new DocumentNotFoundException('Template', command.templateId, APIMessages.INCORRECT_KEYS_FOUND);
         }
       }
+      if (command.schema) {
+        const project = await this.projectRepository.getUserOfProject(command.projectId);
+
+        const isBillableMetricAvailable = await this.paymentAPIService.checkEvent({
+          email: (project._userId as unknown as UserEntity).email,
+          billableMetricCode: AVAILABLE_BILLABLEMETRIC_CODE_ENUM.IMAGE_UPLOAD,
+        });
+
+        if (!isBillableMetricAvailable) {
+          throw new DocumentNotFoundException(
+            'Schema',
+            command.schema,
+            APIMessages.ERROR_ACCESSING_FEATURE.IMAGE_UPLOAD
+          );
+        }
+      }
 
       if (command.schema) {
         const parsedSchema: SchemaDto[] =
diff --git a/apps/api/src/app/review/usecases/start-process/start-process.usecase.ts b/apps/api/src/app/review/usecases/start-process/start-process.usecase.ts
index f1a638135..5ed497fd5 100644
--- a/apps/api/src/app/review/usecases/start-process/start-process.usecase.ts
+++ b/apps/api/src/app/review/usecases/start-process/start-process.usecase.ts
@@ -26,7 +26,9 @@ export class StartProcess {
     let importedData;
     const destination = (uploadInfo._templateId as unknown as TemplateEntity)?.destination;
     const userEmail = await this.uploadRepository.getUserEmailFromUploadId(_uploadId);
-    const dataProcessingAllowed = await this.paymentAPIService.checkEvent(userEmail);
+    const dataProcessingAllowed = await this.paymentAPIService.checkEvent({
+      email: userEmail,
+    });
 
     if (
       dataProcessingAllowed &&
diff --git a/apps/api/src/app/shared/constants.ts b/apps/api/src/app/shared/constants.ts
index b466c6fb7..f4a8bd86d 100644
--- a/apps/api/src/app/shared/constants.ts
+++ b/apps/api/src/app/shared/constants.ts
@@ -33,6 +33,9 @@ export const APIMessages = {
   COLUMN_KEY_DUPLICATED: 'Column with the same key already exists. Please provide a unique key.',
   ERROR_DURING_VALIDATION:
     'Something went wrong while validating data. Data is not imported yet, but team is informed about issue. Please try again after sometime.',
+  ERROR_ACCESSING_FEATURE: {
+    IMAGE_UPLOAD: 'You do not have access to Image Upload Functionality.',
+  },
 };
 
 export const CONSTANTS = {
diff --git a/apps/api/src/app/template/usecases/get-template-details/get-template-details.usecase.ts b/apps/api/src/app/template/usecases/get-template-details/get-template-details.usecase.ts
index 7c7bf2658..c40fd838b 100644
--- a/apps/api/src/app/template/usecases/get-template-details/get-template-details.usecase.ts
+++ b/apps/api/src/app/template/usecases/get-template-details/get-template-details.usecase.ts
@@ -10,7 +10,7 @@ export class GetTemplateDetails {
   async execute(_id: string): Promise<TemplateResponseDto> {
     const template = await this.templateRepository.findOne(
       { _id },
-      '_projectId name sampleFileUrl _id totalUploads totalInvalidRecords totalRecords'
+      '_projectId name sampleFileUrl _id totalUploads totalInvalidRecords totalRecords mode'
     );
     if (!template) {
       throw new DocumentNotFoundException('Template', _id);
diff --git a/apps/api/src/migrations/update-mode/update-mode.migrations.ts b/apps/api/src/migrations/update-mode/update-mode.migrations.ts
new file mode 100644
index 000000000..964a5c935
--- /dev/null
+++ b/apps/api/src/migrations/update-mode/update-mode.migrations.ts
@@ -0,0 +1,38 @@
+import '../../config';
+import { AppModule } from '../../app.module';
+
+import { NestFactory } from '@nestjs/core';
+import { TemplateRepository } from '@impler/dal';
+
+export async function run() {
+  console.log('start migration - registering payment users');
+
+  let app;
+  try {
+    // Initialize the MongoDB connection
+    app = await NestFactory.create(AppModule, {
+      logger: false,
+    });
+
+    const templateRepository = new TemplateRepository();
+
+    // Fetch all templates without the 'mode' field
+    const templatesWithoutMode = await templateRepository.find({ mode: { $exists: false } });
+    console.log('Templates without mode:', templatesWithoutMode);
+
+    const updateResult = await templateRepository.update({ mode: { $exists: false } }, { mode: 'manual', multi: true });
+
+    console.log('Updated templates:', updateResult);
+
+    console.log('end migration - Adding manual mode to all templates users');
+  } catch (error) {
+    console.error('An error occurred during the migration:', error);
+  } finally {
+    if (app) {
+      await app.close();
+    }
+    process.exit(0);
+  }
+}
+
+run();
diff --git a/apps/queue-manager/src/consumers/end-import.consumer.ts b/apps/queue-manager/src/consumers/end-import.consumer.ts
index 99f38e89d..a28678035 100644
--- a/apps/queue-manager/src/consumers/end-import.consumer.ts
+++ b/apps/queue-manager/src/consumers/end-import.consumer.ts
@@ -18,7 +18,9 @@ export class EndImportConsumer extends BaseConsumer {
     await this.convertRecordsToJsonFile(data.uploadId);
     const userEmail = await this.uploadRepository.getUserEmailFromUploadId(data.uploadId);
 
-    const dataProcessingAllowed = await this.paymentAPIService.checkEvent(userEmail);
+    const dataProcessingAllowed = await this.paymentAPIService.checkEvent({
+      email: userEmail,
+    });
 
     if (dataProcessingAllowed) {
       if (data.destination === DestinationsEnum.WEBHOOK) {
diff --git a/apps/web/components/imports/forms/ColumnForm.tsx b/apps/web/components/imports/forms/ColumnForm.tsx
index b9fcd7725..6c0398ca7 100644
--- a/apps/web/components/imports/forms/ColumnForm.tsx
+++ b/apps/web/components/imports/forms/ColumnForm.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { modals } from '@mantine/modals';
 import { Controller, useForm } from 'react-hook-form';
 import {
@@ -8,20 +9,22 @@ import {
   SimpleGrid,
   Title,
   Group,
+  Flex,
   CloseButton,
   Select,
   useMantineColorScheme,
-  Flex,
+  SelectItem,
 } from '@mantine/core';
 
 import { ColumnTypesEnum, DEFAULT_VALUES, IColumn } from '@impler/shared';
-import { colors, COLUMN_TYPES, DELIMITERS, MODAL_KEYS, MODAL_TITLES, DOCUMENTATION_REFERENCE_LINKS } from '@config';
+import { colors, DELIMITERS, MODAL_KEYS, MODAL_TITLES, DOCUMENTATION_REFERENCE_LINKS } from '@config';
 
 import { Button } from '@ui/button';
 import { Textarea } from '@ui/textarea';
 import { Checkbox } from '@ui/checkbox';
 import { MultiSelect } from '@ui/multi-select';
 import { CustomSelect } from '@ui/custom-select';
+import { useSchema } from '@hooks/useSchema';
 import TooltipLink from '@components/TooltipLink/TooltipLink';
 
 interface ColumnFormProps {
@@ -31,6 +34,8 @@ interface ColumnFormProps {
 }
 
 export function ColumnForm({ onSubmit, data, isLoading }: ColumnFormProps) {
+  const { getColumnTypes } = useSchema({ templateId: data?._templateId as string });
+  const [columnTypes, setColumnType] = useState<SelectItem[]>(getColumnTypes());
   const { colorScheme } = useMantineColorScheme();
   const {
     watch,
@@ -48,6 +53,10 @@ export function ColumnForm({ onSubmit, data, isLoading }: ColumnFormProps) {
     modals.close(MODAL_KEYS.COLUMN_UPDATE);
   };
 
+  useEffect(() => {
+    setColumnType(getColumnTypes());
+  }, []);
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <Stack spacing="xs">
@@ -113,13 +122,8 @@ export function ColumnForm({ onSubmit, data, isLoading }: ColumnFormProps) {
                 control={control}
                 render={({ field: { value, onChange, onBlur } }) => (
                   <Select
-                    label={
-                      <Group spacing="xs">
-                        <Text>Column Type</Text>
-                        <TooltipLink link={DOCUMENTATION_REFERENCE_LINKS.primaryValidation} />
-                      </Group>
-                    }
-                    data={COLUMN_TYPES}
+                    label="Column Type"
+                    data={columnTypes}
                     placeholder="Type"
                     value={value}
                     data-autofocus
diff --git a/apps/web/components/imports/schema/ColumnsTable.tsx b/apps/web/components/imports/schema/ColumnsTable.tsx
index 1d7b9c9fc..6078f613e 100644
--- a/apps/web/components/imports/schema/ColumnsTable.tsx
+++ b/apps/web/components/imports/schema/ColumnsTable.tsx
@@ -1,9 +1,9 @@
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Controller } from 'react-hook-form';
-import { ActionIcon, Flex, Tooltip, TextInput as Input, Group, Badge } from '@mantine/core';
+import { ActionIcon, Flex, Tooltip, TextInput as Input, Group, Badge, SelectItem } from '@mantine/core';
 
 import { useSchema } from '@hooks/useSchema';
-import { colors, COLUMN_TYPES } from '@config';
+import { colors } from '@config';
 import { ColumnTypesEnum, IColumn } from '@impler/shared';
 
 import { Button } from '@ui/button';
@@ -24,6 +24,8 @@ interface ColumnsTableProps {
 
 export function ColumnsTable({ templateId }: ColumnsTableProps) {
   const ValidationRef = useRef(false);
+  const { getColumnTypes } = useSchema({ templateId });
+  const [columnTypes, setColumnType] = useState<SelectItem[]>(getColumnTypes());
 
   const {
     columns,
@@ -47,6 +49,10 @@ export function ColumnsTable({ templateId }: ColumnsTableProps) {
     onValidationsClick({ ...values, key: values.key || values.name });
   };
 
+  useEffect(() => {
+    setColumnType(getColumnTypes());
+  }, []);
+
   return (
     <form
       onSubmit={(e) => {
@@ -123,12 +129,7 @@ export function ColumnsTable({ templateId }: ColumnsTableProps) {
                       control={control}
                       name="type"
                       render={({ field }) => (
-                        <NativeSelect
-                          data={COLUMN_TYPES}
-                          placeholder="Select Type"
-                          variant="default"
-                          register={field}
-                        />
+                        <NativeSelect data={columnTypes} placeholder="Select Type" variant="default" register={field} />
                       )}
                     />
                     <Button
diff --git a/apps/web/config/constants.config.ts b/apps/web/config/constants.config.ts
index 1ae4212ce..447fc5b73 100644
--- a/apps/web/config/constants.config.ts
+++ b/apps/web/config/constants.config.ts
@@ -233,7 +233,7 @@ export const DOCUMENTATION_REFERENCE_LINKS = {
   bubbleIo: 'https://docs.impler.io/widget/bubble.io-embed',
   subscriptionInformation: 'https://docs.impler.io/platform/how-subscription-works',
   customValidation: 'https://docs.impler.io/features/custom-validation',
-}
+};
 
 export const IMPORT_MODES = [
   { label: 'Manual', value: TemplateModeEnum.MANUAL },
diff --git a/apps/web/hooks/useColumnsEditor.tsx b/apps/web/hooks/useColumnsEditor.tsx
index 4be7eb5ee..0da32b207 100644
--- a/apps/web/hooks/useColumnsEditor.tsx
+++ b/apps/web/hooks/useColumnsEditor.tsx
@@ -6,6 +6,7 @@ import { API_KEYS } from '@config';
 import { commonApi } from '@libs/api';
 import { IColumn, IErrorObject } from '@impler/shared';
 import { useUpdateBulkColumns } from './useUpdateBulkColumns';
+import { usePlanMetaData } from 'store/planmeta.store.context';
 
 interface UseSchemaProps {
   templateId: string;
@@ -16,6 +17,7 @@ interface ColumnsData {
 }
 
 export function useColumnsEditor({ templateId }: UseSchemaProps) {
+  const { meta } = usePlanMetaData();
   const [columnErrors, setColumnErrors] = useState<Record<number, string[]>>();
   const {
     control,
@@ -70,13 +72,26 @@ export function useColumnsEditor({ templateId }: UseSchemaProps) {
   );
   const onSaveColumnsClick = (data: ColumnsData) => {
     setColumnErrors(undefined);
+    let parsedColumns;
+
     try {
-      JSON.parse(data.columns);
+      parsedColumns = JSON.parse(data.columns);
     } catch (error) {
       return setError('columns', { type: 'JSON', message: 'Provided JSON is invalid!' });
     }
 
-    updateColumns(JSON.parse(data.columns));
+    if (!meta?.IMAGE_UPLOAD) {
+      const imageColumnExists = parsedColumns.some((column: IColumn) => column.type === 'Image');
+
+      if (imageColumnExists) {
+        return setError('columns', {
+          type: 'Object',
+          message: 'Image column type is not allowed in your current plan.',
+        });
+      }
+    }
+
+    updateColumns(parsedColumns);
   };
   const onColumnUpdateError = (error: IErrorObject) => {
     if (error.error && Array.isArray(error.message)) {
diff --git a/apps/web/hooks/useImportDetails.tsx b/apps/web/hooks/useImportDetails.tsx
index de3b5a4a7..be1e8e3d7 100644
--- a/apps/web/hooks/useImportDetails.tsx
+++ b/apps/web/hooks/useImportDetails.tsx
@@ -9,12 +9,14 @@ import { useAppState } from 'store/app.context';
 import { ITemplate, IErrorObject, IColumn } from '@impler/shared';
 import { UpdateImportForm } from '@components/imports/forms/UpdateImportForm';
 import { API_KEYS, MODAL_KEYS, MODAL_TITLES, NOTIFICATION_KEYS, ROUTES } from '@config';
+import { usePlanMetaData } from 'store/planmeta.store.context';
 
 interface useImportDetailProps {
   templateId: string;
 }
 
 export function useImportDetails({ templateId }: useImportDetailProps) {
+  const { meta } = usePlanMetaData();
   const router = useRouter();
   const queryClient = useQueryClient();
   const { profileInfo } = useAppState();
@@ -107,5 +109,6 @@ export function useImportDetails({ templateId }: useImportDetailProps) {
     isTemplateDataLoading,
     onSpreadsheetImported,
     updateImport,
+    meta,
   };
 }
diff --git a/apps/web/hooks/usePlanDetails.tsx b/apps/web/hooks/usePlanDetails.tsx
index d2970ee32..b9aa65ab8 100644
--- a/apps/web/hooks/usePlanDetails.tsx
+++ b/apps/web/hooks/usePlanDetails.tsx
@@ -2,12 +2,14 @@ import { useQuery } from '@tanstack/react-query';
 import { commonApi } from '@libs/api';
 import { API_KEYS } from '@config';
 import { IErrorObject } from '@impler/shared';
+import { usePlanMetaData } from 'store/planmeta.store.context';
 
 interface UsePlanDetailProps {
   email: string;
 }
 
 export function usePlanDetails({ email }: UsePlanDetailProps) {
+  const { meta, setPlanMeta } = usePlanMetaData();
   const { data: activePlanDetails, isLoading: isActivePlanLoading } = useQuery<
     unknown,
     IErrorObject,
@@ -17,12 +19,23 @@ export function usePlanDetails({ email }: UsePlanDetailProps) {
     [API_KEYS.FETCH_ACTIVE_SUBSCRIPTION, email],
     () => commonApi<ISubscriptionData>(API_KEYS.FETCH_ACTIVE_SUBSCRIPTION as any, {}),
     {
+      onSuccess(data) {
+        if (data && data.meta) {
+          setPlanMeta({
+            AUTOMATIC_IMPORTS: data.meta.AUTOMATIC_IMPORTS,
+            IMAGE_UPLOAD: data.meta.IMAGE_UPLOAD,
+            IMPORTED_ROWS: data.meta.IMPORTED_ROWS,
+            REMOVE_BRANDING: data.meta.REMOVE_BRANDING,
+          });
+        }
+      },
       enabled: !!email,
     }
   );
 
   return {
     activePlanDetails,
+    meta,
     isActivePlanLoading,
   };
 }
diff --git a/apps/web/hooks/useSchema.tsx b/apps/web/hooks/useSchema.tsx
index dd58789c2..b3ea94863 100644
--- a/apps/web/hooks/useSchema.tsx
+++ b/apps/web/hooks/useSchema.tsx
@@ -1,18 +1,20 @@
+import { useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
+
 import { modals } from '@mantine/modals';
 import { useForm } from 'react-hook-form';
-import { useEffect, useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { SelectItem } from '@mantine/core';
 
 import { commonApi } from '@libs/api';
 import { notify } from '@libs/notify';
 import { track } from '@libs/amplitude';
 import { IColumn, IErrorObject } from '@impler/shared';
-import { API_KEYS, MODAL_KEYS, MODAL_TITLES, NOTIFICATION_KEYS } from '@config';
+import { API_KEYS, COLUMN_TYPES, MODAL_KEYS, MODAL_TITLES, NOTIFICATION_KEYS } from '@config';
 
 import { useUpdateBulkColumns } from './useUpdateBulkColumns';
 import { ConfirmDelete } from '@components/imports/forms/ConfirmDelete';
-
+import { usePlanMetaData } from 'store/planmeta.store.context';
 const ColumnForm = dynamic(() => import('@components/imports/forms/ColumnForm').then((mod) => mod.ColumnForm), {
   ssr: false,
 });
@@ -22,6 +24,7 @@ interface UseSchemaProps {
 }
 
 export function useSchema({ templateId }: UseSchemaProps) {
+  const { meta } = usePlanMetaData();
   const queryClient = useQueryClient();
   const [showAddRow, setShowAddRow] = useState(false);
   const { register, control, watch, reset, setFocus, handleSubmit, formState, getValues } = useForm<IColumn>({
@@ -167,6 +170,18 @@ export function useSchema({ templateId }: UseSchemaProps) {
     createColumn(data);
   }
 
+  function getColumnTypes(): SelectItem[] {
+    if (!meta) return COLUMN_TYPES;
+
+    return COLUMN_TYPES.map((item) => {
+      if (item.label === 'Image' && item.value === 'Image' && !meta.IMAGE_UPLOAD) {
+        return { ...item, disabled: true, label: 'Image - Scale Plan Feature' };
+      }
+
+      return item;
+    });
+  }
+
   useEffect(() => {
     if (showAddRow) setFocus('name');
   }, [setFocus, showAddRow]);
@@ -184,6 +199,7 @@ export function useSchema({ templateId }: UseSchemaProps) {
     onEditColumnClick,
     onValidationsClick,
     onDeleteColumnClick,
+    getColumnTypes,
     isColumnCreateLoading,
     isLoading: isColumnListLoading,
     handleSubmit: handleSubmit(onAddColumnSubmit),
diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx
index 5050a1813..0cb27f502 100644
--- a/apps/web/pages/_app.tsx
+++ b/apps/web/pages/_app.tsx
@@ -92,44 +92,44 @@ export default function MyApp({ Component, pageProps }: AppProps) {
       </Head>
       <QueryClientProvider client={client}>
         <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
-          <MantineProvider
-            theme={{ ...mantineConfig, colorScheme, fontFamily: poppinsFont.style.fontFamily }}
-            withGlobalStyles
-            withNormalizeCSS
-          >
-            <Notifications />
-            <ModalsProvider
-              modalProps={{
-                styles: {
-                  title: {
-                    color: colorScheme === 'dark' ? colors.white : colors.black,
-                  },
-                  content: {
-                    backgroundColor: colorScheme === 'dark' ? colors.black : colors.white,
-                    borderRadius: 0,
-                    boxShadow: 'none',
-                    // flex: `0 0 40rem !important`,
-                  },
-                  header: {
-                    backgroundColor: colorScheme === 'dark' ? colors.black : colors.white,
-                  },
-                  overlay: {
-                    // eslint-disable-next-line no-magic-numbers
-                    backgroundColor: addOpacityToHex(colorScheme === 'dark' ? colors.white : colors.black, 0.2),
-                    backdropFilter: 'blur(5px)',
-                  },
-                },
-              }}
+          <StoreWrapper>
+            <MantineProvider
+              theme={{ ...mantineConfig, colorScheme, fontFamily: poppinsFont.style.fontFamily }}
+              withGlobalStyles
+              withNormalizeCSS
             >
-              <StoreWrapper>
+              <Notifications />
+              <ModalsProvider
+                modalProps={{
+                  styles: {
+                    title: {
+                      color: colorScheme === 'dark' ? colors.white : colors.black,
+                    },
+                    content: {
+                      backgroundColor: colorScheme === 'dark' ? colors.black : colors.white,
+                      borderRadius: 0,
+                      boxShadow: 'none',
+                      // flex: `0 0 40rem !important`,
+                    },
+                    header: {
+                      backgroundColor: colorScheme === 'dark' ? colors.black : colors.white,
+                    },
+                    overlay: {
+                      // eslint-disable-next-line no-magic-numbers
+                      backgroundColor: addOpacityToHex(colorScheme === 'dark' ? colors.white : colors.black, 0.2),
+                      backdropFilter: 'blur(5px)',
+                    },
+                  },
+                }}
+              >
                 {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
                 {/* @ts-ignore */}
                 <Layout {...(Component.Layout ? { pageProps } : {})}>
                   <Component {...pageProps} />
                 </Layout>
-              </StoreWrapper>
-            </ModalsProvider>
-          </MantineProvider>
+              </ModalsProvider>
+            </MantineProvider>
+          </StoreWrapper>
         </ColorSchemeProvider>
       </QueryClientProvider>
     </>
diff --git a/apps/web/pages/imports/[id].tsx b/apps/web/pages/imports/[id].tsx
index 537c9a2fc..9068503eb 100644
--- a/apps/web/pages/imports/[id].tsx
+++ b/apps/web/pages/imports/[id].tsx
@@ -24,6 +24,7 @@ import { FourIcon } from '@assets/icons/Four.icon';
 import { ThreeIcon } from '@assets/icons/Three.icon';
 import { DeleteIcon } from '@assets/icons/Delete.icon';
 import { LeftArrowIcon } from '@assets/icons/LeftArrow.icon';
+import { TemplateModeEnum } from '@impler/shared';
 
 const Editor = dynamic(() => import('@components/imports/editor').then((mod) => mod.OutputEditor), {
   ssr: false,
@@ -45,6 +46,7 @@ export default function ImportDetails({}) {
     isTemplateDataLoading,
     onSpreadsheetImported,
     updateImport,
+    meta,
   } = useImportDetails({
     templateId: router.query.id as string,
   });
@@ -83,8 +85,11 @@ export default function ImportDetails({}) {
             size="sm"
             maw={125}
             placeholder="Mode"
-            data={IMPORT_MODES}
-            value={templateData?.mode}
+            data={IMPORT_MODES.map((mode) => ({
+              ...mode,
+              disabled: mode.value === TemplateModeEnum.AUTOMATIC && !meta?.AUTOMATIC_IMPORTS ? true : false,
+            }))}
+            value={templateData?.mode || TemplateModeEnum.MANUAL}
             onChange={(mode) => updateImport({ mode: mode || undefined })}
           />
           <Button
diff --git a/apps/web/store/StoreWrapper.tsx b/apps/web/store/StoreWrapper.tsx
index 69c978c56..2dfb72154 100644
--- a/apps/web/store/StoreWrapper.tsx
+++ b/apps/web/store/StoreWrapper.tsx
@@ -1,6 +1,11 @@
 import { PropsWithChildren } from 'react';
 import AppContextProvider from './app.context';
+import { PlanMetaProvider } from './planmeta.store.context';
 
 export function StoreWrapper({ children }: PropsWithChildren) {
-  return <AppContextProvider>{children}</AppContextProvider>;
+  return (
+    <PlanMetaProvider>
+      <AppContextProvider>{children}</AppContextProvider>
+    </PlanMetaProvider>
+  );
 }
diff --git a/apps/web/store/planmeta.store.context.tsx b/apps/web/store/planmeta.store.context.tsx
new file mode 100644
index 000000000..51fddbf97
--- /dev/null
+++ b/apps/web/store/planmeta.store.context.tsx
@@ -0,0 +1,30 @@
+import { createContext, useState, ReactNode, useContext } from 'react';
+import { IPlanMeta, IPlanMetaContext } from 'types/store.types';
+
+const PlanMetaContext = createContext<IPlanMetaContext | undefined>(undefined);
+
+interface PlanMetaProviderProps {
+  children: ReactNode;
+}
+
+export const PlanMetaProvider = ({ children }: PlanMetaProviderProps) => {
+  const [meta, setMeta] = useState<IPlanMeta | null>(null);
+
+  const setPlanMeta = (newMeta: IPlanMeta) => {
+    setMeta(newMeta);
+  };
+
+  return <PlanMetaContext.Provider value={{ meta, setPlanMeta }}>{children}</PlanMetaContext.Provider>;
+};
+
+export const usePlanMetaData = () => {
+  const context = useContext(PlanMetaContext);
+
+  if (!context) {
+    throw new Error('usePlanMetaData must be used within a PlanMetaProvider');
+  }
+
+  return context;
+};
+
+export { PlanMetaContext };
diff --git a/apps/web/types/global.d.ts b/apps/web/types/global.d.ts
index c7ade69ac..56499cfcf 100644
--- a/apps/web/types/global.d.ts
+++ b/apps/web/types/global.d.ts
@@ -44,7 +44,7 @@ interface ISubscriptionData {
         code: string;
         name: string;
       };
-      chargeModal: 'FIXED' | 'VOLUME_BASED';
+      chargeModal: 'FIXED' | 'VOLUME_BASED' | 'BINARY';
       properties: Record<string, string | number>;
     }[];
     charge: number;
@@ -56,7 +56,15 @@ interface ISubscriptionData {
   };
   expiryDate: Date;
   meta: {
-    IMPORTED_ROWS: number;
+    IMAGE_UPLOAD: boolean;
+    IMPORTED_ROWS: Array<{
+      flat_fee: number;
+      per_unit: number;
+      last_unit: number | string;
+      first_unit: number;
+    }>;
+    REMOVE_BRANDING: boolean;
+    AUTOMATIC_IMPORTS: boolean;
   };
 }
 
diff --git a/apps/web/types/store.types.ts b/apps/web/types/store.types.ts
index 70232daed..f606c1124 100644
--- a/apps/web/types/store.types.ts
+++ b/apps/web/types/store.types.ts
@@ -2,3 +2,20 @@ export interface IAppStore {
   profileInfo?: IProfileData;
   setProfileInfo: (info: IProfileData) => void;
 }
+
+export interface IPlanMeta {
+  IMAGE_UPLOAD: boolean;
+  IMPORTED_ROWS: Array<{
+    flat_fee: number;
+    per_unit: number;
+    last_unit: number | string;
+    first_unit: number;
+  }>;
+  REMOVE_BRANDING: boolean;
+  AUTOMATIC_IMPORTS: boolean;
+}
+
+export interface IPlanMetaContext {
+  meta: IPlanMeta | null;
+  setPlanMeta: (planMeta: IPlanMeta) => void;
+}
diff --git a/libs/dal/src/repositories/project/project.repository.ts b/libs/dal/src/repositories/project/project.repository.ts
index bb74a7080..6eb30ca0f 100644
--- a/libs/dal/src/repositories/project/project.repository.ts
+++ b/libs/dal/src/repositories/project/project.repository.ts
@@ -13,4 +13,7 @@ export class ProjectRepository extends BaseRepository<ProjectEntity> {
       _userId: new Types.ObjectId(_userId),
     });
   }
+  async getUserOfProject(_projectId: string): Promise<ProjectEntity> {
+    return Project.findOne({ _id: _projectId }, '_userId').populate('_userId');
+  }
 }
diff --git a/libs/dal/src/repositories/project/project.schema.ts b/libs/dal/src/repositories/project/project.schema.ts
index 905650105..263b0cace 100644
--- a/libs/dal/src/repositories/project/project.schema.ts
+++ b/libs/dal/src/repositories/project/project.schema.ts
@@ -1,4 +1,4 @@
-import { Schema, Document, model, models } from 'mongoose';
+import { Schema, Document, model, models, Model } from 'mongoose';
 import { schemaOptions } from '../schema-default.options';
 import { ProjectEntity } from './project.entity';
 
@@ -23,4 +23,4 @@ interface IProjectDocument extends ProjectEntity, Document {
   _id: never;
 }
 
-export const Project = models.Project || model<IProjectDocument>('Project', projectSchema);
+export const Project = (models.Project as Model<IProjectDocument>) || model<IProjectDocument>('Project', projectSchema);
diff --git a/libs/dal/src/repositories/template/template.schema.ts b/libs/dal/src/repositories/template/template.schema.ts
index 650c452e5..1288a5c10 100644
--- a/libs/dal/src/repositories/template/template.schema.ts
+++ b/libs/dal/src/repositories/template/template.schema.ts
@@ -36,6 +36,7 @@ const templateSchema = new Schema(
     },
     mode: {
       type: Schema.Types.String,
+      default: 'manual',
     },
   },
   { ...schemaOptions }
diff --git a/libs/services/src/payment/payment.api.service.ts b/libs/services/src/payment/payment.api.service.ts
index 9fb576ca7..dbd696a85 100644
--- a/libs/services/src/payment/payment.api.service.ts
+++ b/libs/services/src/payment/payment.api.service.ts
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { ISubscriptionData, constructQueryString } from '@impler/shared';
+import { ISubscriptionData, AVAILABLE_BILLABLEMETRIC_CODE_ENUM, constructQueryString } from '@impler/shared';
 
 interface ICheckData {
   uploadId: string;
@@ -21,11 +21,15 @@ interface ICustomer {
   id: string;
   currency: 'USD' | 'INR';
 }
+interface ICheckEvent {
+  email: string;
+  // eslint-disable-next-line prettier/prettier
+  billableMetricCode?: AVAILABLE_BILLABLEMETRIC_CODE_ENUM;
+}
 
-type AVAILABLE_CODES = 'IMPORTED_ROWS' | 'REMOVE_BRANDING';
+// eslint-disable-next-line @typescript-eslint/naming-convention
 
 export class PaymentAPIService {
-  private CODE: AVAILABLE_CODES = 'IMPORTED_ROWS';
   private AUTH_KEY: string;
   private AUTH_VALUE: string;
   private PAYMENT_API_BASE_URL: string;
@@ -41,7 +45,7 @@ export class PaymentAPIService {
 
     const createEventAPIBody = {
       customerId: userExternalIdOrEmail,
-      billableMetricCode: this.CODE,
+      billableMetricCode: AVAILABLE_BILLABLEMETRIC_CODE_ENUM.IMPORTED_ROWS,
       timestamp: new Date(),
       metadata: {
         units: resultData.totalRecords,
@@ -56,11 +60,14 @@ export class PaymentAPIService {
     });
   }
 
-  async checkEvent(email: string, type: AVAILABLE_CODES = 'IMPORTED_ROWS'): Promise<boolean> {
+  async checkEvent({
+    email,
+    billableMetricCode = AVAILABLE_BILLABLEMETRIC_CODE_ENUM.IMPORTED_ROWS,
+  }: ICheckEvent): Promise<boolean> {
     if (!this.PAYMENT_API_BASE_URL) return true;
 
     let url = `${this.PAYMENT_API_BASE_URL}/api/v1/check`;
-    url += constructQueryString({ externalId: email, billableMetricCode: type });
+    url += constructQueryString({ externalId: email, billableMetricCode });
     const response = await axios.get(url, {
       headers: {
         [this.AUTH_KEY]: this.AUTH_VALUE,
diff --git a/libs/shared/src/types/bilablemetriccode/billablemetriccode.types.ts b/libs/shared/src/types/bilablemetriccode/billablemetriccode.types.ts
new file mode 100644
index 000000000..6b15baed3
--- /dev/null
+++ b/libs/shared/src/types/bilablemetriccode/billablemetriccode.types.ts
@@ -0,0 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export enum AVAILABLE_BILLABLEMETRIC_CODE_ENUM {
+  IMPORTED_ROWS = 'IMPORTED_ROWS',
+  REMOVE_BRANDING = 'REMOVE_BRANDING',
+  IMAGE_UPLOAD = 'IMAGE_UPLOAD',
+}
diff --git a/libs/shared/src/types/index.ts b/libs/shared/src/types/index.ts
index 26ef459a3..e78d6d018 100644
--- a/libs/shared/src/types/index.ts
+++ b/libs/shared/src/types/index.ts
@@ -12,3 +12,4 @@ export * from './subscription';
 export * from './template';
 export * from './import-job/import-job.types';
 export * from './user-job/user-job.types';
+export * from './bilablemetriccode/billablemetriccode.types';
diff --git a/packages/react/src/types/index.ts b/packages/react/src/types/index.ts
index 5bc206be1..02519c360 100644
--- a/packages/react/src/types/index.ts
+++ b/packages/react/src/types/index.ts
@@ -26,7 +26,7 @@ export interface ISchemaItem {
   defaultValue?: string | '<<null>>' | '<<undefined>>' | '<<>>' | '<<[]>>' | '<<true>>' | '<<false>>';
   selectValues?: string[];
   dateFormats?: string[];
-  type?: 'String' | 'Number' | 'Double' | 'Date' | 'Email' | 'Regex' | 'Select' | 'Any';
+  type?: 'String' | 'Number' | 'Double' | 'Date' | 'Email' | 'Regex' | 'Select' | 'Any' | 'Image';
   regex?: string;
   allowMultiSelect?: boolean;
 }