From d435a0b0fa7af874047e5ea2a6412053dc196ac9 Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Thu, 15 Jan 2026 00:43:14 +0300
Subject: [PATCH] [UI] Default fleet in project wizard #373

---
 frontend/src/api.ts                           |   1 +
 .../ButtonWithConfirmation/index.tsx          |  20 +-
 .../components/ConfirmationDialog/index.tsx   |   5 +-
 .../components/ConfirmationDialog/slice.ts    |  34 ++
 frontend/src/components/form/Toogle/index.tsx |  57 ++++
 frontend/src/components/form/Toogle/types.ts  |  11 +
 frontend/src/components/index.ts              |   1 +
 frontend/src/hooks/index.ts                   |   1 +
 frontend/src/hooks/useConfirmationDialog.ts   |  27 ++
 frontend/src/hooks/useNotifications.ts        |   1 +
 frontend/src/layouts/AppLayout/index.tsx      |   7 +
 frontend/src/locale/en.json                   |  10 +-
 .../pages/Project/CreateWizard/constants.ts   |  13 -
 .../pages/Project/CreateWizard/constants.tsx  |  42 +++
 .../src/pages/Project/CreateWizard/index.tsx  | 299 +++++++++++-------
 .../src/pages/Project/CreateWizard/types.ts   |   7 +-
 frontend/src/pages/User/Details/index.tsx     |   8 +-
 frontend/src/pages/User/List/index.tsx        |   2 +
 frontend/src/services/fleet.ts                |  20 +-
 frontend/src/store.ts                         |   2 +
 frontend/src/types/fleet.d.ts                 |  16 +-
 21 files changed, 448 insertions(+), 136 deletions(-)
 create mode 100644 frontend/src/components/ConfirmationDialog/slice.ts
 create mode 100644 frontend/src/components/form/Toogle/index.tsx
 create mode 100644 frontend/src/components/form/Toogle/types.ts
 create mode 100644 frontend/src/hooks/useConfirmationDialog.ts
 delete mode 100644 frontend/src/pages/Project/CreateWizard/constants.ts
 create mode 100644 frontend/src/pages/Project/CreateWizard/constants.tsx

