diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 87a728f1e9..3b066610a2 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -16,7 +16,7 @@ repos:
 
   # Lint / autoformat: Python code
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: "v0.1.5"
+    rev: "v0.1.6"
     hooks:
       - id: ruff
         files: ^src/backend/(?:.*/)*.*$
diff --git a/docker-compose.development.yml b/docker-compose.development.yml
index b547e0583f..0e975f691a 100644
--- a/docker-compose.development.yml
+++ b/docker-compose.development.yml
@@ -210,7 +210,7 @@ services:
       - "5434:5432"
     networks:
       - fmtm-net
-    restart: "on-failure:3"
+    restart: "unless-stopped"
     healthcheck:
       test: pg_isready -U ${CENTRAL_DB_USER} -d ${CENTRAL_DB_NAME}
       start_period: 5s
diff --git a/src/frontend/src/assets/images/something_went_wrong.png b/src/frontend/src/assets/images/something_went_wrong.png
index a1fd6704fc..cf08a64d98 100644
Binary files a/src/frontend/src/assets/images/something_went_wrong.png and b/src/frontend/src/assets/images/something_went_wrong.png differ
diff --git a/src/frontend/src/components/GenerateBasemap.jsx b/src/frontend/src/components/GenerateBasemap.jsx
index a576d331c7..d1091de09b 100644
--- a/src/frontend/src/components/GenerateBasemap.jsx
+++ b/src/frontend/src/components/GenerateBasemap.jsx
@@ -15,6 +15,7 @@ const GenerateBasemap = ({ setToggleGenerateModal, toggleGenerateModal, projectI
   const [selectedTileSource, setSelectedTileSource] = useState(null);
   const [selectedOutputFormat, setSelectedOutputFormat] = useState(null);
   const [tmsUrl, setTmsUrl] = useState('');
+  const [error, setError] = useState([]);
 
   const modalStyle = (theme) => ({
     width: '90vw', // Responsive modal width using vw
@@ -51,6 +52,35 @@ const GenerateBasemap = ({ setToggleGenerateModal, toggleGenerateModal, projectI
     setTmsUrl(e.target.value);
   };
 
+  const generateProjectTilesValidation = () => {
+    const currentError = [];
+    if (!selectedTileSource) {
+      currentError.push('selectedTileSource');
+    }
+    if (!selectedOutputFormat) {
+      currentError.push('selectedOutputFormat');
+    }
+    if (!tmsUrl && selectedTileSource === 'tms') {
+      currentError.push('tmsUrl');
+    }
+    setError(currentError);
+    return currentError;
+  };
+
+  const generateProjectTiles = () => {
+    const currentErrors = generateProjectTilesValidation();
+    if (currentErrors.length === 0) {
+      dispatch(
+        GenerateProjectTiles(
+          `${
+            import.meta.env.VITE_API_URL
+          }/projects/tiles/${decodedId}?source=${selectedTileSource}&format=${selectedOutputFormat}&tms=${tmsUrl}`,
+          decodedId,
+        ),
+      );
+    }
+  };
+
   return (
     <CoreModules.CustomizedModal
       isOpen={!!toggleGenerateModal}
@@ -69,137 +99,140 @@ const GenerateBasemap = ({ setToggleGenerateModal, toggleGenerateModal, projectI
           </CoreModules.IconButton>
         </CoreModules.Grid>
 
-        {/* Output Format Dropdown */}
-        <CoreModules.Grid item xs={12} sm={6}>
-          <CoreModules.FormControl fullWidth>
-            <CoreModules.InputLabel
-              id="output-format"
-              sx={{
-                '&.Mui-focused': {
-                  color: defaultTheme.palette.black,
-                },
-              }}
-            >
-              Select Output Format
-            </CoreModules.InputLabel>
-            <CoreModules.Select
-              labelId="output-format"
-              id="output_format"
-              value={selectedOutputFormat}
-              label="Form Selection"
-              fullWidth
-              sx={{
-                '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                  border: '2px solid black',
-                },
-              }}
-              onChange={(e) => {
-                setSelectedOutputFormat(e.target.value);
-              }}
-            >
-              {environment.tileOutputFormats?.map((form) => (
-                <CoreModules.MenuItem key={form.value} value={form.value}>
-                  {form.label}
-                </CoreModules.MenuItem>
-              ))}
-            </CoreModules.Select>
-          </CoreModules.FormControl>
-        </CoreModules.Grid>
+        <CoreModules.Grid container spacing={2} className="fmtm-px-4 fmtm-mb-4">
+          {/* Output Format Dropdown */}
+          <CoreModules.Grid item xs={12} sm={6} md={4}>
+            <CoreModules.FormControl fullWidth>
+              <CoreModules.InputLabel
+                id="output-format"
+                sx={{
+                  '&.Mui-focused': {
+                    color: defaultTheme.palette.black,
+                  },
+                }}
+              >
+                Select Output Format
+              </CoreModules.InputLabel>
+              <CoreModules.Select
+                labelId="output-format"
+                id="output_format"
+                value={selectedOutputFormat}
+                label="Select Output Format"
+                fullWidth
+                sx={{
+                  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                    border: '2px solid black',
+                  },
+                }}
+                onChange={(e) => {
+                  setSelectedOutputFormat(e.target.value);
+                }}
+              >
+                {environment.tileOutputFormats?.map((form) => (
+                  <CoreModules.MenuItem key={form.value} value={form.value}>
+                    {form.label}
+                  </CoreModules.MenuItem>
+                ))}
+              </CoreModules.Select>
+            </CoreModules.FormControl>
+            {error.includes('selectedOutputFormat') && (
+              <p className="fmtm-text-sm fmtm-text-red-500">Output Format is Required.</p>
+            )}
+          </CoreModules.Grid>
 
-        {/* Tile Source Dropdown or TMS URL Input */}
-        <CoreModules.Grid item xs={12} sm={6}>
-          <CoreModules.FormControl fullWidth>
-            <CoreModules.InputLabel
-              id="tile-source"
-              sx={{
-                '&.Mui-focused': {
-                  color: defaultTheme.palette.black,
-                },
-              }}
-            >
-              Select Tile Source
-            </CoreModules.InputLabel>
-            <CoreModules.Select
-              labelId="tile-source"
-              id="tile_source"
-              value={selectedTileSource}
-              label="Form Selection"
-              fullWidth
-              sx={{
-                '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                  border: '2px solid black',
-                },
-              }}
-              onChange={handleTileSourceChange}
-            >
-              {environment.baseMapProviders?.map((form) => (
-                <CoreModules.MenuItem key={form.value} value={form.value}>
-                  {form.label}
-                </CoreModules.MenuItem>
-              ))}
-            </CoreModules.Select>
-            {selectedTileSource === 'tms' && (
-              <CoreModules.FormControl>
+          {/* Tile Source Dropdown or TMS URL Input */}
+          <CoreModules.Grid item xs={12} sm={6} md={4}>
+            <CoreModules.FormControl fullWidth>
+              <CoreModules.InputLabel
+                id="tile-source"
+                sx={{
+                  '&.Mui-focused': {
+                    color: defaultTheme.palette.black,
+                  },
+                }}
+              >
+                Select Tile Source
+              </CoreModules.InputLabel>
+              <CoreModules.Select
+                labelId="tile-source"
+                id="tile_source"
+                value={selectedTileSource}
+                label="Select Tile Source"
+                fullWidth
+                sx={{
+                  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                    border: '2px solid black',
+                  },
+                }}
+                onChange={handleTileSourceChange}
+              >
+                {environment.baseMapProviders?.map((form) => (
+                  <CoreModules.MenuItem key={form.value} value={form.value}>
+                    {form.label}
+                  </CoreModules.MenuItem>
+                ))}
+              </CoreModules.Select>
+            </CoreModules.FormControl>
+            {error.includes('selectedTileSource') && (
+              <p className="fmtm-text-sm fmtm-text-red-500">Tile Source is Required.</p>
+            )}
+          </CoreModules.Grid>
+          {selectedTileSource === 'tms' && (
+            <CoreModules.Grid item xs={12} sm={12} md={4}>
+              <CoreModules.FormControl fullWidth>
                 <CoreModules.TextField
-                  labelId="tms_url-label"
+                  // labelId="tms_url-label"
                   id="tms_url"
+                  variant="outlined"
                   value={tmsUrl}
                   label="Enter Tile Source"
                   fullWidth
+                  color="black"
                   sx={{
-                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                      border: '2px solid black',
+                    '& .MuiOutlinedInput-root': {
+                      '&.Mui-focused fieldset': {
+                        borderColor: 'black',
+                      },
+                    },
+                    '&.Mui-focused .MuiFormLabel-root-MuiInputLabel-root': {
+                      color: 'black',
                     },
                   }}
                   onChange={handleTmsUrlChange}
                 />
               </CoreModules.FormControl>
-            )}
-          </CoreModules.FormControl>
-        </CoreModules.Grid>
-
-        {/* Generate Button */}
-        <CoreModules.Grid item xs={12} sm={6}>
-          <CoreModules.LoadingButton
-            variant="contained"
-            loading={generateProjectTilesLoading}
-            color="error"
-            fullWidth
-            onClick={() => {
-              // Check if 'tms' is selected and tmsUrl is not empty
-              if (selectedTileSource === 'tms' && !tmsUrl) {
-                // Handle error, TMS URL is required
-                console.log('TMS URL is required');
-                return;
-              }
+              {error.includes('tmsUrl') && <p className="fmtm-text-sm fmtm-text-red-500">Tile Source is Required.</p>}
+            </CoreModules.Grid>
+          )}
+          <CoreModules.Grid item xs={12} sm={12} md={selectedTileSource === 'tms' ? 12 : 4}>
+            <div className="fmtm-w-full fmtm-flex fmtm-items-center fmtm-justify-center sm:fmtm-justify-end fmtm-mr-4 fmtm-gap-4 fmtm-h-full">
+              {/* Generate Button */}
+              <div>
+                <CoreModules.LoadingButton
+                  variant="contained"
+                  loading={generateProjectTilesLoading}
+                  color="error"
+                  onClick={() => generateProjectTiles()}
+                >
+                  Generate
+                </CoreModules.LoadingButton>
+              </div>
 
-              dispatch(
-                GenerateProjectTiles(
-                  `${
-                    import.meta.env.VITE_API_URL
-                  }/projects/tiles/${decodedId}?source=${selectedTileSource}&format=${selectedOutputFormat}&tms=${tmsUrl}`,
-                  decodedId,
-                ),
-              );
-            }}
-          >
-            Generate
-          </CoreModules.LoadingButton>
-        </CoreModules.Grid>
-
-        {/* Refresh Button */}
-        <CoreModules.Grid item xs={12} sm={6}>
-          <CoreModules.LoadingButton
-            variant="outlined"
-            loading={generateProjectTilesLoading}
-            color="error"
-            fullWidth
-            onClick={() => {
-              getTilesList();
-            }}
-          >
-            Refresh
-          </CoreModules.LoadingButton>
+              {/* Refresh Button */}
+              <div>
+                <CoreModules.LoadingButton
+                  variant="outlined"
+                  loading={generateProjectTilesLoading}
+                  color="error"
+                  onClick={() => {
+                    getTilesList();
+                  }}
+                >
+                  Refresh
+                </CoreModules.LoadingButton>
+              </div>
+            </div>
+          </CoreModules.Grid>
         </CoreModules.Grid>
 
         {/* Table Content */}
diff --git a/src/frontend/src/components/common/StepSwitcher.tsx b/src/frontend/src/components/common/StepSwitcher.tsx
index 3d9c9e9939..0eb5b22764 100644
--- a/src/frontend/src/components/common/StepSwitcher.tsx
+++ b/src/frontend/src/components/common/StepSwitcher.tsx
@@ -4,7 +4,7 @@ import { CommonActions } from '../../store/slices/CommonSlice';
 import CoreModules from '../../shared/CoreModules.js';
 import { useNavigate } from 'react-router-dom';
 
-const StepSwitcher = ({ data, flag }) => {
+const StepSwitcher = ({ data, flag, switchSteps }) => {
   interface IIndividualStep {
     url: string;
     step: number;
@@ -39,7 +39,11 @@ const StepSwitcher = ({ data, flag }) => {
                     } lg:fmtm-w-7 lg:fmtm-h-7 xl:fmtm-w-9 xl:fmtm-h-9 fmtm-rounded-full fmtm-flex fmtm-justify-center fmtm-items-center fmtm-border-[0.15rem] fmtm-border-primaryRed hover:fmtm-cursor-pointer  ${
                       currentStep.step >= index ? 'fmtm-bg-primaryRed' : 'fmtm-bg-transparent'
                     }`}
-                    onClick={() => toggleStep(step)}
+                    onClick={() => {
+                      if (switchSteps) {
+                        toggleStep(step);
+                      }
+                    }}
                   >
                     <AssetModules.DoneIcon
                       className={`${
diff --git a/src/frontend/src/components/createnewproject/DataExtract.tsx b/src/frontend/src/components/createnewproject/DataExtract.tsx
index 8d86b86bb1..2f064009d5 100644
--- a/src/frontend/src/components/createnewproject/DataExtract.tsx
+++ b/src/frontend/src/components/createnewproject/DataExtract.tsx
@@ -184,7 +184,7 @@ const DataExtract = ({ flag, customLineUpload, setCustomLineUpload, customPolygo
                 btnText="PREVIOUS"
                 btnType="secondary"
                 type="button"
-                onClick={() => toggleStep(2, '/upload-area')}
+                onClick={() => toggleStep(3, '/select-form')}
                 className="fmtm-font-bold"
               />
               <Button btnText="NEXT" btnType="primary" type="submit" className="fmtm-font-bold" />
diff --git a/src/frontend/src/components/createnewproject/SplitTasks.tsx b/src/frontend/src/components/createnewproject/SplitTasks.tsx
index 49b1806ae5..de3060112b 100644
--- a/src/frontend/src/components/createnewproject/SplitTasks.tsx
+++ b/src/frontend/src/components/createnewproject/SplitTasks.tsx
@@ -110,6 +110,7 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customLineUpload, custo
       ),
     );
     dispatch(CreateProjectActions.SetIndividualProjectDetailsData({ ...projectDetails, ...formValues }));
+    dispatch(CreateProjectActions.SetCanSwitchCreateProjectSteps(true));
   };
 
   useEffect(() => {
@@ -197,6 +198,7 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customLineUpload, custo
       dispatch(CreateProjectActions.SetGenerateProjectQRSuccess(null));
       navigate(`/project_details/${encodedProjectId}`);
       dispatch(CreateProjectActions.ClearCreateProjectFormData());
+      dispatch(CreateProjectActions.SetCanSwitchCreateProjectSteps(false));
     }
     if (generateQrSuccess && generateProjectLog?.status === 'PENDING') {
       if (generateProjectLogIntervalCb === null) {
diff --git a/src/frontend/src/store/slices/CreateProjectSlice.ts b/src/frontend/src/store/slices/CreateProjectSlice.ts
index e1e25bf88f..38ebf6767b 100755
--- a/src/frontend/src/store/slices/CreateProjectSlice.ts
+++ b/src/frontend/src/store/slices/CreateProjectSlice.ts
@@ -47,6 +47,7 @@ export const initialState: CreateProjectStateTypes = {
   lineGeojson: null,
   createProjectValidations: {},
   isUnsavedChanges: false,
+  canSwitchCreateProjectSteps: false,
 };
 
 const CreateProject = createSlice({
@@ -206,6 +207,9 @@ const CreateProject = createSlice({
     SetIsUnsavedChanges(state, action) {
       state.isUnsavedChanges = action.payload;
     },
+    SetCanSwitchCreateProjectSteps(state, action) {
+      state.canSwitchCreateProjectSteps = action.payload;
+    },
   },
 });
 
diff --git a/src/frontend/src/store/types/ICreateProject.ts b/src/frontend/src/store/types/ICreateProject.ts
index c485eabf36..bc7147c66c 100644
--- a/src/frontend/src/store/types/ICreateProject.ts
+++ b/src/frontend/src/store/types/ICreateProject.ts
@@ -33,6 +33,7 @@ export type CreateProjectStateTypes = {
   lineGeojson: null;
   createProjectValidations: {};
   isUnsavedChanges: boolean;
+  canSwitchCreateProjectSteps: boolean;
 };
 export type ValidateCustomFormResponse = {
   detail: { message: string; possible_reason: string };
diff --git a/src/frontend/src/views/CreateNewProject.tsx b/src/frontend/src/views/CreateNewProject.tsx
index b683f43390..5d60e2b080 100644
--- a/src/frontend/src/views/CreateNewProject.tsx
+++ b/src/frontend/src/views/CreateNewProject.tsx
@@ -17,6 +17,7 @@ const CreateNewProject = () => {
   const dispatch = useDispatch();
 
   const isUnsavedChanges = useAppSelector((state) => state.createproject.isUnsavedChanges);
+  const canSwitchCreateProjectSteps = useAppSelector((state) => state.createproject.canSwitchCreateProjectSteps);
   const [geojsonFile, setGeojsonFile] = useState(null);
   const [customLineUpload, setCustomLineUpload] = useState(null);
   const [customPolygonUpload, setCustomPolygonUpload] = useState(null);
@@ -92,7 +93,7 @@ const CreateNewProject = () => {
       <div className="fmtm-min-h-[72vh] fmtm-bg-gray-100 fmtm-box-border fmtm-border-[1px] fmtm-border-t-white fmtm-border-t-[0px]">
         <div className=" fmtm-w-full">
           <div>
-            <StepSwitcher data={createProjectSteps} flag={'create_project'} />
+            <StepSwitcher data={createProjectSteps} flag={'create_project'} switchSteps={canSwitchCreateProjectSteps} />
           </div>
         </div>
         <div className="fmtm-mx-5 fmtm-mb-5">{(() => getCreateProjectContent())()}</div>
diff --git a/src/frontend/src/views/NewDefineAreaMap.tsx b/src/frontend/src/views/NewDefineAreaMap.tsx
index adf00607c6..b448dfb1ed 100644
--- a/src/frontend/src/views/NewDefineAreaMap.tsx
+++ b/src/frontend/src/views/NewDefineAreaMap.tsx
@@ -48,7 +48,7 @@ const NewDefineAreaMap = ({
               size: map?.getSize(),
               padding: [50, 50, 50, 50],
               constrainResolution: true,
-              duration: 2000,
+              duration: 500,
             }}
             zoomToLayer
           />
@@ -60,7 +60,7 @@ const NewDefineAreaMap = ({
               size: map?.getSize(),
               padding: [50, 50, 50, 50],
               constrainResolution: true,
-              duration: 2000,
+              duration: 500,
             }}
             onDraw={onDraw}
             zoomToLayer
@@ -85,7 +85,7 @@ const NewDefineAreaMap = ({
               padding: [50, 50, 50, 50],
               // duration: 900,
               constrainResolution: true,
-              duration: 2000,
+              duration: 500,
             }}
             zoomToLayer
           />
@@ -108,7 +108,7 @@ const NewDefineAreaMap = ({
               padding: [50, 50, 50, 50],
               // duration: 900,
               constrainResolution: true,
-              duration: 2000,
+              duration: 500,
             }}
             zoomToLayer
           />