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 01/12] [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;
+}

From 3c3ae8cfb6fcd81a8341a61cbda68e1e8531bb9c Mon Sep 17 00:00:00 2001
From: peterschmidt85 <andrey.cheptsov@gmail.com>
Date: Thu, 15 Jan 2026 21:47:41 +0100
Subject: [PATCH 02/12] Minor cosmetic changes

---
 frontend/src/components/form/Toogle/index.tsx |  2 +-
 frontend/src/components/form/Toogle/types.ts  |  2 +-
 frontend/src/locale/en.json                   | 11 +++++-----
 .../src/pages/Project/CreateWizard/index.tsx  | 20 +++----------------
 frontend/src/pages/Project/List/index.tsx     |  4 ++--
 5 files changed, 13 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/form/Toogle/index.tsx b/frontend/src/components/form/Toogle/index.tsx
index df7654a1c1..14a2a77cc5 100644
--- a/frontend/src/components/form/Toogle/index.tsx
+++ b/frontend/src/components/form/Toogle/index.tsx
@@ -28,7 +28,6 @@ export const FormToggle = <T extends FieldValues>({
             render={({ field: { onChange, value, ...fieldRest }, fieldState: { error } }) => {
                 return (
                     <FormField
-                        description={description}
                         label={label}
                         info={info}
                         stretch={stretch}
@@ -46,6 +45,7 @@ export const FormToggle = <T extends FieldValues>({
                                 onChange(event.detail.checked);
                                 onChangeProp?.(event);
                             }}
+                            description={description}
                         >
                             {toggleLabel}
                         </ToggleCSD>
diff --git a/frontend/src/components/form/Toogle/types.ts b/frontend/src/components/form/Toogle/types.ts
index 460da2f47c..6ceab50865 100644
--- a/frontend/src/components/form/Toogle/types.ts
+++ b/frontend/src/components/form/Toogle/types.ts
@@ -7,5 +7,5 @@ export type FormToggleProps<T extends FieldValues> = Omit<ToggleProps, 'value' |
     Omit<FormFieldProps, 'errorText'> &
     Pick<ControllerProps<T>, 'control' | 'name' | 'rules'> & {
         leftContent?: ReactNode;
-        toggleLabel?: string;
+        toggleLabel?: ReactNode | string;
     };
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index d84ac4af5b..08f7b8bb71 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -6,6 +6,7 @@
     "add": "Add",
     "yes": "Yes",
     "no": "No",
+    "create_": "Create",
     "create": "Create {{text}}",
     "edit": "Edit",
     "delete": "Delete",
@@ -206,19 +207,19 @@
       "backends": "Backends",
       "base_backends_description": "dstack will automatically collect offers from the following providers. Deselect providers you don’t want to use.",
       "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",
+      "default_fleet": "Create a default fleet",
+      "default_fleet_description": "At least one fleet is required to create dev environments, submit tasks, or run services",
       "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_min_instances_description": "Specify \"0\" if you want instances to be created on demand",
       "fleet_max_instances": "Max number of instances",
-      "fleet_max_instances_description": "Only digits",
+      "fleet_max_instances_description": "Specify it only if you want to limit the maximum number of instances",
       "fleet_max_instances_placeholder": "Optional",
       "fleet_idle_duration": "Idle duration",
-      "fleet_idle_duration_description": "e.g. 0s, 1m, 1h",
+      "fleet_idle_duration_description": "For how long instances should be kept idle before termination, 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/index.tsx b/frontend/src/pages/Project/CreateWizard/index.tsx
index b8b42bda2f..6337044251 100644
--- a/frontend/src/pages/Project/CreateWizard/index.tsx
+++ b/frontend/src/pages/Project/CreateWizard/index.tsx
@@ -465,33 +465,19 @@ export const CreateProjectWizard: React.FC = () => {
                         ),
                     },
                     {
-                        title: 'Default fleet',
+                        title: 'Fleets',
                         content: (
                             <Container>
                                 <SpaceBetween direction="vertical" size="l">
                                     <FormToggle
-                                        toggleLabel={t('projects.edit.default_fleet')}
+                                        toggleLabel={<strong>{t('projects.edit.default_fleet')}</strong>}
+                                        constraintText={t('projects.edit.default_fleet_description')}
                                         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')}
diff --git a/frontend/src/pages/Project/List/index.tsx b/frontend/src/pages/Project/List/index.tsx
index 8430d524db..1648d62c59 100644
--- a/frontend/src/pages/Project/List/index.tsx
+++ b/frontend/src/pages/Project/List/index.tsx
@@ -54,7 +54,7 @@ export const ProjectList: React.FC = () => {
     const renderEmptyMessage = (): React.ReactNode => {
         return (
             <ListEmptyMessage title={t('projects.empty_message_title')} message={t('projects.empty_message_text')}>
-                {isAvailableProjectManaging && <Button onClick={addProjectHandler}>{t('common.add')}</Button>}
+                {isAvailableProjectManaging && <Button onClick={addProjectHandler}>{t('common.create_')}</Button>}
             </ListEmptyMessage>
         );
     };
@@ -137,7 +137,7 @@ export const ProjectList: React.FC = () => {
                                         {t('common.delete')}
                                     </ButtonWithConfirmation>
 
-                                    <Button onClick={addProjectHandler}>{t('common.add')}</Button>
+                                    <Button onClick={addProjectHandler}>{t('common.create_')}</Button>
 
                                     <Button
                                         iconName="refresh"

From c0ce9cf7ba79b7168c116f98ed07e61f8694d021 Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Fri, 16 Jan 2026 00:04:05 +0300
Subject: [PATCH 03/12] Fixes after review

---
 frontend/src/components/form/Toogle/index.tsx     | 4 +++-
 frontend/src/components/form/Toogle/types.ts      | 1 +
 frontend/src/locale/en.json                       | 4 ++--
 frontend/src/pages/Project/Add/index.tsx          | 2 +-
 frontend/src/pages/Project/CreateWizard/index.tsx | 2 +-
 frontend/src/pages/Project/List/index.tsx         | 4 ++--
 6 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/form/Toogle/index.tsx b/frontend/src/components/form/Toogle/index.tsx
index 14a2a77cc5..e96cef46e3 100644
--- a/frontend/src/components/form/Toogle/index.tsx
+++ b/frontend/src/components/form/Toogle/index.tsx
@@ -18,6 +18,7 @@ export const FormToggle = <T extends FieldValues>({
     leftContent,
     toggleLabel,
     onChange: onChangeProp,
+    toggleDescription,
     ...props
 }: FormToggleProps<T>) => {
     return (
@@ -28,6 +29,7 @@ export const FormToggle = <T extends FieldValues>({
             render={({ field: { onChange, value, ...fieldRest }, fieldState: { error } }) => {
                 return (
                     <FormField
+                        description={description}
                         label={label}
                         info={info}
                         stretch={stretch}
@@ -45,7 +47,7 @@ export const FormToggle = <T extends FieldValues>({
                                 onChange(event.detail.checked);
                                 onChangeProp?.(event);
                             }}
-                            description={description}
+                            description={toggleDescription}
                         >
                             {toggleLabel}
                         </ToggleCSD>
diff --git a/frontend/src/components/form/Toogle/types.ts b/frontend/src/components/form/Toogle/types.ts
index 6ceab50865..66e8489551 100644
--- a/frontend/src/components/form/Toogle/types.ts
+++ b/frontend/src/components/form/Toogle/types.ts
@@ -6,6 +6,7 @@ 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'> & {
+        toggleDescription?: ReactNode;
         leftContent?: ReactNode;
         toggleLabel?: ReactNode | string;
     };
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index 08f7b8bb71..7eb2640858 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -6,8 +6,8 @@
     "add": "Add",
     "yes": "Yes",
     "no": "No",
-    "create_": "Create",
-    "create": "Create {{text}}",
+    "create": "Create",
+    "create_wit_text": "Create {{text}}",
     "edit": "Edit",
     "delete": "Delete",
     "remove": "Remove",
diff --git a/frontend/src/pages/Project/Add/index.tsx b/frontend/src/pages/Project/Add/index.tsx
index 00c6ee47d1..09f387778b 100644
--- a/frontend/src/pages/Project/Add/index.tsx
+++ b/frontend/src/pages/Project/Add/index.tsx
@@ -23,7 +23,7 @@ export const ProjectAdd: React.FC = () => {
             href: ROUTES.PROJECT.LIST,
         },
         {
-            text: t('common.create', { text: t('navigation.project') }),
+            text: t('common.create_wit_text', { text: t('navigation.project') }),
             href: ROUTES.PROJECT.ADD,
         },
     ]);
diff --git a/frontend/src/pages/Project/CreateWizard/index.tsx b/frontend/src/pages/Project/CreateWizard/index.tsx
index 6337044251..4c36bbc514 100644
--- a/frontend/src/pages/Project/CreateWizard/index.tsx
+++ b/frontend/src/pages/Project/CreateWizard/index.tsx
@@ -136,7 +136,7 @@ export const CreateProjectWizard: React.FC = () => {
             href: ROUTES.PROJECT.LIST,
         },
         {
-            text: t('common.create', { text: t('navigation.project') }),
+            text: t('common.create_wit_text', { text: t('navigation.project') }),
             href: ROUTES.PROJECT.ADD,
         },
     ]);
diff --git a/frontend/src/pages/Project/List/index.tsx b/frontend/src/pages/Project/List/index.tsx
index 1648d62c59..af4afcf5dc 100644
--- a/frontend/src/pages/Project/List/index.tsx
+++ b/frontend/src/pages/Project/List/index.tsx
@@ -54,7 +54,7 @@ export const ProjectList: React.FC = () => {
     const renderEmptyMessage = (): React.ReactNode => {
         return (
             <ListEmptyMessage title={t('projects.empty_message_title')} message={t('projects.empty_message_text')}>
-                {isAvailableProjectManaging && <Button onClick={addProjectHandler}>{t('common.create_')}</Button>}
+                {isAvailableProjectManaging && <Button onClick={addProjectHandler}>{t('common.create')}</Button>}
             </ListEmptyMessage>
         );
     };
@@ -137,7 +137,7 @@ export const ProjectList: React.FC = () => {
                                         {t('common.delete')}
                                     </ButtonWithConfirmation>
 
-                                    <Button onClick={addProjectHandler}>{t('common.create_')}</Button>
+                                    <Button onClick={addProjectHandler}>{t('common.create')}</Button>
 
                                     <Button
                                         iconName="refresh"

From a72e91cffafecfcd65a423b713e9591e253257a4 Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Tue, 20 Jan 2026 00:31:45 +0300
Subject: [PATCH 04/12] Was added create project wizard for oss

---
 frontend/src/locale/en.json                   |  24 +-
 .../components/FleetFormFields/constants.tsx  |  66 ++++
 .../components/FleetFormFields/index.tsx      |  72 +++++
 .../components/FleetFormFields/type.ts        |  15 +
 frontend/src/pages/Project/Add/index.tsx      | 306 +++++++++++++++++-
 .../pages/Project/CreateWizard/constants.ts   |  13 +
 .../pages/Project/CreateWizard/constants.tsx  |  42 ---
 .../src/pages/Project/CreateWizard/index.tsx  | 190 ++++-------
 .../src/pages/Project/CreateWizard/types.ts   |  10 +-
 frontend/src/pages/Project/Form/types.ts      |  10 +-
 .../Project/hooks/useYupValidationResolver.ts |  38 +++
 frontend/src/services/project.ts              |   2 +-
 frontend/src/types/project.d.ts               |   4 +
 13 files changed, 582 insertions(+), 210 deletions(-)
 create mode 100644 frontend/src/pages/Fleets/Details/components/FleetFormFields/constants.tsx
 create mode 100644 frontend/src/pages/Fleets/Details/components/FleetFormFields/index.tsx
 create mode 100644 frontend/src/pages/Fleets/Details/components/FleetFormFields/type.ts
 create mode 100644 frontend/src/pages/Project/CreateWizard/constants.ts
 delete mode 100644 frontend/src/pages/Project/CreateWizard/constants.tsx
 create mode 100644 frontend/src/pages/Project/hooks/useYupValidationResolver.ts

diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index 7eb2640858..276040944a 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -209,17 +209,6 @@
       "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 a default fleet",
       "default_fleet_description": "At least one fleet is required to create dev environments, submit tasks, or run services",
-      "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": "Specify \"0\" if you want instances to be created on demand",
-      "fleet_max_instances": "Max number of instances",
-      "fleet_max_instances_description": "Specify it only if you want to limit the maximum number of instances",
-      "fleet_max_instances_placeholder": "Optional",
-      "fleet_idle_duration": "Idle duration",
-      "fleet_idle_duration_description": "For how long instances should be kept idle before termination, 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",
@@ -625,6 +614,19 @@
       "spot": "Spot",
       "started": "Started",
       "price": "Price"
+    },
+    "edit": {
+      "name": "Name",
+      "name_description": "The name of the fleet, e.g. 'my-fleet'",
+      "name_placeholder": "Optional",
+      "name_constraint": "If not specified, generated automatically",
+      "min_instances": "Min number of instances",
+      "min_instances_description": "Specify \"0\" if you want instances to be created on demand",
+      "max_instances": "Max number of instances",
+      "max_instances_description": "Specify it only if you want to limit the maximum number of instances",
+      "max_instances_placeholder": "Optional",
+      "idle_duration": "Idle duration",
+      "idle_duration_description": "For how long instances should be kept idle before termination, e.g. \"0s\", \"1m\", \"1h\""
     }
   },
   "volume": {
diff --git a/frontend/src/pages/Fleets/Details/components/FleetFormFields/constants.tsx b/frontend/src/pages/Fleets/Details/components/FleetFormFields/constants.tsx
new file mode 100644
index 0000000000..f541221854
--- /dev/null
+++ b/frontend/src/pages/Fleets/Details/components/FleetFormFields/constants.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { get } from 'lodash';
+import * as yup from 'yup';
+
+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>
+        </>
+    ),
+};
+
+const requiredFieldError = 'This is required field';
+const numberFieldError = 'This is number field';
+
+export const getMinInstancesValidator = (maxInstancesFieldPath: string) =>
+    yup
+        .number()
+        .required(requiredFieldError)
+        .typeError(numberFieldError)
+        .min(0)
+        .test('is-smaller-than-max', 'The minimum value must be less than the maximum value.', (value, context) => {
+            const maxInstances = get(context.parent, maxInstancesFieldPath);
+
+            if (typeof maxInstances !== 'number' || typeof value !== 'number') {
+                return true;
+            }
+
+            return value <= maxInstances;
+        });
+
+export const getMaxInstancesValidator = (minInstancesFieldPath: string) =>
+    yup
+        .number()
+        .typeError(numberFieldError)
+        .min(1)
+        .test('is-greater-than-min', 'The maximum value must be greater than the minimum value', (value, context) => {
+            const minInstances = get(context.parent, minInstancesFieldPath);
+
+            if (typeof minInstances !== 'number' || typeof value !== 'number') {
+                return true;
+            }
+
+            return value >= minInstances;
+        });
+
+export const idleDurationValidator = yup.string().matches(/^[1-9]\d*[smhdw]$/, 'Invalid duration');
diff --git a/frontend/src/pages/Fleets/Details/components/FleetFormFields/index.tsx b/frontend/src/pages/Fleets/Details/components/FleetFormFields/index.tsx
new file mode 100644
index 0000000000..91e7462d74
--- /dev/null
+++ b/frontend/src/pages/Fleets/Details/components/FleetFormFields/index.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { FormInput, InfoLink, SpaceBetween } from 'components';
+
+import { useHelpPanel } from 'hooks';
+
+import { FLEET_IDLE_DURATION_INFO, FLEET_MAX_INSTANCES_INFO, FLEET_MIN_INSTANCES_INFO } from './constants';
+import { FleetFormFieldsProps } from './type';
+
+import type { FieldValues } from 'react-hook-form/dist/types/fields';
+
+export function FleetFormFields<T extends FieldValues = FieldValues>({
+    control,
+    disabledAllFields,
+    fieldNamePrefix,
+}: FleetFormFieldsProps<T>) {
+    const { t } = useTranslation();
+    const [openHelpPanel] = useHelpPanel();
+
+    return (
+        <SpaceBetween direction="vertical" size="l">
+            <FormInput
+                label={t('fleets.edit.name')}
+                description={t('fleets.edit.name_description')}
+                placeholder={t('fleets.edit.name_placeholder')}
+                constraintText={t('fleets.edit.name_constraint')}
+                control={control}
+                //eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                name={`${fieldNamePrefix}.name`}
+                disabled={disabledAllFields}
+            />
+
+            <FormInput
+                info={<InfoLink onFollow={() => openHelpPanel(FLEET_MIN_INSTANCES_INFO)} />}
+                label={t('fleets.edit.min_instances')}
+                description={t('fleets.edit.min_instances_description')}
+                control={control}
+                //eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                name={`${fieldNamePrefix}.min_instances`}
+                disabled={disabledAllFields}
+                type="number"
+            />
+
+            <FormInput
+                info={<InfoLink onFollow={() => openHelpPanel(FLEET_MAX_INSTANCES_INFO)} />}
+                label={t('fleets.edit.max_instances')}
+                description={t('fleets.edit.max_instances_description')}
+                placeholder={t('fleets.edit.max_instances_placeholder')}
+                control={control}
+                //eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                name={`${fieldNamePrefix}.max_instances`}
+                disabled={disabledAllFields}
+                type="number"
+            />
+
+            <FormInput
+                info={<InfoLink onFollow={() => openHelpPanel(FLEET_IDLE_DURATION_INFO)} />}
+                label={t('fleets.edit.idle_duration')}
+                description={t('fleets.edit.idle_duration_description')}
+                control={control}
+                //eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                name={`${fieldNamePrefix}.idle_duration`}
+                disabled={disabledAllFields}
+            />
+        </SpaceBetween>
+    );
+}
diff --git a/frontend/src/pages/Fleets/Details/components/FleetFormFields/type.ts b/frontend/src/pages/Fleets/Details/components/FleetFormFields/type.ts
new file mode 100644
index 0000000000..7351a60a6a
--- /dev/null
+++ b/frontend/src/pages/Fleets/Details/components/FleetFormFields/type.ts
@@ -0,0 +1,15 @@
+import type { FieldValues } from 'react-hook-form/dist/types/fields';
+import type { UseFormReturn } from 'react-hook-form/dist/types/form';
+
+export interface FleetFormFieldsProps<TFieldValues extends FieldValues = FieldValues>
+    extends Pick<UseFormReturn<TFieldValues>, 'control'> {
+    fieldNamePrefix?: string;
+    disabledAllFields?: boolean;
+}
+
+export type FleetFormFields = {
+    name?: string;
+    min_instances: number;
+    max_instances?: number;
+    idle_duration?: string;
+};
diff --git a/frontend/src/pages/Project/Add/index.tsx b/frontend/src/pages/Project/Add/index.tsx
index 09f387778b..c2a7d136a5 100644
--- a/frontend/src/pages/Project/Add/index.tsx
+++ b/frontend/src/pages/Project/Add/index.tsx
@@ -1,21 +1,116 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import { isNil } from 'lodash';
+import * as yup from 'yup';
+import { WizardProps } from '@cloudscape-design/components';
 
-import { ContentLayout, Header } from 'components';
+import { Container, FormCheckbox, FormInput, FormToggle, KeyValuePairs, SpaceBetween, Wizard } from 'components';
 
-import { useBreadcrumbs, useNotifications } from 'hooks';
-import { getServerError } from 'libs';
+import { useBreadcrumbs, useConfirmationDialog, useNotifications } from 'hooks';
+import { isResponseServerError, isResponseServerFormFieldError } from 'libs';
 import { ROUTES } from 'routes';
+import { useApplyFleetMutation } from 'services/fleet';
 import { useCreateProjectMutation } from 'services/project';
 
-import { ProjectForm } from '../Form';
+import { FleetFormFields } from 'pages/Fleets/Details/components/FleetFormFields';
+import {
+    getMaxInstancesValidator,
+    getMinInstancesValidator,
+    idleDurationValidator,
+} from 'pages/Fleets/Details/components/FleetFormFields/constants';
+
+import { useYupValidationResolver } from '../hooks/useYupValidationResolver';
+
+import { IProjectForm } from '../Form/types';
+import { FieldPath } from 'react-hook-form/dist/types/path';
+
+const requiredFieldError = 'This is required field';
+const namesFieldError = 'Only latin characters, dashes, underscores, and digits';
+
+const fleetStepIndex = 1;
+
+const projectValidationSchema = yup.object({
+    project_name: yup
+        .string()
+        .required(requiredFieldError)
+        .matches(/^[a-zA-Z0-9-_]+$/, namesFieldError),
+    is_public: yup.boolean(),
+    fleet: yup.object().shape({
+        min_instances: yup.number().when('enable_default', {
+            is: true,
+            then: getMinInstancesValidator('max_instances'),
+        }),
+        max_instances: yup.number().when('enable_default', {
+            is: true,
+            then: getMaxInstancesValidator('min_instances'),
+        }),
+        idle_duration: yup.string().when('enable_default', {
+            is: true,
+            then: idleDurationValidator,
+        }),
+    }),
+});
 
 export const ProjectAdd: React.FC = () => {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const [pushNotification] = useNotifications();
+    const [openConfirmationDialog] = useConfirmationDialog();
     const [createProject, { isLoading }] = useCreateProjectMutation();
+    const [applyFleet, { isLoading: isApplyingFleet }] = useApplyFleetMutation();
+    const [activeStepIndex, setActiveStepIndex] = useState(0);
+    const resolver = useYupValidationResolver(projectValidationSchema);
+
+    const loading = isLoading || isApplyingFleet;
+
+    const formMethods = useForm<IProjectForm>({
+        resolver,
+        defaultValues: {
+            is_public: false,
+            fleet: {
+                enable_default: true,
+                min_instances: 0,
+                idle_duration: '5m',
+            },
+        },
+    });
+
+    const { handleSubmit, control, setError, clearErrors, trigger, watch, getValues } = formMethods;
+    const formValues = watch();
+
+    const getFormValuesForServer = (): IProjectCreateRequestParams => {
+        const { project_name, is_public } = getValues();
+
+        return {
+            project_name,
+            is_public,
+        };
+    };
+
+    const getFormValuesForFleetApplying = (): IApplyFleetPlanRequestRequest => {
+        const {
+            fleet: { min_instances, max_instances, idle_duration, name },
+        } = getValues();
+
+        return {
+            plan: {
+                spec: {
+                    configuration: {
+                        ...(name ? { name } : {}),
+                        nodes: {
+                            min: min_instances,
+                            ...(max_instances ? { max: max_instances } : {}),
+                        },
+                        ...(idle_duration ? { idle_duration } : {}),
+                    },
+                    profile: {},
+                },
+            },
+            force: false,
+        };
+    };
 
     useBreadcrumbs([
         {
@@ -28,35 +123,214 @@ export const ProjectAdd: React.FC = () => {
         },
     ]);
 
+    const validateNameAndType = async () => {
+        return await trigger(['project_name', 'is_public']);
+    };
+    const validateFleet = async () => {
+        return await trigger(['fleet.enable_default', 'fleet.min_instances', 'fleet.max_instances', 'fleet.idle_duration']);
+    };
+
+    const emptyValidator = async () => Promise.resolve(true);
+
+    const onNavigate = ({
+        requestedStepIndex,
+        reason,
+    }: {
+        requestedStepIndex: number;
+        reason: WizardProps.NavigationReason;
+    }) => {
+        const stepValidators = [validateNameAndType, validateFleet, emptyValidator];
+
+        if (reason === 'next') {
+            stepValidators[activeStepIndex]?.().then((isValid) => {
+                if (isValid) {
+                    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 {
+            setActiveStepIndex(requestedStepIndex);
+        }
+    };
+
+    const onNavigateHandler: WizardProps['onNavigate'] = ({ detail: { requestedStepIndex, reason } }) => {
+        onNavigate({ requestedStepIndex, reason });
+    };
+
     const onCancelHandler = () => {
         navigate(ROUTES.PROJECT.LIST);
     };
 
-    const onSubmitHandler = async (data: IProject): Promise<IProject> => {
-        const request = createProject(data).unwrap();
+    const onSubmitWizard = async () => {
+        const isValid = await trigger();
+
+        const { fleet } = getValues();
+
+        if (!isValid) {
+            return;
+        }
+
+        clearErrors();
+
+        const request = createProject(getFormValuesForServer()).unwrap();
 
         request
-            .then((data) => {
+            .then(async (data) => {
                 pushNotification({
                     type: 'success',
                     content: t('projects.create.success_notification'),
                 });
 
+                if (fleet.enable_default) {
+                    await applyFleet({
+                        projectName: data.project_name,
+                        ...getFormValuesForFleetApplying(),
+                    }).unwrap();
+                }
+
                 navigate(ROUTES.PROJECT.DETAILS.SETTINGS.FORMAT(data.project_name));
             })
             .catch((error) => {
-                pushNotification({
-                    type: 'error',
-                    content: t('common.server_error', { error: getServerError(error) }),
-                });
+                const errorRequestData = error?.data;
+
+                if (isResponseServerError(errorRequestData)) {
+                    errorRequestData.detail.forEach((error) => {
+                        if (isResponseServerFormFieldError(error)) {
+                            setError(error.loc.join('.') as FieldPath<IProject>, { type: 'custom', message: error.msg });
+                        } else {
+                            pushNotification({
+                                type: 'error',
+                                content: t('common.server_error', { error: error.msg }),
+                            });
+                        }
+                    });
+                } else {
+                    pushNotification({
+                        type: 'error',
+                        content: t('common.server_error', { error: error?.error ?? error }),
+                    });
+                }
             });
+    };
+
+    const onSubmit = () => {
+        if (activeStepIndex < 2) {
+            onNavigate({ requestedStepIndex: activeStepIndex + 1, reason: 'next' });
+        } else {
+            onSubmitWizard().catch(console.log);
+        }
+    };
 
-        return request;
+    const getDefaultFleetSummary = () => {
+        const summaryFields: Array<keyof IProjectForm['fleet']> = ['name', 'min_instances', 'max_instances', 'idle_duration'];
+
+        const result: string[] = [];
+
+        summaryFields.forEach((fieldName) => {
+            if (!isNil(formValues?.fleet?.[fieldName])) {
+                result.push(`${t(`fleets.edit.${fieldName}`)}: ${formValues['fleet'][fieldName]}`);
+            }
+        });
+
+        return result.join(', ');
     };
 
     return (
-        <ContentLayout header={<Header variant="awsui-h1-sticky">{t('projects.create.page_title')}</Header>}>
-            <ProjectForm onSubmit={onSubmitHandler} loading={isLoading} onCancel={onCancelHandler} />
-        </ContentLayout>
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <Wizard
+                activeStepIndex={activeStepIndex}
+                onNavigate={onNavigateHandler}
+                onSubmit={onSubmitWizard}
+                i18nStrings={{
+                    stepNumberLabel: (stepNumber) => `Step ${stepNumber}`,
+                    navigationAriaLabel: 'Steps',
+                    cancelButton: t('common.cancel'),
+                    previousButton: t('common.previous'),
+                    nextButton: t('common.next'),
+                    optional: 'optional',
+                }}
+                onCancel={onCancelHandler}
+                submitButtonText={t('projects.wizard.submit')}
+                steps={[
+                    {
+                        title: 'Name and public',
+                        content: (
+                            <Container>
+                                <SpaceBetween direction="vertical" size="l">
+                                    <FormInput
+                                        label={t('projects.edit.project_name')}
+                                        description={t('projects.edit.project_name_description')}
+                                        control={control}
+                                        name="project_name"
+                                        disabled={loading}
+                                    />
+
+                                    <FormCheckbox
+                                        label={t('projects.edit.is_public')}
+                                        description={t('projects.edit.is_public_description')}
+                                        control={control}
+                                        name="is_public"
+                                        disabled={loading}
+                                    />
+                                </SpaceBetween>
+                            </Container>
+                        ),
+                    },
+                    {
+                        title: 'Fleets',
+                        content: (
+                            <Container>
+                                <SpaceBetween direction="vertical" size="l">
+                                    <FormToggle
+                                        toggleLabel={<strong>{t('projects.edit.default_fleet')}</strong>}
+                                        constraintText={t('projects.edit.default_fleet_description')}
+                                        control={control}
+                                        name="fleet.enable_default"
+                                    />
+
+                                    {formValues['fleet']['enable_default'] && (
+                                        <FleetFormFields<IProjectForm>
+                                            control={control}
+                                            disabledAllFields={loading}
+                                            fieldNamePrefix="fleet."
+                                        />
+                                    )}
+                                </SpaceBetween>
+                            </Container>
+                        ),
+                    },
+                    {
+                        title: 'Summary',
+                        content: (
+                            <Container>
+                                <KeyValuePairs
+                                    items={[
+                                        {
+                                            label: t('projects.edit.project_name'),
+                                            value: formValues['project_name'],
+                                        },
+                                        ...(formValues['fleet']['enable_default']
+                                            ? [
+                                                  {
+                                                      label: 'Default fleet',
+                                                      value: getDefaultFleetSummary(),
+                                                  },
+                                              ]
+                                            : []),
+                                    ]}
+                                />
+                            </Container>
+                        ),
+                    },
+                ]}
+            />
+        </form>
     );
 };
diff --git a/frontend/src/pages/Project/CreateWizard/constants.ts b/frontend/src/pages/Project/CreateWizard/constants.ts
new file mode 100644
index 0000000000..3e7321a7e6
--- /dev/null
+++ b/frontend/src/pages/Project/CreateWizard/constants.ts
@@ -0,0 +1,13 @@
+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
deleted file mode 100644
index 6fe830e698..0000000000
--- a/frontend/src/pages/Project/CreateWizard/constants.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-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 4c36bbc514..21bc21df7e 100644
--- a/frontend/src/pages/Project/CreateWizard/index.tsx
+++ b/frontend/src/pages/Project/CreateWizard/index.tsx
@@ -1,7 +1,8 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import { isNil } from 'lodash';
 import * as yup from 'yup';
 import { WizardProps } from '@cloudscape-design/components';
 import { TilesProps } from '@cloudscape-design/components/tiles';
@@ -14,29 +15,32 @@ import {
     FormInput,
     FormTiles,
     FormToggle,
-    InfoLink,
     KeyValuePairs,
     SpaceBetween,
     Wizard,
 } from 'components';
 
-import { useBreadcrumbs, useConfirmationDialog, useHelpPanel, useNotifications } from 'hooks';
+import { useBreadcrumbs, useConfirmationDialog, 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 { FLEET_IDLE_DURATION_INFO, FLEET_MAX_INSTANCES_INFO, FLEET_MIN_INSTANCES_INFO, projectTypeOptions } from './constants';
+import { FleetFormFields } from '../../Fleets/Details/components/FleetFormFields';
+import {
+    getMaxInstancesValidator,
+    getMinInstancesValidator,
+    idleDurationValidator,
+} from '../../Fleets/Details/components/FleetFormFields/constants';
+import { useYupValidationResolver } from '../hooks/useYupValidationResolver';
+import { projectTypeOptions } from './constants';
 
 import { IProjectWizardForm } from './types';
 
-// import styles from './styles.module.scss';
-
 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 fleetStepIndex = 2;
 
@@ -50,71 +54,22 @@ const projectValidationSchema = yup.object({
         is: 'gpu_marketplace',
         then: yup.array().min(1, minOneLengthError).required(requiredFieldError),
     }),
-    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: yup.object().shape({
+        min_instances: yup.number().when('enable_default', {
+            is: true,
+            then: getMinInstancesValidator('max_instances'),
+        }),
+        max_instances: yup.number().when('enable_default', {
+            is: true,
+            then: getMaxInstancesValidator('min_instances'),
+        }),
+        idle_duration: yup.string().when('enable_default', {
+            is: true,
+            then: idleDurationValidator,
+        }),
     }),
-    fleet_idle_duration: yup.string().matches(/^[1-9]\d*[smhdw]$/, 'Invalid duration'),
 });
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-const useYupValidationResolver = (validationSchema) =>
-    useCallback(
-        async (data: IProjectWizardForm) => {
-            try {
-                const values = await validationSchema.validate(data, {
-                    abortEarly: false,
-                });
-
-                return {
-                    values,
-                    errors: {},
-                };
-            } catch (errors) {
-                return {
-                    values: {},
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-expect-error
-                    errors: errors.inner.reduce(
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                        // @ts-expect-error
-                        (allErrors, currentError) => ({
-                            ...allErrors,
-                            [currentError.path]: {
-                                type: currentError.type ?? 'validation',
-                                message: currentError.message,
-                            },
-                        }),
-                        {},
-                    ),
-                };
-            }
-        },
-        [validationSchema],
-    );
-
 export const CreateProjectWizard: React.FC = () => {
     const { t } = useTranslation();
     const navigate = useNavigate();
@@ -125,7 +80,6 @@ export const CreateProjectWizard: React.FC = () => {
     const { data: backendBaseTypesData, isLoading: isBackendBaseTypesLoading } = useGetBackendBaseTypesQuery();
     const { data: backendTypesData, isLoading: isBackendTypesLoading } = useGetBackendTypesQuery();
 
-    const [openHelpPanel] = useHelpPanel();
     const [openConfirmationDialog] = useConfirmationDialog();
 
     const loading = isLoading || isApplyingFleet;
@@ -169,9 +123,11 @@ export const CreateProjectWizard: React.FC = () => {
         resolver,
         defaultValues: {
             project_type: 'gpu_marketplace',
-            enable_default_fleet: true,
-            fleet_min_instances: 0,
-            fleet_idle_duration: '5m',
+            fleet: {
+                enable_default: true,
+                min_instances: 0,
+                idle_duration: '5m',
+            },
         },
     });
 
@@ -194,18 +150,20 @@ export const CreateProjectWizard: React.FC = () => {
     };
 
     const getFormValuesForFleetApplying = (): IApplyFleetPlanRequestRequest => {
-        const { fleet_min_instances, fleet_max_instances, fleet_idle_duration, fleet_name } = getValues();
+        const {
+            fleet: { min_instances, max_instances, idle_duration, name },
+        } = getValues();
 
         return {
             plan: {
                 spec: {
                     configuration: {
-                        ...(fleet_name ? { name: fleet_name } : {}),
+                        ...(name ? { name } : {}),
                         nodes: {
-                            min: fleet_min_instances,
-                            ...(fleet_max_instances ? { max: fleet_max_instances } : {}),
+                            min: min_instances,
+                            ...(max_instances ? { max: max_instances } : {}),
                         },
-                        ...(fleet_idle_duration ? { idle_duration: fleet_idle_duration } : {}),
+                        ...(idle_duration ? { idle_duration } : {}),
                     },
                     profile: {},
                 },
@@ -251,7 +209,7 @@ export const CreateProjectWizard: React.FC = () => {
     };
 
     const validateFleet = async () => {
-        return await trigger(['enable_default_fleet', 'fleet_min_instances', 'fleet_max_instances', 'fleet_idle_duration']);
+        return await trigger(['fleet.enable_default', 'fleet.min_instances', 'fleet.max_instances', 'fleet.idle_duration']);
     };
 
     const emptyValidator = async () => Promise.resolve(true);
@@ -268,7 +226,7 @@ export const CreateProjectWizard: React.FC = () => {
         if (reason === 'next') {
             stepValidators[activeStepIndex]?.().then((isValid) => {
                 if (isValid) {
-                    if (activeStepIndex === fleetStepIndex && formValues?.['fleet_min_instances'] > 0) {
+                    if (activeStepIndex === fleetStepIndex && formValues?.['fleet']['min_instances'] > 0) {
                         openConfirmationDialog({
                             title: 'Are sure want to set min instances above than 0?',
                             content: null,
@@ -312,7 +270,7 @@ export const CreateProjectWizard: React.FC = () => {
     const onSubmitWizard = async () => {
         const isValid = await trigger();
 
-        const { enable_default_fleet } = getValues();
+        const { fleet } = getValues();
 
         if (!isValid) {
             return;
@@ -322,7 +280,7 @@ export const CreateProjectWizard: React.FC = () => {
 
         request
             .then(async (data) => {
-                if (enable_default_fleet) {
+                if (fleet.enable_default) {
                     await applyFleet({
                         projectName: data.project_name,
                         ...getFormValuesForFleetApplying(),
@@ -345,7 +303,7 @@ export const CreateProjectWizard: React.FC = () => {
     };
 
     const onSubmit = () => {
-        if (activeStepIndex < 2) {
+        if (activeStepIndex < 3) {
             onNavigate({ requestedStepIndex: activeStepIndex + 1, reason: 'next' });
         } else {
             onSubmitWizard().catch(console.log);
@@ -353,18 +311,18 @@ export const CreateProjectWizard: React.FC = () => {
     };
 
     const getDefaultFleetSummary = () => {
-        const summaryFields: Array<keyof IProjectWizardForm> = [
-            'fleet_name',
-            'fleet_min_instances',
-            'fleet_max_instances',
-            'fleet_idle_duration',
+        const summaryFields: Array<keyof IProjectWizardForm['fleet']> = [
+            'name',
+            'min_instances',
+            'max_instances',
+            'idle_duration',
         ];
 
         const result: string[] = [];
 
         summaryFields.forEach((fieldName) => {
-            if (formValues[fieldName]) {
-                result.push(`${t(`projects.edit.${fieldName}`)}: ${formValues[fieldName]}`);
+            if (!isNil(formValues?.fleet?.[fieldName])) {
+                result.push(`${t(`fleets.edit.${fieldName}`)}: ${formValues['fleet'][fieldName]}`);
             }
         });
 
@@ -473,51 +431,15 @@ export const CreateProjectWizard: React.FC = () => {
                                         toggleLabel={<strong>{t('projects.edit.default_fleet')}</strong>}
                                         constraintText={t('projects.edit.default_fleet_description')}
                                         control={control}
-                                        name="enable_default_fleet"
+                                        name="fleet.enable_default"
                                     />
 
-                                    {formValues['enable_default_fleet'] && (
-                                        <>
-                                            <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}
-                                            />
-                                        </>
+                                    {formValues['fleet']['enable_default'] && (
+                                        <FleetFormFields<IProjectWizardForm>
+                                            control={control}
+                                            disabledAllFields={loading}
+                                            fieldNamePrefix="fleet."
+                                        />
                                     )}
                                 </SpaceBetween>
                             </Container>
@@ -545,7 +467,7 @@ 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']
+                                        ...(formValues['fleet']['enable_default']
                                             ? [
                                                   {
                                                       label: 'Default fleet',
diff --git a/frontend/src/pages/Project/CreateWizard/types.ts b/frontend/src/pages/Project/CreateWizard/types.ts
index 6f1cd701e8..9947af44e0 100644
--- a/frontend/src/pages/Project/CreateWizard/types.ts
+++ b/frontend/src/pages/Project/CreateWizard/types.ts
@@ -1,9 +1,9 @@
+import { FleetFormFields } from 'pages/Fleets/Details/components/FleetFormFields/type';
+
 export interface IProjectWizardForm extends Pick<IProject, 'project_name'> {
     project_type: 'gpu_marketplace' | 'own_cloud';
     backends: TBackendType[];
-    enable_default_fleet?: boolean;
-    fleet_name?: string;
-    fleet_min_instances: number;
-    fleet_max_instances?: number;
-    fleet_idle_duration?: string;
+    fleet: FleetFormFields & {
+        enable_default?: boolean;
+    };
 }
diff --git a/frontend/src/pages/Project/Form/types.ts b/frontend/src/pages/Project/Form/types.ts
index d45f1dd786..8c1f2db689 100644
--- a/frontend/src/pages/Project/Form/types.ts
+++ b/frontend/src/pages/Project/Form/types.ts
@@ -1,6 +1,14 @@
+import { FleetFormFields } from 'pages/Fleets/Details/components/FleetFormFields/type';
+
 export interface IProps {
-    initialValues?: Partial<IProject>;
+    initialValues?: Partial<IProjectForm>;
     loading?: boolean;
     onCancel: () => void;
     onSubmit: (user: IProject) => Promise<IProject>;
 }
+
+export interface IProjectForm extends IProjectCreateRequestParams {
+    fleet: FleetFormFields & {
+        enable_default?: boolean;
+    };
+}
diff --git a/frontend/src/pages/Project/hooks/useYupValidationResolver.ts b/frontend/src/pages/Project/hooks/useYupValidationResolver.ts
new file mode 100644
index 0000000000..2cd694c63d
--- /dev/null
+++ b/frontend/src/pages/Project/hooks/useYupValidationResolver.ts
@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+export function useYupValidationResolver<TData>(validationSchema) {
+    return useCallback(
+        async (data: TData) => {
+            try {
+                const values = await validationSchema.validate(data, {
+                    abortEarly: false,
+                });
+
+                return {
+                    values,
+                    errors: {},
+                };
+            } catch (errors) {
+                return {
+                    values: {},
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-expect-error
+                    errors: errors.inner.reduce(
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-expect-error
+                        (allErrors, currentError) => ({
+                            ...allErrors,
+                            [currentError.path]: {
+                                type: currentError.type ?? 'validation',
+                                message: currentError.message,
+                            },
+                        }),
+                        {},
+                    ),
+                };
+            }
+        },
+        [validationSchema],
+    );
+}
diff --git a/frontend/src/services/project.ts b/frontend/src/services/project.ts
index 2f0a4bd6b5..8875c48df6 100644
--- a/frontend/src/services/project.ts
+++ b/frontend/src/services/project.ts
@@ -74,7 +74,7 @@ export const projectApi = createApi({
             providesTags: (result) => (result ? [{ type: 'Projects' as const, id: result.project_name }] : []),
         }),
 
-        createProject: builder.mutation<IProject, IProject>({
+        createProject: builder.mutation<IProject, IProjectCreateRequestParams>({
             query: (project) => ({
                 url: API.PROJECTS.CREATE(),
                 method: 'POST',
diff --git a/frontend/src/types/project.d.ts b/frontend/src/types/project.d.ts
index cf24c84d03..babb4dab7a 100644
--- a/frontend/src/types/project.d.ts
+++ b/frontend/src/types/project.d.ts
@@ -46,3 +46,7 @@ declare interface IProjectSecret {
     name: string;
     value?: string;
 }
+
+declare type IProjectCreateRequestParams = Pick<IProject, 'project_name'> & {
+    is_public: boolean;
+};

From 965359a08b2c1dc8b587506ac82e7b8b5b297c5b Mon Sep 17 00:00:00 2001
From: peterschmidt85 <andrey.cheptsov@gmail.com>
Date: Tue, 20 Jan 2026 14:07:09 +0100
Subject: [PATCH 05/12] Cosmetical changes + help info

---
 .../components/form/Toogle/index.module.scss  | 17 ++++++
 frontend/src/components/form/Toogle/index.tsx | 21 ++++++-
 frontend/src/components/form/Toogle/types.ts  |  1 +
 frontend/src/locale/en.json                   | 24 ++++----
 .../components/FleetFormFields/constants.tsx  | 55 ++++++++++++++++++-
 .../components/FleetFormFields/index.tsx      |  7 +--
 frontend/src/pages/Project/Add/index.tsx      | 13 +++--
 .../src/pages/Project/CreateWizard/index.tsx  | 10 +++-
 frontend/src/pages/Project/constants.tsx      | 32 +++++++++++
 9 files changed, 152 insertions(+), 28 deletions(-)
 create mode 100644 frontend/src/components/form/Toogle/index.module.scss
 create mode 100644 frontend/src/pages/Project/constants.tsx

diff --git a/frontend/src/components/form/Toogle/index.module.scss b/frontend/src/components/form/Toogle/index.module.scss
new file mode 100644
index 0000000000..b57b20a850
--- /dev/null
+++ b/frontend/src/components/form/Toogle/index.module.scss
@@ -0,0 +1,17 @@
+@use '@cloudscape-design/design-tokens/index' as awsui;
+
+.labelWithInfo {
+    display: inline-flex;
+    align-items: center;
+}
+
+.divider {
+    display: inline-block;
+    height: 16px;
+    border-left: 1px solid awsui.$color-border-divider-default;
+    margin: 0 8px;
+}
+
+.info {
+    display: inline-flex;
+}
diff --git a/frontend/src/components/form/Toogle/index.tsx b/frontend/src/components/form/Toogle/index.tsx
index e96cef46e3..d8909e48e8 100644
--- a/frontend/src/components/form/Toogle/index.tsx
+++ b/frontend/src/components/form/Toogle/index.tsx
@@ -5,6 +5,8 @@ import ToggleCSD from '@cloudscape-design/components/toggle';
 
 import { FormToggleProps } from './types';
 
+import styles from './index.module.scss';
+
 export const FormToggle = <T extends FieldValues>({
     name,
     control,
@@ -19,6 +21,7 @@ export const FormToggle = <T extends FieldValues>({
     toggleLabel,
     onChange: onChangeProp,
     toggleDescription,
+    toggleInfo,
     ...props
 }: FormToggleProps<T>) => {
     return (
@@ -49,7 +52,23 @@ export const FormToggle = <T extends FieldValues>({
                             }}
                             description={toggleDescription}
                         >
-                            {toggleLabel}
+                            {(toggleLabel || toggleInfo) && (
+                                <span className={styles.labelWithInfo}>
+                                    {toggleLabel}
+                                    {toggleLabel && toggleInfo && <span aria-hidden="true" className={styles.divider} />}
+                                    {toggleInfo && (
+                                        <span
+                                            className={styles.info}
+                                            onClick={(e) => e.stopPropagation()}
+                                            onMouseDown={(e) => e.stopPropagation()}
+                                            onPointerDown={(e) => e.stopPropagation()}
+                                            onKeyDown={(e) => e.stopPropagation()}
+                                        >
+                                            {toggleInfo}
+                                        </span>
+                                    )}
+                                </span>
+                            )}
                         </ToggleCSD>
                     </FormField>
                 );
diff --git a/frontend/src/components/form/Toogle/types.ts b/frontend/src/components/form/Toogle/types.ts
index 66e8489551..7170922894 100644
--- a/frontend/src/components/form/Toogle/types.ts
+++ b/frontend/src/components/form/Toogle/types.ts
@@ -9,4 +9,5 @@ export type FormToggleProps<T extends FieldValues> = Omit<ToggleProps, 'value' |
         toggleDescription?: ReactNode;
         leftContent?: ReactNode;
         toggleLabel?: ReactNode | string;
+        toggleInfo?: ReactNode;
     };
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index 276040944a..0892bc2358 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -199,7 +199,7 @@
     },
     "edit": {
       "general": "General",
-      "project_name": "Project name",
+      "project_name": "Name",
       "owner": "Owner",
       "project_name_description": "Only latin characters, dashes, underscores, and digits",
       "project_type": "Project type",
@@ -207,10 +207,11 @@
       "backends": "Backends",
       "base_backends_description": "dstack will automatically collect offers from the following providers. Deselect providers you don’t want to use.",
       "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 a default fleet",
-      "default_fleet_description": "At least one fleet is required to create dev environments, submit tasks, or run services",
-      "is_public": "Make project public",
-      "is_public_description": "Public projects can be accessed by any user without being a member",
+      "create_default_fleet": "Create a default fleet",
+      "default_fleet": "Default fleet",
+      "default_fleet_description": "At least one fleet is required to run dev environments, tasks, or services.",
+      "is_public": "Public",
+      "is_public_description": "Allow any user join the project as a member",
       "backend": "Backend",
       "backend_config": "Backend config",
       "backend_config_description": "Specify the backend config in the YAML format. Click Info for examples.",
@@ -222,7 +223,7 @@
       "update_visibility_success": "Project visibility updated successfully",
       "update_visibility_confirm_title": "Change project visibility",
       "update_visibility_confirm_message": "Are you sure you want to change the project visibility? This will affect who can access this project.",
-      "change_visibility": "Change visibility",
+      "change_visibility": "Change",
       "project_visibility": "Visibility",
       "project_visibility_description": "Control who can access this project",
       "make_project_public": "Make project public",
@@ -475,8 +476,7 @@
         "offer": "Offer",
         "offer_description": "Select an offer for the dev environment.",
         "name": "Name",
-        "name_description": "The name of the run, e.g. 'my-dev-env'",
-        "name_constraint": "If not specified, generated automatically",
+        "name_constraint": "Example: 'my-fleet' or 'default'. If not specified, generated automatically.",
         "name_placeholder": "Optional",
         "ide": "IDE",
         "ide_description": "Select which IDE would you like to use with the dev environment.",
@@ -619,14 +619,14 @@
       "name": "Name",
       "name_description": "The name of the fleet, e.g. 'my-fleet'",
       "name_placeholder": "Optional",
-      "name_constraint": "If not specified, generated automatically",
+      "name_constraint": "Example: 'my-fleet' or 'default'. If not specified, generated automatically.",
       "min_instances": "Min number of instances",
-      "min_instances_description": "Specify \"0\" if you want instances to be created on demand",
+      "min_instances_description": "Set it `0` to provision instances only when required",
       "max_instances": "Max number of instances",
-      "max_instances_description": "Specify it only if you want to limit the maximum number of instances",
+      "max_instances_description": "Required only if you want to set an upper limit",
       "max_instances_placeholder": "Optional",
       "idle_duration": "Idle duration",
-      "idle_duration_description": "For how long instances should be kept idle before termination, e.g. \"0s\", \"1m\", \"1h\""
+      "idle_duration_description": "Example: '0s', '1m', '1h'"
     }
   },
   "volume": {
diff --git a/frontend/src/pages/Fleets/Details/components/FleetFormFields/constants.tsx b/frontend/src/pages/Fleets/Details/components/FleetFormFields/constants.tsx
index f541221854..efbc30574e 100644
--- a/frontend/src/pages/Fleets/Details/components/FleetFormFields/constants.tsx
+++ b/frontend/src/pages/Fleets/Details/components/FleetFormFields/constants.tsx
@@ -6,7 +6,24 @@ export const FLEET_MIN_INSTANCES_INFO = {
     header: <h2>Min number of instances</h2>,
     body: (
         <>
-            <p>Some text</p>
+            <p>
+                If you create a fleet here, it's recommended to set <code>Min number of instances</code> to <code>0</code>. In
+                this case, <code>dstack</code> will provision instances only when you run a dev environment, task, or service.
+            </p>
+
+            <p>
+                If you set <code>Min number of instances</code> above <code>0</code>, <code>dstack</code> will try to provision
+                them right away. Note, setting <code>Min number of instances</code> above <code>0</code> is supported for
+                VM-based backends only.
+            </p>
+
+            <p>
+                To learn more about fleets, see the{' '}
+                <a href={'https://dstack.ai/docs/concepts/fleets'} target="_blank">
+                    documentation
+                </a>
+                .
+            </p>
         </>
     ),
 };
@@ -15,7 +32,17 @@ export const FLEET_MAX_INSTANCES_INFO = {
     header: <h2>Max number of instances</h2>,
     body: (
         <>
-            <p>Some text</p>
+            <p>
+                Set <code>Max number of instances</code> only if you need to limit the number of instances in the fleet.
+            </p>
+
+            <p>
+                To learn more about fleets, see the{' '}
+                <a href={'https://dstack.ai/docs/concepts/fleets'} target="_blank">
+                    documentation
+                </a>
+                .
+            </p>
         </>
     ),
 };
@@ -24,7 +51,29 @@ export const FLEET_IDLE_DURATION_INFO = {
     header: <h2>Idle duration</h2>,
     body: (
         <>
-            <p>Some text</p>
+            <p>Idle instances can be reused when you submit a dev environment, task, or service.</p>
+
+            <p>
+                Set <code>Idle duration</code> to control how long instances stay <code>idle</code> before they are terminated.
+            </p>
+
+            <p>
+                Set <code>Idle duration</code> to <code>0s</code> if you want instances to be terminated immediately after they
+                are no longer needed.
+            </p>
+
+            <p>
+                Note, <code>dstack</code> doesn't terminates if their total number would be below{' '}
+                <code>Min number of instances</code>.
+            </p>
+
+            <p>
+                To learn more about fleets, see the{' '}
+                <a href={'https://dstack.ai/docs/concepts/fleets'} target="_blank">
+                    documentation
+                </a>
+                .
+            </p>
         </>
     ),
 };
diff --git a/frontend/src/pages/Fleets/Details/components/FleetFormFields/index.tsx b/frontend/src/pages/Fleets/Details/components/FleetFormFields/index.tsx
index 91e7462d74..bd5424ed54 100644
--- a/frontend/src/pages/Fleets/Details/components/FleetFormFields/index.tsx
+++ b/frontend/src/pages/Fleets/Details/components/FleetFormFields/index.tsx
@@ -22,7 +22,6 @@ export function FleetFormFields<T extends FieldValues = FieldValues>({
         <SpaceBetween direction="vertical" size="l">
             <FormInput
                 label={t('fleets.edit.name')}
-                description={t('fleets.edit.name_description')}
                 placeholder={t('fleets.edit.name_placeholder')}
                 constraintText={t('fleets.edit.name_constraint')}
                 control={control}
@@ -35,7 +34,7 @@ export function FleetFormFields<T extends FieldValues = FieldValues>({
             <FormInput
                 info={<InfoLink onFollow={() => openHelpPanel(FLEET_MIN_INSTANCES_INFO)} />}
                 label={t('fleets.edit.min_instances')}
-                description={t('fleets.edit.min_instances_description')}
+                constraintText={t('fleets.edit.min_instances_description')}
                 control={control}
                 //eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-expect-error
@@ -47,7 +46,7 @@ export function FleetFormFields<T extends FieldValues = FieldValues>({
             <FormInput
                 info={<InfoLink onFollow={() => openHelpPanel(FLEET_MAX_INSTANCES_INFO)} />}
                 label={t('fleets.edit.max_instances')}
-                description={t('fleets.edit.max_instances_description')}
+                constraintText={t('fleets.edit.max_instances_description')}
                 placeholder={t('fleets.edit.max_instances_placeholder')}
                 control={control}
                 //eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -60,7 +59,7 @@ export function FleetFormFields<T extends FieldValues = FieldValues>({
             <FormInput
                 info={<InfoLink onFollow={() => openHelpPanel(FLEET_IDLE_DURATION_INFO)} />}
                 label={t('fleets.edit.idle_duration')}
-                description={t('fleets.edit.idle_duration_description')}
+                constraintText={t('fleets.edit.idle_duration_description')}
                 control={control}
                 //eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-expect-error
diff --git a/frontend/src/pages/Project/Add/index.tsx b/frontend/src/pages/Project/Add/index.tsx
index c2a7d136a5..a99558bc56 100644
--- a/frontend/src/pages/Project/Add/index.tsx
+++ b/frontend/src/pages/Project/Add/index.tsx
@@ -6,9 +6,9 @@ import { isNil } from 'lodash';
 import * as yup from 'yup';
 import { WizardProps } from '@cloudscape-design/components';
 
-import { Container, FormCheckbox, FormInput, FormToggle, KeyValuePairs, SpaceBetween, Wizard } from 'components';
+import { Container, FormInput, FormToggle, InfoLink, KeyValuePairs, SpaceBetween, Wizard } from 'components';
 
-import { useBreadcrumbs, useConfirmationDialog, useNotifications } from 'hooks';
+import { useBreadcrumbs, useConfirmationDialog, useHelpPanel, useNotifications } from 'hooks';
 import { isResponseServerError, isResponseServerFormFieldError } from 'libs';
 import { ROUTES } from 'routes';
 import { useApplyFleetMutation } from 'services/fleet';
@@ -21,6 +21,7 @@ import {
     idleDurationValidator,
 } from 'pages/Fleets/Details/components/FleetFormFields/constants';
 
+import { DEFAULT_FLEET_INFO } from '../constants';
 import { useYupValidationResolver } from '../hooks/useYupValidationResolver';
 
 import { IProjectForm } from '../Form/types';
@@ -58,6 +59,7 @@ export const ProjectAdd: React.FC = () => {
     const navigate = useNavigate();
     const [pushNotification] = useNotifications();
     const [openConfirmationDialog] = useConfirmationDialog();
+    const [openHelpPanel] = useHelpPanel();
     const [createProject, { isLoading }] = useCreateProjectMutation();
     const [applyFleet, { isLoading: isApplyingFleet }] = useApplyFleetMutation();
     const [activeStepIndex, setActiveStepIndex] = useState(0);
@@ -203,7 +205,7 @@ export const ProjectAdd: React.FC = () => {
                 if (isResponseServerError(errorRequestData)) {
                     errorRequestData.detail.forEach((error) => {
                         if (isResponseServerFormFieldError(error)) {
-                            setError(error.loc.join('.') as FieldPath<IProject>, { type: 'custom', message: error.msg });
+                            setError(error.loc.join('.') as FieldPath<IProjectForm>, { type: 'custom', message: error.msg });
                         } else {
                             pushNotification({
                                 type: 'error',
@@ -272,9 +274,9 @@ export const ProjectAdd: React.FC = () => {
                                         disabled={loading}
                                     />
 
-                                    <FormCheckbox
+                                    <FormToggle
                                         label={t('projects.edit.is_public')}
-                                        description={t('projects.edit.is_public_description')}
+                                        toggleDescription={t('projects.edit.is_public_description')}
                                         control={control}
                                         name="is_public"
                                         disabled={loading}
@@ -291,6 +293,7 @@ export const ProjectAdd: React.FC = () => {
                                     <FormToggle
                                         toggleLabel={<strong>{t('projects.edit.default_fleet')}</strong>}
                                         constraintText={t('projects.edit.default_fleet_description')}
+                                        toggleInfo={<InfoLink onFollow={() => openHelpPanel(DEFAULT_FLEET_INFO)} />}
                                         control={control}
                                         name="fleet.enable_default"
                                     />
diff --git a/frontend/src/pages/Project/CreateWizard/index.tsx b/frontend/src/pages/Project/CreateWizard/index.tsx
index 21bc21df7e..2600165e86 100644
--- a/frontend/src/pages/Project/CreateWizard/index.tsx
+++ b/frontend/src/pages/Project/CreateWizard/index.tsx
@@ -15,12 +15,13 @@ import {
     FormInput,
     FormTiles,
     FormToggle,
+    InfoLink,
     KeyValuePairs,
     SpaceBetween,
     Wizard,
 } from 'components';
 
-import { useBreadcrumbs, useConfirmationDialog, useNotifications } from 'hooks';
+import { useBreadcrumbs, useConfirmationDialog, useHelpPanel, useNotifications } from 'hooks';
 import { getServerError } from 'libs';
 import { ROUTES } from 'routes';
 import { useGetBackendBaseTypesQuery, useGetBackendTypesQuery } from 'services/backend';
@@ -33,6 +34,7 @@ import {
     getMinInstancesValidator,
     idleDurationValidator,
 } from '../../Fleets/Details/components/FleetFormFields/constants';
+import { DEFAULT_FLEET_INFO } from '../constants';
 import { useYupValidationResolver } from '../hooks/useYupValidationResolver';
 import { projectTypeOptions } from './constants';
 
@@ -75,6 +77,7 @@ export const CreateProjectWizard: React.FC = () => {
     const navigate = useNavigate();
     const [pushNotification] = useNotifications();
     const [activeStepIndex, setActiveStepIndex] = useState(0);
+    const [openHelpPanel] = useHelpPanel();
     const [createProject, { isLoading }] = useCreateWizardProjectMutation();
     const [applyFleet, { isLoading: isApplyingFleet }] = useApplyFleetMutation();
     const { data: backendBaseTypesData, isLoading: isBackendBaseTypesLoading } = useGetBackendBaseTypesQuery();
@@ -347,7 +350,7 @@ export const CreateProjectWizard: React.FC = () => {
                 submitButtonText={t('projects.wizard.submit')}
                 steps={[
                     {
-                        title: 'Name and type',
+                        title: 'Settings',
                         content: (
                             <Container>
                                 <SpaceBetween direction="vertical" size="l">
@@ -414,7 +417,7 @@ export const CreateProjectWizard: React.FC = () => {
                                         loading={isBackendTypesLoading}
                                         items={backendOptions}
                                         cardDefinition={{
-                                            header: (item) => item.label,
+                                            header: (item: { label: string }) => item.label,
                                         }}
                                         cardsPerRow={[{ cards: 1 }, { minWidth: 400, cards: 2 }, { minWidth: 800, cards: 3 }]}
                                     />
@@ -430,6 +433,7 @@ export const CreateProjectWizard: React.FC = () => {
                                     <FormToggle
                                         toggleLabel={<strong>{t('projects.edit.default_fleet')}</strong>}
                                         constraintText={t('projects.edit.default_fleet_description')}
+                                        toggleInfo={<InfoLink onFollow={() => openHelpPanel(DEFAULT_FLEET_INFO)} />}
                                         control={control}
                                         name="fleet.enable_default"
                                     />
diff --git a/frontend/src/pages/Project/constants.tsx b/frontend/src/pages/Project/constants.tsx
new file mode 100644
index 0000000000..151740116b
--- /dev/null
+++ b/frontend/src/pages/Project/constants.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+export const DEFAULT_FLEET_INFO = {
+    header: <h2>Default fleet</h2>,
+    body: (
+        <>
+            <p>
+                Fleets act both as pools of instances and as templates for how those instances are provisioned. When you submit
+                a dev environment, task, or service, <code>dstack</code> reuses <code>idle</code> instances or provisions new
+                ones based on the fleet configuration.
+            </p>
+
+            <p>
+                If you set <code>Min number of instances</code> to <code>0</code>, <code>dstack</code> will provision instances
+                only when you run a dev environment, task, or service.
+            </p>
+
+            <p>
+                At least one fleet is required to run dev environments, tasks, or services. Create it here, or create it using
+                the <code>dstack apply</code> command via the CLI.
+            </p>
+
+            <p>
+                To learn more about fleets, see the{' '}
+                <a href={'https://dstack.ai/docs/concepts/fleets'} target="_blank">
+                    documentation
+                </a>
+                .
+            </p>
+        </>
+    ),
+};

From 6dec62ad5aae643fac2ee1b99633cd1922bc680b Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Tue, 20 Jan 2026 23:04:06 +0300
Subject: [PATCH 06/12] Was added create fleet wizard

---
 frontend/src/locale/en.json                   |   1 +
 .../FleetFormFields/constants.tsx             |   2 +-
 .../FleetFormFields/index.tsx                 |  16 +-
 .../FleetFormFields/type.ts                   |   0
 frontend/src/pages/Fleets/Add/index.tsx       | 261 ++++++++++++++++++
 frontend/src/pages/Fleets/Add/types.ts        |   5 +
 frontend/src/pages/Fleets/List/index.tsx      |   8 +
 frontend/src/pages/Fleets/index.ts            |   1 +
 frontend/src/pages/Project/Add/index.tsx      |   4 +-
 .../src/pages/Project/CreateWizard/index.tsx  |   4 +-
 .../src/pages/Project/CreateWizard/types.ts   |   2 +-
 frontend/src/pages/Project/Form/types.ts      |   2 +-
 frontend/src/router.tsx                       |   6 +-
 frontend/src/routes.ts                        |   1 +
 14 files changed, 301 insertions(+), 12 deletions(-)
 rename frontend/src/pages/Fleets/{Details/components => Add}/FleetFormFields/constants.tsx (97%)
 rename frontend/src/pages/Fleets/{Details/components => Add}/FleetFormFields/index.tsx (86%)
 rename frontend/src/pages/Fleets/{Details/components => Add}/FleetFormFields/type.ts (100%)
 create mode 100644 frontend/src/pages/Fleets/Add/index.tsx
 create mode 100644 frontend/src/pages/Fleets/Add/types.ts

diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index 0892bc2358..5cd0808be4 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -75,6 +75,7 @@
     "runs": "Runs",
     "models": "Models",
     "fleets": "Fleets",
+    "fleet": "Fleet",
     "project": "project",
     "project_other": "Projects",
     "general": "General",
diff --git a/frontend/src/pages/Fleets/Details/components/FleetFormFields/constants.tsx b/frontend/src/pages/Fleets/Add/FleetFormFields/constants.tsx
similarity index 97%
rename from frontend/src/pages/Fleets/Details/components/FleetFormFields/constants.tsx
rename to frontend/src/pages/Fleets/Add/FleetFormFields/constants.tsx
index efbc30574e..372c4dcfab 100644
--- a/frontend/src/pages/Fleets/Details/components/FleetFormFields/constants.tsx
+++ b/frontend/src/pages/Fleets/Add/FleetFormFields/constants.tsx
@@ -112,4 +112,4 @@ export const getMaxInstancesValidator = (minInstancesFieldPath: string) =>
             return value >= minInstances;
         });
 
-export const idleDurationValidator = yup.string().matches(/^[1-9]\d*[smhdw]$/, 'Invalid duration');
+export const idleDurationValidator = yup.string().matches(/^\d+[smhdw]$/, 'Invalid duration');
diff --git a/frontend/src/pages/Fleets/Details/components/FleetFormFields/index.tsx b/frontend/src/pages/Fleets/Add/FleetFormFields/index.tsx
similarity index 86%
rename from frontend/src/pages/Fleets/Details/components/FleetFormFields/index.tsx
rename to frontend/src/pages/Fleets/Add/FleetFormFields/index.tsx
index bd5424ed54..96a12ef4c8 100644
--- a/frontend/src/pages/Fleets/Details/components/FleetFormFields/index.tsx
+++ b/frontend/src/pages/Fleets/Add/FleetFormFields/index.tsx
@@ -18,6 +18,14 @@ export function FleetFormFields<T extends FieldValues = FieldValues>({
     const { t } = useTranslation();
     const [openHelpPanel] = useHelpPanel();
 
+    const getFieldNameWitPrefix = (name: string) => {
+        if (!fieldNamePrefix) {
+            return name;
+        }
+
+        [fieldNamePrefix, name].join('.');
+    };
+
     return (
         <SpaceBetween direction="vertical" size="l">
             <FormInput
@@ -27,7 +35,7 @@ export function FleetFormFields<T extends FieldValues = FieldValues>({
                 control={control}
                 //eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-expect-error
-                name={`${fieldNamePrefix}.name`}
+                name={getFieldNameWitPrefix(`name`)}
                 disabled={disabledAllFields}
             />
 
@@ -38,7 +46,7 @@ export function FleetFormFields<T extends FieldValues = FieldValues>({
                 control={control}
                 //eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-expect-error
-                name={`${fieldNamePrefix}.min_instances`}
+                name={getFieldNameWitPrefix(`min_instances`)}
                 disabled={disabledAllFields}
                 type="number"
             />
@@ -51,7 +59,7 @@ export function FleetFormFields<T extends FieldValues = FieldValues>({
                 control={control}
                 //eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-expect-error
-                name={`${fieldNamePrefix}.max_instances`}
+                name={getFieldNameWitPrefix(`max_instances`)}
                 disabled={disabledAllFields}
                 type="number"
             />
@@ -63,7 +71,7 @@ export function FleetFormFields<T extends FieldValues = FieldValues>({
                 control={control}
                 //eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-expect-error
-                name={`${fieldNamePrefix}.idle_duration`}
+                name={getFieldNameWitPrefix(`idle_duration`)}
                 disabled={disabledAllFields}
             />
         </SpaceBetween>
diff --git a/frontend/src/pages/Fleets/Details/components/FleetFormFields/type.ts b/frontend/src/pages/Fleets/Add/FleetFormFields/type.ts
similarity index 100%
rename from frontend/src/pages/Fleets/Details/components/FleetFormFields/type.ts
rename to frontend/src/pages/Fleets/Add/FleetFormFields/type.ts
diff --git a/frontend/src/pages/Fleets/Add/index.tsx b/frontend/src/pages/Fleets/Add/index.tsx
new file mode 100644
index 0000000000..fab1799a7f
--- /dev/null
+++ b/frontend/src/pages/Fleets/Add/index.tsx
@@ -0,0 +1,261 @@
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { isNil } from 'lodash';
+import * as yup from 'yup';
+import { WizardProps } from '@cloudscape-design/components';
+
+import { Container, FormSelect, KeyValuePairs, SpaceBetween, Wizard } from 'components';
+
+import { useBreadcrumbs, useConfirmationDialog, useNotifications } from 'hooks';
+import { useProjectFilter } from 'hooks/useProjectFilter';
+import { ROUTES } from 'routes';
+import { useApplyFleetMutation } from 'services/fleet';
+
+import { useYupValidationResolver } from 'pages/Project/hooks/useYupValidationResolver';
+
+import { getMaxInstancesValidator, getMinInstancesValidator, idleDurationValidator } from './FleetFormFields/constants';
+import { FleetFormFields } from './FleetFormFields';
+
+import { IFleetWizardForm } from './types';
+
+const requiredFieldError = 'This is required field';
+const namesFieldError = 'Only latin characters, dashes, underscores, and digits';
+
+const fleetStepIndex = 1;
+
+const fleetValidationSchema = yup.object({
+    project_name: yup
+        .string()
+        .required(requiredFieldError)
+        .matches(/^[a-zA-Z0-9-_]+$/, namesFieldError),
+    min_instances: getMinInstancesValidator('max_instances'),
+    max_instances: getMaxInstancesValidator('min_instances'),
+    idle_duration: idleDurationValidator,
+});
+
+export const FleetAdd: React.FC = () => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const [pushNotification] = useNotifications();
+    const [openConfirmationDialog] = useConfirmationDialog();
+    const [applyFleet, { isLoading: isApplyingFleet }] = useApplyFleetMutation();
+    const [activeStepIndex, setActiveStepIndex] = useState(0);
+    const resolver = useYupValidationResolver(fleetValidationSchema);
+    const { projectOptions } = useProjectFilter({ localStorePrefix: 'add-fleet-page' });
+
+    const loading = isApplyingFleet;
+
+    const formMethods = useForm<IFleetWizardForm>({
+        resolver,
+        defaultValues: {
+            min_instances: 0,
+            idle_duration: '5m',
+        },
+    });
+
+    const { handleSubmit, control, clearErrors, trigger, watch, getValues } = formMethods;
+    const formValues = watch();
+
+    const getFormValuesForFleetApplying = (): IApplyFleetPlanRequestRequest => {
+        const { min_instances, max_instances, idle_duration, name } = getValues();
+
+        return {
+            plan: {
+                spec: {
+                    configuration: {
+                        ...(name ? { name } : {}),
+                        nodes: {
+                            min: min_instances,
+                            ...(max_instances ? { max: max_instances } : {}),
+                        },
+                        ...(idle_duration ? { idle_duration } : {}),
+                    },
+                    profile: {},
+                },
+            },
+            force: false,
+        };
+    };
+
+    useBreadcrumbs([
+        {
+            text: t('navigation.fleets'),
+            href: ROUTES.FLEETS.LIST,
+        },
+
+        {
+            text: t('common.create_wit_text', { text: t('navigation.fleet') }),
+            href: ROUTES.FLEETS.ADD,
+        },
+    ]);
+
+    const validateName = async () => {
+        return await trigger(['project_name']);
+    };
+
+    const validateFleet = async () => {
+        return await trigger(['min_instances', 'max_instances', 'idle_duration']);
+    };
+
+    const emptyValidator = async () => Promise.resolve(true);
+
+    const onNavigate = ({
+        requestedStepIndex,
+        reason,
+    }: {
+        requestedStepIndex: number;
+        reason: WizardProps.NavigationReason;
+    }) => {
+        const stepValidators = [validateName, validateFleet, emptyValidator];
+
+        if (reason === 'next') {
+            stepValidators[activeStepIndex]?.().then((isValid) => {
+                if (isValid) {
+                    if (activeStepIndex === fleetStepIndex && formValues?.['min_instances'] > 0) {
+                        openConfirmationDialog({
+                            title: 'Are sure want to set min instances above than 0?',
+                            content: null,
+                            onConfirm: () => setActiveStepIndex(requestedStepIndex),
+                        });
+                    } else {
+                        setActiveStepIndex(requestedStepIndex);
+                    }
+                }
+            });
+        } else {
+            setActiveStepIndex(requestedStepIndex);
+        }
+    };
+
+    const onNavigateHandler: WizardProps['onNavigate'] = ({ detail: { requestedStepIndex, reason } }) => {
+        onNavigate({ requestedStepIndex, reason });
+    };
+
+    const onCancelHandler = () => {
+        navigate(ROUTES.FLEETS.LIST);
+    };
+
+    const onSubmitWizard = async () => {
+        const isValid = await trigger();
+
+        const { project_name } = getValues();
+
+        if (!isValid) {
+            return;
+        }
+
+        clearErrors();
+
+        const request = applyFleet({
+            projectName: project_name,
+            ...getFormValuesForFleetApplying(),
+        }).unwrap();
+
+        request
+            .then(async (data) => {
+                pushNotification({
+                    type: 'success',
+                    content: t('fleets.create.success_notification'),
+                });
+
+                navigate(ROUTES.FLEETS.DETAILS.FORMAT(data.project_name, data.id));
+            })
+            .catch((error) => {
+                pushNotification({
+                    type: 'error',
+                    content: t('common.server_error', { error: error?.error ?? error }),
+                });
+            });
+    };
+
+    const onSubmit = () => {
+        if (activeStepIndex < 2) {
+            onNavigate({ requestedStepIndex: activeStepIndex + 1, reason: 'next' });
+        } else {
+            onSubmitWizard().catch(console.log);
+        }
+    };
+
+    const getDefaultFleetSummary = () => {
+        const summaryFields: Array<keyof IFleetWizardForm> = ['name', 'min_instances', 'max_instances', 'idle_duration'];
+
+        const result: string[] = [];
+
+        summaryFields.forEach((fieldName) => {
+            if (!isNil(formValues?.[fieldName])) {
+                result.push(`${t(`fleets.edit.${fieldName}`)}: ${formValues?.[fieldName]}`);
+            }
+        });
+
+        return result.join(', ');
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <Wizard
+                activeStepIndex={activeStepIndex}
+                onNavigate={onNavigateHandler}
+                onSubmit={onSubmitWizard}
+                i18nStrings={{
+                    stepNumberLabel: (stepNumber) => `Step ${stepNumber}`,
+                    navigationAriaLabel: 'Steps',
+                    cancelButton: t('common.cancel'),
+                    previousButton: t('common.previous'),
+                    nextButton: t('common.next'),
+                    optional: 'optional',
+                }}
+                onCancel={onCancelHandler}
+                submitButtonText={t('projects.wizard.submit')}
+                steps={[
+                    {
+                        title: 'Project',
+                        content: (
+                            <Container>
+                                <SpaceBetween direction="vertical" size="l">
+                                    <FormSelect
+                                        label={t('projects.edit.project_name')}
+                                        control={control}
+                                        name="project_name"
+                                        options={projectOptions}
+                                        disabled={loading}
+                                    />
+                                </SpaceBetween>
+                            </Container>
+                        ),
+                    },
+                    {
+                        title: 'Fleets',
+                        content: (
+                            <Container>
+                                <SpaceBetween direction="vertical" size="l">
+                                    <FleetFormFields<IFleetWizardForm> control={control} disabledAllFields={loading} />
+                                </SpaceBetween>
+                            </Container>
+                        ),
+                    },
+                    {
+                        title: 'Summary',
+                        content: (
+                            <Container>
+                                <KeyValuePairs
+                                    items={[
+                                        {
+                                            label: t('projects.edit.project_name'),
+                                            value: formValues['project_name'],
+                                        },
+                                        {
+                                            label: 'Default fleet',
+                                            value: getDefaultFleetSummary(),
+                                        },
+                                    ]}
+                                />
+                            </Container>
+                        ),
+                    },
+                ]}
+            />
+        </form>
+    );
+};
diff --git a/frontend/src/pages/Fleets/Add/types.ts b/frontend/src/pages/Fleets/Add/types.ts
new file mode 100644
index 0000000000..9e36ef72a6
--- /dev/null
+++ b/frontend/src/pages/Fleets/Add/types.ts
@@ -0,0 +1,5 @@
+import { FleetFormFields } from './FleetFormFields/type';
+
+export interface IFleetWizardForm extends FleetFormFields {
+    project_name: IProject['project_name'];
+}
diff --git a/frontend/src/pages/Fleets/List/index.tsx b/frontend/src/pages/Fleets/List/index.tsx
index 0a29192e0c..e70990ed74 100644
--- a/frontend/src/pages/Fleets/List/index.tsx
+++ b/frontend/src/pages/Fleets/List/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 import { Button, Header, Loader, PropertyFilter, SpaceBetween, Table, Toggle } from 'components';
 
@@ -18,6 +19,7 @@ import styles from './styles.module.scss';
 
 export const FleetList: React.FC = () => {
     const { t } = useTranslation();
+    const navigate = useNavigate();
 
     useBreadcrumbs([
         {
@@ -66,6 +68,10 @@ export const FleetList: React.FC = () => {
 
     const isDisabledDeleteButton = !selectedItems?.length || isDeleting;
 
+    const addFleetHandler = () => {
+        navigate(ROUTES.FLEETS.ADD);
+    };
+
     const deleteClickHandle = () => {
         if (!selectedItems?.length) return;
 
@@ -101,6 +107,8 @@ export const FleetList: React.FC = () => {
                                     {t('common.delete')}
                                 </Button>
 
+                                <Button onClick={addFleetHandler}>{t('common.create')}</Button>
+
                                 <Button
                                     iconName="refresh"
                                     disabled={isLoading}
diff --git a/frontend/src/pages/Fleets/index.ts b/frontend/src/pages/Fleets/index.ts
index 18916ef2b5..e388010498 100644
--- a/frontend/src/pages/Fleets/index.ts
+++ b/frontend/src/pages/Fleets/index.ts
@@ -1,2 +1,3 @@
 export { FleetList } from './List';
 export { FleetDetails } from './Details';
+export { FleetAdd } from './Add';
diff --git a/frontend/src/pages/Project/Add/index.tsx b/frontend/src/pages/Project/Add/index.tsx
index a99558bc56..14bbcc71fe 100644
--- a/frontend/src/pages/Project/Add/index.tsx
+++ b/frontend/src/pages/Project/Add/index.tsx
@@ -14,12 +14,12 @@ import { ROUTES } from 'routes';
 import { useApplyFleetMutation } from 'services/fleet';
 import { useCreateProjectMutation } from 'services/project';
 
-import { FleetFormFields } from 'pages/Fleets/Details/components/FleetFormFields';
+import { FleetFormFields } from 'pages/Fleets/Add/FleetFormFields';
 import {
     getMaxInstancesValidator,
     getMinInstancesValidator,
     idleDurationValidator,
-} from 'pages/Fleets/Details/components/FleetFormFields/constants';
+} from 'pages/Fleets/Add/FleetFormFields/constants';
 
 import { DEFAULT_FLEET_INFO } from '../constants';
 import { useYupValidationResolver } from '../hooks/useYupValidationResolver';
diff --git a/frontend/src/pages/Project/CreateWizard/index.tsx b/frontend/src/pages/Project/CreateWizard/index.tsx
index 2600165e86..4981efb6f1 100644
--- a/frontend/src/pages/Project/CreateWizard/index.tsx
+++ b/frontend/src/pages/Project/CreateWizard/index.tsx
@@ -28,12 +28,12 @@ import { useGetBackendBaseTypesQuery, useGetBackendTypesQuery } from 'services/b
 import { useApplyFleetMutation } from 'services/fleet';
 import { useCreateWizardProjectMutation } from 'services/project';
 
-import { FleetFormFields } from '../../Fleets/Details/components/FleetFormFields';
+import { FleetFormFields } from '../../Fleets/Add/FleetFormFields';
 import {
     getMaxInstancesValidator,
     getMinInstancesValidator,
     idleDurationValidator,
-} from '../../Fleets/Details/components/FleetFormFields/constants';
+} from '../../Fleets/Add/FleetFormFields/constants';
 import { DEFAULT_FLEET_INFO } from '../constants';
 import { useYupValidationResolver } from '../hooks/useYupValidationResolver';
 import { projectTypeOptions } from './constants';
diff --git a/frontend/src/pages/Project/CreateWizard/types.ts b/frontend/src/pages/Project/CreateWizard/types.ts
index 9947af44e0..62f63d725b 100644
--- a/frontend/src/pages/Project/CreateWizard/types.ts
+++ b/frontend/src/pages/Project/CreateWizard/types.ts
@@ -1,4 +1,4 @@
-import { FleetFormFields } from 'pages/Fleets/Details/components/FleetFormFields/type';
+import { FleetFormFields } from 'pages/Fleets/Add/FleetFormFields/type';
 
 export interface IProjectWizardForm extends Pick<IProject, 'project_name'> {
     project_type: 'gpu_marketplace' | 'own_cloud';
diff --git a/frontend/src/pages/Project/Form/types.ts b/frontend/src/pages/Project/Form/types.ts
index 8c1f2db689..2f821d4bfc 100644
--- a/frontend/src/pages/Project/Form/types.ts
+++ b/frontend/src/pages/Project/Form/types.ts
@@ -1,4 +1,4 @@
-import { FleetFormFields } from 'pages/Fleets/Details/components/FleetFormFields/type';
+import { FleetFormFields } from 'pages/Fleets/Add/FleetFormFields/type';
 
 export interface IProps {
     initialValues?: Partial<IProjectForm>;
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index fbdeca2942..a27ef9e292 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -10,7 +10,7 @@ import { LoginByGoogleCallback } from 'App/Login/LoginByGoogleCallback';
 import { LoginByOktaCallback } from 'App/Login/LoginByOktaCallback';
 import { TokenLogin } from 'App/Login/TokenLogin';
 import { Logout } from 'App/Logout';
-import { FleetDetails, FleetList } from 'pages/Fleets';
+import { FleetAdd, FleetDetails, FleetList } from 'pages/Fleets';
 import { EventsList as FleetEventsList } from 'pages/Fleets/Details/Events';
 import { FleetDetails as FleetDetailsGeneral } from 'pages/Fleets/Details/FleetDetails';
 import { FleetInspect } from 'pages/Fleets/Details/Inspect';
@@ -202,6 +202,10 @@ export const router = createBrowserRouter([
                 path: ROUTES.FLEETS.LIST,
                 element: <FleetList />,
             },
+            {
+                path: ROUTES.FLEETS.ADD,
+                element: <FleetAdd />,
+            },
             {
                 path: ROUTES.FLEETS.DETAILS.TEMPLATE,
                 element: <FleetDetails />,
diff --git a/frontend/src/routes.ts b/frontend/src/routes.ts
index fea2f978a4..8aa20ea616 100644
--- a/frontend/src/routes.ts
+++ b/frontend/src/routes.ts
@@ -137,6 +137,7 @@ export const ROUTES = {
 
     FLEETS: {
         LIST: '/fleets',
+        ADD: '/fleets/add',
         DETAILS: {
             TEMPLATE: `/projects/:projectName/fleets/:fleetId`,
             FORMAT: (projectName: string, fleetId: string) =>

From e8a5661dc2b672ab993a25aed0a7d506e672fd62 Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Tue, 20 Jan 2026 23:08:21 +0300
Subject: [PATCH 07/12] Fixes after review

---
 frontend/src/pages/Fleets/Add/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/Fleets/Add/index.tsx b/frontend/src/pages/Fleets/Add/index.tsx
index fab1799a7f..3d80b7f0eb 100644
--- a/frontend/src/pages/Fleets/Add/index.tsx
+++ b/frontend/src/pages/Fleets/Add/index.tsx
@@ -154,7 +154,7 @@ export const FleetAdd: React.FC = () => {
         }).unwrap();
 
         request
-            .then(async (data) => {
+            .then((data) => {
                 pushNotification({
                     type: 'success',
                     content: t('fleets.create.success_notification'),

From ead860190e37551da5e580249ca5655c36d187cc Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Tue, 20 Jan 2026 23:28:59 +0300
Subject: [PATCH 08/12] Refactoring after review

---
 frontend/src/pages/Fleets/Add/index.tsx       | 31 +++++++++++++------
 frontend/src/pages/Fleets/List/index.tsx      |  8 -----
 .../components/NoFleetProjectAlert/index.tsx  |  6 ++--
 frontend/src/router.tsx                       |  2 +-
 frontend/src/routes.ts                        |  5 ++-
 5 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/frontend/src/pages/Fleets/Add/index.tsx b/frontend/src/pages/Fleets/Add/index.tsx
index 3d80b7f0eb..b2b0a1dd11 100644
--- a/frontend/src/pages/Fleets/Add/index.tsx
+++ b/frontend/src/pages/Fleets/Add/index.tsx
@@ -1,18 +1,18 @@
 import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { isNil } from 'lodash';
 import * as yup from 'yup';
 import { WizardProps } from '@cloudscape-design/components';
 
-import { Container, FormSelect, KeyValuePairs, SpaceBetween, Wizard } from 'components';
+import { Container, FormInput, InfoLink, KeyValuePairs, SpaceBetween, Wizard } from 'components';
 
-import { useBreadcrumbs, useConfirmationDialog, useNotifications } from 'hooks';
-import { useProjectFilter } from 'hooks/useProjectFilter';
+import { useBreadcrumbs, useConfirmationDialog, useHelpPanel, useNotifications } from 'hooks';
 import { ROUTES } from 'routes';
 import { useApplyFleetMutation } from 'services/fleet';
 
+import { DEFAULT_FLEET_INFO } from 'pages/Project/constants';
 import { useYupValidationResolver } from 'pages/Project/hooks/useYupValidationResolver';
 
 import { getMaxInstancesValidator, getMinInstancesValidator, idleDurationValidator } from './FleetFormFields/constants';
@@ -38,18 +38,21 @@ const fleetValidationSchema = yup.object({
 export const FleetAdd: React.FC = () => {
     const { t } = useTranslation();
     const navigate = useNavigate();
+    const params = useParams();
+    const paramProjectName = params.projectName ?? '';
+    const [openHelpPanel] = useHelpPanel();
     const [pushNotification] = useNotifications();
     const [openConfirmationDialog] = useConfirmationDialog();
     const [applyFleet, { isLoading: isApplyingFleet }] = useApplyFleetMutation();
     const [activeStepIndex, setActiveStepIndex] = useState(0);
     const resolver = useYupValidationResolver(fleetValidationSchema);
-    const { projectOptions } = useProjectFilter({ localStorePrefix: 'add-fleet-page' });
 
     const loading = isApplyingFleet;
 
     const formMethods = useForm<IFleetWizardForm>({
         resolver,
         defaultValues: {
+            project_name: paramProjectName,
             min_instances: 0,
             idle_duration: '5m',
         },
@@ -80,14 +83,21 @@ export const FleetAdd: React.FC = () => {
     };
 
     useBreadcrumbs([
+        {
+            text: t('navigation.project_other'),
+            href: ROUTES.PROJECT.LIST,
+        },
+        {
+            text: paramProjectName,
+            href: ROUTES.PROJECT.DETAILS.FORMAT(paramProjectName),
+        },
         {
             text: t('navigation.fleets'),
             href: ROUTES.FLEETS.LIST,
         },
-
         {
             text: t('common.create_wit_text', { text: t('navigation.fleet') }),
-            href: ROUTES.FLEETS.ADD,
+            href: ROUTES.FLEETS.ADD.FORMAT(paramProjectName),
         },
     ]);
 
@@ -214,11 +224,11 @@ export const FleetAdd: React.FC = () => {
                         content: (
                             <Container>
                                 <SpaceBetween direction="vertical" size="l">
-                                    <FormSelect
+                                    <FormInput
                                         label={t('projects.edit.project_name')}
                                         control={control}
                                         name="project_name"
-                                        options={projectOptions}
+                                        readOnly
                                         disabled={loading}
                                     />
                                 </SpaceBetween>
@@ -226,7 +236,8 @@ export const FleetAdd: React.FC = () => {
                         ),
                     },
                     {
-                        title: 'Fleets',
+                        title: 'Settings',
+                        info: <InfoLink onFollow={() => openHelpPanel(DEFAULT_FLEET_INFO)} />,
                         content: (
                             <Container>
                                 <SpaceBetween direction="vertical" size="l">
diff --git a/frontend/src/pages/Fleets/List/index.tsx b/frontend/src/pages/Fleets/List/index.tsx
index e70990ed74..0a29192e0c 100644
--- a/frontend/src/pages/Fleets/List/index.tsx
+++ b/frontend/src/pages/Fleets/List/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
 
 import { Button, Header, Loader, PropertyFilter, SpaceBetween, Table, Toggle } from 'components';
 
@@ -19,7 +18,6 @@ import styles from './styles.module.scss';
 
 export const FleetList: React.FC = () => {
     const { t } = useTranslation();
-    const navigate = useNavigate();
 
     useBreadcrumbs([
         {
@@ -68,10 +66,6 @@ export const FleetList: React.FC = () => {
 
     const isDisabledDeleteButton = !selectedItems?.length || isDeleting;
 
-    const addFleetHandler = () => {
-        navigate(ROUTES.FLEETS.ADD);
-    };
-
     const deleteClickHandle = () => {
         if (!selectedItems?.length) return;
 
@@ -107,8 +101,6 @@ export const FleetList: React.FC = () => {
                                     {t('common.delete')}
                                 </Button>
 
-                                <Button onClick={addFleetHandler}>{t('common.create')}</Button>
-
                                 <Button
                                     iconName="refresh"
                                     disabled={isLoading}
diff --git a/frontend/src/pages/Project/components/NoFleetProjectAlert/index.tsx b/frontend/src/pages/Project/components/NoFleetProjectAlert/index.tsx
index 01dc74593b..a585680a00 100644
--- a/frontend/src/pages/Project/components/NoFleetProjectAlert/index.tsx
+++ b/frontend/src/pages/Project/components/NoFleetProjectAlert/index.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 import cn from 'classnames';
 
 import type { ButtonProps } from 'components';
 import { Alert, AlertProps, Button } from 'components';
 
 import { useLocalStorageState } from 'hooks/useLocalStorageState';
-import { goToUrl } from 'libs';
+import { ROUTES } from 'routes';
 
 import styles from './styles.module.scss';
 
@@ -19,11 +20,12 @@ type NoFleetProjectAlertProps = {
 
 export const NoFleetProjectAlert: React.FC<NoFleetProjectAlertProps> = ({ projectName, show, className, dismissible }) => {
     const { t } = useTranslation();
+    const navigate = useNavigate();
     const [dontShowAgain, setDontShowAgain] = useLocalStorageState(`noFleetProjectAlert-${projectName}`, false);
 
     const onCreateAFleet: ButtonProps['onClick'] = (event) => {
         event.preventDefault();
-        goToUrl('https://dstack.ai/docs/quickstart/#create-a-fleet', true);
+        navigate(ROUTES.FLEETS.ADD.FORMAT(projectName));
     };
 
     const onDismiss: AlertProps['onDismiss'] = () => setDontShowAgain(true);
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index a27ef9e292..34a8abaaf0 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -203,7 +203,7 @@ export const router = createBrowserRouter([
                 element: <FleetList />,
             },
             {
-                path: ROUTES.FLEETS.ADD,
+                path: ROUTES.FLEETS.ADD.TEMPLATE,
                 element: <FleetAdd />,
             },
             {
diff --git a/frontend/src/routes.ts b/frontend/src/routes.ts
index 8aa20ea616..288cef72fc 100644
--- a/frontend/src/routes.ts
+++ b/frontend/src/routes.ts
@@ -137,7 +137,10 @@ export const ROUTES = {
 
     FLEETS: {
         LIST: '/fleets',
-        ADD: '/fleets/add',
+        ADD: {
+            TEMPLATE: `/projects/:projectName/fleets/add`,
+            FORMAT: (projectName: string) => buildRoute(ROUTES.FLEETS.ADD.TEMPLATE, { projectName }),
+        },
         DETAILS: {
             TEMPLATE: `/projects/:projectName/fleets/:fleetId`,
             FORMAT: (projectName: string, fleetId: string) =>

From d0c938ba17bbf393b20b1744c73a4773b8f0dea5 Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Tue, 20 Jan 2026 23:31:37 +0300
Subject: [PATCH 09/12] Fixes after review

---
 .../src/pages/Project/components/NoFleetProjectAlert/index.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/Project/components/NoFleetProjectAlert/index.tsx b/frontend/src/pages/Project/components/NoFleetProjectAlert/index.tsx
index a585680a00..9aefc77d88 100644
--- a/frontend/src/pages/Project/components/NoFleetProjectAlert/index.tsx
+++ b/frontend/src/pages/Project/components/NoFleetProjectAlert/index.tsx
@@ -42,7 +42,7 @@ export const NoFleetProjectAlert: React.FC<NoFleetProjectAlertProps> = ({ projec
                 dismissible={dismissible}
                 onDismiss={onDismiss}
                 action={
-                    <Button iconName="external" formAction="none" onClick={onCreateAFleet}>
+                    <Button formAction="none" onClick={onCreateAFleet}>
                         {t('fleets.no_alert.button_title')}
                     </Button>
                 }

From ab674d7b6dba14fd1e30ad57e6aa70e2590f51e1 Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Tue, 20 Jan 2026 23:34:48 +0300
Subject: [PATCH 10/12] Fixes after review

---
 frontend/src/pages/Fleets/Add/index.tsx | 26 +++----------------------
 1 file changed, 3 insertions(+), 23 deletions(-)

diff --git a/frontend/src/pages/Fleets/Add/index.tsx b/frontend/src/pages/Fleets/Add/index.tsx
index b2b0a1dd11..fb5b92446b 100644
--- a/frontend/src/pages/Fleets/Add/index.tsx
+++ b/frontend/src/pages/Fleets/Add/index.tsx
@@ -6,7 +6,7 @@ import { isNil } from 'lodash';
 import * as yup from 'yup';
 import { WizardProps } from '@cloudscape-design/components';
 
-import { Container, FormInput, InfoLink, KeyValuePairs, SpaceBetween, Wizard } from 'components';
+import { Container, InfoLink, KeyValuePairs, SpaceBetween, Wizard } from 'components';
 
 import { useBreadcrumbs, useConfirmationDialog, useHelpPanel, useNotifications } from 'hooks';
 import { ROUTES } from 'routes';
@@ -23,7 +23,7 @@ import { IFleetWizardForm } from './types';
 const requiredFieldError = 'This is required field';
 const namesFieldError = 'Only latin characters, dashes, underscores, and digits';
 
-const fleetStepIndex = 1;
+const fleetStepIndex = 0;
 
 const fleetValidationSchema = yup.object({
     project_name: yup
@@ -101,10 +101,6 @@ export const FleetAdd: React.FC = () => {
         },
     ]);
 
-    const validateName = async () => {
-        return await trigger(['project_name']);
-    };
-
     const validateFleet = async () => {
         return await trigger(['min_instances', 'max_instances', 'idle_duration']);
     };
@@ -118,7 +114,7 @@ export const FleetAdd: React.FC = () => {
         requestedStepIndex: number;
         reason: WizardProps.NavigationReason;
     }) => {
-        const stepValidators = [validateName, validateFleet, emptyValidator];
+        const stepValidators = [validateFleet, emptyValidator];
 
         if (reason === 'next') {
             stepValidators[activeStepIndex]?.().then((isValid) => {
@@ -219,22 +215,6 @@ export const FleetAdd: React.FC = () => {
                 onCancel={onCancelHandler}
                 submitButtonText={t('projects.wizard.submit')}
                 steps={[
-                    {
-                        title: 'Project',
-                        content: (
-                            <Container>
-                                <SpaceBetween direction="vertical" size="l">
-                                    <FormInput
-                                        label={t('projects.edit.project_name')}
-                                        control={control}
-                                        name="project_name"
-                                        readOnly
-                                        disabled={loading}
-                                    />
-                                </SpaceBetween>
-                            </Container>
-                        ),
-                    },
                     {
                         title: 'Settings',
                         info: <InfoLink onFollow={() => openHelpPanel(DEFAULT_FLEET_INFO)} />,

From a39ce2ea9a37fc6befea009a5b4324ec3b641070 Mon Sep 17 00:00:00 2001
From: peterschmidt85 <andrey.cheptsov@gmail.com>
Date: Tue, 20 Jan 2026 21:43:26 +0100
Subject: [PATCH 11/12] Cosmetics

---
 frontend/src/pages/Fleets/Add/index.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/Fleets/Add/index.tsx b/frontend/src/pages/Fleets/Add/index.tsx
index fb5b92446b..075f6ce1dc 100644
--- a/frontend/src/pages/Fleets/Add/index.tsx
+++ b/frontend/src/pages/Fleets/Add/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 import { isNil } from 'lodash';
 import * as yup from 'yup';
-import { WizardProps } from '@cloudscape-design/components';
+import { Box, WizardProps } from '@cloudscape-design/components';
 
 import { Container, InfoLink, KeyValuePairs, SpaceBetween, Wizard } from 'components';
 
@@ -217,7 +217,13 @@ export const FleetAdd: React.FC = () => {
                 steps={[
                     {
                         title: 'Settings',
-                        info: <InfoLink onFollow={() => openHelpPanel(DEFAULT_FLEET_INFO)} />,
+                        description: (
+                            <Box>
+                                At least one fleet is required to run dev environments, tasks, or services. Create it here, or
+                                create it using the <code>dstack apply</code> command via the CLI.{' '}
+                                <InfoLink onFollow={() => openHelpPanel(DEFAULT_FLEET_INFO)} />
+                            </Box>
+                        ),
                         content: (
                             <Container>
                                 <SpaceBetween direction="vertical" size="l">

From 62db74ef0fba35b0f4996855adcf7c2df47c314c Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Tue, 20 Jan 2026 23:45:25 +0300
Subject: [PATCH 12/12] Fixes after review

---
 frontend/src/pages/Fleets/Add/index.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/frontend/src/pages/Fleets/Add/index.tsx b/frontend/src/pages/Fleets/Add/index.tsx
index 075f6ce1dc..b661d96cb0 100644
--- a/frontend/src/pages/Fleets/Add/index.tsx
+++ b/frontend/src/pages/Fleets/Add/index.tsx
@@ -239,11 +239,7 @@ export const FleetAdd: React.FC = () => {
                                 <KeyValuePairs
                                     items={[
                                         {
-                                            label: t('projects.edit.project_name'),
-                                            value: formValues['project_name'],
-                                        },
-                                        {
-                                            label: 'Default fleet',
+                                            label: 'Fleet settings',
                                             value: getDefaultFleetSummary(),
                                         },
                                     ]}