diff --git a/apps/chat/.env.development b/apps/chat/.env.development
index 96db8b602c..3c00fa102b 100644
--- a/apps/chat/.env.development
+++ b/apps/chat/.env.development
@@ -91,7 +91,7 @@ DIAL_ROLES_FIELD="dial_roles"
 
 
 # Application UI settings
-ENABLED_FEATURES="conversations-section,prompts-section,top-settings,top-clear-conversation,top-chat-info,top-chat-model-settings,empty-chat-settings,header,footer,request-api-key,report-an-issue,likes,conversations-sharing,prompts-sharing,input-files,attachments-manager,conversations-publishing,prompts-publishing,custom-logo,input-links,custom-applications,message-templates,marketplace,quick-apps"
+ENABLED_FEATURES="conversations-section,prompts-section,top-settings,top-clear-conversation,top-chat-info,top-chat-model-settings,empty-chat-settings,header,footer,request-api-key,report-an-issue,likes,conversations-sharing,prompts-sharing,input-files,attachments-manager,conversations-publishing,prompts-publishing,custom-logo,input-links,custom-applications,message-templates,marketplace,quick-apps,code-apps"
 NEXT_PUBLIC_APP_NAME="Local Development APP Name"
 NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT=""
 NEXT_PUBLIC_DEFAULT_TEMPERATURE="1"
diff --git a/apps/chat/src/components/Chat/ModelList.tsx b/apps/chat/src/components/Chat/ModelList.tsx
index d3e7bcfe3d..d2ba110b79 100644
--- a/apps/chat/src/components/Chat/ModelList.tsx
+++ b/apps/chat/src/components/Chat/ModelList.tsx
@@ -11,7 +11,11 @@ import { useTranslation } from 'next-i18next';
 
 import classNames from 'classnames';
 