diff --git a/frontend/src/api.ts b/frontend/src/api.ts
index d58dbc7d38..144a21bc86 100644
--- a/frontend/src/api.ts
+++ b/frontend/src/api.ts
@@ -99,6 +99,7 @@ export const API = {
         // Fleets
         FLEETS: (projectName: IProject['project_name']) => `${API.BASE()}/project/${projectName}/fleets/list`,
         FLEETS_DETAILS: (projectName: IProject['project_name']) => `${API.BASE()}/project/${projectName}/fleets/get`,
+        FLEETS_APPLY: (projectName: IProject['project_name']) => `${API.BASE()}/project/${projectName}/fleets/apply`,
         FLEETS_DELETE: (projectName: IProject['project_name']) => `${API.BASE()}/project/${projectName}/fleets/delete`,
         FLEET_INSTANCES_DELETE: (projectName: IProject['project_name']) =>
             `${API.BASE()}/project/${projectName}/fleets/delete_instances`,
diff --git a/frontend/src/components/ButtonWithConfirmation/index.tsx b/frontend/src/components/ButtonWithConfirmation/index.tsx
index 78c2793d9c..56ae78ad59 100644
--- a/frontend/src/components/ButtonWithConfirmation/index.tsx
+++ b/frontend/src/components/ButtonWithConfirmation/index.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import Box from '@cloudscape-design/components/box';
 
 import { Button } from '../Button';
@@ -13,20 +14,31 @@ export const ButtonWithConfirmation: React.FC<IProps> = ({
     confirmButtonLabel,
     ...props
 }) => {
+    const { t } = useTranslation();
     const [showDeleteConfirm, setShowConfirmDelete] = useState(false);
 
     const toggleDeleteConfirm = () => {
         setShowConfirmDelete((val) => !val);
     };
 
-    const content = typeof confirmContent === 'string' ? <Box variant="span">{confirmContent}</Box> : confirmContent;
-
     const onConfirm = () => {
         if (onClick) onClick();
 
         setShowConfirmDelete(false);
     };
 
+    const getContent = () => {
+        if (!confirmContent) {
+            return <Box variant="span">{t('confirm_dialog.message')}</Box>;
+        }
+
+        if (typeof confirmContent === 'string') {
+            return <Box variant="span">{confirmContent}</Box>;
+        }
+
+        return confirmContent;
+    };
+
     return (
         <>
             <Button {...props} onClick={toggleDeleteConfirm} />
@@ -36,8 +48,8 @@ export const ButtonWithConfirmation: React.FC<IProps> = ({
                 onDiscard={toggleDeleteConfirm}
                 onConfirm={onConfirm}
                 title={confirmTitle}
-                content={content}
-                confirmButtonLabel={confirmButtonLabel}
+                content={getContent()}
+                confirmButtonLabel={confirmButtonLabel ?? t('common.delete')}
             />
         </>
     );
diff --git a/frontend/src/components/ConfirmationDialog/index.tsx b/frontend/src/components/ConfirmationDialog/index.tsx
index ff69e36f02..082d15f8d8 100644
--- a/frontend/src/components/ConfirmationDialog/index.tsx
+++ b/frontend/src/components/ConfirmationDialog/index.tsx
@@ -9,7 +9,7 @@ import { IProps } from './types';
 
 export const ConfirmationDialog: React.FC<IProps> = ({
     title: titleProp,
-    content: contentProp,
+    content,
     visible = false,
     onDiscard,
     onConfirm,
@@ -18,9 +18,8 @@ export const ConfirmationDialog: React.FC<IProps> = ({
 }) => {
     const { t } = useTranslation();
     const title = titleProp ?? t('confirm_dialog.title');
-    const content = contentProp ?? <Box variant="span">{t('confirm_dialog.message')}</Box>;
     const cancelButtonLabel = cancelButtonLabelProp ?? t('common.cancel');
-    const confirmButtonLabel = confirmButtonLabelProp ?? t('common.delete');
+    const confirmButtonLabel = confirmButtonLabelProp ?? t('common.ok');
 
     return (
         <Modal
diff --git a/frontend/src/components/ConfirmationDialog/slice.ts b/frontend/src/components/ConfirmationDialog/slice.ts
new file mode 100644
index 0000000000..d662c6b5fa
--- /dev/null
+++ b/frontend/src/components/ConfirmationDialog/slice.ts
@@ -0,0 +1,34 @@
+import type { RootState } from 'store';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+import { IProps as ConfirmationDialogProps } from './types';
+
+type ConfirmationDialogPropsWithUuid = ConfirmationDialogProps & { uuid: string };
+
+type ConfirmationDialogsStata = {
+    dialogs: Array<ConfirmationDialogPropsWithUuid>;
+};
+
+const initialState: ConfirmationDialogsStata = {
+    dialogs: [],
+};
+
+export const confirmationSlice = createSlice({
+    name: 'confirmation',
+    initialState,
+
+    reducers: {
+        open: (state, action: PayloadAction<ConfirmationDialogPropsWithUuid>) => {
+            state.dialogs = [...state.dialogs, action.payload];
+        },
+        close: (state, action: PayloadAction<ConfirmationDialogPropsWithUuid['uuid']>) => {
+            state.dialogs = state.dialogs.filter((i) => i.uuid !== action.payload);
+        },
+    },
+});
+
+export const { open, close } = confirmationSlice.actions;
+
+export const selectConfirmationDialogs = (state: RootState) => state.confirmation.dialogs;
+
+export default confirmationSlice.reducer;
diff --git a/frontend/src/components/form/Toogle/index.tsx b/frontend/src/components/form/Toogle/index.tsx
new file mode 100644
index 0000000000..df7654a1c1
--- /dev/null
+++ b/frontend/src/components/form/Toogle/index.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { Controller, FieldValues } from 'react-hook-form';
+import FormField from '@cloudscape-design/components/form-field';
+import ToggleCSD from '@cloudscape-design/components/toggle';
+
+import { FormToggleProps } from './types';
+
+export const FormToggle = <T extends FieldValues>({
+    name,
+    control,
+    rules,
+    label,
+    info,
+    constraintText,
+    description,
+    secondaryControl,
+    stretch,
+    leftContent,
+    toggleLabel,
+    onChange: onChangeProp,
+    ...props
+}: FormToggleProps<T>) => {
+    return (
+        <Controller
+            name={name}
+            control={control}
+            rules={rules}
+            render={({ field: { onChange, value, ...fieldRest }, fieldState: { error } }) => {
+                return (
+                    <FormField
+                        description={description}
+                        label={label}
+                        info={info}
+                        stretch={stretch}
+                        constraintText={constraintText}
+                        secondaryControl={secondaryControl}
+                        errorText={error?.message}
+                    >
+                        {leftContent}
+
+                        <ToggleCSD
+                            {...fieldRest}
+                            {...props}
+                            checked={value}
+                            onChange={(event) => {
+                                onChange(event.detail.checked);
+                                onChangeProp?.(event);
+                            }}
+                        >
+                            {toggleLabel}
+                        </ToggleCSD>
+                    </FormField>
+                );
+            }}
+        />
+    );
+};
diff --git a/frontend/src/components/form/Toogle/types.ts b/frontend/src/components/form/Toogle/types.ts
new file mode 100644
index 0000000000..460da2f47c
--- /dev/null
+++ b/frontend/src/components/form/Toogle/types.ts
@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { ControllerProps, FieldValues } from 'react-hook-form';
+import { FormFieldProps } from '@cloudscape-design/components/form-field';
+import { ToggleProps } from '@cloudscape-design/components/toggle';
+
+export type FormToggleProps<T extends FieldValues> = Omit<ToggleProps, 'value' | 'checked' | 'name'> &
+    Omit<FormFieldProps, 'errorText'> &
+    Pick<ControllerProps<T>, 'control' | 'name' | 'rules'> & {
+        leftContent?: ReactNode;
+        toggleLabel?: string;
+    };
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index c8aa4013fb..3e5d353c96 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -73,6 +73,7 @@ export { ListEmptyMessage } from './ListEmptyMessage';
 export { DetailsHeader } from './DetailsHeader';
 export { Loader } from './Loader';
 export { FormCheckbox } from './form/Checkbox';
+export { FormToggle } from './form/Toogle';
 export { FormInput } from './form/Input';
 export { FormMultiselect } from './form/Multiselect';
 export { FormSelect } from './form/Select';
diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
index cc5aa6ac62..911e138757 100644
--- a/frontend/src/hooks/index.ts
+++ b/frontend/src/hooks/index.ts
@@ -2,6 +2,7 @@ export { default as useAppDispatch } from './useAppDispatch';
 export { default as useAppSelector } from './useAppSelector';
 export { useBreadcrumbs } from './useBreadcrumbs';
 export { useNotifications } from './useNotifications';
+export { useConfirmationDialog } from './useConfirmationDialog';
 export { useHelpPanel } from './useHelpPanel';
 export { usePermissionGuard } from './usePermissionGuard';
 export { useInfiniteScroll } from './useInfiniteScroll';
diff --git a/frontend/src/hooks/useConfirmationDialog.ts b/frontend/src/hooks/useConfirmationDialog.ts
new file mode 100644
index 0000000000..f6ba67cdc5
--- /dev/null
+++ b/frontend/src/hooks/useConfirmationDialog.ts
@@ -0,0 +1,27 @@
+import { close, open } from 'components/ConfirmationDialog/slice';
+import { IProps as ConfirmationDialogProps } from 'components/ConfirmationDialog/types';
+
+import { getUid } from '../libs';
+import useAppDispatch from './useAppDispatch';
+
+export const useConfirmationDialog = () => {
+    const dispatch = useAppDispatch();
+
+    const onDiscard = (uuid: string) => {
+        dispatch(close(uuid));
+    };
+
+    const openConfirmationDialog = (props: Omit<ConfirmationDialogProps, 'onDiscard'>) => {
+        const uuid = getUid();
+
+        dispatch(
+            open({
+                uuid,
+                ...props,
+                onDiscard: () => onDiscard(uuid),
+            }),
+        );
+    };
+
+    return [openConfirmationDialog];
+};
diff --git a/frontend/src/hooks/useNotifications.ts b/frontend/src/hooks/useNotifications.ts
index d343a99a3d..61189303eb 100644
--- a/frontend/src/hooks/useNotifications.ts
+++ b/frontend/src/hooks/useNotifications.ts
@@ -12,6 +12,7 @@ const NOTIFICATION_LIFE_TIME = 6000;
 type TUseNotificationsArgs = { temporary?: boolean; liveTime?: number } | undefined;
 
 const defaultArgs: NonNullable<Required<TUseNotificationsArgs>> = { temporary: true, liveTime: NOTIFICATION_LIFE_TIME };
+
 export const useNotifications = (args: TUseNotificationsArgs = defaultArgs) => {
     const dispatch = useAppDispatch();
     const notificationIdsSet = useRef(new Set<ReturnType<typeof getUid>>());
diff --git a/frontend/src/layouts/AppLayout/index.tsx b/frontend/src/layouts/AppLayout/index.tsx
index c0bfbed01c..d417779d41 100644
--- a/frontend/src/layouts/AppLayout/index.tsx
+++ b/frontend/src/layouts/AppLayout/index.tsx
@@ -10,6 +10,7 @@ import {
     AppLayout as GenericAppLayout,
     AppLayoutProps as GenericAppLayoutProps,
     BreadcrumbGroup,
+    ConfirmationDialog,
     HelpPanel,
     Notifications,
     SideNavigation,
@@ -35,6 +36,7 @@ import {
     setToolsTab,
 } from 'App/slice';
 
+import { selectConfirmationDialogs } from '../../components/ConfirmationDialog/slice';
 import { AnnotationContext } from './AnnotationContext';
 import { useSideNavigation } from './hooks';
 import { TallyComponent } from './Tally';
@@ -71,6 +73,7 @@ const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
     const helpPanelContent = useAppSelector(selectHelpPanelContent);
     const dispatch = useAppDispatch();
     const { navLinks, activeHref } = useSideNavigation();
+    const confirmationDialogs = useAppSelector(selectConfirmationDialogs);
 
     const onFollowHandler: SideNavigationProps['onFollow'] = (event) => {
         event.preventDefault();
@@ -254,6 +257,10 @@ const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
             />
 
             <TallyComponent />
+
+            {confirmationDialogs.map(({ uuid, ...props }) => (
+                <ConfirmationDialog key={uuid} {...props} visible />
+            ))}
         </AnnotationContext>
     );
 };
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index da3fe00fa9..d84ac4af5b 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -1,6 +1,7 @@
 {
   "dstack": "Dstack",
   "common": {
+    "ok": "OK",
     "loading": "Loading",
     "add": "Add",
     "yes": "Yes",
@@ -207,12 +208,17 @@
       "backends_description": "The following backends can be configured with your own cloud credentials in the project settings after the project is created.",
       "default_fleet": "Create default fleet",
       "default_fleet_description": "You can create default fleet for project",
-      "fleet_name": "Fleet name",
-      "fleet_name_description": "Only latin characters, dashes, underscores, and digits",
+      "fleet_name": "Name",
+      "fleet_name_description": "The name of the fleet, e.g. 'my-fleet'",
+      "fleet_name_placeholder": "Optional",
+      "fleet_name_constraint": "If not specified, generated automatically",
       "fleet_min_instances": "Min number of instances",
       "fleet_min_instances_description": "Only digits",
       "fleet_max_instances": "Max number of instances",
       "fleet_max_instances_description": "Only digits",
+      "fleet_max_instances_placeholder": "Optional",
+      "fleet_idle_duration": "Idle duration",
+      "fleet_idle_duration_description": "e.g. 0s, 1m, 1h",
       "is_public": "Make project public",
       "is_public_description": "Public projects can be accessed by any user without being a member",
       "backend": "Backend",
diff --git a/frontend/src/pages/Project/CreateWizard/constants.ts b/frontend/src/pages/Project/CreateWizard/constants.ts
deleted file mode 100644
index 3e7321a7e6..0000000000
--- a/frontend/src/pages/Project/CreateWizard/constants.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export const projectTypeOptions = [
-    {
-        label: 'GPU marketplace',
-        description:
-            'Find the cheapest GPUs available in our marketplace. Enjoy $5 in free credits, and easily top up your balance with a credit card.',
-        value: 'gpu_marketplace',
-    },
-    {
-        label: 'Your cloud accounts',
-        description: 'Connect and manage your cloud accounts. dstack supports all major GPU cloud providers.',
-        value: 'own_cloud',
-    },
-];
diff --git a/frontend/src/pages/Project/CreateWizard/constants.tsx b/frontend/src/pages/Project/CreateWizard/constants.tsx
new file mode 100644
index 0000000000..6fe830e698
--- /dev/null
+++ b/frontend/src/pages/Project/CreateWizard/constants.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+
+export const projectTypeOptions = [
+    {
+        label: 'GPU marketplace',
+        description:
+            'Find the cheapest GPUs available in our marketplace. Enjoy $5 in free credits, and easily top up your balance with a credit card.',
+        value: 'gpu_marketplace',
+    },
+    {
+        label: 'Your cloud accounts',
+        description: 'Connect and manage your cloud accounts. dstack supports all major GPU cloud providers.',
+        value: 'own_cloud',
+    },
+];
+
+export const FLEET_MIN_INSTANCES_INFO = {
+    header: <h2>Min number of instances</h2>,
+    body: (
+        <>
+            <p>Some text</p>
+        </>
+    ),
+};
+
+export const FLEET_MAX_INSTANCES_INFO = {
+    header: <h2>Max number of instances</h2>,
+    body: (
+        <>
+            <p>Some text</p>
+        </>
+    ),
+};
+
+export const FLEET_IDLE_DURATION_INFO = {
+    header: <h2>Idle duration</h2>,
+    body: (
+        <>
+            <p>Some text</p>
+        </>
+    ),
+};
diff --git a/frontend/src/pages/Project/CreateWizard/index.tsx b/frontend/src/pages/Project/CreateWizard/index.tsx
index b4608bfdd8..b8b42bda2f 100644
--- a/frontend/src/pages/Project/CreateWizard/index.tsx
+++ b/frontend/src/pages/Project/CreateWizard/index.tsx
@@ -7,28 +7,27 @@ import { WizardProps } from '@cloudscape-design/components';
 import { TilesProps } from '@cloudscape-design/components/tiles';
 
 import {
-    // Box,
     Cards,
     Container,
     FormCards,
-    // FormCheckbox,
     FormField,
     FormInput,
-    // FormMultiselect,
     FormTiles,
+    FormToggle,
+    InfoLink,
     KeyValuePairs,
     SpaceBetween,
-    // StatusIndicator,
     Wizard,
 } from 'components';
 
-import { useBreadcrumbs, useNotifications } from 'hooks';
+import { useBreadcrumbs, useConfirmationDialog, useHelpPanel, useNotifications } from 'hooks';
 import { getServerError } from 'libs';
 import { ROUTES } from 'routes';
 import { useGetBackendBaseTypesQuery, useGetBackendTypesQuery } from 'services/backend';
+import { useApplyFleetMutation } from 'services/fleet';
 import { useCreateWizardProjectMutation } from 'services/project';
 
-import { projectTypeOptions } from './constants';
+import { FLEET_IDLE_DURATION_INFO, FLEET_MAX_INSTANCES_INFO, FLEET_MIN_INSTANCES_INFO, projectTypeOptions } from './constants';
 
 import { IProjectWizardForm } from './types';
 
@@ -37,7 +36,9 @@ import { IProjectWizardForm } from './types';
 const requiredFieldError = 'This is required field';
 const minOneLengthError = 'Need to choose one or more';
 const namesFieldError = 'Only latin characters, dashes, underscores, and digits';
-// const numberFieldError = 'This is number field';
+const numberFieldError = 'This is number field';
+
+const fleetStepIndex = 2;
 
 const projectValidationSchema = yup.object({
     project_name: yup
@@ -49,39 +50,32 @@ const projectValidationSchema = yup.object({
         is: 'gpu_marketplace',
         then: yup.array().min(1, minOneLengthError).required(requiredFieldError),
     }),
-    // fleet_name: yup.string().when('enable_fleet', {
-    //     is: true,
-    //     then: yup
-    //         .string()
-    //         .required(requiredFieldError)
-    //         .matches(/^[a-zA-Z0-9-_]+$/, namesFieldError),
-    // }),
-    // fleet_min_instances: yup.number().when('enable_fleet', {
-    //     is: true,
-    //     then: yup
-    //         .number()
-    //         .required(requiredFieldError)
-    //         .typeError(numberFieldError)
-    //         .min(1)
-    //         .test('is-smaller-than-man', 'The minimum value must be less than the maximum value.', (value, context) => {
-    //             const { fleet_max_instances } = context.parent;
-    //             if (typeof fleet_max_instances !== 'number' || typeof value !== 'number') return true;
-    //             return value <= fleet_max_instances;
-    //         }),
-    // }),
-    // fleet_max_instances: yup.number().when('enable_fleet', {
-    //     is: true,
-    //     then: yup
-    //         .number()
-    //         .required(requiredFieldError)
-    //         .typeError(numberFieldError)
-    //         .min(1)
-    //         .test('is-greater-than-min', 'The maximum value must be greater than the minimum value', (value, context) => {
-    //             const { fleet_min_instances } = context.parent;
-    //             if (typeof fleet_min_instances !== 'number' || typeof value !== 'number') return true;
-    //             return value >= fleet_min_instances;
-    //         }),
-    // }),
+    fleet_min_instances: yup.number().when('enable_default_fleet', {
+        is: true,
+        then: yup
+            .number()
+            .required(requiredFieldError)
+            .typeError(numberFieldError)
+            .min(0)
+            .test('is-smaller-than-man', 'The minimum value must be less than the maximum value.', (value, context) => {
+                const { fleet_max_instances } = context.parent;
+                if (typeof fleet_max_instances !== 'number' || typeof value !== 'number') return true;
+                return value <= fleet_max_instances;
+            }),
+    }),
+    fleet_max_instances: yup.number().when('enable_default_fleet', {
+        is: true,
+        then: yup
+            .number()
+            .typeError(numberFieldError)
+            .min(1)
+            .test('is-greater-than-min', 'The maximum value must be greater than the minimum value', (value, context) => {
+                const { fleet_min_instances } = context.parent;
+                if (typeof fleet_min_instances !== 'number' || typeof value !== 'number') return true;
+                return value >= fleet_min_instances;
+            }),
+    }),
+    fleet_idle_duration: yup.string().matches(/^[1-9]\d*[smhdw]$/, 'Invalid duration'),
 });
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -127,10 +121,14 @@ export const CreateProjectWizard: React.FC = () => {
     const [pushNotification] = useNotifications();
     const [activeStepIndex, setActiveStepIndex] = useState(0);
     const [createProject, { isLoading }] = useCreateWizardProjectMutation();
+    const [applyFleet, { isLoading: isApplyingFleet }] = useApplyFleetMutation();
     const { data: backendBaseTypesData, isLoading: isBackendBaseTypesLoading } = useGetBackendBaseTypesQuery();
     const { data: backendTypesData, isLoading: isBackendTypesLoading } = useGetBackendTypesQuery();
 
-    const loading = isLoading;
+    const [openHelpPanel] = useHelpPanel();
+    const [openConfirmationDialog] = useConfirmationDialog();
+
+    const loading = isLoading || isApplyingFleet;
 
     useBreadcrumbs([
         {
@@ -166,10 +164,17 @@ export const CreateProjectWizard: React.FC = () => {
     }, [backendTypesData]);
 
     const resolver = useYupValidationResolver(projectValidationSchema);
+
     const formMethods = useForm<IProjectWizardForm>({
         resolver,
-        defaultValues: { project_type: 'gpu_marketplace', enable_fleet: true, fleet_min_instances: 0 },
+        defaultValues: {
+            project_type: 'gpu_marketplace',
+            enable_default_fleet: true,
+            fleet_min_instances: 0,
+            fleet_idle_duration: '5m',
+        },
     });
+
     const { handleSubmit, control, watch, trigger, formState, getValues, setValue, setError } = formMethods;
     const formValues = watch();
 
@@ -188,6 +193,27 @@ export const CreateProjectWizard: React.FC = () => {
         };
     };
 
+    const getFormValuesForFleetApplying = (): IApplyFleetPlanRequestRequest => {
+        const { fleet_min_instances, fleet_max_instances, fleet_idle_duration, fleet_name } = getValues();
+
+        return {
+            plan: {
+                spec: {
+                    configuration: {
+                        ...(fleet_name ? { name: fleet_name } : {}),
+                        nodes: {
+                            min: fleet_min_instances,
+                            ...(fleet_max_instances ? { max: fleet_max_instances } : {}),
+                        },
+                        ...(fleet_idle_duration ? { idle_duration: fleet_idle_duration } : {}),
+                    },
+                    profile: {},
+                },
+            },
+            force: false,
+        };
+    };
+
     const validateNameAndType = async () => {
         try {
             const yupValidationResult = await trigger(['project_type', 'project_name']);
@@ -224,6 +250,10 @@ export const CreateProjectWizard: React.FC = () => {
         return Promise.resolve(true);
     };
 
+    const validateFleet = async () => {
+        return await trigger(['enable_default_fleet', 'fleet_min_instances', 'fleet_max_instances', 'fleet_idle_duration']);
+    };
+
     const emptyValidator = async () => Promise.resolve(true);
 
     const onNavigate = ({
@@ -233,12 +263,20 @@ export const CreateProjectWizard: React.FC = () => {
         requestedStepIndex: number;
         reason: WizardProps.NavigationReason;
     }) => {
-        const stepValidators = [validateNameAndType, validateBackends, emptyValidator];
+        const stepValidators = [validateNameAndType, validateBackends, validateFleet, emptyValidator];
 
         if (reason === 'next') {
             stepValidators[activeStepIndex]?.().then((isValid) => {
                 if (isValid) {
-                    setActiveStepIndex(requestedStepIndex);
+                    if (activeStepIndex === fleetStepIndex && formValues?.['fleet_min_instances'] > 0) {
+                        openConfirmationDialog({
+                            title: 'Are sure want to set min instances above than 0?',
+                            content: null,
+                            onConfirm: () => setActiveStepIndex(requestedStepIndex),
+                        });
+                    } else {
+                        setActiveStepIndex(requestedStepIndex);
+                    }
                 }
             });
         } else {
@@ -274,6 +312,8 @@ export const CreateProjectWizard: React.FC = () => {
     const onSubmitWizard = async () => {
         const isValid = await trigger();
 
+        const { enable_default_fleet } = getValues();
+
         if (!isValid) {
             return;
         }
@@ -281,7 +321,14 @@ export const CreateProjectWizard: React.FC = () => {
         const request = createProject(getFormValuesForServer()).unwrap();
 
         request
-            .then((data) => {
+            .then(async (data) => {
+                if (enable_default_fleet) {
+                    await applyFleet({
+                        projectName: data.project_name,
+                        ...getFormValuesForFleetApplying(),
+                    }).unwrap();
+                }
+
                 pushNotification({
                     type: 'success',
                     content: t('projects.create.success_notification'),
@@ -305,6 +352,25 @@ export const CreateProjectWizard: React.FC = () => {
         }
     };
 
+    const getDefaultFleetSummary = () => {
+        const summaryFields: Array<keyof IProjectWizardForm> = [
+            'fleet_name',
+            'fleet_min_instances',
+            'fleet_max_instances',
+            'fleet_idle_duration',
+        ];
+
+        const result: string[] = [];
+
+        summaryFields.forEach((fieldName) => {
+            if (formValues[fieldName]) {
+                result.push(`${t(`projects.edit.${fieldName}`)}: ${formValues[fieldName]}`);
+            }
+        });
+
+        return result.join(', ');
+    };
+
     return (
         <form onSubmit={handleSubmit(onSubmit)}>
             <Wizard
@@ -398,68 +464,79 @@ export const CreateProjectWizard: React.FC = () => {
                             </Container>
                         ),
                     },
-                    // {
-                    //     title: 'Fleets',
-                    //     content: (
-                    //         <Container>
-                    //             <SpaceBetween direction="vertical" size="l">
-                    //                 <FormCheckbox
-                    //                     label={t('projects.edit.default_fleet')}
-                    //                     description={t('projects.edit.default_fleet_description')}
-                    //                     control={control}
-                    //                     name="enable_fleet"
-                    //                 />
-                    //
-                    //                 {formValues['enable_fleet'] && (
-                    //                     <>
-                    //                         <SpaceBetween direction="vertical" size="s">
-                    //                             <div>
-                    //                                 <StatusIndicator type="info" /> To create dev environments, submit tasks, or
-                    //                                 run services, you need at least one fleet.
-                    //                             </div>
-                    //
-                    //                             <div>
-                    //                                 <StatusIndicator type="success" /> It's recommended to create it now, or you
-                    //                                 can set it up manually later.
-                    //                             </div>
-                    //
-                    //                             <div>
-                    //                                 <StatusIndicator type="info" />
-                    //                                 Don't worry, creating a fleet doesn’t necessarily create cloud instances.
-                    //                             </div>
-                    //                         </SpaceBetween>
-                    //
-                    //                         <FormInput
-                    //                             label={t('projects.edit.fleet_name')}
-                    //                             description={t('projects.edit.fleet_name_description')}
-                    //                             control={control}
-                    //                             name="fleet_name"
-                    //                             disabled={loading}
-                    //                         />
-                    //
-                    //                         <FormInput
-                    //                             label={t('projects.edit.fleet_min_instances')}
-                    //                             description={t('projects.edit.fleet_min_instances_description')}
-                    //                             control={control}
-                    //                             name="fleet_min_instances"
-                    //                             disabled={loading}
-                    //                             type="number"
-                    //                         />
-                    //
-                    //                         <FormInput
-                    //                             label={t('projects.edit.fleet_max_instances')}
-                    //                             description={t('projects.edit.fleet_max_instances_description')}
-                    //                             control={control}
-                    //                             name="fleet_max_instances"
-                    //                             disabled={loading}
-                    //                             type="number"
-                    //                         />
-                    //                     </>
-                    //                 )}
-                    //             </SpaceBetween>
-                    //         </Container>
-                    //     ),
-                    // },
+                    {
+                        title: 'Default fleet',
+                        content: (
+                            <Container>
+                                <SpaceBetween direction="vertical" size="l">
+                                    <FormToggle
+                                        toggleLabel={t('projects.edit.default_fleet')}
+                                        control={control}
+                                        name="enable_default_fleet"
+                                    />
+
+                                    {formValues['enable_default_fleet'] && (
+                                        <>
+                                            <SpaceBetween direction="vertical" size="s">
+                                                <div>
+                                                    To create dev environments, submit tasks, or run services, you need at least
+                                                    one fleet.
+                                                </div>
+
+                                                <div>
+                                                    It's recommended to create it now, or you can set it up manually later.
+                                                </div>
+
+                                                <div>
+                                                    Don't worry, creating a fleet doesn’t necessarily create cloud instances.
+                                                </div>
+                                            </SpaceBetween>
+
+                                            <FormInput
+                                                label={t('projects.edit.fleet_name')}
+                                                description={t('projects.edit.fleet_name_description')}
+                                                placeholder={t('projects.edit.fleet_name_placeholder')}
+                                                constraintText={t('projects.edit.fleet_name_constraint')}
+                                                control={control}
+                                                name="fleet_name"
+                                                disabled={loading}
+                                            />
+
+                                            <FormInput
+                                                info={<InfoLink onFollow={() => openHelpPanel(FLEET_MIN_INSTANCES_INFO)} />}
+                                                label={t('projects.edit.fleet_min_instances')}
+                                                description={t('projects.edit.fleet_min_instances_description')}
+                                                control={control}
+                                                name="fleet_min_instances"
+                                                disabled={loading}
+                                                type="number"
+                                            />
+
+                                            <FormInput
+                                                info={<InfoLink onFollow={() => openHelpPanel(FLEET_MAX_INSTANCES_INFO)} />}
+                                                label={t('projects.edit.fleet_max_instances')}
+                                                description={t('projects.edit.fleet_max_instances_description')}
+                                                placeholder={t('projects.edit.fleet_max_instances_placeholder')}
+                                                control={control}
+                                                name="fleet_max_instances"
+                                                disabled={loading}
+                                                type="number"
+                                            />
+
+                                            <FormInput
+                                                info={<InfoLink onFollow={() => openHelpPanel(FLEET_IDLE_DURATION_INFO)} />}
+                                                label={t('projects.edit.fleet_idle_duration')}
+                                                description={t('projects.edit.fleet_idle_duration_description')}
+                                                control={control}
+                                                name="fleet_idle_duration"
+                                                disabled={loading}
+                                            />
+                                        </>
+                                    )}
+                                </SpaceBetween>
+                            </Container>
+                        ),
+                    },
                     {
                         title: 'Summary',
                         content: (
@@ -482,6 +559,14 @@ export const CreateProjectWizard: React.FC = () => {
                                                     ? (formValues['backends'] ?? []).join(', ')
                                                     : 'The backends can be configured with your own cloud credentials in the project settings after the project is created.',
                                         },
+                                        ...(formValues['enable_default_fleet']
+                                            ? [
+                                                  {
+                                                      label: 'Default fleet',
+                                                      value: getDefaultFleetSummary(),
+                                                  },
+                                              ]
+                                            : []),
                                     ]}
                                 />
                             </Container>
diff --git a/frontend/src/pages/Project/CreateWizard/types.ts b/frontend/src/pages/Project/CreateWizard/types.ts
index 6244cb861e..6f1cd701e8 100644
--- a/frontend/src/pages/Project/CreateWizard/types.ts
+++ b/frontend/src/pages/Project/CreateWizard/types.ts
@@ -1,8 +1,9 @@
 export interface IProjectWizardForm extends Pick<IProject, 'project_name'> {
     project_type: 'gpu_marketplace' | 'own_cloud';
     backends: TBackendType[];
-    enable_fleet?: boolean;
+    enable_default_fleet?: boolean;
     fleet_name?: string;
-    fleet_min_instances?: number;
-    fleet_max_instances?: string;
+    fleet_min_instances: number;
+    fleet_max_instances?: number;
+    fleet_idle_duration?: string;
 }
diff --git a/frontend/src/pages/User/Details/index.tsx b/frontend/src/pages/User/Details/index.tsx
index 805b2efc98..1ee131094c 100644
--- a/frontend/src/pages/User/Details/index.tsx
+++ b/frontend/src/pages/User/Details/index.tsx
@@ -95,7 +95,13 @@ export const UserDetails: React.FC = () => {
                 </SpaceBetween>
             </ContentLayout>
 
-            <ConfirmationDialog visible={showDeleteConfirm} onDiscard={toggleDeleteConfirm} onConfirm={deleteUserHandler} />
+            <ConfirmationDialog
+                visible={showDeleteConfirm}
+                content={<Box variant="span">{t('confirm_dialog.message')}</Box>}
+                onDiscard={toggleDeleteConfirm}
+                onConfirm={deleteUserHandler}
+                confirmButtonLabel={t('common.delete')}
+            />
         </>
     );
 };
diff --git a/frontend/src/pages/User/List/index.tsx b/frontend/src/pages/User/List/index.tsx
index 17bc417e94..5831d03383 100644
--- a/frontend/src/pages/User/List/index.tsx
+++ b/frontend/src/pages/User/List/index.tsx
@@ -208,8 +208,10 @@ export const UserList: React.FC = () => {
 
             <ConfirmationDialog
                 visible={showDeleteConfirm}
+                content={<Box variant="span">{t('confirm_dialog.message')}</Box>}
                 onDiscard={toggleDeleteConfirm}
                 onConfirm={deleteSelectedUserHandler}
+                confirmButtonLabel={t('common.delete')}
             />
         </>
     );
diff --git a/frontend/src/services/fleet.ts b/frontend/src/services/fleet.ts
index 3405a18b8b..fa723d7d2d 100644
--- a/frontend/src/services/fleet.ts
+++ b/frontend/src/services/fleet.ts
@@ -66,7 +66,25 @@ export const fleetApi = createApi({
 
             invalidatesTags: ['Fleets'],
         }),
+
+        applyFleet: builder.mutation<IFleet, IApplyFleetPlanRequestRequest & { projectName: IProject['project_name'] }>({
+            query: ({ projectName, ...body }) => {
+                return {
+                    url: API.PROJECTS.FLEETS_APPLY(projectName),
+                    method: 'POST',
+                    body,
+                };
+            },
+
+            invalidatesTags: ['Fleets'],
+        }),
     }),
 });
 
-export const { useGetFleetsQuery, useLazyGetFleetsQuery, useDeleteFleetMutation, useGetFleetDetailsQuery } = fleetApi;
+export const {
+    useGetFleetsQuery,
+    useLazyGetFleetsQuery,
+    useDeleteFleetMutation,
+    useGetFleetDetailsQuery,
+    useApplyFleetMutation,
+} = fleetApi;
diff --git a/frontend/src/store.ts b/frontend/src/store.ts
index ca19b1206d..03d2c820e7 100644
--- a/frontend/src/store.ts
+++ b/frontend/src/store.ts
@@ -1,5 +1,6 @@
 import { configureStore } from '@reduxjs/toolkit';
 
+import confirmationReducer from 'components/ConfirmationDialog/slice';
 import notificationsReducer from 'components/Notifications/slice';
 
 import { artifactApi } from 'services/artifact';
@@ -25,6 +26,7 @@ export const store = configureStore({
     reducer: {
         app: appReducer,
         notifications: notificationsReducer,
+        confirmation: confirmationReducer,
         [projectApi.reducerPath]: projectApi.reducer,
         [runApi.reducerPath]: runApi.reducer,
         [artifactApi.reducerPath]: artifactApi.reducer,
diff --git a/frontend/src/types/fleet.d.ts b/frontend/src/types/fleet.d.ts
index 892acf41fa..2813cd4023 100644
--- a/frontend/src/types/fleet.d.ts
+++ b/frontend/src/types/fleet.d.ts
@@ -45,9 +45,12 @@ declare interface IFleetConfigurationRequest {
         max?: number;
     };
     placement?: 'any' | 'cluster';
+    reservation?: string;
     resources?: IFleetConfigurationResource[];
+    blocks?: string | number;
     backends?: TBackendType[];
     regions?: string[];
+    availability_zones?: string[];
     instance_types?: string[];
     spot_policy?: TSpotPolicy;
     retry?:
@@ -76,13 +79,14 @@ declare interface IProfileRequest {
     instance_name?: string;
     creation_policy?: 'reuse' | 'reuse-or-create';
     idle_duration?: number | string;
-    name: string;
+    name?: string;
     default?: boolean;
 }
 
 declare interface IFleetSpec {
-    autocreated: boolean;
+    autocreated?: boolean;
     configuration: IFleetConfigurationRequest;
+    configuration_path?: string;
     profile: IProfileRequest;
 }
 
@@ -96,3 +100,11 @@ declare interface IFleet {
     status: 'submitted' | 'active' | 'terminating' | 'terminated' | 'failed';
     status_message: string;
 }
+
+declare interface IApplyFleetPlanRequestRequest {
+    plan: {
+        spec: IFleetSpec;
+    };
+
+    force: boolean;
+}