-import { getModelDescription, isQuickApp } from '@/src/utils/app/application';
+import {
+  getApplicationType,
+  getModelDescription,
+  isApplicationStatusUpdating,
+} from '@/src/utils/app/application';
 import {
   getOpenAIEntityFullName,
   groupModelsAndSaveOrder,
@@ -37,10 +41,9 @@ import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
 
 import { DESCRIPTION_DELIMITER_REGEX } from '@/src/constants/chat';
 
-import { QuickAppDialog } from '@/src/components/Common/QuickAppDialog';
+import { ApplicationWizard } from '@/src/components/Common/ApplicationWizard/ApplicationWizard';
 
 import { ModelIcon } from '../Chatbar/ModelIcon';
-import { ApplicationDialog } from '../Common/ApplicationDialog';
 import { ConfirmDialog } from '../Common/ConfirmDialog';
 import ContextMenu from '../Common/ContextMenu';
 import { DisableOverlay } from '../Common/DisableOverlay';
@@ -113,6 +116,7 @@ const ModelGroup = ({
 
   const description = getModelDescription(currentEntity);
   const isPublicEntity = isEntityPublic(currentEntity);
+  const isModifyDisabled = isApplicationStatusUpdating(currentEntity);
 
   const handleSelectVersion = useCallback(
     (entity: DialAIEntityModel) => onSelect(entity.id),
@@ -125,6 +129,7 @@ const ModelGroup = ({
         name: t('Edit'),
         dataQa: 'edit',
         display: !isPublicEntity,
+        disabled: isModifyDisabled,
         Icon: IconPencilMinus,
         onClick: (e: React.MouseEvent) => {
           e.stopPropagation();
@@ -157,6 +162,7 @@ const ModelGroup = ({
       {
         name: t('Delete'),
         dataQa: 'delete',
+        disabled: isModifyDisabled && !isPublicEntity,
         display: !isPublicEntity,
         Icon: IconTrashX,
         onClick: (e: React.MouseEvent) => {
@@ -174,6 +180,7 @@ const ModelGroup = ({
       handleEdit,
       handlePublish,
       handleOpenDeleteConfirmModal,
+      isModifyDisabled,
     ],
   );
 
@@ -342,11 +349,7 @@ export const ModelList = ({
   const handleEdit = useCallback(
     (currentEntity: DialAIEntityModel) => {
       dispatch(ApplicationActions.get(currentEntity.id));
-      handleOpenApplicationModal(
-        isQuickApp(currentEntity)
-          ? ApplicationType.QUICK_APP
-          : ApplicationType.CUSTOM_APP,
-      );
+      handleOpenApplicationModal(getApplicationType(currentEntity));
     },
     [dispatch, handleOpenApplicationModal],
   );
@@ -441,24 +444,15 @@ export const ModelList = ({
           onClose={handleConfirmDialogClose}
         />
       )}
-      {applicationModal &&
-        applicationModal.type === ApplicationType.CUSTOM_APP && (
-          <ApplicationDialog
-            isOpen={applicationModal.type === ApplicationType.CUSTOM_APP}
-            onClose={handleCloseApplicationDialog}
-            currentReference={currentEntity?.reference}
-            isEdit
-          />
-        )}
-      {applicationModal &&
-        applicationModal.type === ApplicationType.QUICK_APP && (
-          <QuickAppDialog
-            isOpen={applicationModal.type === ApplicationType.QUICK_APP}
-            onClose={handleCloseApplicationDialog}
-            currentReference={currentEntity?.reference}
-            isEdit
-          />
-        )}
+      {!!applicationModal && (
+        <ApplicationWizard
+          isOpen={!!applicationModal}
+          onClose={handleCloseApplicationDialog}
+          type={applicationModal.type}
+          currentReference={currentEntity?.reference}
+          isEdit
+        />
+      )}
       {publishAction && entityForPublish && entityForPublish.id && (
         <PublishModal
           entity={entityForPublish}
diff --git a/apps/chat/src/components/Common/ApplicationDialog.tsx b/apps/chat/src/components/Common/ApplicationDialog.tsx
index c143ad724f..e69de29bb2 100644
--- a/apps/chat/src/components/Common/ApplicationDialog.tsx
+++ b/apps/chat/src/components/Common/ApplicationDialog.tsx
@@ -1,883 +0,0 @@
-import {
-  IconHelp,
-  IconTrashX,
-  IconWorldShare,
-  IconX,
-} from '@tabler/icons-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-import { useTranslation } from 'next-i18next';
-
-import classNames from 'classnames';
-
-import { notAllowedSymbols } from '@/src/utils/app/file';
-import { getFolderIdFromEntityId } from '@/src/utils/app/folders';
-import { getTopicColors } from '@/src/utils/app/style-helpers';
-import { ApiUtils } from '@/src/utils/server/api';
-
-import { CustomApplicationModel } from '@/src/types/applications';
-import { DropdownSelectorOption, EntityType } from '@/src/types/common';
-import { ModalState } from '@/src/types/modal';
-import { DialAIEntityFeatures } from '@/src/types/models';
-import { SharingType } from '@/src/types/share';
-import { Translation } from '@/src/types/translation';
-
-import {
-  ApplicationActions,
-  ApplicationSelectors,
-} from '@/src/store/application/application.reducers';
-import { FilesSelectors } from '@/src/store/files/files.reducers';
-import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
-import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
-
-import { IMAGE_TYPES } from '@/src/constants/chat';
-import { DEFAULT_VERSION } from '@/src/constants/public';
-
-import Modal from '@/src/components/Common/Modal';
-
-import { PublishModal } from '../Chat/Publish/PublishWizard';
-import { CustomLogoSelect } from '../Settings/CustomLogoSelect';
-import { ConfirmDialog } from './ConfirmDialog';
-import { DropdownSelector } from './DropdownSelector';
-import { MultipleComboBox } from './MultipleComboBox';
-import { Spinner } from './Spinner';
-import Tooltip from './Tooltip';
-
-import { PublishActions } from '@epam/ai-dial-shared';
-import isObject from 'lodash-es/isObject';
-
-interface FormData {
-  name: string;
-  description: string;
-  version: string;
-  iconUrl: string;
-  topics: string[];
-  // capabilities: string[];
-  inputAttachmentTypes: string[];
-  maxInputAttachments: number | undefined;
-  completionUrl: string;
-  features: string | null;
-}
-
-interface Props {
-  isOpen: boolean;
-  onClose: (result: boolean) => void;
-  isEdit?: boolean;
-  currentReference?: string;
-  selectedApplication?: CustomApplicationModel;
-}
-
-const safeStringify = (
-  featureData: DialAIEntityFeatures | Record<string, string> | undefined,
-) => {
-  if (
-    !featureData ||
-    (isObject(featureData) && !Object.keys(featureData).length)
-  ) {
-    return '';
-  }
-
-  return JSON.stringify(featureData, null, 2);
-};
-
-const getItemLabel = (item: string) => item;
-
-const attachmentTypeRegex = new RegExp(
-  '^([a-zA-Z0-9!*\\-.+]+|\\*)\\/([a-zA-Z0-9!*\\-.+]+|\\*)$',
-);
-
-const ApplicationDialogView: React.FC<Props> = ({
-  onClose,
-  isEdit,
-  currentReference,
-  selectedApplication,
-}) => {
-  const {
-    register,
-    handleSubmit,
-    setValue,
-    clearErrors,
-    setError,
-    trigger,
-    control,
-    formState: { errors, isValid },
-  } = useForm<FormData>({
-    mode: 'onChange',
-    reValidateMode: 'onChange',
-  });
-
-  const { t } = useTranslation(Translation.Chat);
-
-  const dispatch = useAppDispatch();
-
-  const files = useAppSelector(FilesSelectors.selectFiles);
-  const allTopics = useAppSelector(SettingsSelectors.selectTopics);
-
-  const [deleteLogo, setDeleteLogo] = useState(false);
-  const [localLogoFile, setLocalLogoFile] = useState<string | undefined>();
-  const [inputAttachmentTypes, setInputAttachmentTypes] = useState<string[]>(
-    [],
-  );
-  const [featuresInput, setFeaturesInput] = useState(
-    safeStringify(selectedApplication?.features),
-  );
-  const [topics, setTopics] = useState<string[]>([]);
-  // const [capabilities, setCapabilities] = useState<string[]>([]);
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const [isPublishing, setIsPublishing] = useState(false);
-  const [maxInputAttachmentsValue, setMaxInputAttachmentsValue] = useState(
-    selectedApplication?.maxInputAttachments,
-  );
-
-  const topicOptions = useMemo(
-    () =>
-      allTopics.map((value) => ({
-        value,
-        label: value,
-        ...getTopicColors(value),
-      })),
-    [allTopics],
-  );
-
-  const selectedOptions = useMemo(
-    () => topicOptions.filter((op) => topics.includes(op.value)),
-    [topicOptions, topics],
-  );
-
-  const inputClassName = 'input-form input-invalid peer mx-0';
-  const applicationToPublish = useMemo(() => {
-    if (!selectedApplication) {
-      return undefined;
-    }
-
-    return {
-      name: selectedApplication.name,
-      id: ApiUtils.decodeApiUrl(selectedApplication.id),
-      folderId: getFolderIdFromEntityId(selectedApplication.id),
-      iconUrl: selectedApplication.iconUrl,
-    };
-  }, [selectedApplication]);
-
-  const onLogoSelect = useCallback(
-    (filesIds: string[]) => {
-      const selectedFileId = filesIds[0];
-      const newFile = files.find((file) => file.id === selectedFileId);
-
-      if (newFile) {
-        setDeleteLogo(false);
-        setLocalLogoFile(newFile.id);
-        setValue('iconUrl', newFile.id);
-        trigger('iconUrl');
-      } else {
-        setLocalLogoFile(undefined);
-        setValue('iconUrl', '');
-        trigger('iconUrl');
-      }
-    },
-    [files, setValue, trigger],
-  );
-
-  const onDeleteLocalLogoHandler = () => {
-    setLocalLogoFile(undefined);
-    setDeleteLogo(true);
-    setValue('iconUrl', '');
-    trigger('iconUrl');
-  };
-
-  const handlePublish = (e: React.FormEvent) => {
-    e.preventDefault();
-    setIsPublishing(true);
-  };
-
-  const handlePublishClose = () => {
-    setIsPublishing(false);
-  };
-
-  const handleDelete = useCallback(() => {
-    if (selectedApplication) {
-      dispatch(ApplicationActions.delete(selectedApplication));
-    }
-
-    onClose(false);
-  }, [dispatch, onClose, selectedApplication]);
-
-  const handleConfirmDialogOpen = useCallback(
-    (e: React.FormEvent) => {
-      e.preventDefault();
-      setIsDeleteModalOpen(true);
-    },
-    [setIsDeleteModalOpen],
-  );
-
-  const handleConfirmDialogClose = useCallback(
-    (result: boolean) => {
-      setIsDeleteModalOpen(false);
-
-      if (result) {
-        handleDelete();
-      }
-    },
-    [handleDelete, setIsDeleteModalOpen],
-  );
-
-  const handleAttachmentTypesError = useCallback(() => {
-    setError('inputAttachmentTypes', {
-      type: 'manual',
-      message: t(`Please match the MIME format.`) || '',
-    });
-  }, [setError, t]);
-
-  const handleClearAttachmentTypesError = useCallback(() => {
-    clearErrors('inputAttachmentTypes');
-  }, [clearErrors]);
-
-  const handleAttachmentTypesChange = useCallback(
-    (selectedItems: string[]) => {
-      setInputAttachmentTypes(selectedItems);
-      setValue('inputAttachmentTypes', selectedItems);
-      if (inputAttachmentTypes.length < selectedItems.length) {
-        trigger('inputAttachmentTypes');
-      }
-    },
-    [inputAttachmentTypes, setValue, trigger],
-  );
-
-  useEffect(() => {
-    if (selectedApplication) {
-      if (selectedApplication.inputAttachmentTypes) {
-        setInputAttachmentTypes(selectedApplication.inputAttachmentTypes);
-        setValue(
-          'inputAttachmentTypes',
-          selectedApplication.inputAttachmentTypes,
-        );
-      }
-      if (selectedApplication.iconUrl) {
-        setLocalLogoFile(selectedApplication.iconUrl);
-        setValue('iconUrl', selectedApplication.iconUrl);
-      }
-      setTopics(selectedApplication.topics ?? []);
-      setValue('topics', selectedApplication.topics ?? []);
-    } else {
-      setInputAttachmentTypes([]);
-      setValue('inputAttachmentTypes', []);
-      setLocalLogoFile(undefined);
-      setValue('iconUrl', '');
-      setTopics([]);
-      setValue('topics', []);
-      // setCapabilities([]);
-      // setValue('capabilities', []);
-    }
-  }, [isEdit, selectedApplication, setValue]);
-
-  const validateFeaturesData = (data: string | null) => {
-    if (!data?.trim()) {
-      return true;
-    }
-
-    try {
-      const object = JSON.parse(data);
-
-      if (typeof object === 'object' && !!object && !Array.isArray(object)) {
-        for (const [key, value] of Object.entries(object)) {
-          if (!key.trim()) {
-            return t('Keys should not be empty');
-          }
-
-          const valueType = typeof value;
-          if (!(['boolean', 'number'].includes(valueType) || value === null)) {
-            if (typeof value === 'string' && !value.trim()) {
-              return t('String values should not be empty');
-            }
-
-            if (!['boolean', 'number', 'string'].includes(valueType)) {
-              return t('Values should be a string, number, boolean or null');
-            }
-          }
-        }
-      } else {
-        return t('Data is not a valid JSON object');
-      }
-
-      return true;
-    } catch (error) {
-      return t('Invalid JSON string');
-    }
-  };
-
-  const handleChangeTopics = useCallback(
-    (option: readonly DropdownSelectorOption[]) => {
-      const values = option.map((option) => option.value);
-      setTopics(values);
-      setValue('topics', values);
-    },
-    [setValue],
-  );
-
-  // const handleChangeCapabilities = useCallback(
-  //   (option: readonly DropdownSelectorOption[]) => {
-  //     const values = option.map((option) => option.value);
-  //     setCapabilities(values);
-  //     setValue('capabilities', values);
-  //   },
-  //   [setValue],
-  // );
-
-  const handleChangeHandlerAttachments = (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    const newValue = event.target.value.replace(/[^0-9]/g, '');
-
-    if (newValue === '') {
-      setValue('maxInputAttachments', undefined);
-    } else {
-      setValue('maxInputAttachments', Number(newValue));
-    }
-  };
-
-  const onSubmit = (data: FormData) => {
-    const preparedData = {
-      ...data,
-      maxInputAttachments: maxInputAttachmentsValue,
-      name: data.name.trim(),
-      description: data.description.trim(),
-      features: featuresInput ? JSON.parse(featuresInput) : null,
-      type: EntityType.Application,
-      isDefault: false,
-      folderId: '',
-      topics,
-      // capabilities,
-    };
-
-    if (
-      isEdit &&
-      selectedApplication?.name &&
-      currentReference &&
-      selectedApplication.id
-    ) {
-      const applicationData: CustomApplicationModel = {
-        ...preparedData,
-        reference: currentReference,
-        id: selectedApplication.id,
-      };
-
-      dispatch(
-        ApplicationActions.update({
-          oldApplicationId: selectedApplication.id,
-          applicationData,
-        }),
-      );
-    } else {
-      dispatch(ApplicationActions.create(preparedData));
-    }
-
-    onClose(true);
-  };
-
-  return (
-    <>
-      <form
-        onSubmit={handleSubmit(onSubmit)}
-        className="relative flex max-h-full w-full grow flex-col divide-tertiary overflow-y-auto"
-      >
-        <button
-          onClick={() => onClose(false)}
-          className="absolute right-2 top-2 rounded text-secondary hover:text-accent-primary"
-          data-qa="close-application-dialog"
-        >
-          <IconX size={24} />
-        </button>
-        <div className="px-3 py-4 md:px-6">
-          <h2 className="text-base font-semibold">
-            {isEdit ? t('Edit application') : t('Add application')}
-          </h2>
-        </div>
-        <div className="flex flex-col gap-4 overflow-y-auto px-3 pb-6 md:px-6">
-          <div className="flex flex-col">
-            <label className="mb-1 flex text-xs text-secondary" htmlFor="name">
-              {t('Name')}
-              <span className="ml-1 inline text-accent-primary">*</span>
-            </label>
-            <input
-              {...register('name', {
-                required: t('This field is required') || '',
-                pattern: {
-                  value: new RegExp(`^[^${notAllowedSymbols}]{2,160}$`),
-                  message: t(
-                    'Name should be 2 to 160 characters long and should not contain special characters',
-                  ),
-                },
-              })}
-              id="name"
-              defaultValue={selectedApplication?.name}
-              className={classNames(
-                errors.name &&
-                  'border-error hover:border-error focus:border-error',
-                inputClassName,
-              )}
-              placeholder={t('Type name') || ''}
-            />
-            {errors.name && (
-              <span className="text-xxs text-error peer-invalid:peer-[.submitted]:mb-1">
-                {errors.name.message}
-              </span>
-            )}
-          </div>
-
-          <div className="flex flex-col">
-            <label
-              className="mb-1 flex text-xs text-secondary"
-              htmlFor="version"
-            >
-              {t('Version')}
-              <span className="ml-1 inline text-accent-primary">*</span>
-            </label>
-            <input
-              {...register('version', {
-                required: t('This field is required') || '',
-                pattern: {
-                  value: /^[0-9]+\.[0-9]+\.[0-9]+$/,
-                  message: t(
-                    'Version should be in x.y.z format and contain only numbers and dots.',
-                  ),
-                },
-              })}
-              defaultValue={selectedApplication?.version}
-              id="version"
-              className={classNames(
-                errors.version &&
-                  'border-error hover:border-error focus:border-error',
-                inputClassName,
-              )}
-              placeholder={DEFAULT_VERSION}
-            />
-            {errors.version && (
-              <span className="text-xxs text-error peer-invalid:peer-[.submitted]:mb-1">
-                {errors.version.message}
-              </span>
-            )}
-          </div>
-
-          <div className="flex flex-col">
-            <label
-              className="mb-1 flex text-xs text-secondary"
-              htmlFor="applicationIcon"
-            >
-              {t('Icon')}
-              <span className="ml-1 inline text-accent-primary">*</span>
-            </label>
-            <Controller
-              name="iconUrl"
-              control={control}
-              rules={{ required: t('Icon is required.') || '' }}
-              render={({ field: { ref: _ref, ...restField } }) => (
-                <CustomLogoSelect
-                  {...restField}
-                  localLogo={
-                    !deleteLogo ? localLogoFile?.split('/').pop() : undefined
-                  }
-                  onLogoSelect={onLogoSelect}
-                  onDeleteLocalLogoHandler={onDeleteLocalLogoHandler}
-                  customPlaceholder={t('No icon')}
-                  className="max-w-full"
-                  fileManagerModalTitle="Select application icon"
-                  allowedTypes={IMAGE_TYPES}
-                />
-              )}
-            />
-            {!localLogoFile && errors.iconUrl && (
-              <span className="text-xxs text-error peer-invalid:peer-[.submitted]:mb-1">
-                {errors.iconUrl.message}
-              </span>
-            )}
-          </div>
-
-          <div className="flex flex-col">
-            <label
-              className="mb-1 flex text-xs text-secondary"
-              htmlFor="applicationIcon"
-            >
-              {t('Topics')}
-            </label>
-            <Controller
-              name="topics"
-              control={control}
-              render={({ field: { ref: _ref, ...restField } }) => (
-                <DropdownSelector
-                  {...restField}
-                  placeholder={t('Select one or more topics')}
-                  onChange={handleChangeTopics}
-                  options={topicOptions}
-                  values={selectedOptions}
-                />
-              )}
-            />
-          </div>
-
-          {/* <div className="flex flex-col">
-            <label
-              className="mb-1 flex text-xs text-secondary"
-              htmlFor="applicationIcon"
-            >
-              {t('Capabilities')}
-            </label>
-            <Controller
-              name="capabilities"
-              control={control}
-              render={({ field: { ref: _ref, ...restField } }) => (
-                <DropdownSelector
-                  {...restField}
-                  placeholder={t('Select one or more capabilities')}
-                  onChange={handleChangeCapabilities}
-                  options={[
-                    { value: 'test', label: 'Ocean' },
-                    { value: 'test1', label: 'Ocean' },
-                  ]}
-                />
-              )}
-            />
-            {!localLogoFile && errors.iconUrl && (
-              <span className="text-xxs text-error peer-invalid:peer-[.submitted]:mb-1">
-                {errors.iconUrl.message}
-              </span>
-            )}
-          </div> */}
-
-          <div className="flex flex-col">
-            <label
-              className="mb-1 flex items-center gap-1 text-xs text-secondary"
-              htmlFor="description"
-            >
-              {t('Description')}
-              <Tooltip
-                tooltip={t(
-                  'The first paragraph serves as a short description. To create an extended description, enter two line breaks and start the second paragraph.',
-                )}
-                triggerClassName="flex shrink-0 text-secondary hover:text-accent-primary"
-                contentClassName="max-w-[220px]"
-                placement="top"
-              >
-                <IconHelp size={18} />
-              </Tooltip>
-            </label>
-            <textarea
-              {...register('description')}
-              onBlur={() => trigger('description')}
-              id="description"
-              defaultValue={selectedApplication?.description}
-              rows={3}
-              placeholder={t('A description of your application') || ''}
-              className={classNames(inputClassName, 'resize-none')}
-            />
-          </div>
-
-          <div className="flex flex-col">
-            <label
-              className="mb-1 flex items-center gap-1 text-xs text-secondary"
-              htmlFor="featuresData"
-            >
-              {t('Features data')}
-              <Tooltip
-                tooltip={t(
-                  'Enter key-value pairs for rate_endpoint and/or configuration_endpoint in JSON format.',
-                )}
-                triggerClassName="flex shrink-0 text-secondary hover:text-accent-primary"
-                contentClassName="max-w-[220px]"
-                placement="top"
-              >
-                <IconHelp size={18} />
-              </Tooltip>
-            </label>
-            <Controller
-              name="features"
-              control={control}
-              rules={{ validate: validateFeaturesData }}
-              render={({ field }) => (
-                <textarea
-                  value={featuresInput}
-                  onChange={(e) => {
-                    setFeaturesInput(e.target.value);
-                    clearErrors('features');
-                  }}
-                  className={inputClassName}
-                  onBlur={async () => {
-                    field.onChange(featuresInput);
-                    await trigger('features');
-                  }}
-                  rows={4}
-                  data-qa="features-data"
-                  placeholder={`{\n\t"rate_endpoint": "http://application1/rate",\n\t"configuration_endpoint": "http://application1/configuration"\n}`}
-                />
-              )}
-            />
-            {errors.features && (
-              <span className="text-xxs text-error peer-invalid:peer-[.submitted]:mb-1">
-                {errors.features.message}
-              </span>
-            )}
-          </div>
-
-          <div className="flex flex-col">
-            <label
-              className="mb-1 flex items-center gap-1 text-xs text-secondary"
-              htmlFor="inputAttachmentTypes"
-            >
-              {t('Attachment types')}
-              <Tooltip
-                tooltip={t("Input the MIME type and press 'Enter' to add")}
-                triggerClassName="flex shrink-0 text-secondary hover:text-accent-primary"
-                contentClassName="max-w-[220px]"
-                placement="top"
-              >
-                <IconHelp size={18} />
-              </Tooltip>
-            </label>
-            <Controller
-              name="inputAttachmentTypes"
-              control={control}
-              render={({ field: { ref: _ref, ...restField } }) => (
-                <MultipleComboBox
-                  initialSelectedItems={inputAttachmentTypes}
-                  getItemLabel={getItemLabel}
-                  getItemValue={getItemLabel}
-                  onChangeSelectedItems={handleAttachmentTypesChange}
-                  placeholder={t('Enter one or more attachment types') || ''}
-                  className={classNames(
-                    'flex items-start py-1 pl-0 md:max-w-full',
-                    inputClassName,
-                  )}
-                  hasDeleteAll
-                  validationRegExp={attachmentTypeRegex}
-                  handleError={handleAttachmentTypesError}
-                  handleClearError={handleClearAttachmentTypesError}
-                  hideSuggestions
-                  itemHeightClassName="h-[31px]"
-                  {...restField}
-                />
-              )}
-            />
-            {errors.inputAttachmentTypes && (
-              <span className="text-xxs text-error peer-invalid:peer-[.submitted]:mb-1">
-                {errors.inputAttachmentTypes.message}
-              </span>
-            )}
-          </div>
-
-          <div className="flex flex-col">
-            <label
-              className="mb-1 flex text-xs text-secondary"
-              htmlFor="maxInputAttachments"
-            >
-              {t('Max. attachments number')}
-            </label>
-            <input
-              {...register('maxInputAttachments', {
-                pattern: {
-                  value: /^[0-9]*$/,
-                  message: t('Max attachments must be a number') || '',
-                },
-              })}
-              type="text"
-              value={
-                maxInputAttachmentsValue === undefined
-                  ? ''
-                  : maxInputAttachmentsValue
-              }
-              className={inputClassName}
-              placeholder={t('Enter the maximum number of attachments') || ''}
-              onChange={(e) => {
-                const numericValue = e.target.value.replace(/[^0-9]/g, '');
-                const value =
-                  numericValue !== '' ? Number(numericValue) : undefined;
-                if (!value || Number.isSafeInteger(value)) {
-                  setMaxInputAttachmentsValue(value);
-                }
-                handleChangeHandlerAttachments?.(e);
-              }}
-            />
-          </div>
-
-          <div className="mb-4 flex flex-col">
-            <label
-              className="mb-1 flex text-xs text-secondary"
-              htmlFor="completionUrl"
-            >
-              {t('Completion URL')}
-              <span className="ml-1 inline text-accent-primary">*</span>
-            </label>
-            <input
-              {...register('completionUrl', {
-                required: t('Completion URL is required.') || '',
-                validate: (value) => {
-                  try {
-                    if (value.trim() !== value) {
-                      return (
-                        t('Completion URL cannot start or end with spaces.') ||
-                        ''
-                      );
-                    }
-                    if (
-                      !value.startsWith('http://') &&
-                      !value.startsWith('https://')
-                    ) {
-                      return (
-                        t(
-                          'Completion URL must start with http:// or https://',
-                        ) || ''
-                      );
-                    }
-                    new URL(value);
-                    const bannedEndings = ['.', '//'];
-                    const endsWithBannedEnding = bannedEndings.some((ending) =>
-                      value.endsWith(ending),
-                    );
-                    if (endsWithBannedEnding) {
-                      return t('Completion URL cannot end with . or //') || '';
-                    }
-                    return true;
-                  } catch {
-                    return t('Completion URL should be a valid URL.') || '';
-                  }
-                },
-              })}
-              type="text"
-              defaultValue={selectedApplication?.completionUrl}
-              className={classNames(
-                errors.completionUrl &&
-                  'border-error hover:border-error focus:border-error',
-                inputClassName,
-              )}
-              placeholder={t('Type completion URL') || ''}
-              data-qa="completion-url"
-            />
-            {errors.completionUrl && (
-              <span className="text-xxs text-error peer-invalid:peer-[.submitted]:mb-1">
-                {errors.completionUrl.message}
-              </span>
-            )}
-          </div>
-        </div>
-
-        <div
-          className={classNames(
-            'flex gap-2 border-t border-primary p-4 md:px-6',
-            isEdit ? 'justify-between' : 'justify-end',
-          )}
-        >
-          {isEdit && (
-            <div className="flex items-center gap-2">
-              <Tooltip tooltip={t('Delete')}>
-                <button
-                  onClick={handleConfirmDialogOpen}
-                  className="flex size-[34px] items-center justify-center rounded text-secondary hover:bg-accent-primary-alpha hover:text-accent-primary"
-                  data-qa="application-delete"
-                >
-                  <IconTrashX
-                    size={24}
-                    className="shrink-0 cursor-pointer text-secondary hover:text-accent-primary"
-                  />
-                </button>
-              </Tooltip>
-              <Tooltip tooltip={t('Publish')}>
-                <button
-                  onClick={handlePublish}
-                  className="flex size-[34px] items-center justify-center rounded text-secondary hover:bg-accent-primary-alpha hover:text-accent-primary"
-                  data-qa="application-share"
-                >
-                  <IconWorldShare
-                    size={24}
-                    className="shrink-0 cursor-pointer text-secondary hover:text-accent-primary"
-                  />
-                </button>
-              </Tooltip>
-            </div>
-          )}
-          <Tooltip
-            hideTooltip={isValid}
-            tooltip={t('Fill in all required fields or correct values')}
-          >
-            <button
-              className="button button-primary"
-              disabled={!isValid || !!errors.inputAttachmentTypes}
-              data-qa="save-application-dialog"
-              type="submit"
-            >
-              {isEdit ? t('Save') : t('Add')}
-            </button>
-          </Tooltip>
-        </div>
-      </form>
-      <ConfirmDialog
-        isOpen={isDeleteModalOpen}
-        heading={t('Confirm deleting application')}
-        description={
-          t('Are you sure you want to delete the application?') || ''
-        }
-        confirmLabel={t('Delete')}
-        cancelLabel={t('Cancel')}
-        onClose={handleConfirmDialogClose}
-      />
-      {applicationToPublish && (
-        <PublishModal
-          entity={applicationToPublish}
-          type={SharingType.Application}
-          isOpen={isPublishing}
-          onClose={handlePublishClose}
-          publishAction={
-            isPublishing ? PublishActions.ADD : PublishActions.DELETE
-          }
-        />
-      )}
-    </>
-  );
-};
-
-interface Props {
-  isOpen: boolean;
-  onClose: (result: boolean) => void;
-  isEdit?: boolean;
-  currentReference?: string;
-}
-
-export const ApplicationDialog: React.FC<Props> = ({
-  isOpen,
-  onClose,
-  isEdit,
-  currentReference,
-}) => {
-  const loading = useAppSelector(ApplicationSelectors.selectIsLoading);
-
-  const selectedApplication = useAppSelector(
-    ApplicationSelectors.selectApplicationDetail,
-  );
-
-  const handleClose = useCallback(() => {
-    onClose(false);
-  }, [onClose]);
-
-  return (
-    <Modal
-      portalId="theme-main"
-      state={isOpen ? ModalState.OPENED : ModalState.CLOSED}
-      onClose={handleClose}
-      dataQa="application-dialog"
-      containerClassName="flex w-full flex-col pt-2 md:grow-0 xl:max-w-[720px] 2xl:max-w-[780px]"
-      dismissProps={{ outsidePressEvent: 'mousedown' }}
-      hideClose
-    >
-      {loading ? (
-        <div className="flex size-full h-screen items-center justify-center">
-          <Spinner size={48} dataQa="publication-items-spinner" />
-        </div>
-      ) : (
-        <ApplicationDialogView
-          isOpen={isOpen}
-          onClose={onClose}
-          isEdit={isEdit}
-          currentReference={currentReference}
-          selectedApplication={isEdit ? selectedApplication : undefined}
-        />
-      )}
-    </Modal>
-  );
-};
diff --git a/apps/chat/src/components/Common/ApplicationWizard/ApplicationWizard.tsx b/apps/chat/src/components/Common/ApplicationWizard/ApplicationWizard.tsx
new file mode 100644
index 0000000000..789901c2fb
--- /dev/null
+++ b/apps/chat/src/components/Common/ApplicationWizard/ApplicationWizard.tsx
@@ -0,0 +1,87 @@
+import { UseDismissProps } from '@floating-ui/react';
+import React, { useCallback, useMemo } from 'react';
+
+import { ApplicationType } from '@/src/types/applications';
+import { ModalState } from '@/src/types/modal';
+
+import { ApplicationSelectors } from '@/src/store/application/application.reducers';
+import { useAppSelector } from '@/src/store/hooks';
+
+import { ApplicationWizardHeader } from '@/src/components/Common/ApplicationWizard/ApplicationWizardHeader';
+import { CodeAppView } from '@/src/components/Common/ApplicationWizard/CodeAppView/CodeAppView';
+import { CustomAppView } from '@/src/components/Common/ApplicationWizard/CustomAppView';
+import { QuickAppView } from '@/src/components/Common/ApplicationWizard/QuickAppView';
+import Modal from '@/src/components/Common/Modal';
+import { Spinner } from '@/src/components/Common/Spinner';
+
+const modalDismissProps = { outsidePressEvent: 'mousedown' } as UseDismissProps;
+interface ApplicationWizardProps {
+  isOpen: boolean;
+  onClose: (value: boolean) => void;
+  type: ApplicationType;
+  isEdit?: boolean;
+  currentReference?: string;
+}
+
+export const ApplicationWizard: React.FC<ApplicationWizardProps> = ({
+  isOpen,
+  onClose,
+  type,
+  isEdit,
+  currentReference,
+}) => {
+  const isLoading = useAppSelector(ApplicationSelectors.selectIsLoading);
+  const selectedApplication = useAppSelector(
+    ApplicationSelectors.selectApplicationDetail,
+  );
+
+  const handleClose = useCallback(() => {
+    onClose(false);
+  }, [onClose]);
+
+  const View = useMemo(() => {
+    switch (type) {
+      case ApplicationType.QUICK_APP:
+        return QuickAppView;
+      case ApplicationType.CODE_APP:
+        return CodeAppView;
+      case ApplicationType.CUSTOM_APP:
+      default:
+        return CustomAppView;
+    }
+  }, [type]);
+
+  return (
+    <Modal
+      portalId="theme-main"
+      state={isOpen ? ModalState.OPENED : ModalState.CLOSED}
+      onClose={handleClose}
+      dataQa="application-dialog"
+      containerClassName="flex w-full flex-col pt-2 md:grow-0 xl:max-w-[720px] 2xl:max-w-[780px] !bg-layer-2"
+      dismissProps={modalDismissProps}
+      hideClose
+    >
+      {isLoading ? (
+        <div className="flex size-full h-screen items-center justify-center">
+          <Spinner size={48} dataQa="publication-items-spinner" />
+        </div>
+      ) : (
+        <div className="relative flex max-h-full w-full grow flex-col divide-tertiary overflow-y-auto">
+          <ApplicationWizardHeader
+            onClose={onClose}
+            type={type}
+            isEdit={isEdit}
+          />
+          <View
+            isOpen={isOpen}
+            onClose={onClose}
+            type={type}
+            isEdit={isEdit}
+            currentReference={currentReference}
+            selectedApplication={isEdit ? selectedApplication : undefined}
+          />
+        </div>
+      )}
+    </Modal>
+  );
+};
diff --git a/apps/chat/src/components/Common/ApplicationWizard/ApplicationWizardFooter.tsx b/apps/chat/src/components/Common/ApplicationWizard/ApplicationWizardFooter.tsx
new file mode 100644
index 0000000000..10243e848a
--- /dev/null
+++ b/apps/chat/src/components/Common/ApplicationWizard/ApplicationWizardFooter.tsx
@@ -0,0 +1,160 @@
+import { IconTrashX, IconWorldShare } from '@tabler/icons-react';
+import { FC, useCallback, useState } from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+import classNames from 'classnames';
+
+import { getFolderIdFromEntityId } from '@/src/utils/app/folders';
+import { ApiUtils } from '@/src/utils/server/api';
+
+import { CustomApplicationModel } from '@/src/types/applications';
+import { SharingType } from '@/src/types/share';
+import { Translation } from '@/src/types/translation';
+
+import { ApplicationActions } from '@/src/store/application/application.reducers';
+import { useAppDispatch } from '@/src/store/hooks';
+
+import { PublishModal } from '@/src/components/Chat/Publish/PublishWizard';
+import { ConfirmDialog } from '@/src/components/Common/ConfirmDialog';
+import Tooltip from '@/src/components/Common/Tooltip';
+
+import { PublishActions } from '@epam/ai-dial-shared';
+
+interface ApplicationWizardFooterProps {
+  onClose: (v: boolean) => void;
+  isEdit?: boolean;
+  isValid?: boolean;
+  selectedApplication?: CustomApplicationModel;
+}
+
+export const ApplicationWizardFooter: FC<ApplicationWizardFooterProps> = ({
+  isEdit,
+  isValid,
+  selectedApplication,
+  onClose,
+}) => {
+  const { t } = useTranslation(Translation.Chat);
+
+  const dispatch = useAppDispatch();
+
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isPublishing, setIsPublishing] = useState(false);
+
+  const applicationToPublish = selectedApplication
+    ? {
+        name: selectedApplication.name,
+        id: ApiUtils.decodeApiUrl(selectedApplication.id),
+        folderId: getFolderIdFromEntityId(selectedApplication.name),
+        iconUrl: selectedApplication.iconUrl,
+      }
+    : null;
+
+  const handleDelete = useCallback(() => {
+    if (selectedApplication) {
+      dispatch(ApplicationActions.delete(selectedApplication));
+    }
+
+    onClose(false);
+  }, [dispatch, onClose, selectedApplication]);
+
+  const handlePublish = useCallback((e: React.FormEvent) => {
+    e.preventDefault();
+    setIsPublishing(true);
+  }, []);
+
+  const handlePublishClose = useCallback(() => {
+    setIsPublishing(false);
+  }, []);
+
+  const handleConfirmDialogOpen = useCallback((e: React.FormEvent) => {
+    e.preventDefault();
+    setIsDeleteModalOpen(true);
+  }, []);
+
+  const handleConfirmDialogClose = useCallback(
+    (result: boolean) => {
+      setIsDeleteModalOpen(false);
+
+      if (result) {
+        handleDelete();
+      }
+    },
+    [handleDelete],
+  );
+
+  return (
+    <>
+      <div
+        className={classNames(
+          'flex gap-2 border-t border-primary p-4 md:px-6',
+          isEdit ? 'justify-between' : 'justify-end',
+        )}
+      >
+        {isEdit && (
+          <div className="flex items-center gap-2">
+            <Tooltip tooltip={t('Delete')}>
+              <button
+                onClick={handleConfirmDialogOpen}
+                className="flex size-[34px] items-center justify-center rounded text-secondary hover:bg-accent-primary-alpha hover:text-accent-primary"
+                data-qa="application-delete"
+              >
+                <IconTrashX
+                  size={24}
+                  className="shrink-0 cursor-pointer text-secondary hover:text-accent-primary"
+                />
+              </button>
+            </Tooltip>
+            <Tooltip tooltip={t('Publish')}>
+              <button
+                onClick={handlePublish}
+                className="flex size-[34px] items-center justify-center rounded text-secondary hover:bg-accent-primary-alpha hover:text-accent-primary"
+                data-qa="application-share"
+              >
+                <IconWorldShare
+                  size={24}
+                  className="shrink-0 cursor-pointer text-secondary hover:text-accent-primary"
+                />
+              </button>
+            </Tooltip>
+          </div>
+        )}
+        <Tooltip
+          hideTooltip={isValid}
+          tooltip={t('Fill in all required fields or correct values')}
+        >
+          <button
+            className="button button-primary"
+            disabled={!isValid}
+            data-qa="save-application-dialog"
+            type="submit"
+          >
+            {isEdit ? t('Save') : t('Add')}
+          </button>
+        </Tooltip>
+      </div>
+
+      <ConfirmDialog
+        isOpen={isDeleteModalOpen}
+        heading={t('Confirm deleting application')}
+        description={
+          t('Are you sure you want to delete the application?') || ''
+        }
+        confirmLabel={t('Delete')}
+        cancelLabel={t('Cancel')}
+        onClose={handleConfirmDialogClose}
+      />
+      {applicationToPublish && (
+        <PublishModal
+          entity={applicationToPublish}
+          type={SharingType.Application}
+          isOpen={isPublishing}
+          onClose={handlePublishClose}
+          publishAction={
+            isPublishing ? PublishActions.ADD : PublishActions.DELETE
+          }
+        />
+      )}
+    </>
+  );
+};
diff --git a/apps/chat/src/components/Common/ApplicationWizard/ApplicationWizardHeader.tsx b/apps/chat/src/components/Common/ApplicationWizard/ApplicationWizardHeader.tsx
new file mode 100644
index 0000000000..75adecaf8a
--- /dev/null
+++ b/apps/chat/src/components/Common/ApplicationWizard/ApplicationWizardHeader.tsx
@@ -0,0 +1,39 @@
+import { IconX } from '@tabler/icons-react';
+import { FC } from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+import { ApplicationType } from '@/src/types/applications';
+import { Translation } from '@/src/types/translation';
+
+const getTitle = (type: ApplicationType, isEdit?: boolean) =>
+  `${isEdit ? 'Edit' : 'Add'} ${type}`;
+
+interface ApplicationWizardHeaderProps {
+  onClose: (v: boolean) => void;
+  type: ApplicationType;
+  isEdit?: boolean;
+}
+
+export const ApplicationWizardHeader: FC<ApplicationWizardHeaderProps> = ({
+  onClose,
+  type,
+  isEdit,
+}) => {
+  const { t } = useTranslation(Translation.Chat);
+
+  return (
+    <>
+      <button
+        onClick={() => onClose(false)}
+        className="absolute right-2 top-2 rounded text-secondary hover:text-accent-primary"
+        data-qa="close-application-dialog"
+      >
+        <IconX size={24} />
+      </button>
+      <div className="px-3 py-4 md:px-6">
+        <h2 className="text-base font-semibold">{t(getTitle(type, isEdit))}</h2>
+      </div>
+    </>
+  );
+};
diff --git a/apps/chat/src/components/Common/ApplicationWizard/CodeAppView/CodeAppView.tsx b/apps/chat/src/components/Common/ApplicationWizard/CodeAppView/CodeAppView.tsx
new file mode 100644
index 0000000000..88f2bc1553
--- /dev/null
+++ b/apps/chat/src/components/Common/ApplicationWizard/CodeAppView/CodeAppView.tsx
@@ -0,0 +1,289 @@
+import React, { useCallback, useMemo } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+
+import { useTranslation } from 'next-i18next';
+
+import { topicToOption } from '@/src/utils/app/application';
+
+import {
+  ApplicationType,
+  CustomApplicationModel,
+} from '@/src/types/applications';
+import { Translation } from '@/src/types/translation';
+
+import { ApplicationActions } from '@/src/store/application/application.reducers';
+import { FilesSelectors } from '@/src/store/files/files.reducers';
+import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
+import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
+
+import {
+  FEATURES_ENDPOINTS,
+  FEATURES_ENDPOINTS_NAMES,
+} from '@/src/constants/applications';
+import { DEFAULT_VERSION } from '@/src/constants/public';
+
+import { ApplicationWizardFooter } from '@/src/components/Common/ApplicationWizard/ApplicationWizardFooter';
+import { SourceFilesEditor } from '@/src/components/Common/ApplicationWizard/CodeAppView/SourceFilesEditor';
+import {
+  FormData,
+  endpointsKeyValidator,
+  endpointsValueValidator,
+  envKeysValidator,
+  envValueValidator,
+  getApplicationData,
+  getAttachmentTypeErrorHandlers,
+  getDefaultValues,
+  validators,
+} from '@/src/components/Common/ApplicationWizard/form';
+import { DropdownSelector } from '@/src/components/Common/DropdownSelector';
+import { withController } from '@/src/components/Common/Forms/ControlledFormField';
+import { DynamicFormFields } from '@/src/components/Common/Forms/DynamicFormFields';
+import { Field } from '@/src/components/Common/Forms/Field';
+import { withErrorMessage } from '@/src/components/Common/Forms/FieldErrorMessage';
+import { FieldTextArea } from '@/src/components/Common/Forms/FieldTextArea';
+import { withLabel } from '@/src/components/Common/Forms/Label';
+import { MultipleComboBox } from '@/src/components/Common/MultipleComboBox';
+import { CustomLogoSelect } from '@/src/components/Settings/CustomLogoSelect';
+
+import { ViewProps } from '../view-props';
+
+const features = [
+  {
+    label: FEATURES_ENDPOINTS_NAMES[FEATURES_ENDPOINTS.completion],
+    value: FEATURES_ENDPOINTS.completion,
+  },
+  {
+    label: FEATURES_ENDPOINTS_NAMES[FEATURES_ENDPOINTS.rate_endpoint],
+    value: FEATURES_ENDPOINTS.rate_endpoint,
+  },
+  {
+    label: FEATURES_ENDPOINTS_NAMES[FEATURES_ENDPOINTS.configuration_endpoint],
+    value: FEATURES_ENDPOINTS.configuration_endpoint,
+  },
+];
+
+const LogoSelector = withErrorMessage(withLabel(CustomLogoSelect));
+const TopicsSelector = withLabel(DropdownSelector);
+const ControlledField = withController(Field);
+const FilesEditor = withController(
+  withErrorMessage(withLabel(SourceFilesEditor)),
+);
+const MappingsForm = withLabel(
+  DynamicFormFields<FormData, 'endpoints' | 'env'>,
+);
+const ComboBoxField = withErrorMessage(withLabel(MultipleComboBox));
+
+export const CodeAppView: React.FC<ViewProps> = ({
+  onClose,
+  isEdit,
+  type,
+  selectedApplication,
+  currentReference,
+}) => {
+  const { t } = useTranslation(Translation.Chat);
+
+  const dispatch = useAppDispatch();
+
+  const files = useAppSelector(FilesSelectors.selectFiles);
+  const topics = useAppSelector(SettingsSelectors.selectTopics);
+
+  const topicOptions = useMemo(() => topics.map(topicToOption), [topics]);
+
+  const {
+    register,
+    control,
+    formState: { errors, isValid },
+    setError,
+    clearErrors,
+    handleSubmit: submitWrapper,
+  } = useForm<FormData>({
+    defaultValues: getDefaultValues(selectedApplication),
+    mode: 'onChange',
+    reValidateMode: 'onChange',
+  });
+
+  const getLogoId = useCallback(
+    (filesIds: string[]) => files.find((f) => f.id === filesIds[0])?.id,
+    [files],
+  );
+
+  const handleSubmit = (data: FormData) => {
+    const preparedData = getApplicationData(data, type);
+
+    if (type === ApplicationType.CODE_APP) {
+      preparedData.functionStatus = selectedApplication?.functionStatus;
+    }
+
+    if (
+      isEdit &&
+      selectedApplication?.name &&
+      currentReference &&
+      selectedApplication.id
+    ) {
+      const applicationData: CustomApplicationModel = {
+        ...preparedData,
+        reference: currentReference,
+        id: selectedApplication.id,
+      };
+
+      dispatch(
+        ApplicationActions.update({
+          oldApplicationId: selectedApplication.id,
+          applicationData,
+        }),
+      );
+    } else {
+      dispatch(ApplicationActions.create(preparedData));
+    }
+
+    onClose(true);
+  };
+
+  return (
+    <form
+      onSubmit={submitWrapper(handleSubmit)}
+      className="relative flex max-h-full w-full grow flex-col divide-tertiary overflow-y-auto"
+    >
+      <div className="flex flex-col gap-4 overflow-y-auto px-3 pb-6 md:px-6">
+        <Field
+          {...register('name', validators['name'])}
+          label={t('Name')}
+          mandatory
+          placeholder={t('Type name') || ''}
+          id="name"
+          error={errors.name?.message}
+        />
+
+        <ControlledField
+          label={t('Version')}
+          mandatory
+          placeholder={DEFAULT_VERSION}
+          id="version"
+          error={errors.version?.message}
+          control={control}
+          name="version"
+          rules={validators['version']}
+        />
+
+        <Controller
+          name="iconUrl"
+          control={control}
+          rules={validators['iconUrl']}
+          render={({ field }) => (
+            <LogoSelector
+              label={t('Icon')}
+              mandatory
+              localLogo={field.value?.split('/')?.pop()}
+              onLogoSelect={(v) => field.onChange(getLogoId(v))}
+              onDeleteLocalLogoHandler={() => field.onChange('')}
+              customPlaceholder={t('No icon')}
+              className="max-w-full"
+              fileManagerModalTitle="Select application icon"
+              allowedTypes={['image/svg+xml']}
+              error={errors.iconUrl?.message}
+            />
+          )}
+        />
+
+        <Controller
+          name="topics"
+          control={control}
+          render={({ field }) => (
+            <TopicsSelector
+              label={t('Topics')}
+              values={field.value?.map(topicToOption)}
+              options={topicOptions}
+              placeholder={t('Select one or more topics')}
+              onChange={(v) => field.onChange(v.map((o) => o.value))}
+            />
+          )}
+        />
+
+        <FieldTextArea
+          {...register('description')}
+          label={t('Description')}
+          info={t(
+            'The first paragraph serves as a short description. To create an extended description, enter two line breaks and start the second paragraph.',
+          )}
+          placeholder={t('A description of your application') || ''}
+          rows={3}
+          className="resize-none"
+          id="description"
+        />
+
+        <Controller
+          name="inputAttachmentTypes"
+          rules={validators['inputAttachmentTypes']}
+          control={control}
+          render={({ field }) => (
+            <ComboBoxField
+              label={t('Attachment types') || ''}
+              info={t("Input the MIME type and press 'Enter' to add")}
+              initialSelectedItems={field.value}
+              getItemLabel={(i: unknown) => i as string}
+              getItemValue={(i: unknown) => i as string}
+              onChangeSelectedItems={field.onChange}
+              placeholder={t('Enter one or more attachment types') || ''}
+              className="input-form input-invalid peer mx-0 flex items-start py-1 pl-0 md:max-w-full"
+              hasDeleteAll
+              hideSuggestions
+              itemHeightClassName="h-[31px]"
+              error={errors.inputAttachmentTypes?.message}
+              {...getAttachmentTypeErrorHandlers(setError, clearErrors)}
+            />
+          )}
+        />
+
+        <ControlledField
+          label={t('Max. attachments number')}
+          placeholder={t('Enter the maximum number of attachments') || ''}
+          id="maxInputAttachments"
+          error={errors.maxInputAttachments?.message}
+          control={control}
+          name="maxInputAttachments"
+          rules={validators['maxInputAttachments']}
+        />
+
+        <FilesEditor
+          mandatory
+          control={control}
+          name="sources"
+          label={t('Source files')}
+          rules={validators['sources']}
+        />
+
+        <MappingsForm
+          label={t('Endpoints')}
+          addLabel={t('Add endpoint') ?? ''}
+          valueLabel={t('Endpoint') ?? ''}
+          options={features}
+          register={register}
+          control={control}
+          name="endpoints"
+          keyOptions={endpointsKeyValidator}
+          valueOptions={endpointsValueValidator}
+          errors={errors.endpoints}
+        />
+
+        <MappingsForm
+          creatable
+          label={t('Environment variables')}
+          addLabel={t('Add variable') ?? ''}
+          register={register}
+          control={control}
+          name="env"
+          keyOptions={envKeysValidator}
+          valueOptions={envValueValidator}
+          errors={errors.env}
+        />
+      </div>
+
+      <ApplicationWizardFooter
+        onClose={onClose}
+        selectedApplication={selectedApplication}
+        isEdit={isEdit}
+        isValid={isValid}
+      />
+    </form>
+  );
+};
diff --git a/apps/chat/src/components/Common/ApplicationWizard/CodeAppView/SourceFilesEditor.tsx b/apps/chat/src/components/Common/ApplicationWizard/CodeAppView/SourceFilesEditor.tsx
new file mode 100644
index 0000000000..61ef897c93
--- /dev/null
+++ b/apps/chat/src/components/Common/ApplicationWizard/CodeAppView/SourceFilesEditor.tsx
@@ -0,0 +1,97 @@
+import { IconFile, IconFolder } from '@tabler/icons-react';
+import { FC, memo, useCallback, useEffect, useMemo, useState } from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+import { getFileRootId } from '@/src/utils/app/id';
+
+import { Translation } from '@/src/types/translation';
+
+import { FilesActions, FilesSelectors } from '@/src/store/files/files.reducers';
+import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
+
+import { SelectFolderModal } from '@/src/components/Files/SelectFolderModal';
+
+interface SourceFilesEditorProps {
+  value?: string;
+  onChange?: (v: string) => void;
+}
+
+const _SourceFilesEditor: FC<SourceFilesEditorProps> = ({
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation(Translation.Settings);
+
+  const dispatch = useAppDispatch();
+
+  const files = useAppSelector(FilesSelectors.selectFiles);
+
+  const [isFolderModalOpen, setIsFolderModalOpen] = useState(false);
+
+  const folderFiles = useMemo(() => {
+    if (value) {
+      return files.filter((file) => file.id.startsWith(value));
+    }
+    return [];
+  }, [files, value]);
+
+  const handleToggleFileManager = useCallback(() => {
+    setIsFolderModalOpen((p) => !p);
+  }, [setIsFolderModalOpen]);
+
+  const handleCloseFileManager = useCallback(
+    (folder?: string) => {
+      if (folder) {
+        onChange?.(folder);
+      }
+      setIsFolderModalOpen(false);
+    },
+    [onChange],
+  );
+
+  useEffect(() => {
+    if (value) {
+      dispatch(FilesActions.getFilesWithFolders({ id: value }));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="py-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <button
+          type="button"
+          className="button button-primary"
+          onClick={handleToggleFileManager}
+        >
+          <IconFolder size={18} />
+        </button>
+
+        {!value && <span>{t('Select folder')}</span>}
+        {!!folderFiles.length && (
+          <span className="text-lg text-primary">{'>'}</span>
+        )}
+        {!!folderFiles.length &&
+          folderFiles.map((file) => (
+            <div
+              key={file.id}
+              className="flex items-center gap-2 rounded border border-accent-secondary p-2"
+            >
+              <IconFile size={14} />
+              <span className="text-sm text-primary">{file.name}</span>
+            </div>
+          ))}
+      </div>
+
+      <SelectFolderModal
+        isOpen={isFolderModalOpen}
+        initialSelectedFolderId={getFileRootId()}
+        rootFolderId={getFileRootId()}
+        onClose={handleCloseFileManager}
+      />
+    </div>
+  );
+};
+
+export const SourceFilesEditor = memo(_SourceFilesEditor);
diff --git a/apps/chat/src/components/Common/ApplicationWizard/CustomAppView.tsx b/apps/chat/src/components/Common/ApplicationWizard/CustomAppView.tsx
new file mode 100644
index 0000000000..1ee499e2cc
--- /dev/null
+++ b/apps/chat/src/components/Common/ApplicationWizard/CustomAppView.tsx
@@ -0,0 +1,243 @@
+import React, { useCallback, useMemo } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+
+import { useTranslation } from 'next-i18next';
+
+import { topicToOption } from '@/src/utils/app/application';
+
+import { CustomApplicationModel } from '@/src/types/applications';
+import { Translation } from '@/src/types/translation';
+
+import { ApplicationActions } from '@/src/store/application/application.reducers';
+import { FilesSelectors } from '@/src/store/files/files.reducers';
+import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
+import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
+
+import { DEFAULT_VERSION } from '@/src/constants/public';
+
+import { ApplicationWizardFooter } from '@/src/components/Common/ApplicationWizard/ApplicationWizardFooter';
+import { DropdownSelector } from '@/src/components/Common/DropdownSelector';
+import { withController } from '@/src/components/Common/Forms/ControlledFormField';
+import { Field } from '@/src/components/Common/Forms/Field';
+import { withErrorMessage } from '@/src/components/Common/Forms/FieldErrorMessage';
+import { FieldTextArea } from '@/src/components/Common/Forms/FieldTextArea';
+import { withLabel } from '@/src/components/Common/Forms/Label';
+import { MultipleComboBox } from '@/src/components/Common/MultipleComboBox';
+import { CustomLogoSelect } from '@/src/components/Settings/CustomLogoSelect';
+
+import {
+  FormData,
+  getApplicationData,
+  getAttachmentTypeErrorHandlers,
+  getDefaultValues,
+  validators,
+} from './form';
+import { ViewProps } from './view-props';
+
+const LogoSelector = withErrorMessage(withLabel(CustomLogoSelect));
+const TopicsSelector = withLabel(DropdownSelector);
+const ComboBoxField = withErrorMessage(withLabel(MultipleComboBox));
+const ControlledField = withController(Field);
+
+const getItemLabel = (item: unknown): string => item as string;
+
+export const CustomAppView: React.FC<ViewProps> = ({
+  onClose,
+  isEdit,
+  type,
+  currentReference,
+  selectedApplication,
+}) => {
+  const { t } = useTranslation(Translation.Chat);
+
+  const dispatch = useAppDispatch();
+
+  const files = useAppSelector(FilesSelectors.selectFiles);
+  const topics = useAppSelector(SettingsSelectors.selectTopics);
+
+  const topicOptions = useMemo(() => topics.map(topicToOption), [topics]);
+
+  const {
+    register,
+    control,
+    formState: { errors, isValid },
+    setError,
+    clearErrors,
+    handleSubmit: submitWrapper,
+  } = useForm<FormData>({
+    defaultValues: getDefaultValues(selectedApplication),
+    mode: 'onChange',
+    reValidateMode: 'onChange',
+  });
+
+  const getLogoId = useCallback(
+    (filesIds: string[]) => files.find((f) => f.id === filesIds[0])?.id,
+    [files],
+  );
+
+  const handleSubmit = (data: FormData) => {
+    const preparedData = getApplicationData(data, type);
+
+    if (
+      isEdit &&
+      selectedApplication?.name &&
+      currentReference &&
+      selectedApplication.id
+    ) {
+      const applicationData: CustomApplicationModel = {
+        ...preparedData,
+        reference: currentReference,
+        id: selectedApplication.id,
+      };
+
+      dispatch(
+        ApplicationActions.update({
+          oldApplicationId: selectedApplication.id,
+          applicationData,
+        }),
+      );
+    } else {
+      dispatch(ApplicationActions.create(preparedData));
+    }
+
+    onClose(true);
+  };
+
+  return (
+    <form
+      onSubmit={submitWrapper(handleSubmit)}
+      className="relative flex max-h-full w-full grow flex-col divide-tertiary overflow-y-auto"
+    >
+      <div className="flex flex-col gap-4 overflow-y-auto px-3 pb-6 md:px-6">
+        <Field
+          {...register('name', validators['name'])}
+          label={t('Name')}
+          mandatory
+          placeholder={t('Type name') || ''}
+          id="name"
+          error={errors.name?.message}
+        />
+
+        <ControlledField
+          label={t('Version')}
+          mandatory
+          placeholder={DEFAULT_VERSION}
+          id="version"
+          error={errors.version?.message}
+          control={control}
+          name="version"
+          rules={validators['version']}
+        />
+
+        <Controller
+          name="iconUrl"
+          control={control}
+          rules={validators['iconUrl']}
+          render={({ field }) => (
+            <LogoSelector
+              label={t('Icon')}
+              mandatory
+              localLogo={field.value?.split('/')?.pop()}
+              onLogoSelect={(v) => field.onChange(getLogoId(v))}
+              onDeleteLocalLogoHandler={() => field.onChange('')}
+              customPlaceholder={t('No icon')}
+              className="max-w-full"
+              fileManagerModalTitle="Select application icon"
+              allowedTypes={['image/svg+xml']}
+              error={errors.iconUrl?.message}
+            />
+          )}
+        />
+
+        <Controller
+          name="topics"
+          control={control}
+          render={({ field }) => (
+            <TopicsSelector
+              label={t('Topics')}
+              values={field.value?.map(topicToOption)}
+              options={topicOptions}
+              placeholder={t('Select one or more topics')}
+              onChange={(v) => field.onChange(v.map((o) => o.value))}
+            />
+          )}
+        />
+
+        <FieldTextArea
+          {...register('description')}
+          label={t('Description')}
+          info={t(
+            'The first paragraph serves as a short description. To create an extended description, enter two line breaks and start the second paragraph.',
+          )}
+          placeholder={t('A description of your application') || ''}
+          rows={3}
+          className="resize-none"
+          id="description"
+        />
+
+        <FieldTextArea
+          {...register('features', validators['features'])}
+          label={t('Features data')}
+          info={t(
+            'Enter key-value pairs for rate_endpoint and/or configuration_endpoint in JSON format.',
+          )}
+          placeholder={`{\n\t"rate_endpoint": "http://application1/rate",\n\t"configuration_endpoint": "http://application1/configuration"\n}`}
+          id="features"
+          rows={4}
+          data-qa="features-data"
+          error={errors.features?.message}
+        />
+
+        <Controller
+          name="inputAttachmentTypes"
+          rules={validators['inputAttachmentTypes']}
+          control={control}
+          render={({ field }) => (
+            <ComboBoxField
+              label={t('Attachment types') || ''}
+              info={t("Input the MIME type and press 'Enter' to add")}
+              initialSelectedItems={field.value}
+              getItemLabel={getItemLabel}
+              getItemValue={getItemLabel}
+              onChangeSelectedItems={field.onChange}
+              placeholder={t('Enter one or more attachment types') || ''}
+              className="input-form input-invalid peer mx-0 flex items-start py-1 pl-0 md:max-w-full"
+              hasDeleteAll
+              hideSuggestions
+              itemHeightClassName="h-[31px]"
+              error={errors.inputAttachmentTypes?.message}
+              {...getAttachmentTypeErrorHandlers(setError, clearErrors)}
+            />
+          )}
+        />
+
+        <ControlledField
+          label={t('Max. attachments number')}
+          placeholder={t('Enter the maximum number of attachments') || ''}
+          id="maxInputAttachments"
+          error={errors.maxInputAttachments?.message}
+          control={control}
+          name="maxInputAttachments"
+          rules={validators['maxInputAttachments']}
+        />
+
+        <Field
+          {...register('completionUrl', validators['completionUrl'])}
+          label={t('Completion URL')}
+          mandatory
+          placeholder={t('Type completion URL') || ''}
+          id="completionUrl"
+          error={errors.completionUrl?.message}
+          data-qa="completion-url"
+        />
+      </div>
+
+      <ApplicationWizardFooter
+        onClose={onClose}
+        selectedApplication={selectedApplication}
+        isEdit={isEdit}
+        isValid={isValid}
+      />
+    </form>
+  );
+};
diff --git a/apps/chat/src/components/Common/ApplicationWizard/QuickAppView.tsx b/apps/chat/src/components/Common/ApplicationWizard/QuickAppView.tsx
new file mode 100644
index 0000000000..6b2f703e08
--- /dev/null
+++ b/apps/chat/src/components/Common/ApplicationWizard/QuickAppView.tsx
@@ -0,0 +1,235 @@
+import Editor from '@monaco-editor/react';
+import React, { useCallback, useMemo } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+
+import { useTranslation } from 'next-i18next';
+
+import { topicToOption } from '@/src/utils/app/application';
+
+import { CustomApplicationModel } from '@/src/types/applications';
+import { Translation } from '@/src/types/translation';
+
+import { ApplicationActions } from '@/src/store/application/application.reducers';
+import { FilesSelectors } from '@/src/store/files/files.reducers';
+import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
+import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
+import { UISelectors } from '@/src/store/ui/ui.reducers';
+
+import { DEFAULT_VERSION } from '@/src/constants/public';
+
+import { TemperatureSlider } from '@/src/components/Chat/Temperature';
+import { ApplicationWizardFooter } from '@/src/components/Common/ApplicationWizard/ApplicationWizardFooter';
+import { DropdownSelector } from '@/src/components/Common/DropdownSelector';
+import { withController } from '@/src/components/Common/Forms/ControlledFormField';
+import { Field } from '@/src/components/Common/Forms/Field';
+import { withErrorMessage } from '@/src/components/Common/Forms/FieldErrorMessage';
+import { FieldTextArea } from '@/src/components/Common/Forms/FieldTextArea';
+import { withLabel } from '@/src/components/Common/Forms/Label';
+import { CustomLogoSelect } from '@/src/components/Settings/CustomLogoSelect';
+
+import {
+  FormData,
+  getApplicationData,
+  getDefaultValues,
+  validators,
+} from './form';
+import { ViewProps } from './view-props';
+
+const LogoSelector = withErrorMessage(withLabel(CustomLogoSelect));
+const TopicsSelector = withLabel(DropdownSelector);
+const ToolsetEditor = withErrorMessage(withLabel(Editor));
+const Slider = withLabel(TemperatureSlider, true);
+const ControlledField = withController(Field);
+
+export const QuickAppView: React.FC<ViewProps> = ({
+  onClose,
+  isEdit,
+  type,
+  currentReference,
+  selectedApplication,
+}) => {
+  const { t } = useTranslation(Translation.Chat);
+
+  const dispatch = useAppDispatch();
+
+  const files = useAppSelector(FilesSelectors.selectFiles);
+  const theme = useAppSelector(UISelectors.selectThemeState);
+  const topics = useAppSelector(SettingsSelectors.selectTopics);
+
+  const topicOptions = useMemo(() => topics.map(topicToOption), [topics]);
+
+  const {
+    register,
+    handleSubmit: submitWrapper,
+    control,
+    formState: { errors, isValid },
+  } = useForm<FormData>({
+    defaultValues: getDefaultValues(selectedApplication),
+    mode: 'onChange',
+    reValidateMode: 'onChange',
+  });
+
+  const getLogoId = useCallback(
+    (filesIds: string[]) => files.find((f) => f.id === filesIds[0])?.id,
+    [files],
+  );
+
+  const handleSubmit = (data: FormData) => {
+    const preparedData = getApplicationData(data, type);
+
+    if (
+      isEdit &&
+      selectedApplication?.name &&
+      currentReference &&
+      selectedApplication.id
+    ) {
+      const applicationData: CustomApplicationModel = {
+        ...preparedData,
+        reference: currentReference,
+        id: selectedApplication.id,
+      };
+
+      dispatch(
+        ApplicationActions.update({
+          oldApplicationId: selectedApplication.id,
+          applicationData,
+        }),
+      );
+    } else {
+      dispatch(ApplicationActions.create(preparedData));
+    }
+
+    onClose(true);
+  };
+
+  return (
+    <form
+      onSubmit={submitWrapper(handleSubmit)}
+      className="relative flex max-h-full w-full grow flex-col divide-tertiary overflow-y-auto"
+    >
+      <div className="flex flex-col gap-4 overflow-y-auto px-3 pb-6 md:px-6">
+        <Field
+          {...register('name', { ...validators['name'] })}
+          label={t('Name')}
+          mandatory
+          placeholder={t('Type name') || ''}
+          id="name"
+          error={errors.name?.message}
+        />
+
+        <ControlledField
+          label={t('Version')}
+          mandatory
+          placeholder={DEFAULT_VERSION}
+          id="version"
+          error={errors.version?.message}
+          control={control}
+          name="version"
+          rules={validators['version']}
+        />
+
+        <Controller
+          name="iconUrl"
+          control={control}
+          rules={validators['iconUrl']}
+          render={({ field }) => (
+            <LogoSelector
+              label={t('Icon')}
+              mandatory
+              localLogo={field.value?.split('/')?.pop()}
+              onLogoSelect={(v) => field.onChange(getLogoId(v))}
+              onDeleteLocalLogoHandler={() => field.onChange('')}
+              customPlaceholder={t('No icon')}
+              className="max-w-full"
+              fileManagerModalTitle="Select application icon"
+              allowedTypes={['image/svg+xml']}
+              error={errors.iconUrl?.message}
+            />
+          )}
+        />
+
+        <Controller
+          name="topics"
+          control={control}
+          render={({ field }) => (
+            <TopicsSelector
+              label={t('Topics')}
+              values={field.value?.map(topicToOption)}
+              options={topicOptions}
+              placeholder={t('Select one or more topics')}
+              onChange={(v) => field.onChange(v.map((o) => o.value))}
+            />
+          )}
+        />
+
+        <FieldTextArea
+          {...register('description')}
+          label={t('Description')}
+          info={t(
+            'The first paragraph serves as a short description. To create an extended description, enter two line breaks and start the second paragraph.',
+          )}
+          placeholder={t('A description of your application') || ''}
+          rows={3}
+          className="resize-none"
+          id="description"
+        />
+
+        <Controller
+          name="toolset"
+          control={control}
+          rules={validators['toolset']}
+          render={({ field }) => (
+            <ToolsetEditor
+              label={t('Configure toolset')}
+              error={errors.toolset?.message}
+              height={200}
+              options={{
+                minimap: {
+                  enabled: false,
+                },
+                padding: {
+                  top: 12,
+                  bottom: 12,
+                },
+                scrollBeyondLastLine: false,
+              }}
+              value={field.value}
+              className="m-0.5 w-full overflow-hidden rounded border border-primary"
+              language="json"
+              onChange={(v) => field.onChange(v ?? '')}
+              theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+            />
+          )}
+        />
+
+        <FieldTextArea
+          {...register('instructions')}
+          label={t('Instructions')}
+          placeholder={t('Instructions of your application') || ''}
+          rows={4}
+          className="resize-none"
+          id="instructions"
+        />
+
+        <Controller
+          name="temperature"
+          control={control}
+          render={({ field }) => (
+            <Slider
+              label={t('Temperature') || ''}
+              temperature={field.value}
+              onChangeTemperature={field.onChange}
+            />
+          )}
+        />
+      </div>
+
+      <ApplicationWizardFooter
+        onClose={onClose}
+        selectedApplication={selectedApplication}
+        isEdit={isEdit}
+        isValid={isValid}
+      />
+    </form>
+  );
+};
diff --git a/apps/chat/src/components/Common/ApplicationWizard/form.ts b/apps/chat/src/components/Common/ApplicationWizard/form.ts
new file mode 100644
index 0000000000..079dca587d
--- /dev/null
+++ b/apps/chat/src/components/Common/ApplicationWizard/form.ts
@@ -0,0 +1,372 @@
+import {
+  Path,
+  RegisterOptions,
+  UseFormClearErrors,
+  UseFormSetError,
+} from 'react-hook-form';
+
+import {
+  createQuickAppConfig,
+  getModelDescription,
+  getQuickAppConfig,
+} from '@/src/utils/app/application';
+import { notAllowedSymbols } from '@/src/utils/app/file';
+import { ApiUtils } from '@/src/utils/server/api';
+
+import {
+  ApplicationType,
+  CustomApplicationModel,
+} from '@/src/types/applications';
+import { EntityType } from '@/src/types/common';
+import { DialAIEntityFeatures } from '@/src/types/models';
+import { QuickAppConfig } from '@/src/types/quick-apps';
+
+import {
+  FEATURES_ENDPOINTS,
+  FEATURES_ENDPOINTS_NAMES,
+} from '@/src/constants/applications';
+import { DEFAULT_TEMPERATURE } from '@/src/constants/default-ui-settings';
+import { MIME_FORMAT_REGEX } from '@/src/constants/file';
+
+import { DynamicField } from '@/src/components/Common/Forms/DynamicFormFields';
+
+import isObject from 'lodash-es/isObject';
+
+export interface FormData {
+  name: string;
+  description: string;
+  version: string;
+  iconUrl: string;
+  topics: string[];
+  inputAttachmentTypes: string[];
+  maxInputAttachments: string;
+  completionUrl: string;
+  features: string | null;
+  // QUICK APP
+  instructions: string;
+  temperature: number;
+  toolset: string;
+  // DEPLOYABLE APP
+  sources: string;
+  endpoints: DynamicField[];
+  env: DynamicField[];
+}
+
+type Options<T extends Path<FormData>> = Omit<
+  RegisterOptions<FormData, T>,
+  'disabled' | 'valueAsNumber' | 'valueAsDate'
+>;
+
+type Validators = {
+  [K in keyof FormData]?: Options<K>;
+};
+
+// VALIDATORS
+
+export const validators: Validators = {
+  name: {
+    required: 'This field is required',
+    validate: (v) => {
+      const reg = new RegExp(`^[^${notAllowedSymbols}]{2,160}$`);
+
+      return (
+        reg.test(v) ||
+        'Name should be 2 to 160 characters long and should not contain special characters'
+      );
+    },
+  },
+  version: {
+    required: 'This field is required',
+    validate: (v) => {
+      const reg = /^[0-9]+\.[0-9]+\.[0-9]+$/;
+
+      return (
+        reg.test(v) ||
+        'Version should be in x.y.z format and contain only numbers and dots.'
+      );
+    },
+    setValueAs: (v) => {
+      return (v as string).replace(/[^0-9.]/g, '');
+    },
+  },
+  iconUrl: {
+    required: 'Icon is required',
+  },
+  features: {
+    validate: (data) => {
+      if (!data?.trim()) return true;
+
+      try {
+        const object = JSON.parse(data);
+
+        if (typeof object === 'object' && !!object && !Array.isArray(object)) {
+          for (const [key, value] of Object.entries(object)) {
+            if (!key.trim()) {
+              return 'Keys should not be empty';
+            }
+
+            const valueType = typeof value;
+            if (
+              !(['boolean', 'number'].includes(valueType) || value === null)
+            ) {
+              if (typeof value === 'string' && !value.trim()) {
+                return 'String values should not be empty';
+              }
+
+              if (!['boolean', 'number', 'string'].includes(valueType)) {
+                return 'Values should be a string, number, boolean or null';
+              }
+            }
+          }
+        } else {
+          return 'Data is not a valid JSON object';
+        }
+
+        return true;
+      } catch (error) {
+        return 'Invalid JSON string';
+      }
+    },
+  },
+  inputAttachmentTypes: {
+    validate: (types) => {
+      return (
+        types.every((v) => MIME_FORMAT_REGEX.test(v)) ||
+        'Please match the MIME format'
+      );
+    },
+  },
+  maxInputAttachments: {
+    validate: (v) => {
+      const reg = /^[0-9]*$/;
+
+      return reg.test(String(v)) || 'Max attachments must be a number';
+    },
+    setValueAs: (v) => {
+      return v.replace(/[^0-9]/g, '');
+    },
+  },
+  completionUrl: {
+    required: 'Completion URL is required',
+    validate: (value) => {
+      try {
+        if (value.trim() !== value) {
+          return 'Completion URL cannot start or end with spaces' || '';
+        }
+        if (!value.startsWith('http://') && !value.startsWith('https://')) {
+          return 'Completion URL must start with http:// or https://' || '';
+        }
+        new URL(value);
+        const bannedEndings = ['.', '//'];
+        const endsWithBannedEnding = bannedEndings.some((ending) =>
+          value.endsWith(ending),
+        );
+        if (endsWithBannedEnding) {
+          return 'Completion URL cannot end with . or //' || '';
+        }
+        return true;
+      } catch {
+        return 'Completion URL should be a valid URL.' || '';
+      }
+    },
+  },
+  toolset: {
+    required: 'Toolset config is required',
+    validate: (v) => {
+      try {
+        JSON.parse(v);
+      } catch {
+        return 'Config is not a valid JSON object';
+      }
+      return true;
+    },
+  },
+  sources: {
+    required: 'Source folder is required',
+  },
+};
+
+const getMappingsKeyOptions = (name: 'endpoints' | 'env') => ({
+  validate: (v: string, data: FormData) => {
+    const reg = /^[a-zA-Z0-9_-]+$/;
+
+    if (!v.trim()) return 'Key is required';
+    if (!reg.test(v)) return 'Enter only valid symbols';
+    if (data[name].filter(({ label }) => label === v.trim()).length > 1) {
+      return 'Key must be unique';
+    }
+
+    return true;
+  },
+});
+
+// TODO: implement better way to write types for nested array fields
+export const endpointsKeyValidator = getMappingsKeyOptions(
+  'endpoints',
+) as unknown as RegisterOptions<FormData, Path<FormData>>;
+export const envKeysValidator = getMappingsKeyOptions(
+  'env',
+) as unknown as RegisterOptions<FormData, Path<FormData>>;
+export const endpointsValueValidator = {
+  validate: (v: string) => {
+    const reg = /^[a-zA-Z0-9/_-]+$/;
+
+    if (!v.trim()) return 'Endpoint is required';
+    if (!v.startsWith('/')) return "Endpoint should start with '/'";
+    if (!reg.test(v))
+      return "Endpoint should contain only letters, numbers, '-', '_' and '/'";
+    if (v.length > 255)
+      return 'Endpoint should be no longer than 255 characters';
+
+    return true;
+  },
+} as RegisterOptions<FormData, Path<FormData>>;
+export const envValueValidator = {
+  required: 'Value is required',
+} as RegisterOptions<FormData, Path<FormData>>;
+
+export const getAttachmentTypeErrorHandlers = (
+  setError: UseFormSetError<FormData>,
+  clearErrors: UseFormClearErrors<FormData>,
+) => {
+  const validationRegExp = new RegExp(
+    '^([a-zA-Z0-9!*\\-.+]+|\\*)\\/([a-zA-Z0-9!*\\-.+]+|\\*)$',
+  );
+  const handleError = () => {
+    setError('inputAttachmentTypes', {
+      type: 'manual',
+      message: 'Please match the MIME format',
+    });
+  };
+  const handleClearError = () => {
+    clearErrors('inputAttachmentTypes');
+  };
+
+  return { validationRegExp, handleError, handleClearError };
+};
+
+// DATA TRANSFORMERS
+
+const safeStringify = (
+  featureData: DialAIEntityFeatures | Record<string, string> | undefined,
+) => {
+  if (
+    !featureData ||
+    (isObject(featureData) && !Object.keys(featureData).length)
+  ) {
+    return '';
+  }
+
+  return JSON.stringify(featureData, null, 2);
+};
+
+const getToolsetStr = (config: QuickAppConfig) => {
+  try {
+    return JSON.stringify(config.web_api_toolset, null, 2);
+  } catch {
+    return '';
+  }
+};
+
+export const getDefaultValues = (app?: CustomApplicationModel): FormData => ({
+  name: app?.name ?? '',
+  description: app ? getModelDescription(app) : '',
+  version: app?.version ?? '',
+  iconUrl: app?.iconUrl ?? '',
+  topics: app?.topics ?? [],
+  inputAttachmentTypes: app?.inputAttachmentTypes ?? [],
+  maxInputAttachments: String(app?.maxInputAttachments ?? ''),
+  completionUrl: app?.completionUrl ?? '',
+  features: safeStringify(app?.features),
+  instructions: app ? getQuickAppConfig(app).config.instructions : '',
+  temperature: app
+    ? getQuickAppConfig(app).config.temperature
+    : DEFAULT_TEMPERATURE,
+  toolset: app ? getToolsetStr(getQuickAppConfig(app).config) : '',
+  sources: app?.function?.sourceFolder ?? '',
+  endpoints: app?.function?.mapping
+    ? Object.entries(app.function.mapping).map(([key, value]) => ({
+        label: key,
+        visibleName: FEATURES_ENDPOINTS_NAMES[key],
+        value,
+        editableKey:
+          !FEATURES_ENDPOINTS[key as keyof typeof FEATURES_ENDPOINTS],
+        static: key === FEATURES_ENDPOINTS.completion,
+      }))
+    : [
+        {
+          label: FEATURES_ENDPOINTS.completion,
+          visibleName: FEATURES_ENDPOINTS_NAMES[FEATURES_ENDPOINTS.completion],
+          value: '',
+          editableKey: false,
+          static: true,
+        },
+      ],
+  env: app?.function?.env
+    ? Object.entries(app.function.env).map(([label, value]) => ({
+        label,
+        value,
+        editableKey: true,
+      }))
+    : [],
+});
+
+export const getApplicationData = (
+  formData: FormData,
+  type: ApplicationType,
+): Omit<CustomApplicationModel, 'id' | 'reference'> => {
+  const preparedData: Omit<CustomApplicationModel, 'id' | 'reference'> = {
+    name: formData.name.trim(),
+    type: EntityType.Application,
+    isDefault: false,
+    folderId: '',
+    topics: formData.topics,
+    description: formData.description.trim(),
+    completionUrl: formData.completionUrl,
+    version: formData.version,
+    iconUrl: formData.iconUrl,
+    inputAttachmentTypes: formData.inputAttachmentTypes,
+    maxInputAttachments: formData.maxInputAttachments
+      ? Number(formData.maxInputAttachments)
+      : undefined,
+  };
+  if (type === ApplicationType.CUSTOM_APP) {
+    preparedData.features = formData.features
+      ? JSON.parse(formData.features)
+      : null;
+  }
+  if (type === ApplicationType.QUICK_APP) {
+    preparedData.description = createQuickAppConfig({
+      description: formData.description ?? '',
+      config: formData.toolset,
+      instructions: formData.instructions ?? '',
+      temperature: formData.temperature,
+      name: formData.name.trim(),
+    });
+    preparedData.completionUrl = `http://quickapps.dial-development.svc.cluster.local/openai/deployments/${ApiUtils.safeEncodeURIComponent(formData.name.trim())}/chat/completions`;
+  }
+
+  if (type === ApplicationType.CODE_APP) {
+    preparedData.function = {
+      sourceFolder: formData.sources,
+      mapping: formData.endpoints.reduce(
+        (acc, option) => ({
+          ...acc,
+          [option.label]: option.value,
+        }),
+        {},
+      ),
+      env: formData.env.length
+        ? formData.env.reduce(
+            (acc, option) => ({
+              ...acc,
+              [option.label]: option.value,
+            }),
+            {},
+          )
+        : undefined,
+    };
+  }
+
+  return preparedData;
+};
diff --git a/apps/chat/src/components/Common/ApplicationWizard/view-props.ts b/apps/chat/src/components/Common/ApplicationWizard/view-props.ts
new file mode 100644
index 0000000000..8dc090d103
--- /dev/null
+++ b/apps/chat/src/components/Common/ApplicationWizard/view-props.ts
@@ -0,0 +1,13 @@
+import {
+  ApplicationType,
+  CustomApplicationModel,
+} from '@/src/types/applications';
+
+export interface ViewProps {
+  isOpen: boolean;
+  onClose: (result: boolean) => void;
+  type: ApplicationType;
+  isEdit?: boolean;
+  currentReference?: string;
+  selectedApplication?: CustomApplicationModel;
+}
diff --git a/apps/chat/src/components/Common/DropdownSelector.tsx b/apps/chat/src/components/Common/DropdownSelector.tsx
index 23f1bd2697..381cbf0e2f 100644
--- a/apps/chat/src/components/Common/DropdownSelector.tsx
+++ b/apps/chat/src/components/Common/DropdownSelector.tsx
@@ -139,7 +139,7 @@ export function DropdownSelector({
           paddingLeft: state.hasValue ? 0 : '8px',
           display: 'flex',
           cursor: 'text',
-          backgroundColor: 'var(--bg-layer-3)',
+          backgroundColor: 'bg-transparent',
           border: '1px solid var(--stroke-primary)',
           boxShadow: 'none',
           transition: 'all 0',
diff --git a/apps/chat/src/components/Common/Forms/ControlledFormField.tsx b/apps/chat/src/components/Common/Forms/ControlledFormField.tsx
new file mode 100644
index 0000000000..58c8e4ed14
--- /dev/null
+++ b/apps/chat/src/components/Common/Forms/ControlledFormField.tsx
@@ -0,0 +1,90 @@
+import {
+  ChangeEvent,
+  ComponentType,
+  ReactElement,
+  useCallback,
+  useMemo,
+} from 'react';
+import {
+  Control,
+  Controller,
+  ControllerFieldState,
+  ControllerRenderProps,
+  FieldValues,
+  Path,
+  RegisterOptions,
+  UseFormStateReturn,
+} from 'react-hook-form';
+
+import omit from 'lodash-es/omit';
+
+interface TRenderFuncProps<T extends FieldValues, K extends Path<T>> {
+  field: ControllerRenderProps<T, K>;
+  fieldState: ControllerFieldState;
+  formState: UseFormStateReturn<T>;
+}
+
+interface ControlledFormFieldProps<T extends FieldValues, K extends Path<T>> {
+  control: Control<T>;
+  name: K;
+  children: (p: TRenderFuncProps<T, K>) => ReactElement;
+  rules?: Omit<
+    RegisterOptions<T, K>,
+    'disabled' | 'valueAsNumber' | 'valueAsDate'
+  >;
+}
+
+export const ControlledFormField = <T extends FieldValues, K extends Path<T>>({
+  control,
+  name,
+  children,
+  rules,
+}: ControlledFormFieldProps<T, K>) => {
+  const newRules = useMemo(() => omit(rules ?? {}, 'setValueAs'), [rules]);
+
+  const renderFn = useCallback(
+    (cbProps: TRenderFuncProps<T, K>) => {
+      const transform = (e: ChangeEvent<HTMLInputElement>) => {
+        const { value } = e.target;
+
+        cbProps.field.onChange(rules?.setValueAs?.(value));
+      };
+
+      const newField = {
+        ...cbProps.field,
+        onChange: rules?.setValueAs ? transform : cbProps.field.onChange,
+      };
+
+      return children({ ...cbProps, field: newField });
+    },
+    [rules, children],
+  );
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={renderFn}
+      rules={newRules}
+    />
+  );
+};
+
+export function withController<T extends object>(Component: ComponentType<T>) {
+  function ControllerWrapper<F extends FieldValues, K extends Path<F>>({
+    control,
+    name,
+    rules,
+    ...props
+  }: T & Omit<ControlledFormFieldProps<F, K>, 'children'>) {
+    return (
+      <ControlledFormField control={control} name={name} rules={rules}>
+        {({ field }) => <Component {...(props as T)} {...field} />}
+      </ControlledFormField>
+    );
+  }
+
+  ControllerWrapper.displayName = 'ControllerWrapper';
+
+  return ControllerWrapper;
+}
diff --git a/apps/chat/src/components/Common/Forms/DynamicFormFields.tsx b/apps/chat/src/components/Common/Forms/DynamicFormFields.tsx
new file mode 100644
index 0000000000..3cdfb02552
--- /dev/null
+++ b/apps/chat/src/components/Common/Forms/DynamicFormFields.tsx
@@ -0,0 +1,187 @@
+import { IconPlus, IconTrash } from '@tabler/icons-react';
+import { useMemo } from 'react';
+import {
+  Control,
+  FieldArray,
+  FieldArrayPath,
+  FieldError,
+  FieldErrorsImpl,
+  FieldValues,
+  Merge,
+  Path,
+  RegisterOptions,
+  UseFormRegister,
+  useFieldArray,
+} from 'react-hook-form';
+
+import { useTranslation } from 'next-i18next';
+
+import classNames from 'classnames';
+
+import { SelectOption } from '@/src/types/common';
+import { Translation } from '@/src/types/translation';
+
+import { Menu, MenuItem } from '@/src/components/Common/DropdownMenu';
+import { FieldErrorMessage } from '@/src/components/Common/Forms/FieldErrorMessage';
+
+export interface DynamicField extends SelectOption<string, string> {
+  editableKey?: boolean;
+  static?: boolean;
+  visibleName?: string;
+}
+
+const mapField = (field: unknown): DynamicField => field as DynamicField;
+
+interface DynamicFieldsProps<
+  T extends FieldValues,
+  K extends FieldArrayPath<T>,
+> {
+  creatable?: boolean;
+  options?: SelectOption<string, string>[];
+  addLabel?: string;
+  keyLabel?: string;
+  valueLabel?: string;
+  errors?: Merge<
+    FieldError,
+    (Merge<FieldError, FieldErrorsImpl<DynamicField>> | undefined)[]
+  >;
+  keyOptions?: RegisterOptions<T, Path<T>>;
+  valueOptions?: RegisterOptions<T, Path<T>>;
+
+  control: Control<T>;
+  register: UseFormRegister<T>;
+  name: K;
+}
+
+export const DynamicFormFields = <
+  T extends FieldValues,
+  K extends FieldArrayPath<T>,
+>({
+  options,
+  errors,
+  addLabel,
+  control,
+  register,
+  name,
+  creatable,
+  keyOptions,
+  valueOptions,
+  keyLabel = 'Name',
+  valueLabel = 'Value',
+}: DynamicFieldsProps<T, K>) => {
+  const { t } = useTranslation(Translation.Chat);
+
+  const { fields, append, remove } = useFieldArray<T, typeof name, 'id'>({
+    control,
+    name,
+  });
+
+  const handleAdd = (option?: SelectOption<string, string>) => {
+    append({
+      label: option?.value ?? '',
+      value: '',
+      editableKey: !option,
+      visibleName: option?.label,
+    } as FieldArray<T, K>);
+  };
+
+  const filteredOptions = useMemo(() => {
+    const selectedOptions = fields.map((f) => mapField(f).label.toLowerCase());
+
+    return (options ?? []).filter(
+      ({ value }) => !selectedOptions.includes(value.toLowerCase()),
+    );
+  }, [options, fields]);
+
+  return (
+    <div className="flex flex-col gap-2">
+      {fields.map((field, i) => (
+        <div
+          key={field.id}
+          className="flex gap-3 rounded border border-tertiary bg-layer-3 px-3 py-2"
+        >
+          {!mapField(field).editableKey ? (
+            <div className="w-[120px] px-2 py-1 text-sm text-primary">
+              {mapField(field).visibleName ?? mapField(field).label}
+            </div>
+          ) : (
+            <div className="w-[120px]">
+              <input
+                {...register(`${name}.${i}.label` as Path<T>, keyOptions)}
+                className={classNames(
+                  'w-full border-b border-primary bg-transparent px-2 py-1 text-sm text-primary placeholder:text-secondary hover:border-accent-primary focus:border-accent-primary focus:outline-none',
+                  errors?.[i]?.label && '!border-error',
+                )}
+                placeholder={`Enter ${keyLabel?.toLowerCase()}`}
+              />
+              <FieldErrorMessage
+                className="!mb-0"
+                error={errors?.[i]?.label?.message}
+              />
+            </div>
+          )}
+
+          <div className="grow">
+            <input
+              {...register(`${name}.${i}.value` as Path<T>, valueOptions)}
+              className={classNames(
+                'w-full border-b border-primary bg-transparent px-2 py-1 text-sm text-primary placeholder:text-secondary hover:border-accent-primary focus:border-accent-primary focus:outline-none',
+                errors?.[i]?.value && '!border-error',
+              )}
+              placeholder={`Enter ${valueLabel?.toLowerCase()}`}
+            />
+            <FieldErrorMessage
+              className="!mb-0"
+              error={errors?.[i]?.value?.message}
+            />
+          </div>
+
+          <button
+            type="button"
+            disabled={mapField(field).static}
+            className={classNames(
+              'flex items-start rounded border border-transparent pt-1 text-secondary outline-none hover:text-error',
+              mapField(field).static && 'invisible',
+            )}
+            onClick={() => remove(i)}
+          >
+            <IconTrash size={18} />
+          </button>
+        </div>
+      ))}
+
+      {(filteredOptions.length || creatable) && (
+        <Menu
+          className="max-w-[150px]"
+          trigger={
+            <button
+              type="button"
+              className="flex items-center gap-2 rounded text-accent-primary"
+              onClick={
+                !filteredOptions.length && creatable
+                  ? () => handleAdd()
+                  : undefined
+              }
+            >
+              <IconPlus size={18} />
+
+              {t(addLabel ?? 'Add')}
+            </button>
+          }
+        >
+          <div className="w-full bg-layer-3">
+            {filteredOptions.map((option) => (
+              <MenuItem
+                key={option.value}
+                className="max-w-full text-xs hover:bg-accent-primary-alpha"
+                item={option.label}
+                value={option.value}
+                onClick={() => handleAdd(option)}
+              />
+            ))}
+          </div>
+        </Menu>
+      )}
+    </div>
+  );
+};
diff --git a/apps/chat/src/components/Common/Forms/Field.tsx b/apps/chat/src/components/Common/Forms/Field.tsx
new file mode 100644
index 0000000000..83ba325a27
--- /dev/null
+++ b/apps/chat/src/components/Common/Forms/Field.tsx
@@ -0,0 +1,28 @@
+import { InputHTMLAttributes, forwardRef } from 'react';
+
+import classNames from 'classnames';
+
+import { withErrorMessage } from '@/src/components/Common/Forms/FieldErrorMessage';
+import { withLabel } from '@/src/components/Common/Forms/Label';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  error?: boolean | string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ error, className, ...rest }, ref) => (
+    <input
+      {...rest}
+      ref={ref}
+      className={classNames(
+        'input-form input-invalid peer mx-0',
+        error && 'border-error hover:border-error focus:border-error',
+        className,
+      )}
+    />
+  ),
+);
+
+Input.displayName = 'Input';
+
+export const Field = withErrorMessage(withLabel(Input));
diff --git a/apps/chat/src/components/Common/Forms/FieldError.tsx b/apps/chat/src/components/Common/Forms/FieldError.tsx
deleted file mode 100644
index f01ab81dc0..0000000000
--- a/apps/chat/src/components/Common/Forms/FieldError.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { FieldError } from 'react-hook-form';
-
-import { useTranslation } from 'next-i18next';
-
-import classNames from 'classnames';
-
-import { Translation } from '@/src/types/translation';
-
-interface Props {
-  error?: FieldError;
-  className?: string;
-}
-
-export const FieldErrorMessage = ({ error, className }: Props) => {
-  const { t } = useTranslation(Translation.Settings);
-
-  if (!error?.message) {
-    return null;
-  }
-
-  return (
-    <div className={classNames('mb-4 text-xxs text-error', className)}>
-      {t(error.message)}
-    </div>
-  );
-};
diff --git a/apps/chat/src/components/Common/Forms/FieldErrorMessage.tsx b/apps/chat/src/components/Common/Forms/FieldErrorMessage.tsx
new file mode 100644
index 0000000000..5f0b050772
--- /dev/null
+++ b/apps/chat/src/components/Common/Forms/FieldErrorMessage.tsx
@@ -0,0 +1,44 @@
+import { ComponentType, forwardRef } from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+import classNames from 'classnames';
+
+import { Translation } from '@/src/types/translation';
+
+interface Props {
+  error?: string;
+  className?: string;
+}
+
+export const FieldErrorMessage = ({ error, className }: Props) => {
+  const { t } = useTranslation(Translation.Settings);
+
+  if (!error) {
+    return null;
+  }
+
+  return (
+    <div className={classNames('mb-4 text-xxs text-error', className)}>
+      {t(error)}
+    </div>
+  );
+};
+
+export function withErrorMessage<T extends object, R>(
+  Component: ComponentType<T>,
+) {
+  const ErrorMessageWrapper = forwardRef<R, Omit<Props, 'className'> & T>(
+    (props, ref) => (
+      <div>
+        <Component {...props} ref={ref} />
+
+        <FieldErrorMessage error={props.error} className="mt-1" />
+      </div>
+    ),
+  );
+
+  ErrorMessageWrapper.displayName = 'ErrorMessageWrapper';
+
+  return ErrorMessageWrapper;
+}
diff --git a/apps/chat/src/components/Common/Forms/FieldTextArea.tsx b/apps/chat/src/components/Common/Forms/FieldTextArea.tsx
new file mode 100644
index 0000000000..e6e9445424
--- /dev/null
+++ b/apps/chat/src/components/Common/Forms/FieldTextArea.tsx
@@ -0,0 +1,28 @@
+import { TextareaHTMLAttributes, forwardRef } from 'react';
+
+import classnames from 'classnames';
+
+import { withErrorMessage } from '@/src/components/Common/Forms/FieldErrorMessage';
+import { withLabel } from '@/src/components/Common/Forms/Label';
+
+interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  error?: boolean | string;
+}
+
+const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  ({ error, className, ...rest }, ref) => (
+    <textarea
+      {...rest}
+      ref={ref}
+      className={classnames(
+        'input-form input-invalid peer mx-0',
+        error && 'border-error hover:border-error focus:border-error',
+        className,
+      )}
+    />
+  ),
+);
+
+TextArea.displayName = 'TextArea';
+
+export const FieldTextArea = withErrorMessage(withLabel(TextArea));
diff --git a/apps/chat/src/components/Common/Forms/Label.tsx b/apps/chat/src/components/Common/Forms/Label.tsx
new file mode 100644
index 0000000000..f1c02327bc
--- /dev/null
+++ b/apps/chat/src/components/Common/Forms/Label.tsx
@@ -0,0 +1,71 @@
+import { IconHelp } from '@tabler/icons-react';
+import { ComponentType, FC, forwardRef } from 'react';
+
+import { DefaultTFuncReturn } from 'i18next';
+
+import Tooltip from '@/src/components/Common/Tooltip';
+
+import omit from 'lodash-es/omit';
+
+interface LabelProps {
+  children?: string | DefaultTFuncReturn;
+  htmlFor?: string;
+  mandatory?: boolean;
+  info?: string | DefaultTFuncReturn;
+}
+
+export const Label: FC<LabelProps> = ({
+  children,
+  htmlFor,
+  mandatory,
+  info,
+}) => (
+  <label
+    className="mb-1 flex items-center gap-1 text-xs text-secondary"
+    htmlFor={htmlFor}
+  >
+    {children}
+    {mandatory && <span className="ml-1 inline text-accent-primary">*</span>}
+    {info && (
+      <Tooltip
+        tooltip={info}
+        triggerClassName="flex shrink-0 text-secondary hover:text-accent-primary"
+        contentClassName="max-w-[220px]"
+        placement="top-end"
+      >
+        <IconHelp size={18} />
+      </Tooltip>
+    )}
+  </label>
+);
+
+interface WithLabelProps {
+  id?: string;
+  label?: LabelProps['children'];
+  mandatory?: boolean;
+  info?: LabelProps['info'];
+}
+
+export function withLabel<T extends object, R>(
+  Component: ComponentType<T>,
+  excludeLabel?: boolean,
+) {
+  const LabelWrapper = forwardRef<R, WithLabelProps & T>(
+    ({ info, mandatory, ...props }, ref) => (
+      <div className="flex flex-col">
+        <Label htmlFor={props?.id} mandatory={mandatory} info={info}>
+          {props.label}
+        </Label>
+
+        <Component
+          {...(omit(props, excludeLabel ? ['label'] : []) as T)}
+          ref={ref}
+        />
+      </div>
+    ),
+  );
+
+  LabelWrapper.displayName = 'LabelWrapper';
+
+  return LabelWrapper;
+}
diff --git a/apps/chat/src/components/Common/MultipleComboBox.tsx b/apps/chat/src/components/Common/MultipleComboBox.tsx
index 0ae456cf3c..31c8819d84 100644
--- a/apps/chat/src/components/Common/MultipleComboBox.tsx
+++ b/apps/chat/src/components/Common/MultipleComboBox.tsx
@@ -60,7 +60,6 @@ function getFilteredItems<T>({
 interface Props<T> {
   items?: T[];
   initialSelectedItems?: T[];
-  label?: string;
   placeholder?: string;
   notFoundPlaceholder?: string;
   itemRow?: FC<{ item: T }>;
@@ -81,7 +80,6 @@ interface Props<T> {
 export function MultipleComboBox<T>({
   items,
   initialSelectedItems,
-  label,
   placeholder,
   notFoundPlaceholder,
   itemRow,
@@ -152,7 +150,6 @@ export function MultipleComboBox<T>({
 
   const {
     isOpen,
-    getLabelProps,
     getMenuProps,
     getInputProps,
     highlightedIndex,
@@ -236,11 +233,6 @@ export function MultipleComboBox<T>({
       data-qa="multiple-combobox"
     >
       <div className="flex w-full flex-col gap-1">
-        {label && (
-          <label htmlFor="option-input" {...getLabelProps()}>
-            {label}
-          </label>
-        )}
         <div
           ref={refs.reference as RefObject<HTMLDivElement>}
           onClick={() => {
@@ -249,7 +241,7 @@ export function MultipleComboBox<T>({
             }
             inputRef.current.focus();
           }}
-          className="relative flex min-h-[31px] w-full flex-wrap gap-1 bg-layer-3 p-1"
+          className="relative flex min-h-[31px] w-full flex-wrap gap-1 bg-transparent p-1"
         >
           {selectedItems &&
             selectedItems.map((selectedItemForRender, index) => {
diff --git a/apps/chat/src/components/Common/QuickAppDialog.tsx b/apps/chat/src/components/Common/QuickAppDialog.tsx
index 636777c8f4..e69de29bb2 100644
--- a/apps/chat/src/components/Common/QuickAppDialog.tsx
+++ b/apps/chat/src/components/Common/QuickAppDialog.tsx
@@ -1,650 +0,0 @@
-import Editor from '@monaco-editor/react';
-import {
-  IconHelp,
-  IconTrashX,
-  IconWorldShare,
-  IconX,
-} from '@tabler/icons-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-import { useTranslation } from 'next-i18next';
-
-import classNames from 'classnames';
-
-import {
-  createQuickAppConfig,
-  getModelDescription,
-  getQuickAppConfig,
-} from '@/src/utils/app/application';
-import { notAllowedSymbols } from '@/src/utils/app/file';
-import { getFolderIdFromEntityId } from '@/src/utils/app/folders';
-import { getTopicColors } from '@/src/utils/app/style-helpers';
-import { ApiUtils } from '@/src/utils/server/api';
-
-import { CustomApplicationModel } from '@/src/types/applications';
-import { DropdownSelectorOption, EntityType } from '@/src/types/common';
-import { ModalState } from '@/src/types/modal';
-import { QuickAppConfig } from '@/src/types/quick-apps';
-import { SharingType } from '@/src/types/share';
-import { Translation } from '@/src/types/translation';
-
-import {
-  ApplicationActions,
-  ApplicationSelectors,
-} from '@/src/store/application/application.reducers';
-import { FilesSelectors } from '@/src/store/files/files.reducers';
-import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
-import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
-import { UISelectors } from '@/src/store/ui/ui.reducers';
-
-import { IMAGE_TYPES } from '@/src/constants/chat';
-import { DEFAULT_TEMPERATURE } from '@/src/constants/default-ui-settings';
-import { DEFAULT_VERSION } from '@/src/constants/public';
-
-import { TemperatureSlider } from '@/src/components/Chat/Temperature';
-import { DropdownSelector } from '@/src/components/Common/DropdownSelector';
-import Modal from '@/src/components/Common/Modal';
-
-import { PublishModal } from '../Chat/Publish/PublishWizard';
-import { CustomLogoSelect } from '../Settings/CustomLogoSelect';
-import { ConfirmDialog } from './ConfirmDialog';
-import { Spinner } from './Spinner';
-import Tooltip from './Tooltip';
-
-import { PublishActions } from '@epam/ai-dial-shared';
-
-const getToolsetStr = (config: QuickAppConfig) => {
-  try {
-    return JSON.stringify(config.web_api_toolset, null, 2);
-  } catch {
-    return '';
-  }
-};
-
-interface FormData {
-  name: string;
-  description: string;
-  instructions: string;
-  version: string;
-  iconUrl: string;
-  topics: string[];
-  features: string | null;
-}
-
-interface Props {
-  isOpen: boolean;
-  onClose: (result: boolean) => void;
-  isEdit?: boolean;
-  currentReference?: string;
-  selectedApplication?: CustomApplicationModel;
-}
-
-const QuickAppDialogView: React.FC<Props> = ({
-  onClose,
-  isEdit,
-  currentReference,
-  selectedApplication,
-}) => {
-  const {
-    register,
-    handleSubmit,
-    setValue,
-    trigger,
-    control,
-    formState: { errors, isValid },
-  } = useForm<FormData>({
-    mode: 'onChange',
-    reValidateMode: 'onChange',
-  });
-  const { t } = useTranslation(Translation.Chat);
-
-  const dispatch = useAppDispatch();
-
-  const files = useAppSelector(FilesSelectors.selectFiles);
-  const allTopics = useAppSelector(SettingsSelectors.selectTopics);
-  const theme = useAppSelector(UISelectors.selectThemeState);
-
-  const [deleteLogo, setDeleteLogo] = useState(false);
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const [isPublishing, setIsPublishing] = useState(false);
-
-  const [localLogoFile, setLocalLogoFile] = useState<string | undefined>();
-  const [configInput, setConfigInput] = useState(
-    selectedApplication
-      ? getToolsetStr(getQuickAppConfig(selectedApplication).config)
-      : '',
-  );
-  const [temperature, setTemperature] = useState(
-    selectedApplication
-      ? getQuickAppConfig(selectedApplication).config.temperature
-      : DEFAULT_TEMPERATURE,
-  );
-  const [topics, setTopics] = useState<string[]>([]);
-
-  const inputClassName = 'input-form input-invalid peer mx-0';
-
-  const topicOptions = useMemo(
-    () =>
-      allTopics.map((value) => ({
-        value,
-        label: value,
-        ...getTopicColors(value),
-      })),
-    [allTopics],
-  );
-
-  const selectedOptions = useMemo(
-    () => topicOptions.filter((op) => topics.includes(op.value)),
-    [topicOptions, topics],
-  );
-
-  const applicationToPublish = useMemo(() => {
-    if (!selectedApplication) {
-      return undefined;
-    }
-
-    return {
-      name: selectedApplication.name,
-      id: ApiUtils.decodeApiUrl(selectedApplication.id),
-      folderId: getFolderIdFromEntityId(selectedApplication.name),
-      iconUrl: selectedApplication.iconUrl,
-    };
-  }, [selectedApplication]);
-
-  const onLogoSelect = useCallback(
-    (filesIds: string[]) => {
-      const selectedFileId = filesIds[0];
-      const newFile = files.find((file) => file.id === selectedFileId);
-
-      if (newFile) {
-        setDeleteLogo(false);
-        setLocalLogoFile(newFile.id);
-        setValue('iconUrl', newFile.id);
-        trigger('iconUrl');
-      } else {
-        setLocalLogoFile(undefined);
-        setValue('iconUrl', '');
-        trigger('iconUrl');
-      }
-    },
-    [files, setValue, trigger],
-  );
-
-  const onDeleteLocalLogoHandler = () => {
-    setLocalLogoFile(undefined);
-    setDeleteLogo(true);
-    setValue('iconUrl', '');
-    trigger('iconUrl');
-  };
-
-  const handlePublish = (e: React.FormEvent) => {
-    e.preventDefault();
-    setIsPublishing(true);
-  };
-
-  const handlePublishClose = () => {
-    setIsPublishing(false);
-  };
-
-  const handleDelete = useCallback(() => {
-    if (selectedApplication) {
-      dispatch(ApplicationActions.delete(selectedApplication));
-    }
-
-    onClose(false);
-  }, [dispatch, onClose, selectedApplication]);
-
-  const handleConfirmDialogOpen = useCallback(
-    (e: React.FormEvent) => {
-      e.preventDefault();
-      setIsDeleteModalOpen(true);
-    },
-    [setIsDeleteModalOpen],
-  );
-
-  const handleConfirmDialogClose = useCallback(
-    (result: boolean) => {
-      setIsDeleteModalOpen(false);
-
-      if (result) {
-        handleDelete();
-      }
-    },
-    [handleDelete, setIsDeleteModalOpen],
-  );
-
-  const handleChangeTopics = useCallback(
-    (option: readonly DropdownSelectorOption[]) => {
-      const values = option.map((option) => option.value);
-      setTopics(values);
-      setValue('topics', values);
-    },
-    [setValue],
-  );
-
-  useEffect(() => {
-    if (selectedApplication) {
-      if (selectedApplication.iconUrl) {
-        setLocalLogoFile(selectedApplication.iconUrl);
-        setValue('iconUrl', selectedApplication.iconUrl);
-      }
-      setTopics(selectedApplication.topics ?? []);
-      setValue('topics', selectedApplication.topics ?? []);
-    } else {
-      setLocalLogoFile(undefined);
-      setValue('iconUrl', '');
-      setTopics([]);
-      setValue('topics', []);
-    }
-  }, [isEdit, selectedApplication, setValue]);
-
-  const onSubmit = (data: FormData) => {
-    const preparedData = {
-      ...data,
-      maxInputAttachments: selectedApplication?.maxInputAttachments,
-      name: data.name.trim(),
-      description: createQuickAppConfig({
-        description: data.description ?? '',
-        config: configInput ?? '{}',
-        instructions: data.instructions ?? '',
-        temperature,
-        name: data.name.trim(),
-      }),
-      completionUrl: `http://quickapps.dial-development.svc.cluster.local/openai/deployments/${encodeURIComponent(data.name.trim())}/chat/completions`,
-      features: undefined,
-      type: EntityType.Application,
-      isDefault: false,
-      folderId: '',
-      topics,
-    };
-
-    if (
-      isEdit &&
-      selectedApplication?.name &&
-      currentReference &&
-      selectedApplication.id
-    ) {
-      const applicationData: CustomApplicationModel = {
-        ...preparedData,
-        reference: currentReference,
-        id: selectedApplication.id,
-      };
-
-      dispatch(
-        ApplicationActions.update({
-          oldApplicationId: selectedApplication.id,
-          applicationData,
-        }),
-      );
-    } else {
-      dispatch(ApplicationActions.create(preparedData));
-    }
-
-    onClose(true);
-  };
-
-  return (
-    <>
-      <form
-        onSubmit={handleSubmit(onSubmit)}
-        className="relative flex max-h-full w-full grow flex-col divide-tertiary overflow-y-auto"
-      >
-        <button
-          onClick={() => onClose(false)}
-          className="absolute right-2 top-2 rounded text-secondary hover:text-accent-primary"
-          data-qa="close-application-dialog"
-        >
-          <IconX size={24} />
-        </button>
-        <div className="px-3 py-4 md:px-6">
-          <h2 className="text-base font-semibold">
-            {isEdit ? t('Edit quick app') : t('Add quick app')}
-          </h2>
-        </div>
-        <div className="flex flex-col gap-4 overflow-y-auto px-3 pb-6 md:px-6">
-          <div className="flex flex-col">
-            <label className="mb-1 flex text-xs text-secondary" htmlFor="name">
-              {t('Name')}
-              <span className="ml-1 inline text-accent-primary">*</span>
-            </label>
-            <input
-              {...register('name', {
-                required: t('This field is required') || '',
-                pattern: {
-                  value: new RegExp(`^[^${notAllowedSymbols}]{2,160}$`),
-                  message: t(
-                    'Name should be 2 to 160 characters long and should not contain special characters',
-                  ),
-                },
-              })}
-              id="name"
-              defaultValue={selectedApplication?.name}
-              className={classNames(
-                errors.name &&
-                  'border-error hover:border-error focus:border-error',
-                inputClassName,
-              )}
-              placeholder={t('Type name') || ''}
-            />
-            {errors.name && (
-              <span className="text-xxs text-error peer-invalid:peer-[.submitted]:mb-1">
-                {errors.name.message}
-              </span>
-            )}
-          </div>
-
-          <div className="flex flex-col">
-            <label
-              className="mb-1 flex text-xs text-secondary"
-              htmlFor="version"
-            >
-              {t('Version')}
-              <span className="ml-1 inline text-accent-primary">*</span>
-            </label>
-            <input
-              {...register('version', {
-                required: t('This field is required') || '',
-                pattern: {
-                  value: /^[0-9]+\.[0-9]+\.[0-9]+$/,
-                  message: t(
-                    'Version should be in x.y.z format and contain only numbers and dots.',
-                  ),
-                },
-              })}
-              defaultValue={selectedApplication?.version}
-              id="version"
-              className={classNames(
-                errors.version &&
-                  'border-error hover:border-error focus:border-error',
-                inputClassName,
-              )}
-              placeholder={DEFAULT_VERSION}
-            />
-            {errors.version && (
-              <span className="text-xxs text-error peer-invalid:peer-[.submitted]:mb-1">
-                {errors.version.message}
-              </span>
-            )}
-          </div>
-
-          <div className="flex flex-col">
-            <label
-              className="mb-1 flex text-xs text-secondary"
-              htmlFor="applicationIcon"
-            >
-              {t('Icon')}
-              <span className="ml-1 inline text-accent-primary">*</span>
-            </label>
-            <Controller
-              name="iconUrl"
-              control={control}
-              rules={{ required: t('Icon is required.') || '' }}
-              render={({ field: { ref: _ref, ...restField } }) => (
-                <CustomLogoSelect
-                  {...restField}
-                  localLogo={
-                    !deleteLogo ? localLogoFile?.split('/').pop() : undefined
-                  }
-                  onLogoSelect={onLogoSelect}
-                  onDeleteLocalLogoHandler={onDeleteLocalLogoHandler}
-                  customPlaceholder={t('No icon')}
-                  className="max-w-full"
-                  fileManagerModalTitle="Select application icon"
-                  allowedTypes={IMAGE_TYPES}
-                />
-              )}
-            />
-            {!localLogoFile && errors.iconUrl && (
-              <span className="text-xxs text-error peer-invalid:peer-[.submitted]:mb-1">
-                {errors.iconUrl.message}
-              </span>
-            )}
-          </div>
-
-          <div className="flex flex-col">
-            <label
-              className="mb-1 flex items-center gap-1 text-xs text-secondary"
-              htmlFor="description"
-            >
-              {t('Description')}
-              <Tooltip
-                tooltip={t(
-                  'The first paragraph serves as a short description. To create an extended description, enter two line breaks and start the second paragraph.',
-                )}
-                triggerClassName="flex shrink-0 text-secondary hover:text-accent-primary"
-                contentClassName="max-w-[220px]"
-                placement="top"
-              >
-                <IconHelp size={18} />
-              </Tooltip>
-            </label>
-            <textarea
-              {...register('description')}
-              onBlur={() => trigger('description')}
-              id="description"
-              defaultValue={
-                selectedApplication
-                  ? getModelDescription(selectedApplication)
-                  : ''
-              }
-              rows={3}
-              placeholder={t('A description of your application') || ''}
-              className={classNames(inputClassName, 'resize-none')}
-            />
-          </div>
-
-          <div className="flex flex-col">
-            <label
-              className="mb-1 flex text-xs text-secondary"
-              htmlFor="applicationIcon"
-            >
-              {t('Topics')}
-            </label>
-            <Controller
-              name="topics"
-              control={control}
-              render={({ field: { ref: _ref, ...restField } }) => (
-                <DropdownSelector
-                  {...restField}
-                  placeholder={t('Select one or more topics')}
-                  onChange={handleChangeTopics}
-                  options={topicOptions}
-                  values={selectedOptions}
-                />
-              )}
-            />
-            {!localLogoFile && errors.iconUrl && (
-              <span className="text-xxs text-error peer-invalid:peer-[.submitted]:mb-1">
-                {errors.iconUrl.message}
-              </span>
-            )}
-          </div>
-
-          <div className="flex flex-col">
-            <label
-              className="mb-1 flex items-center gap-1 text-xs text-secondary"
-              htmlFor="config"
-            >
-              {t('Configure toolset')}
-            </label>
-
-            <Editor
-              height={200}
-              options={{
-                minimap: {
-                  enabled: false,
-                },
-                padding: {
-                  top: 12,
-                  bottom: 12,
-                },
-                scrollBeyondLastLine: false,
-              }}
-              className="m-0.5 w-full overflow-hidden rounded border border-primary"
-              language="json"
-              defaultValue={configInput}
-              onChange={(value) => setConfigInput(value ?? '')}
-              theme={theme === 'dark' ? 'vs-dark' : 'vs'}
-            />
-          </div>
-
-          <div className="flex flex-col">
-            <label
-              className="mb-1 flex items-center gap-1 text-xs text-secondary"
-              htmlFor="instructions"
-            >
-              {t('Instructions')}
-            </label>
-            <textarea
-              {...register('instructions')}
-              id="instructions"
-              defaultValue={
-                selectedApplication
-                  ? getQuickAppConfig(selectedApplication).config.instructions
-                  : ''
-              }
-              rows={3}
-              placeholder={t('Instructions of your application') || ''}
-              className={classNames(inputClassName, 'resize-none')}
-            />
-          </div>
-
-          <div className="flex flex-col">
-            <label
-              className="mb-1 flex items-center gap-1 text-xs text-secondary"
-              htmlFor="temperature"
-            >
-              {t('Temperature')}
-            </label>
-
-            <div className="max-w-[460px]">
-              <TemperatureSlider
-                temperature={temperature}
-                onChangeTemperature={setTemperature}
-              />
-            </div>
-          </div>
-        </div>
-
-        <div
-          className={classNames(
-            'flex gap-2 border-t border-primary p-4 md:px-6',
-            isEdit ? 'justify-between' : 'justify-end',
-          )}
-        >
-          {isEdit && (
-            <div className="flex items-center gap-2">
-              <Tooltip tooltip={t('Delete')}>
-                <button
-                  onClick={handleConfirmDialogOpen}
-                  className="flex size-[34px] items-center justify-center rounded text-secondary hover:bg-accent-primary-alpha hover:text-accent-primary"
-                  data-qa="application-delete"
-                >
-                  <IconTrashX
-                    size={24}
-                    className="shrink-0 cursor-pointer text-secondary hover:text-accent-primary"
-                  />
-                </button>
-              </Tooltip>
-              <Tooltip tooltip={t('Publish')}>
-                <button
-                  onClick={handlePublish}
-                  className="flex size-[34px] items-center justify-center rounded text-secondary hover:bg-accent-primary-alpha hover:text-accent-primary"
-                  data-qa="application-share"
-                >
-                  <IconWorldShare
-                    size={24}
-                    className="shrink-0 cursor-pointer text-secondary hover:text-accent-primary"
-                  />
-                </button>
-              </Tooltip>
-            </div>
-          )}
-          <Tooltip
-            hideTooltip={isValid}
-            tooltip={t('Fill in all required fields or correct values')}
-          >
-            <button
-              className="button button-primary"
-              disabled={!isValid}
-              data-qa="save-application-dialog"
-              type="submit"
-            >
-              {isEdit ? t('Save') : t('Add')}
-            </button>
-          </Tooltip>
-        </div>
-      </form>
-      <ConfirmDialog
-        isOpen={isDeleteModalOpen}
-        heading={t('Confirm deleting application')}
-        description={
-          t('Are you sure you want to delete the application?') || ''
-        }
-        confirmLabel={t('Delete')}
-        cancelLabel={t('Cancel')}
-        onClose={handleConfirmDialogClose}
-      />
-      {applicationToPublish && (
-        <PublishModal
-          entity={applicationToPublish}
-          type={SharingType.Application}
-          isOpen={isPublishing}
-          onClose={handlePublishClose}
-          publishAction={PublishActions.ADD}
-        />
-      )}
-    </>
-  );
-};
-
-interface Props {
-  isOpen: boolean;
-  onClose: (result: boolean) => void;
-  isEdit?: boolean;
-  currentReference?: string;
-}
-
-export const QuickAppDialog: React.FC<Props> = ({
-  isOpen,
-  onClose,
-  isEdit,
-  currentReference,
-}) => {
-  const loading = useAppSelector(ApplicationSelectors.selectIsLoading);
-
-  const selectedApplication = useAppSelector(
-    ApplicationSelectors.selectApplicationDetail,
-  );
-
-  const handleClose = useCallback(() => {
-    onClose(false);
-  }, [onClose]);
-
-  return (
-    <Modal
-      portalId="theme-main"
-      state={isOpen ? ModalState.OPENED : ModalState.CLOSED}
-      onClose={handleClose}
-      dataQa="quick-app-dialog"
-      containerClassName="flex w-full flex-col pt-2 md:grow-0 xl:max-w-[720px] 2xl:max-w-[780px]"
-      dismissProps={{ outsidePressEvent: 'mousedown' }}
-      hideClose
-    >
-      {loading ? (
-        <div className="flex size-full h-screen items-center justify-center">
-          <Spinner size={48} dataQa="publication-items-spinner" />
-        </div>
-      ) : (
-        <QuickAppDialogView
-          isOpen={isOpen}
-          onClose={onClose}
-          isEdit={isEdit}
-          currentReference={currentReference}
-          selectedApplication={isEdit ? selectedApplication : undefined}
-        />
-      )}
-    </Modal>
-  );
-};
diff --git a/apps/chat/src/components/Common/__tests__/MultipleComboBox.test.tsx b/apps/chat/src/components/Common/__tests__/MultipleComboBox.test.tsx
index 245960b244..20110ed82d 100644
--- a/apps/chat/src/components/Common/__tests__/MultipleComboBox.test.tsx
+++ b/apps/chat/src/components/Common/__tests__/MultipleComboBox.test.tsx
@@ -16,7 +16,6 @@ describe('MultipleComboBox', () => {
     { id: 3, label: 'Item 3' },
   ];
 
-  const filterLabel = 'Filter';
   const placeholder = 'placeholder';
 
   const getItemLabel = vi.fn((item: TestItem) => item.label);
@@ -32,7 +31,6 @@ describe('MultipleComboBox', () => {
     render(
       <MultipleComboBox
         items={items}
-        label={filterLabel}
         placeholder={placeholder}
         getItemLabel={getItemLabel}
         getItemValue={getItemValue}
@@ -40,7 +38,6 @@ describe('MultipleComboBox', () => {
       />,
     );
 
-    expect(screen.getByText(filterLabel)).toBeInTheDocument();
     expect(screen.getByPlaceholderText(placeholder)).toBeInTheDocument();
   });
 
@@ -84,7 +81,6 @@ describe('MultipleComboBox', () => {
     render(
       <MultipleComboBox
         items={items}
-        label={filterLabel}
         getItemLabel={getItemLabel}
         getItemValue={getItemValue}
         onChangeSelectedItems={onChangeSelectedItems}
@@ -100,7 +96,6 @@ describe('MultipleComboBox', () => {
     const getItemLabel = vi.fn((item: TestItem) => item.label);
     render(
       <MultipleComboBox
-        label={filterLabel}
         getItemLabel={getItemLabel}
         getItemValue={getItemLabel}
         onChangeSelectedItems={onChangeSelectedItems}
@@ -134,7 +129,6 @@ describe('MultipleComboBox', () => {
     render(
       <MultipleComboBox
         items={items}
-        label={filterLabel}
         getItemLabel={getItemLabel}
         getItemValue={getItemValue}
         onChangeSelectedItems={onChangeSelectedItems}
diff --git a/apps/chat/src/components/Files/AttachLinkDialog.tsx b/apps/chat/src/components/Files/AttachLinkDialog.tsx
index 198a783ac3..4bdc4925cf 100644
--- a/apps/chat/src/components/Files/AttachLinkDialog.tsx
+++ b/apps/chat/src/components/Files/AttachLinkDialog.tsx
@@ -11,7 +11,7 @@ import { Translation } from '@/src/types/translation';
 
 import Modal from '@/src/components/Common/Modal';
 
-import { FieldErrorMessage } from '../Common/Forms/FieldError';
+import { FieldErrorMessage } from '../Common/Forms/FieldErrorMessage';
 
 interface Props {
   onClose: (link?: DialLink) => void;
@@ -87,7 +87,7 @@ export const AttachLinkDialog = ({ onClose }: Props) => {
             })}
           />
 
-          <FieldErrorMessage error={errors.href} />
+          <FieldErrorMessage error={errors.href?.message} />
         </div>
 
         <div className="mb-5">
diff --git a/apps/chat/src/components/Marketplace/ApplicationCard.tsx b/apps/chat/src/components/Marketplace/ApplicationCard.tsx
index eb7ebf0552..ed2988046e 100644
--- a/apps/chat/src/components/Marketplace/ApplicationCard.tsx
+++ b/apps/chat/src/components/Marketplace/ApplicationCard.tsx
@@ -1,39 +1,54 @@
 import {
   IconBookmark,
   IconBookmarkFilled,
+  IconLoader,
   IconPencilMinus,
+  IconPlayerPlay,
+  IconPlaystationSquare,
   IconTrashX,
   IconWorldShare,
   TablerIconsProps,
 } from '@tabler/icons-react';
-import { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
 import classNames from 'classnames';
 
-import { getModelShortDescription } from '@/src/utils/app/application';
+import {
+  getApplicationNextStatus,
+  getApplicationSimpleStatus,
+  getModelShortDescription,
+  isApplicationStatusUpdating,
+} from '@/src/utils/app/application';
 import { getRootId } from '@/src/utils/app/id';
 import { isMediumScreen } from '@/src/utils/app/mobile';
 import { isEntityPublic } from '@/src/utils/app/publications';
 
+import {
+  ApplicationStatus,
+  SimpleApplicationStatus,
+} from '@/src/types/applications';
 import { FeatureType } from '@/src/types/common';
 import { DisplayMenuItemProps } from '@/src/types/menu';
 import { DialAIEntityModel } from '@/src/types/models';
 import { Translation } from '@/src/types/translation';
 
-import { useAppSelector } from '@/src/store/hooks';
+import { ApplicationActions } from '@/src/store/application/application.reducers';
+import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
 import { ModelsSelectors } from '@/src/store/models/models.reducers';
+import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
 
 import { ModelIcon } from '@/src/components/Chatbar/ModelIcon';
 import ContextMenu from '@/src/components/Common/ContextMenu';
 import { EntityMarkdownDescription } from '@/src/components/Common/MarkdownDescription';
 import { ApplicationTopic } from '@/src/components/Marketplace/ApplicationTopic';
+import { FunctionStatusIndicator } from '@/src/components/Marketplace/FunctionStatusIndicator';
 
 import Tooltip from '../Common/Tooltip';
 
 import UnpublishIcon from '@/public/images/icons/unpublish.svg';
-import { PublishActions } from '@epam/ai-dial-shared';
+import { Feature, PublishActions } from '@epam/ai-dial-shared';
 
 const DESKTOP_ICON_SIZE = 80;
 const SMALL_ICON_SIZE = 48;
@@ -63,6 +78,22 @@ const CardFooter = ({ entity }: CardFooterProps) => {
   );
 };
 
+const getPlayerCaption = (entity: DialAIEntityModel) => {
+  switch (entity.functionStatus) {
+    case ApplicationStatus.STARTED:
+      return 'Stop';
+    case ApplicationStatus.CREATED:
+    case ApplicationStatus.STOPPED:
+    case ApplicationStatus.FAILED:
+      return 'Start';
+    case ApplicationStatus.STOPPING:
+      return 'Stopping';
+    case ApplicationStatus.STARTING:
+    default:
+      return 'Starting';
+  }
+};
+
 interface ApplicationCardProps {
   entity: DialAIEntityModel;
   onClick: (entity: DialAIEntityModel) => void;
@@ -87,17 +118,66 @@ export const ApplicationCard = ({
   const installedModelIds = useAppSelector(
     ModelsSelectors.selectInstalledModelIds,
   );
+  const dispatch = useAppDispatch();
+
+  const isCodeAppsEnabled = useAppSelector((state) =>
+    SettingsSelectors.isFeatureEnabled(state, Feature.CodeApps),
+  );
 
   const isMyEntity = entity.id.startsWith(
     getRootId({ featureType: FeatureType.Application }),
   );
+  const isModifyDisabled = isApplicationStatusUpdating(entity);
+  const playerStatus = getApplicationSimpleStatus(entity);
+
+  const PlayerIcon = useMemo(() => {
+    switch (playerStatus) {
+      case SimpleApplicationStatus.START:
+        return IconPlayerPlay;
+      case SimpleApplicationStatus.STOP:
+        return IconPlaystationSquare;
+      case SimpleApplicationStatus.UPDATING:
+      default:
+        return IconLoader;
+    }
+  }, [playerStatus]);
+
+  const handleUpdateFunctionStatus = useCallback(() => {
+    dispatch(
+      ApplicationActions.startUpdatingFunctionStatus({
+        id: entity.id,
+        status: getApplicationNextStatus(entity),
+      }),
+    );
+  }, [dispatch, entity]);
 
   const menuItems: DisplayMenuItemProps[] = useMemo(
     () => [
+      {
+        name: t(getPlayerCaption(entity)),
+        dataQa: 'status-change',
+        disabled: playerStatus === SimpleApplicationStatus.UPDATING,
+        display: isMyEntity && !!entity.functionStatus && isCodeAppsEnabled,
+        Icon: (props: TablerIconsProps) => (
+          <PlayerIcon
+            {...props}
+            className={classNames({
+              ['text-error']: playerStatus === SimpleApplicationStatus.STOP,
+              ['text-accent-secondary']:
+                playerStatus === SimpleApplicationStatus.START,
+            })}
+          />
+        ),
+        onClick: (e: React.MouseEvent) => {
+          e.stopPropagation();
+          handleUpdateFunctionStatus();
+        },
+      },
       {
         name: t('Edit'),
         dataQa: 'edit',
         display: isMyEntity && !!onEdit,
+        disabled: isModifyDisabled,
         Icon: IconPencilMinus,
         onClick: (e: React.MouseEvent) => {
           e.stopPropagation();
@@ -128,6 +208,7 @@ export const ApplicationCard = ({
         name: t('Delete'),
         dataQa: 'delete',
         display: isMyEntity && !!onDelete,
+        disabled: isModifyDisabled,
         Icon: (props: TablerIconsProps) => (
           <IconTrashX {...props} className="stroke-error" />
         ),
@@ -137,7 +218,19 @@ export const ApplicationCard = ({
         },
       },
     ],
-    [entity, onPublish, t, onDelete, isMyEntity, onEdit],
+    [
+      entity,
+      onPublish,
+      t,
+      onDelete,
+      isMyEntity,
+      onEdit,
+      isModifyDisabled,
+      playerStatus,
+      PlayerIcon,
+      isCodeAppsEnabled,
+      handleUpdateFunctionStatus,
+    ],
   );
 
   const iconSize =
@@ -197,7 +290,7 @@ export const ApplicationCard = ({
                 {entity.version}
               </div>
             )}
-            <h2
+            <div
               className={classNames(
                 'truncate text-base font-semibold leading-[20px] text-primary',
                 !isMyEntity && !entity.version && 'mr-6',
@@ -205,7 +298,9 @@ export const ApplicationCard = ({
               data-qa="application-name"
             >
               {entity.name}
-            </h2>
+
+              <FunctionStatusIndicator entity={entity} />
+            </div>
             <EntityMarkdownDescription className="hidden text-ellipsis text-sm leading-[18px] text-secondary xl:!line-clamp-2">
               {getModelShortDescription(entity)}
             </EntityMarkdownDescription>
diff --git a/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationFooter.tsx b/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationFooter.tsx
index 88767face7..ef0218afb9 100644
--- a/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationFooter.tsx
+++ b/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationFooter.tsx
@@ -3,27 +3,74 @@ import {
   IconBookmarkFilled,
   IconEdit,
   IconPlayerPlay,
+  IconPlaystationSquare,
   IconTrashX,
   IconWorldShare,
 } from '@tabler/icons-react';
+import { useMemo } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
+import classNames from 'classnames';
+
+import {
+  getApplicationNextStatus,
+  getApplicationSimpleStatus,
+  isApplicationStatusUpdating,
+  isExecutableApp,
+} from '@/src/utils/app/application';
 import { getRootId, isApplicationId } from '@/src/utils/app/id';
 import { isEntityPublic } from '@/src/utils/app/publications';
 
+import {
+  ApplicationStatus,
+  SimpleApplicationStatus,
+} from '@/src/types/applications';
 import { FeatureType } from '@/src/types/common';
 import { DialAIEntityModel } from '@/src/types/models';
 import { Translation } from '@/src/types/translation';
 
-import { useAppSelector } from '@/src/store/hooks';
+import { ApplicationActions } from '@/src/store/application/application.reducers';
+import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
 import { ModelsSelectors } from '@/src/store/models/models.reducers';
+import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
+
+import Loader from '@/src/components/Common/Loader';
 
 import { ModelVersionSelect } from '../../Chat/ModelVersionSelect';
 import Tooltip from '../../Common/Tooltip';
 
 import UnpublishIcon from '@/public/images/icons/unpublish.svg';
-import { PublishActions } from '@epam/ai-dial-shared';
+import { Feature, PublishActions } from '@epam/ai-dial-shared';
+
+const getFunctionTooltip = (entity: DialAIEntityModel) => {
+  switch (entity.functionStatus) {
+    case ApplicationStatus.CREATED:
+    case ApplicationStatus.STOPPED:
+    case ApplicationStatus.FAILED:
+      return 'Start application';
+    case ApplicationStatus.STARTED:
+      return 'Stop application';
+    case ApplicationStatus.STARTING:
+      return 'Starting';
+    case ApplicationStatus.STOPPING:
+      return 'Stopping';
+    default:
+      return '';
+  }
+};
+
+const getDisabledTooltip = (entity: DialAIEntityModel, normal: string) => {
+  switch (entity.functionStatus) {
+    case ApplicationStatus.STOPPING:
+    case ApplicationStatus.STARTING:
+      return `Application is ${entity.functionStatus.toLowerCase()}`;
+    case ApplicationStatus.STARTED:
+      return `Stop application to ${normal.toLowerCase()}`;
+    default:
+      return normal;
+  }
+};
 
 interface Props {
   entity: DialAIEntityModel;
@@ -48,6 +95,11 @@ export const ApplicationDetailsFooter = ({
 }: Props) => {
   const { t } = useTranslation(Translation.Marketplace);
 
+  const dispatch = useAppDispatch();
+
+  const isCodeAppsEnabled = useAppSelector((state) =>
+    SettingsSelectors.isFeatureEnabled(state, Feature.CodeApps),
+  );
   const installedModelIds = useAppSelector(
     ModelsSelectors.selectInstalledModelIds,
   );
@@ -59,26 +111,62 @@ export const ApplicationDetailsFooter = ({
   const Bookmark = installedModelIds.has(entity.reference)
     ? IconBookmarkFilled
     : IconBookmark;
+  const isExecutable = isExecutableApp(entity) && isMyApp;
+  const isModifyDisabled = isApplicationStatusUpdating(entity);
+  const playerStatus = getApplicationSimpleStatus(entity);
+
+  const PlayerIcon = useMemo(() => {
+    switch (playerStatus) {
+      case SimpleApplicationStatus.START:
+        return IconPlayerPlay;
+      case SimpleApplicationStatus.STOP:
+        return IconPlaystationSquare;
+      case SimpleApplicationStatus.UPDATING:
+      default:
+        return Loader;
+    }
+  }, [playerStatus]);
+
+  const handleUpdateFunctionStatus = () => {
+    dispatch(
+      ApplicationActions.startUpdatingFunctionStatus({
+        id: entity.id,
+        status: getApplicationNextStatus(entity),
+      }),
+    );
+  };
 
   return (
     <section className="flex px-3 py-4 md:px-6">
       <div className="flex w-full items-center justify-between">
         <div className="flex items-center gap-2">
-          {/* <IconShare
-            className="shrink-0 text-accent-primary md:hidden [&_path]:fill-current"
-            size={24}
-          /> */}
+          {isExecutable && isCodeAppsEnabled && (
+            <Tooltip tooltip={t(getFunctionTooltip(entity))}>
+              <button
+                disabled={playerStatus === SimpleApplicationStatus.UPDATING}
+                onClick={handleUpdateFunctionStatus}
+                className={classNames('icon-button', {
+                  ['button-error']:
+                    playerStatus === SimpleApplicationStatus.STOP,
+                  ['button-accent-secondary']:
+                    playerStatus === SimpleApplicationStatus.START,
+                })}
+                data-qa="application-status-toggler"
+              >
+                <PlayerIcon size={24} />
+              </button>
+            </Tooltip>
+          )}
+
           {isMyApp ? (
-            <Tooltip tooltip={t('Delete')}>
+            <Tooltip tooltip={t(getDisabledTooltip(entity, 'Delete'))}>
               <button
+                disabled={isModifyDisabled && isMyApp}
                 onClick={() => onDelete(entity)}
-                className="group flex size-[34px] items-center justify-center rounded text-secondary hover:bg-accent-primary-alpha hover:text-accent-primary"
+                className="icon-button"
                 data-qa="application-edit"
               >
-                <IconTrashX
-                  size={24}
-                  className="shrink-0 group-hover:text-accent-primary"
-                />
+                <IconTrashX size={24} />
               </button>
             </Tooltip>
           ) : (
@@ -92,13 +180,10 @@ export const ApplicationDetailsFooter = ({
             >
               <button
                 onClick={() => onBookmarkClick(entity)}
-                className="group flex size-[34px] items-center justify-center rounded text-secondary hover:bg-accent-primary-alpha hover:text-accent-primary"
+                className="icon-button"
                 data-qa="application-bookmark"
               >
-                <Bookmark
-                  size={24}
-                  className="shrink-0 group-hover:text-accent-primary"
-                />
+                <Bookmark size={24} />
               </button>
             </Tooltip>
           )}
@@ -112,31 +197,26 @@ export const ApplicationDetailsFooter = ({
                     isPublicApp ? PublishActions.DELETE : PublishActions.ADD,
                   )
                 }
-                className="group flex size-[34px] items-center justify-center rounded text-secondary hover:bg-accent-primary-alpha hover:text-accent-primary"
+                className="icon-button"
                 data-qa="application-publish"
               >
                 {isPublicApp ? (
-                  <UnpublishIcon className="size-6 shrink-0 cursor-pointer text-secondary hover:text-accent-primary group-hover:text-accent-primary" />
+                  <UnpublishIcon className="size-6 shrink-0" />
                 ) : (
-                  <IconWorldShare
-                    size={24}
-                    className="shrink-0 cursor-pointer text-secondary group-hover:text-accent-primary"
-                  />
+                  <IconWorldShare size={24} />
                 )}
               </button>
             </Tooltip>
           )}
           {isMyApp && (
-            <Tooltip tooltip={t('Edit')}>
+            <Tooltip tooltip={t(getDisabledTooltip(entity, 'Edit'))}>
               <button
+                disabled={isModifyDisabled}
                 onClick={() => onEdit(entity)}
-                className="group flex size-[34px] items-center justify-center rounded text-secondary hover:bg-accent-primary-alpha hover:text-accent-primary"
+                className="icon-button"
                 data-qa="application-edit"
               >
-                <IconEdit
-                  size={24}
-                  className="shrink-0 group-hover:text-accent-primary"
-                />
+                <IconEdit size={24} />
               </button>
             </Tooltip>
           )}
diff --git a/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationHeader.tsx b/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationHeader.tsx
index 7d6cb440d5..6ec411dacf 100644
--- a/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationHeader.tsx
+++ b/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationHeader.tsx
@@ -2,6 +2,8 @@ import classNames from 'classnames';
 
 import { DialAIEntityModel } from '@/src/types/models';
 
+import { FunctionStatusIndicator } from '@/src/components/Marketplace/FunctionStatusIndicator';
+
 import { ModelIcon } from '../../Chatbar/ModelIcon';
 import { ApplicationTopic } from '../ApplicationTopic';
 
@@ -64,12 +66,14 @@ export const ApplicationDetailsHeader = ({ entity, isMobileView }: Props) => {
                 <ApplicationTopic key={topic} topic={topic} />
               ))}
             </div>
-            <h2
-              className="truncate text-lg font-semibold leading-[18px] md:text-xl md:leading-6"
+            <div
+              className="flex items-center gap-2 truncate text-lg font-semibold leading-[18px] md:text-xl md:leading-6"
               data-qa="app-name"
             >
               {entity.name}
-            </h2>
+
+              <FunctionStatusIndicator entity={entity} />
+            </div>
           </div>
           {/* <div className="flex items-center gap-5">
             <Menu
diff --git a/apps/chat/src/components/Marketplace/FunctionStatusIndicator.tsx b/apps/chat/src/components/Marketplace/FunctionStatusIndicator.tsx
new file mode 100644
index 0000000000..4e3932800d
--- /dev/null
+++ b/apps/chat/src/components/Marketplace/FunctionStatusIndicator.tsx
@@ -0,0 +1,30 @@
+import { IconPointFilled } from '@tabler/icons-react';
+
+import classNames from 'classnames';
+
+import { ApplicationStatus } from '@/src/types/applications';
+import { DialAIEntityModel } from '@/src/types/models';
+
+interface FunctionStatusIndicatorProps {
+  entity: DialAIEntityModel;
+}
+
+export const FunctionStatusIndicator = ({
+  entity,
+}: FunctionStatusIndicatorProps) =>
+  entity.functionStatus ? (
+    <IconPointFilled
+      size={16}
+      className={classNames({
+        ['text-accent-secondary']:
+          entity.functionStatus === ApplicationStatus.STARTED,
+        ['text-error']:
+          entity.functionStatus === ApplicationStatus.CREATED ||
+          entity.functionStatus === ApplicationStatus.STOPPED ||
+          entity.functionStatus === ApplicationStatus.FAILED,
+        ['text-warning']:
+          entity.functionStatus === ApplicationStatus.STOPPING ||
+          entity.functionStatus === ApplicationStatus.STARTING,
+      })}
+    />
+  ) : null;
diff --git a/apps/chat/src/components/Marketplace/SearchHeader.tsx b/apps/chat/src/components/Marketplace/SearchHeader.tsx
index b9e93edf42..b8a57ee86b 100644
--- a/apps/chat/src/components/Marketplace/SearchHeader.tsx
+++ b/apps/chat/src/components/Marketplace/SearchHeader.tsx
@@ -92,6 +92,9 @@ export const SearchHeader = ({
   const isQuickAppsEnabled = useAppSelector((state) =>
     SettingsSelectors.isFeatureEnabled(state, Feature.QuickApps),
   );
+  const isCodeAppsEnabled = useAppSelector((state) =>
+    SettingsSelectors.isFeatureEnabled(state, Feature.CodeApps),
+  );
 
   const searchTerm = useAppSelector(MarketplaceSelectors.selectSearchTerm);
   const selectedTab = useAppSelector(MarketplaceSelectors.selectSelectedTab);
@@ -116,8 +119,23 @@ export const SearchHeader = ({
           onAddApplication(ApplicationType.QUICK_APP);
         },
       },
+      {
+        name: t('Code app'),
+        dataQa: 'add-startable-app',
+        display: isCodeAppsEnabled,
+        onClick: (e: React.MouseEvent) => {
+          e.stopPropagation();
+          onAddApplication(ApplicationType.CODE_APP);
+        },
+      },
+    ],
+    [
+      onAddApplication,
+      t,
+      isCustomApplicationsEnabled,
+      isQuickAppsEnabled,
+      isCodeAppsEnabled,
     ],
-    [onAddApplication, t, isCustomApplicationsEnabled, isQuickAppsEnabled],
   );
 
   const onSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
diff --git a/apps/chat/src/components/Marketplace/TabRenderer.tsx b/apps/chat/src/components/Marketplace/TabRenderer.tsx
index 192be9c9a3..ccce1ebbaa 100644
--- a/apps/chat/src/components/Marketplace/TabRenderer.tsx
+++ b/apps/chat/src/components/Marketplace/TabRenderer.tsx
@@ -3,7 +3,7 @@ import { useCallback, useMemo, useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
-import { isQuickApp } from '@/src/utils/app/application';
+import { getApplicationType } from '@/src/utils/app/application';
 import { groupModelsAndSaveOrder } from '@/src/utils/app/conversation';
 import { getFolderIdFromEntityId } from '@/src/utils/app/folders';
 import { doesEntityContainSearchTerm } from '@/src/utils/app/search';
@@ -34,9 +34,8 @@ import {
 } from '@/src/constants/marketplace';
 
 import { PublishModal } from '@/src/components/Chat/Publish/PublishWizard';
-import { ApplicationDialog } from '@/src/components/Common/ApplicationDialog';
+import { ApplicationWizard } from '@/src/components/Common/ApplicationWizard/ApplicationWizard';
 import { ConfirmDialog } from '@/src/components/Common/ConfirmDialog';
-import { QuickAppDialog } from '@/src/components/Common/QuickAppDialog';
 import ApplicationDetails from '@/src/components/Marketplace/ApplicationDetails/ApplicationDetails';
 import { CardsList } from '@/src/components/Marketplace/CardsList';
 import { MarketplaceBanner } from '@/src/components/Marketplace/MarketplaceBanner';
@@ -313,9 +312,7 @@ export const TabRenderer = ({ screenState }: TabRendererProps) => {
       setApplicationModel({
         entity,
         action: ApplicationActionType.EDIT,
-        type: isQuickApp(entity)
-          ? ApplicationType.QUICK_APP
-          : ApplicationType.CUSTOM_APP,
+        type: getApplicationType(entity),
       });
     },
     [dispatch],
@@ -427,24 +424,13 @@ export const TabRenderer = ({ screenState }: TabRendererProps) => {
       />
 
       {/* MODALS */}
-      {!!(
-        applicationModel && applicationModel.type === ApplicationType.CUSTOM_APP
-      ) && (
-        <ApplicationDialog
+      {!!applicationModel && (
+        <ApplicationWizard
           isOpen={!!applicationModel}
-          isEdit={applicationModel.action === ApplicationActionType.EDIT}
-          currentReference={applicationModel.entity?.reference}
           onClose={handleCloseApplicationDialog}
-        />
-      )}
-      {!!(
-        applicationModel && applicationModel.type === ApplicationType.QUICK_APP
-      ) && (
-        <QuickAppDialog
-          isOpen={!!applicationModel}
           isEdit={applicationModel.action === ApplicationActionType.EDIT}
           currentReference={applicationModel.entity?.reference}
-          onClose={handleCloseApplicationDialog}
+          type={applicationModel.type}
         />
       )}
       {!!deleteModel && (
diff --git a/apps/chat/src/components/Settings/CustomLogoSelect.tsx b/apps/chat/src/components/Settings/CustomLogoSelect.tsx
index b6994d4414..e09023dcdd 100644
--- a/apps/chat/src/components/Settings/CustomLogoSelect.tsx
+++ b/apps/chat/src/components/Settings/CustomLogoSelect.tsx
@@ -45,7 +45,7 @@ export const CustomLogoSelect = ({
       {title && <div className="basis-1/3 md:basis-1/4">{t(title)}</div>}
       <div
         className={classNames(
-          'flex h-[38px] max-w-[331px] grow basis-2/3 items-center gap-8 overflow-hidden rounded border border-primary px-3 focus-within:border-accent-primary focus:border-accent-primary md:basis-3/4',
+          'flex h-[38px] max-w-[331px] grow basis-2/3 items-center gap-8 overflow-hidden rounded border border-primary px-3 focus-within:border-accent-primary hover:border-accent-primary focus:border-accent-primary md:basis-3/4',
           className,
         )}
       >
@@ -64,9 +64,9 @@ export const CustomLogoSelect = ({
           {localLogo && (
             <button
               onClick={onDeleteLocalLogoHandler}
-              className="text-accent-primary"
+              className="text-secondary hover:text-error"
             >
-              <IconTrash className="text-secondary" size={18} />
+              <IconTrash size={18} />
             </button>
           )}
         </div>
diff --git a/apps/chat/src/constants/applications.ts b/apps/chat/src/constants/applications.ts
new file mode 100644
index 0000000000..ff34a13803
--- /dev/null
+++ b/apps/chat/src/constants/applications.ts
@@ -0,0 +1,11 @@
+export const FEATURES_ENDPOINTS = {
+  completion: 'completion',
+  rate_endpoint: 'rate_endpoint',
+  configuration_endpoint: 'configuration_endpoint',
+};
+
+export const FEATURES_ENDPOINTS_NAMES = {
+  [FEATURES_ENDPOINTS.completion]: 'Completion',
+  [FEATURES_ENDPOINTS.rate_endpoint]: 'Rate',
+  [FEATURES_ENDPOINTS.configuration_endpoint]: 'Configuration',
+};
diff --git a/apps/chat/src/constants/file.ts b/apps/chat/src/constants/file.ts
new file mode 100644
index 0000000000..879c6f3e02
--- /dev/null
+++ b/apps/chat/src/constants/file.ts
@@ -0,0 +1,2 @@
+export const MIME_FORMAT_REGEX =
+  /^([a-zA-Z0-9!*\-.+]+|\*)\/([a-zA-Z0-9!*\-.+]+|\*)$/;
diff --git a/apps/chat/src/store/application/application.epics.ts b/apps/chat/src/store/application/application.epics.ts
index 0f06ec9cc4..9c7dac193a 100644
--- a/apps/chat/src/store/application/application.epics.ts
+++ b/apps/chat/src/store/application/application.epics.ts
@@ -1,4 +1,13 @@
-import { EMPTY, concat, of } from 'rxjs';
+import {
+  EMPTY,
+  concat,
+  concatMap,
+  from,
+  interval,
+  mergeMap,
+  of,
+  takeUntil,
+} from 'rxjs';
 import { catchError, filter, map, switchMap } from 'rxjs/operators';
 
 import { combineEpics } from 'redux-observable';
@@ -7,8 +16,12 @@ import { regenerateApplicationId } from '@/src/utils/app/application';
 import { ApplicationService } from '@/src/utils/app/data/application-service';
 import { DataService } from '@/src/utils/app/data/data-service';
 import { translate } from '@/src/utils/app/translation';
+import { parseApplicationApiKey } from '@/src/utils/server/api';
 
-import { CustomApplicationModel } from '@/src/types/applications';
+import {
+  ApplicationStatus,
+  CustomApplicationModel,
+} from '@/src/types/applications';
 import { AppEpic } from '@/src/types/store';
 
 import { UIActions } from '@/src/store/ui/ui.reducers';
@@ -172,6 +185,163 @@ const getApplicationEpic: AppEpic = (action$) =>
     ),
   );
 
+const updateApplicationStatusEpic: AppEpic = (action$) =>
+  action$.pipe(
+    filter(ApplicationActions.startUpdatingFunctionStatus.match),
+    mergeMap(({ payload }) => {
+      const request =
+        payload.status === ApplicationStatus.STARTING
+          ? ApplicationService.start
+          : ApplicationService.stop;
+
+      return request(payload.id).pipe(
+        switchMap(() =>
+          concat(
+            of(
+              ApplicationActions.updateFunctionStatus({
+                id: payload.id,
+                status: payload.status,
+              }),
+            ),
+            of(
+              ModelsActions.updateFunctionStatus({
+                id: payload.id,
+                status: payload.status,
+              }),
+            ),
+            of(
+              ApplicationActions.continueUpdatingFunctionStatus({
+                id: payload.id,
+                status: payload.status,
+              }),
+            ),
+          ),
+        ),
+        catchError(() =>
+          of(
+            ApplicationActions.updateFunctionStatusFail({
+              id: payload.id,
+              status: payload.status,
+            }),
+          ),
+        ),
+      );
+    }),
+  );
+
+const continueUpdatingApplicationStatusEpic: AppEpic = (action$) =>
+  action$.pipe(
+    filter(ApplicationActions.continueUpdatingFunctionStatus.match),
+    mergeMap(({ payload }) =>
+      interval(5000).pipe(
+        concatMap(() =>
+          from(ApplicationService.get(payload.id)).pipe(
+            concatMap((application) => {
+              if (
+                !application ||
+                application?.function?.status === ApplicationStatus.FAILED
+              ) {
+                return of(
+                  ApplicationActions.updateFunctionStatusFail({
+                    id: payload.id,
+                    status: payload.status,
+                  }),
+                );
+              }
+
+              if (
+                application.function?.status === ApplicationStatus.STARTED ||
+                application.function?.status === ApplicationStatus.STOPPED
+              ) {
+                return concat(
+                  of(
+                    ModelsActions.updateFunctionStatus({
+                      id: payload.id,
+                      status: application.function.status,
+                    }),
+                  ),
+                  of(
+                    ApplicationActions.updateFunctionStatus({
+                      id: payload.id,
+                      status: application.function.status,
+                    }),
+                  ),
+                );
+              }
+
+              return EMPTY;
+            }),
+            catchError(() =>
+              of(
+                ApplicationActions.updateFunctionStatusFail({
+                  id: payload.id,
+                  status: payload.status,
+                }),
+              ),
+            ),
+          ),
+        ),
+        takeUntil(
+          action$.pipe(
+            filter(
+              (action) =>
+                (ApplicationActions.updateFunctionStatusFail.match(action) ||
+                  (ApplicationActions.updateFunctionStatus.match(action) &&
+                    (action.payload.status === ApplicationStatus.STARTED ||
+                      action.payload.status === ApplicationStatus.STOPPED))) &&
+                payload.id === action.payload.id,
+            ),
+          ),
+        ),
+      ),
+    ),
+  );
+
+const updateApplicationStatusSuccessEpic: AppEpic = (action$) =>
+  action$.pipe(
+    filter(
+      (action) =>
+        ApplicationActions.updateFunctionStatus.match(action) &&
+        (action.payload.status === ApplicationStatus.STARTED ||
+          action.payload.status === ApplicationStatus.STOPPED),
+    ),
+    map(({ payload }) => {
+      const { name } = parseApplicationApiKey(payload.id);
+
+      return UIActions.showSuccessToast(
+        `Application: ${name.split('/').pop()} was successfully ${payload.status.toLowerCase()}`,
+      );
+    }),
+  );
+
+const updateApplicationStatusFailEpic: AppEpic = (action$) =>
+  action$.pipe(
+    filter(ApplicationActions.updateFunctionStatusFail.match),
+    mergeMap(({ payload }) => {
+      const { name } = parseApplicationApiKey(payload.id);
+
+      return concat(
+        of(
+          ModelsActions.updateFunctionStatus({
+            id: payload.id,
+            status: ApplicationStatus.FAILED,
+          }),
+        ),
+        of(
+          ApplicationActions.updateFunctionStatus({
+            id: payload.id,
+            status: ApplicationStatus.FAILED,
+          }),
+        ),
+        of(
+          UIActions.showErrorToast(
+            `Application: ${name.split('/').pop()} ${payload.status.toLowerCase()} failed`,
+          ),
+        ),
+      );
+    }),
+  );
+
 export const ApplicationEpics = combineEpics(
   createApplicationEpic,
   createFailEpic,
@@ -179,4 +349,9 @@ export const ApplicationEpics = combineEpics(
   updateApplicationEpic,
   editApplicationEpic,
   getApplicationEpic,
+
+  updateApplicationStatusEpic,
+  continueUpdatingApplicationStatusEpic,
+  updateApplicationStatusSuccessEpic,
+  updateApplicationStatusFailEpic,
 );
diff --git a/apps/chat/src/store/application/application.reducers.ts b/apps/chat/src/store/application/application.reducers.ts
index b49108c4fc..38205f7ffa 100644
--- a/apps/chat/src/store/application/application.reducers.ts
+++ b/apps/chat/src/store/application/application.reducers.ts
@@ -1,6 +1,9 @@
 import { PayloadAction, createSlice } from '@reduxjs/toolkit';
 
-import { CustomApplicationModel } from '@/src/types/applications';
+import {
+  ApplicationStatus,
+  CustomApplicationModel,
+} from '@/src/types/applications';
 import { DialAIEntityModel } from '@/src/types/models';
 
 import * as ApplicationSelectors from './application.selectors';
@@ -80,6 +83,40 @@ export const applicationSlice = createSlice({
       state.loading = false;
       state.error = true;
     },
+    startUpdatingFunctionStatus: (
+      state,
+      _action: PayloadAction<{
+        id: string;
+        status: ApplicationStatus;
+      }>,
+    ) => state,
+    continueUpdatingFunctionStatus: (
+      state,
+      _action: PayloadAction<{
+        id: string;
+        status: ApplicationStatus;
+      }>,
+    ) => state,
+    updateFunctionStatus: (
+      state,
+      {
+        payload,
+      }: PayloadAction<{
+        id: string;
+        status: ApplicationStatus;
+      }>,
+    ) => {
+      if (state.appDetails?.id === payload.id && state.appDetails?.function) {
+        state.appDetails.function.status = payload.status;
+      }
+    },
+    updateFunctionStatusFail: (
+      state,
+      _action: PayloadAction<{
+        id: string;
+        status: ApplicationStatus;
+      }>,
+    ) => state,
   },
 });
 
diff --git a/apps/chat/src/store/models/models.epics.ts b/apps/chat/src/store/models/models.epics.ts
index 4f455df9d4..778185cc61 100644
--- a/apps/chat/src/store/models/models.epics.ts
+++ b/apps/chat/src/store/models/models.epics.ts
@@ -29,10 +29,13 @@ import { DataService } from '@/src/utils/app/data/data-service';
 import { getRootId } from '@/src/utils/app/id';
 import { translate } from '@/src/utils/app/translation';
 
+import { ApplicationStatus } from '@/src/types/applications';
 import { FeatureType } from '@/src/types/common';
 import { DialAIEntityModel, InstalledModel } from '@/src/types/models';
 import { AppEpic } from '@/src/types/store';
 
+import { ApplicationActions } from '@/src/store/application/application.reducers';
+
 import { DeleteType } from '@/src/constants/marketplace';
 
 import { PublicationActions } from '../publication/publication.reducers';
@@ -124,6 +127,22 @@ const getModelsEpic: AppEpic = (action$, state$) =>
             signOut();
           }
 
+          const updatingModels = response.filter(
+            (model) =>
+              model.functionStatus &&
+              (model.functionStatus === ApplicationStatus.STARTING ||
+                model.functionStatus === ApplicationStatus.STOPPING),
+          );
+          const continueUpdateActions: Observable<AnyAction>[] =
+            updatingModels.map((model) =>
+              of(
+                ApplicationActions.continueUpdatingFunctionStatus({
+                  id: model.id,
+                  status: model.functionStatus as ApplicationStatus,
+                }),
+              ),
+            );
+
           return concat(
             of(ModelsActions.getModelsSuccess({ models: response })),
             of(
@@ -131,6 +150,7 @@ const getModelsEpic: AppEpic = (action$, state$) =>
                 featureType: FeatureType.Application,
               }),
             ),
+            ...continueUpdateActions,
           );
         }),
         catchError((err) => {
diff --git a/apps/chat/src/store/models/models.reducers.ts b/apps/chat/src/store/models/models.reducers.ts
index f15a2dbc6e..be3b272c92 100644
--- a/apps/chat/src/store/models/models.reducers.ts
+++ b/apps/chat/src/store/models/models.reducers.ts
@@ -3,6 +3,7 @@ import { PayloadAction, createSelector, createSlice } from '@reduxjs/toolkit';
 import { combineEntities } from '@/src/utils/app/common';
 import { translate } from '@/src/utils/app/translation';
 
+import { ApplicationStatus } from '@/src/types/applications';
 import { EntityType } from '@/src/types/common';
 import { ErrorMessage } from '@/src/types/error';
 import {
@@ -20,6 +21,7 @@ import { RootState } from '../index';
 
 import { UploadStatus } from '@epam/ai-dial-shared';
 import { sortBy } from 'lodash-es';
+import cloneDeep from 'lodash-es/cloneDeep';
 import omit from 'lodash-es/omit';
 import uniq from 'lodash-es/uniq';
 
@@ -240,6 +242,28 @@ export const modelsSlice = createSlice({
         payload.models,
       );
     },
+    updateFunctionStatus: (
+      state,
+      {
+        payload,
+      }: PayloadAction<{
+        id: string;
+        status: ApplicationStatus;
+      }>,
+    ) => {
+      const targetModel = state.modelsMap[payload.id];
+
+      if (targetModel && targetModel.functionStatus) {
+        const updatedModel = cloneDeep(targetModel);
+        updatedModel.functionStatus = payload.status;
+
+        state.models = state.models.map((model) =>
+          model.reference === targetModel.reference ? updatedModel : model,
+        );
+        state.modelsMap[targetModel.id] = updatedModel;
+        state.modelsMap[targetModel.reference] = updatedModel;
+      }
+    },
   },
 });
 
diff --git a/apps/chat/src/styles/globals.css b/apps/chat/src/styles/globals.css
index 2e81cae616..2a11dd2ab3 100644
--- a/apps/chat/src/styles/globals.css
+++ b/apps/chat/src/styles/globals.css
@@ -145,6 +145,32 @@ pre:has(div.codeblock) {
   }
 }
 
+@layer components {
+  .icon-button {
+    @apply rounded border border-transparent p-[5px] outline-none;
+  }
+
+  .icon-button:disabled {
+    @apply cursor-not-allowed text-controls-disable;
+  }
+
+  .icon-button:not(:disabled) {
+    @apply text-secondary hover:bg-accent-primary-alpha hover:text-accent-primary;
+  }
+
+  .icon-button.button-accent-primary:not(:disabled) {
+    @apply text-accent-primary;
+  }
+
+  .icon-button.button-error:not(:disabled) {
+    @apply text-error hover:bg-error;
+  }
+
+  .icon-button.button-accent-secondary:not(:disabled) {
+    @apply text-accent-secondary hover:bg-accent-secondary-alpha;
+  }
+}
+
 @layer components {
   .checkbox {
     @apply relative m-0 mr-2 inline h-4 w-4 shrink-0 appearance-none rounded-sm border border-primary text-accent-primary checked:border-accent-primary indeterminate:border-accent-primary hover:border-accent-primary focus-visible:outline-none;
diff --git a/apps/chat/src/types/applications.ts b/apps/chat/src/types/applications.ts
index 73b01f2d2f..be99fa3e63 100644
--- a/apps/chat/src/types/applications.ts
+++ b/apps/chat/src/types/applications.ts
@@ -1,7 +1,89 @@
-import { DialAIEntityModel } from './models';
+import { DialAIEntityFeatures, DialAIEntityModel } from './models';
 
 import { Entity } from '@epam/ai-dial-shared';
 
+export enum ApplicationStatus {
+  STARTED = 'STARTED',
+  STARTING = 'STARTING',
+  STOPPED = 'STOPPED',
+  STOPPING = 'STOPPING',
+  CREATED = 'CREATED',
+  FAILED = 'FAILED',
+}
+
+export enum SimpleApplicationStatus {
+  START = 'start',
+  STOP = 'stop',
+  UPDATING = 'updating',
+}
+
+export interface ApiApplicationFunctionType {
+  error?: string;
+  status: ApplicationStatus;
+  runtime: string;
+  source_folder: string;
+  mapping: Record<string, string>;
+  env?: Record<string, string>;
+}
+
+export interface ApiApplicationResponseBase {
+  display_name: string;
+  display_version: string;
+  icon_url: string;
+  description: string;
+  features: DialAIEntityFeatures;
+  input_attachment_types: string[];
+  max_input_attachments: number;
+  defaults: Record<string, unknown>;
+  reference: string;
+  forward_auth_token: boolean;
+  description_keywords?: string[];
+  endpoint: string;
+  function?: ApiApplicationFunctionType;
+}
+
+export interface ApiApplicationResponsePublication
+  extends ApiApplicationResponseBase {
+  application: string;
+}
+
+export interface ApiApplicationResponseDefault
+  extends ApiApplicationResponseBase {
+  name: string;
+}
+
+export type ApiApplicationResponse =
+  | ApiApplicationResponsePublication
+  | ApiApplicationResponseDefault;
+
+export interface ApiApplicationModelBase {
+  display_name: string;
+  display_version: string;
+  icon_url: string;
+  description?: string;
+  features?: DialAIEntityFeatures;
+  input_attachment_types?: string[];
+  max_input_attachments?: number;
+  defaults?: Record<string, unknown>;
+  url?: string;
+  reference?: string;
+  description_keywords?: string[];
+}
+
+export interface ApiApplicationModelRegular extends ApiApplicationModelBase {
+  endpoint: string;
+  function?: never;
+}
+
+export interface ApiApplicationModelFunction extends ApiApplicationModelBase {
+  endpoint?: never;
+  function: Omit<ApiApplicationFunctionType, 'status'>;
+}
+
+export type ApiApplicationModel =
+  | ApiApplicationModelRegular
+  | ApiApplicationModelFunction;
+
 export interface ApplicationInfo extends Entity {
   version: string;
 }
@@ -9,6 +91,13 @@ export interface CustomApplicationModel
   extends DialAIEntityModel,
     ApplicationInfo {
   completionUrl: string;
+  function?: {
+    status?: ApplicationStatus;
+    runtime?: string;
+    sourceFolder: string;
+    mapping: Record<string, string>;
+    env?: Record<string, string>;
+  };
   version: string;
 }
 
@@ -18,6 +107,7 @@ export enum ApplicationActionType {
 }
 
 export enum ApplicationType {
-  CUSTOM_APP,
-  QUICK_APP,
+  CUSTOM_APP = 'application',
+  QUICK_APP = 'quick app',
+  CODE_APP = 'code app',
 }
diff --git a/apps/chat/src/types/common.ts b/apps/chat/src/types/common.ts
index 8aaeb642f0..80633236a0 100644
--- a/apps/chat/src/types/common.ts
+++ b/apps/chat/src/types/common.ts
@@ -112,6 +112,11 @@ export interface DropdownSelectorOption {
   readonly isDisabled?: boolean;
 }
 
+export interface SelectOption<L, V> {
+  label: L;
+  value: V;
+}
+
 export enum PageType {
   Chat = 'chat',
   Marketplace = 'marketplace',
diff --git a/apps/chat/src/types/models.ts b/apps/chat/src/types/models.ts
index d5ddca500f..cc8f75e502 100644
--- a/apps/chat/src/types/models.ts
+++ b/apps/chat/src/types/models.ts
@@ -1,3 +1,5 @@
+import { ApplicationStatus } from '@/src/types/applications';
+
 import { EntityType } from './common';
 
 import { TiktokenEncoding } from '@dqbd/tiktoken';
@@ -41,6 +43,10 @@ export interface CoreAIEntity<T = EntityType.Model> {
   };
   tokenizer_model?: TokenizerModel;
   description_keywords?: string[];
+
+  function?: {
+    status: ApplicationStatus;
+  };
 }
 
 export interface DialAIEntityFeatures {
@@ -79,6 +85,8 @@ export interface DialAIEntityModel extends Omit<DialAIEntity, 'type'> {
   reference: string;
   isDefault: boolean;
   topics?: string[];
+
+  functionStatus?: ApplicationStatus;
 }
 
 export interface DialAIEntityAddon extends Omit<DialAIEntity, 'type'> {
diff --git a/apps/chat/src/types/storage.ts b/apps/chat/src/types/storage.ts
index 1466748c87..bb2106430b 100644
--- a/apps/chat/src/types/storage.ts
+++ b/apps/chat/src/types/storage.ts
@@ -150,4 +150,8 @@ export interface DialStorage {
   ): Observable<CustomApplicationModel | null>;
 
   deleteApplication(applicationId: string): Observable<void>;
+
+  startApplication(applicationName: string): Observable<void>;
+
+  stopApplication(applicationName: string): Observable<void>;
 }
diff --git a/apps/chat/src/utils/app/application.ts b/apps/chat/src/utils/app/application.ts
index 9d0f960cd7..54d3518f66 100644
--- a/apps/chat/src/utils/app/application.ts
+++ b/apps/chat/src/utils/app/application.ts
@@ -1,9 +1,16 @@
+import { getTopicColors } from '@/src/utils/app/style-helpers';
+
 import {
+  ApiApplicationModel,
+  ApiApplicationResponse,
   ApplicationInfo,
+  ApplicationStatus,
+  ApplicationType,
   CustomApplicationModel,
+  SimpleApplicationStatus,
 } from '@/src/types/applications';
 import { EntityType, PartialBy } from '@/src/types/common';
-import { DialAIEntityFeatures, DialAIEntityModel } from '@/src/types/models';
+import { DialAIEntityModel } from '@/src/types/models';
 import { QuickAppConfig } from '@/src/types/quick-apps';
 
 import { DESCRIPTION_DELIMITER_REGEX } from '@/src/constants/chat';
@@ -15,6 +22,8 @@ import { constructPath } from './file';
 import { getFolderIdFromEntityId } from './folders';
 import { getApplicationRootId } from './id';
 
+import omit from 'lodash-es/omit';
+
 export const getGeneratedApplicationId = (
   application: Omit<ApplicationInfo, 'id'>,
 ): string => {
@@ -37,70 +46,62 @@ export const regenerateApplicationId = <T extends ApplicationInfo>(
   return application as T;
 };
 
-export interface ApiApplicationModel {
-  endpoint: string;
-  display_name: string;
-  display_version: string;
-  icon_url: string;
-  description?: string;
-  features?: DialAIEntityFeatures;
-  input_attachment_types?: string[];
-  max_input_attachments?: number;
-  defaults?: Record<string, unknown>;
-  url?: string;
-  reference?: string;
-  description_keywords?: string[];
-}
-
 export const convertApplicationToApi = (
   applicationData: Omit<CustomApplicationModel, 'id'>,
-): ApiApplicationModel => ({
-  endpoint: applicationData.completionUrl,
-  display_name: applicationData.name,
-  display_version: applicationData.version,
-  icon_url: ApiUtils.encodeApiUrl(applicationData.iconUrl ?? ''),
-  description: applicationData.description,
-  features: applicationData.features,
-  input_attachment_types: applicationData.inputAttachmentTypes,
-  max_input_attachments: applicationData.maxInputAttachments,
-  defaults: {},
-  reference: applicationData.reference || undefined,
-  description_keywords: applicationData.topics,
-});
+): ApiApplicationModel => {
+  const commonData = {
+    display_name: applicationData.name,
+    display_version: applicationData.version,
+    icon_url: ApiUtils.encodeApiUrl(applicationData.iconUrl ?? ''),
+    description: applicationData.description,
+    features: applicationData.features,
+    input_attachment_types: applicationData.inputAttachmentTypes,
+    max_input_attachments: applicationData.maxInputAttachments,
+    defaults: {},
+    reference: applicationData.reference || undefined,
+    description_keywords: applicationData.topics,
+  };
 
-interface BaseApplicationDetailsResponse {
-  endpoint: string;
-  display_name: string;
-  display_version: string;
-  icon_url: string;
-  description: string;
-  forward_auth_token: boolean;
-  input_attachment_types: string[];
-  max_input_attachments: number;
-  features: Record<string, string>;
-  defaults: Record<string, unknown>;
-  reference: string;
-  description_keywords?: string[];
-}
-
-export interface ApplicationDetailsResponse
-  extends BaseApplicationDetailsResponse {
-  name: string;
-}
+  if (applicationData.function) {
+    const sourceFolderWithSlash =
+      applicationData.function.sourceFolder +
+      (applicationData.function.sourceFolder.endsWith('/') ? '' : '/');
 
-interface PublicApplicationDetailsResponse
-  extends BaseApplicationDetailsResponse {
-  application: string;
-}
+    return {
+      ...commonData,
+      function: {
+        runtime: 'python3.11',
+        source_folder: sourceFolderWithSlash,
+        mapping: applicationData.function.mapping,
+        ...(applicationData.function.env && {
+          env: applicationData.function.env,
+        }),
+      },
+    };
+  }
+
+  return {
+    ...commonData,
+    endpoint: applicationData.completionUrl,
+  };
+};
 
 export const convertApplicationFromApi = (
-  application: ApplicationDetailsResponse | PublicApplicationDetailsResponse,
+  application: ApiApplicationResponse,
 ): CustomApplicationModel => {
   const id = ApiUtils.decodeApiUrl(
     'application' in application ? application.application : application.name,
   );
+
+  const appFunction = application.function
+    ? {
+        ...omit(application.function, ['source_folder']),
+        sourceFolder: application.function.source_folder,
+      }
+    : undefined;
+
   return {
-    ...application,
+    ...omit(application, ['function', 'endpoint']),
     isDefault: false,
     type: EntityType.Application,
     id,
@@ -109,9 +110,13 @@ export const convertApplicationFromApi = (
     maxInputAttachments: application.max_input_attachments,
     version: application.display_version,
     name: application.display_name,
-    completionUrl: application.endpoint,
+    completionUrl: application.endpoint ?? '',
     folderId: getFolderIdFromEntityId(id),
     topics: application.description_keywords,
+    ...(appFunction && {
+      function: appFunction,
+      functionStatus: appFunction.status,
+    }),
   };
 };
 
@@ -190,3 +195,46 @@ export const createQuickAppConfig = ({
     QUICK_APP_CONFIG_DIVIDER,
   );
 };
+
+export const topicToOption = (topic: string) => ({
+  value: topic,
+  label: topic,
+  ...getTopicColors(topic),
+});
+
+export const isExecutableApp = (entity: DialAIEntityModel) =>
+  !!entity.functionStatus;
+
+export const getApplicationType = (entity: DialAIEntityModel) => {
+  if (isQuickApp(entity)) return ApplicationType.QUICK_APP;
+  if (isExecutableApp(entity)) return ApplicationType.CODE_APP;
+
+  return ApplicationType.CUSTOM_APP;
+};
+
+export const getApplicationNextStatus = (entity: DialAIEntityModel) => {
+  return entity.functionStatus === ApplicationStatus.STARTED
+    ? ApplicationStatus.STOPPING
+    : ApplicationStatus.STARTING;
+};
+
+export const getApplicationSimpleStatus = (entity: DialAIEntityModel) => {
+  switch (entity.functionStatus) {
+    case ApplicationStatus.CREATED:
+    case ApplicationStatus.STOPPED:
+    case ApplicationStatus.FAILED:
+      return SimpleApplicationStatus.START;
+    case ApplicationStatus.STARTED:
+      return SimpleApplicationStatus.STOP;
+    default:
+      return SimpleApplicationStatus.UPDATING;
+  }
+};
+
+export const isApplicationStatusUpdating = (entity: DialAIEntityModel) => {
+  return (
+    entity.functionStatus === ApplicationStatus.STARTING ||
+    entity.functionStatus === ApplicationStatus.STOPPING ||
+    entity.functionStatus === ApplicationStatus.STARTED
+  );
+};
diff --git a/apps/chat/src/utils/app/data/application-service.ts b/apps/chat/src/utils/app/data/application-service.ts
index a4e369b859..7921c69646 100644
--- a/apps/chat/src/utils/app/data/application-service.ts
+++ b/apps/chat/src/utils/app/data/application-service.ts
@@ -29,4 +29,12 @@ export class ApplicationService {
   ): Observable<CustomApplicationModel | null> {
     return DataService.getDataStorage().getApplication(applicationId);
   }
+
+  public static start(applicationId: string): Observable<void> {
+    return DataService.getDataStorage().startApplication(applicationId);
+  }
+
+  public static stop(applicationId: string): Observable<void> {
+    return DataService.getDataStorage().stopApplication(applicationId);
+  }
 }
diff --git a/apps/chat/src/utils/app/data/storages/api-storage.ts b/apps/chat/src/utils/app/data/storages/api-storage.ts
index 77678c7952..0ae60a2382 100644
--- a/apps/chat/src/utils/app/data/storages/api-storage.ts
+++ b/apps/chat/src/utils/app/data/storages/api-storage.ts
@@ -17,6 +17,7 @@ import { ApiUtils, parseApplicationApiKey } from '@/src/utils/server/api';
 import {
   ApplicationInfo,
   CustomApplicationModel,
+  SimpleApplicationStatus,
 } from '@/src/types/applications';
 import { Conversation } from '@/src/types/chat';
 import { BackendResourceType, MoveModel } from '@/src/types/common';
@@ -285,4 +286,18 @@ export class ApiStorage implements DialStorage {
       ...parseApplicationApiKey(applicationId),
     });
   }
+
+  startApplication(applicationId: string): Observable<void> {
+    return this._applicationApiStorage.toggleApplicationStatus(
+      applicationId,
+      SimpleApplicationStatus.START,
+    );
+  }
+
+  stopApplication(applicationId: string): Observable<void> {
+    return this._applicationApiStorage.toggleApplicationStatus(
+      applicationId,
+      SimpleApplicationStatus.STOP,
+    );
+  }
 }
diff --git a/apps/chat/src/utils/app/data/storages/api/application-api-storage.ts b/apps/chat/src/utils/app/data/storages/api/application-api-storage.ts
index f002b26a2e..117c29c5cb 100644
--- a/apps/chat/src/utils/app/data/storages/api/application-api-storage.ts
+++ b/apps/chat/src/utils/app/data/storages/api/application-api-storage.ts
@@ -1,17 +1,23 @@
+import { Observable, throwError } from 'rxjs';
+
+import { constructPath } from '@/src/utils/app/file';
 import {
+  ApiUtils,
   getApplicationApiKey,
   parseApplicationApiKey,
 } from '@/src/utils/server/api';
 
 import {
+  ApiApplicationModel,
+  ApiApplicationResponse,
   ApplicationInfo,
   CustomApplicationModel,
+  SimpleApplicationStatus,
 } from '@/src/types/applications';
 import { ApiKeys } from '@/src/types/common';
+import { HTTPMethod } from '@/src/types/http';
 
 import {
-  ApiApplicationModel,
-  ApplicationDetailsResponse,
   convertApplicationFromApi,
   convertApplicationToApi,
 } from '../../../application';
@@ -22,12 +28,12 @@ import { Entity } from '@epam/ai-dial-shared';
 export class ApplicationApiStorage extends ApiEntityStorage<
   ApplicationInfo,
   CustomApplicationModel,
-  ApplicationDetailsResponse,
+  ApiApplicationResponse,
   ApiApplicationModel
 > {
   mergeGetResult(
     info: Entity,
-    entity: ApplicationDetailsResponse,
+    entity: ApiApplicationResponse,
   ): CustomApplicationModel {
     return {
       ...info,
@@ -46,4 +52,20 @@ export class ApplicationApiStorage extends ApiEntityStorage<
   getStorageKey(): ApiKeys {
     return ApiKeys.Applications;
   }
+
+  toggleApplicationStatus(
+    applicationId: string,
+    status: SimpleApplicationStatus.START | SimpleApplicationStatus.STOP,
+  ): Observable<void> {
+    try {
+      return ApiUtils.request(constructPath('api/ops/application', status), {
+        method: HTTPMethod.POST,
+        body: JSON.stringify({
+          url: ApiUtils.encodeApiUrl(applicationId),
+        }),
+      });
+    } catch (error) {
+      return throwError(() => error);
+    }
+  }
 }
diff --git a/apps/chat/src/utils/app/data/storages/browser-storage.ts b/apps/chat/src/utils/app/data/storages/browser-storage.ts
index 2d167a0d63..a5bcf964af 100644
--- a/apps/chat/src/utils/app/data/storages/browser-storage.ts
+++ b/apps/chat/src/utils/app/data/storages/browser-storage.ts
@@ -387,4 +387,12 @@ export class BrowserStorage implements DialStorage {
   deleteApplication(_applicationId: string): Observable<void> {
     throw new Error('Method not implemented.');
   }
+
+  startApplication(_name: string): Observable<void> {
+    throw new Error('Method not implemented.');
+  }
+
+  stopApplication(_name: string): Observable<void> {
+    throw new Error('Method not implemented.');
+  }
 }
diff --git a/apps/chat/src/utils/app/data/text-file-service.ts b/apps/chat/src/utils/app/data/text-file-service.ts
new file mode 100644
index 0000000000..f218306775
--- /dev/null
+++ b/apps/chat/src/utils/app/data/text-file-service.ts
@@ -0,0 +1,54 @@
+import { Observable, catchError, filter, map, of, throwError } from 'rxjs';
+
+import { FileService } from '@/src/utils/app/data/file-service';
+import { ApiUtils } from '@/src/utils/server/api';
+
+import { HTTPMethod } from '@/src/types/http';
+
+interface Result {
+  success?: boolean;
+  error?: string;
+  percent?: number;
+}
+
+export class TextFileService {
+  public static getFileContent(path: string): Observable<string> {
+    return ApiUtils.requestText(path).pipe(
+      catchError((error) => {
+        console.error(`Failed to get text content from: ${path}`);
+        return throwError(() => new Error(error.message));
+      }),
+    );
+  }
+
+  public static updateContent(
+    relativePath: string,
+    fileName: string,
+    data: File,
+  ): Observable<Result> {
+    const formData = new FormData();
+    formData.append('attachments', data, fileName);
+
+    return FileService.sendFile(
+      formData,
+      relativePath,
+      fileName,
+      HTTPMethod.PUT,
+    ).pipe(
+      filter(
+        ({ result, percent }) =>
+          typeof result !== 'undefined' || typeof percent !== 'undefined',
+      ),
+      map(({ result, percent }) => {
+        if (result) {
+          return { success: true };
+        }
+        return { percent };
+      }),
+      catchError((error) => {
+        console.error(`Failed to save file ${fileName}`, error);
+        return of({ success: false, error: `Failed save file ${fileName}` });
+      }),
+    );
+  }
+}
diff --git a/apps/chat/src/utils/server/api.ts b/apps/chat/src/utils/server/api.ts
index 9672e8e68d..0a5be141c2 100644
--- a/apps/chat/src/utils/server/api.ts
+++ b/apps/chat/src/utils/server/api.ts
@@ -203,6 +203,27 @@ export class ApiUtils {
     );
   }
 
+  static requestText(url: string, options?: RequestInit) {
+    return fromFetch(url, {
+      headers: { 'Content-Type': 'application/json' },
+      ...options,
+    }).pipe(
+      switchMap((response) => {
+        if (!response.ok) {
+          return from(ServerUtils.getErrorMessageFromResponse(response)).pipe(
+            switchMap((errorMessage) => {
+              return throwError(
+                () => new Error(errorMessage || response.status + ''),
+              );
+            }),
+          );
+        }
+
+        return from(response.text());
+      }),
+    );
+  }
+
   static requestOld({
     url,
     method,
diff --git a/apps/chat/src/utils/server/get-sorted-entities.ts b/apps/chat/src/utils/server/get-sorted-entities.ts
index 55e9e7aaac..a9b09280fe 100644
--- a/apps/chat/src/utils/server/get-sorted-entities.ts
+++ b/apps/chat/src/utils/server/get-sorted-entities.ts
@@ -184,6 +184,9 @@ export const getSortedEntities = async (token: JWT | null) => {
         encoding: getTiktokenEncoding(entity.tokenizer_model),
         tokensPerMessage: getTokensPerMessage(entity.tokenizer_model),
       },
+      ...(entity.function && {
+        functionStatus: entity.function?.status,
+      }),
     });
   }
 
diff --git a/libs/shared/src/types/features.ts b/libs/shared/src/types/features.ts
index 3ee0de8a2f..eae25e1828 100644
--- a/libs/shared/src/types/features.ts
+++ b/libs/shared/src/types/features.ts
@@ -24,6 +24,7 @@ export enum Feature {
   MessageTemplates = 'message-templates', // message templates
   Marketplace = 'marketplace', // Enable Marketplace
   QuickApps = 'quick-apps', // Enable Quick apps
+  CodeApps = 'code-apps', // Enable Code apps
 }
 
 export const availableFeatures: Record<Feature, boolean> = {
@@ -52,4 +53,5 @@ export const availableFeatures: Record<Feature, boolean> = {
   [Feature.MessageTemplates]: true,
   [Feature.Marketplace]: true,
   [Feature.QuickApps]: true,
+  [Feature.CodeApps]: true,
 };