diff --git a/public/images/createProfile/Expansion.png b/public/images/createProfile/Expansion.png
new file mode 100644
index 0000000..db33d8c
Binary files /dev/null and b/public/images/createProfile/Expansion.png differ
diff --git a/public/images/createProfile/Facilitaion.png b/public/images/createProfile/Facilitaion.png
new file mode 100644
index 0000000..3b717ee
Binary files /dev/null and b/public/images/createProfile/Facilitaion.png differ
diff --git a/public/index.html b/public/index.html
index 8355e13..3e2bca0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,7 +14,7 @@
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
   
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
     <style>
       * {
         font-family: "Roboto", sans-serif;
diff --git a/restored-file.js b/restored-file.js
new file mode 100644
index 0000000..e40777c
Binary files /dev/null and b/restored-file.js differ
diff --git a/src/components/Home/HostKitchen/HostKitchen.js b/src/components/Home/HostKitchen/HostKitchen.js
index 11be5cf..592316d 100644
--- a/src/components/Home/HostKitchen/HostKitchen.js
+++ b/src/components/Home/HostKitchen/HostKitchen.js
@@ -1,32 +1,46 @@
 import React, { useState, useEffect } from 'react';
-import { Box, useTheme, useMediaQuery, Typography } from '@mui/material';
+import { Box, useTheme, useMediaQuery } from '@mui/material';
 import KitchPlusAppBar from '../AppBar';
 import Sidebar from '../SideHome';
+import PostSubmission from './contcet/PostSubmission';
+import CloudKitchenHosting from './contcet/CloudKitchenHosting';
+import Infrastructure from './contcet/Infrastructure';
+import RstaurantOperations from './contcet/RstaurantOperations';
+import Facilitation from './contcet/Facilitation';
+import Expansion from './contcet/Expansion';
+
+import SideProfile from './SideProfile';
 
 const drawerWidth = 230;
 
 const HostKitchen = () => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-  const [hasProducts, setHasProducts] = useState(false); // حالة لتتبع وجود المنتجات
+  const [hasProducts, setHasProducts] = useState(false);
   const [sidebarOpen, setSidebarOpen] = useState(!isMobile);
 
+  // ⬇️ إدارة الخطوة الحالية
+  const [currentStep, setCurrentStep] = useState(0);
+
+  const steps = [
+    <CloudKitchenHosting onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+    <RstaurantOperations onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+    <Infrastructure onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+    <Facilitation onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+    <Expansion onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+
+  ];
 
   useEffect(() => {
     const checkProducts = async () => {
-    
-      const productsExist = await checkIfProductsExist(); 
+      const productsExist = await checkIfProductsExist();
       setHasProducts(productsExist);
     };
-
     checkProducts();
   }, []);
 
-  // دالة مساعدة لمحاكاة التحقق من المنتجات (استبدلها بمنطقك الفعلي)
   const checkIfProductsExist = async () => {
-    // محاكاة - يمكن أن يكون هذا استدعاء لـ API أو تحقق من state
-    //  return true;
-    return false; // غير هذه القيمة حسب منطقك
+    return false;
   };
 
   useEffect(() => {
@@ -48,7 +62,6 @@ const HostKitchen = () => {
 
     handleResize();
     window.addEventListener('resize', handleResize);
-
     return () => window.removeEventListener('resize', handleResize);
   }, [theme.breakpoints.values.md]);
 
@@ -74,16 +87,8 @@ const HostKitchen = () => {
         flexGrow: 1,
         display: 'flex',
         flexDirection: 'column',
-        width: {
-          xs: '100%',
-          sm: '100%',
-          md: '100%'
-        },
-        marginLeft: {
-          xs: 0,
-          sm: sidebarOpen ? `${drawerWidth}px` : 0,
-          md: 0
-        },
+        width: { xs: '100%', sm: '100%', md: '100%' },
+        marginLeft: { xs: 0, sm: sidebarOpen ? `${drawerWidth}px` : 0, md: 0 },
         transition: theme.transitions.create(['width'], {
           easing: theme.transitions.easing.sharp,
           duration: theme.transitions.duration.leavingScreen,
@@ -94,10 +99,85 @@ const HostKitchen = () => {
           sidebarOpen={sidebarOpen}
           isMobile={isMobile}
         />
-        <Typography>HostKitchen</Typography>
+        {/* <Box sx={{
+          flexGrow: 1,
+          width: sidebarOpen ? 'calc(100% - 20px)' : '100%',
+          pt: { xs: 0.5, sm: 1 },
+          mt: { xs: 1, sm: 2 },
+          overflowY: 'auto',
+          pl: { xs: 0, sm: 2 },
+          pr: { xs: 1, sm: 2 },
+          pb: { xs: 1, sm: 2 },
+          scrollbarWidth: 'none',
+          '&::-webkit-scrollbar': { display: 'none' },
+          transition: theme.transitions.create(['margin'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+          }),
+        }}>
+          <PostSubmission />
+        </Box> */}
+        <Box>
+          <Box sx={{
+            display: 'flex', height: '100vh',
+            overflowY: 'auto',
+            scrollbarWidth: 'none',
+            '&::-webkit-scrollbar': {
+              display: 'none',
+            },
+          }}>
+            <Box sx={{
+              height: '100vh',
+              ml: 3,
+              mb: 2,
+              width: { xs: '30%', md: '30%' },
+              display: { xs: 'none', sm: 'block', md: 'block' },
+              // overflowY: 'auto',
+              // scrollbarWidth: 'none',
+              // '&::-webkit-scrollbar': {
+              //   display: 'none',
+              // },
+            }}>
+
+              <Box sx={{
+                minHeight: '100%', pb: 15, pt: 3,
+
+              }}>
+                <SideProfile
+                  currentStepIndex={currentStep}
+                  onBack={() => setCurrentStep(prev => Math.max(prev - 1, 0))}
+                />
+
+
+              </Box>
+            </Box>
+
+            <Box sx={{
+              ml: { xs: 1, md: 3 },
+              flexGrow: 1,
+              height: '100vh',
+              pr: { sm: 2, md: 1 },
+              pt: 3,
+              mb: { sm: 20 },
+              width: { xs: '50%', md: '60%' }, display: { xs: 'block', sm: 'block', md: 'block' },
+              // overflowY: 'auto',
+              // scrollbarWidth: 'none',
+              // '&::-webkit-scrollbar': {
+              //   display: 'none',
+              // },
+            }}>
+              <Box sx={{
+                minHeight: '100%', pb: 18,
+
+              }}>
+                {steps[currentStep]}
+              </Box>
+            </Box>
+          </Box>
+        </Box>
       </Box>
     </Box>
   );
 };
 
-export default HostKitchen;
\ No newline at end of file
+export default HostKitchen;
diff --git a/src/components/Home/HostKitchen/SideProfile.js b/src/components/Home/HostKitchen/SideProfile.js
new file mode 100644
index 0000000..a146e38
--- /dev/null
+++ b/src/components/Home/HostKitchen/SideProfile.js
@@ -0,0 +1,162 @@
+import React from 'react';
+import { Box, Typography, Stack, Button, useTheme } from '@mui/material';
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+
+const steps = [
+  { title: 'Cloud Kitchen Hosting', icon: '/images/createProfile/BasicInf.png' },
+  { title: 'Restaurant Operations', icon: '/images/icons/rocket.png' },
+  { title: 'Infrastructure & Equipment', icon: '/images/createProfile/equipment.png' },
+  { title: 'Facilitaion & Cooperation', icon: '/images/createProfile/Facilitaion.png' },
+  { title: 'Expansion & Future Cooperation', icon: '/images/createProfile/Expansion.png' },
+
+  { title: 'Submit & Confirmation', icon: '/images/createProfile/Confirmation.png' },
+];
+
+const SideProfile = ({ currentStepIndex = 0, onBack }) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      sx={{
+        height: '100%',
+        backgroundColor: '#FFFFFF',
+        px: 3,
+        py: 4,
+        display:  'block' ,
+        borderRadius: 2,
+        boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
+        position: 'relative',
+      }}
+    >
+      {/* العنوان الرئيسي */}
+      <Typography fontSize="18px" fontWeight={600} mb={1.2}>
+        Host Kitchen Flow
+      </Typography>
+      <Typography variant="body2" color="text.secondary" mb={3}>
+        Complete this process to register your restaurant on our amazing food platform.
+      </Typography>
+
+      {/* الخطوات */}
+      <Stack spacing={5} sx={{ ml: 1, position: 'relative', pb: 15 }}>
+        {steps.map((step, index) => (
+          <Box key={index} position="relative">
+            {/* الخط الرأسي بين الدوائر */}
+            {index !== steps.length - 1 && (
+              <Box
+                sx={{
+                  position: 'absolute',
+                  top: {sm:'50px',md:'40px'},
+                  left: '22px',
+                  width: '2px',
+                  height: {sm:'130%',md:'calc(100% - 0px)'},
+                  backgroundColor: '#E0E0E0',
+                  zIndex: 0,
+                }}
+              />
+            )}
+
+            {/* محتوى كل خطوة */}
+            <Box display="flex" alignItems="center" gap={2}>
+              {/* الدائرة بالأيقونة */}
+              <Box
+                sx={{
+                  position: 'relative',
+                  width: 45,
+                  height: 45,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  zIndex: 1,
+                }}
+              >
+                {/* الدائرة الخلفية - تظهر دائمًا */}
+                <Box
+                  sx={{
+                    position: 'absolute',
+                    backgroundImage:
+                      index <= currentStepIndex
+                        ? 'linear-gradient(0deg, #FF914D, #F3F3F3)'
+                        : 'linear-gradient(0deg, #DFDFDF, #F0F0F0)',
+                    width: 48,
+                    height: 48,
+                    borderRadius: '50%',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)',
+                    zIndex: 0,
+                  }}
+                />
+
+                {/* الدائرة الأمامية بالأيقونة */}
+                <Box
+                  sx={{
+                    width: 40,
+                    height: 40,
+                    borderRadius: '50%',
+                    backgroundColor: '#FFF',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    zIndex: 1,
+                  }}
+                >
+                  <img
+                    src={step.icon}
+                    alt={step.title}
+                    style={{
+                      width: 20,
+                      height: 20,
+                      marginLeft: step.title === 'Infrastructure & Equipment' ? 7 : 0,
+                      objectFit: 'contain',
+                    }}
+                  />
+                </Box>
+              </Box>
+
+              {/* العنوان */}
+              <Typography
+                sx={{
+                  fontSize: '16px',
+                  fontWeight: 600,
+                  color: '#000',
+                }}
+              >
+                {step.title}
+              </Typography>
+            </Box>
+          </Box>
+        ))}
+      </Stack>
+
+      {/* زر الرجوع */}
+      <Box
+        sx={{
+          position: 'absolute',
+          bottom: 16,
+          right: 24,
+          mt:10
+        }}
+      >
+        <Button
+          variant="text"
+          startIcon={<ArrowBackIosIcon sx={{ fontSize: 20 }} />}
+          onClick={onBack}
+          disabled={currentStepIndex === 0}
+          sx={{
+            textTransform: 'none',
+            fontSize: '20px',
+            color: currentStepIndex === 0 ? '#C2C2C2' : '#6B7283',
+            '&:hover': {
+              backgroundColor: 'transparent',
+              color: theme.palette.primary.main,
+            },
+          }}
+        >
+          Back
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default SideProfile;
diff --git a/src/components/Home/HostKitchen/contcet/CloudKitchenHosting.js b/src/components/Home/HostKitchen/contcet/CloudKitchenHosting.js
new file mode 100644
index 0000000..19030da
--- /dev/null
+++ b/src/components/Home/HostKitchen/contcet/CloudKitchenHosting.js
@@ -0,0 +1,135 @@
+import React from 'react';
+import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material';
+
+const CloudKitchenHosting = ({ currentStepIndex = 0, onNext, onBack }) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      sx={{
+        height: { xs: '90%', sm: '100%', md: '92.5%' },
+        backgroundColor: '#FFFFFF',
+        px: 4,
+        pt: 5,
+        pb: 10,
+        display: 'block',
+        borderRadius: 2,
+        boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
+        position: 'relative',
+        width: { xs: '85%', sm: '90%' },
+      }}
+    >
+      <Stack spacing={2.5}>
+        <Typography
+          fontWeight={700}
+          sx={{
+            fontSize: {
+              xs: '1.8rem',
+              sm: '2rem',
+              md: '2.2rem'
+            }
+          }}
+        >
+          Cloud Kitchen Hosting
+        </Typography>
+        <Box sx={{ width: '80%' }}>
+          <Typography
+            fontSize="16px"
+            color="text.secondary"
+            fontWeight={500}
+            sx={{ pb: 1 }}
+          >
+            Enter your basic information to proceed to registration of your own restaurant on this platform
+          </Typography>
+        </Box>
+
+        {/* Inputs (Restaurant Name, Type, Address, City, Postal Code) */}
+        {[
+          { label: 'Restaurant Name', placeholder: 'Al-Baik Foods' },
+          { label: 'Restaurant Location', placeholder: 'Street 123, Jordan' },
+          { label: 'Availabel Space', placeholder: '300 sq. feet' },
+          { label: 'Number of Employees', placeholder: '200' },
+        ].map((field, index) => (
+          <Box key={index} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+            <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
+              {field.label}
+            </Typography>
+            <TextField
+              placeholder={field.placeholder}
+              variant="outlined"
+              fullWidth
+              sx={{
+                '& input': { fontWeight: 500, fontSize: '15px' },
+                '& input::placeholder': { color: '#969BA7' },
+                '& .MuiOutlinedInput-root': {
+                  borderRadius: '10px',
+                  transition: '0.3s',
+                  '&.Mui-focused fieldset': {
+                    borderColor: theme.palette.primary.main,
+                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
+                  }
+                },
+                '& .MuiOutlinedInput-root.Mui-focused': {
+                  borderColor: '#3f51b5',
+                  boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
+                }
+              }}
+            />
+          </Box>
+        ))}
+
+
+        <Box sx={{ pt: 2 }}>
+          <Button
+            variant="contained"
+            fullWidth
+            onClick={onNext}
+            sx={{
+              fontFamily: 'PlusJakartaSans',
+              fontWeight: 600,
+              fontSize: { xs: '14px', sm: '16px' },
+              height: { xs: '45px', sm: '52px' },
+              borderRadius: '50px',
+              textTransform: 'none',
+              color: 'white',
+              backgroundColor: theme.palette.primary.main,
+              '&:hover': {
+                backgroundColor: theme.palette.primary.hover,
+              },
+            }}
+          >
+            Next
+          </Button>
+
+          {/* زر Back تحت زر Next */}
+          <Button
+            variant="outlined"
+            fullWidth
+            onClick={onBack}
+            sx={{
+              mt: 2,
+              fontFamily: 'PlusJakartaSans',
+              fontWeight: 600,
+              fontSize: { xs: '14px', sm: '16px' },
+              height: { xs: '45px', sm: '52px' },
+              borderRadius: '50px',
+              textTransform: 'none',
+              display: { xs: 'block', sm: 'none', md: 'none' }, // يظهر فقط في xs و sm
+              borderColor: theme.palette.primary.main,
+              color: theme.palette.primary.main,
+              '&:hover': {
+                backgroundColor: theme.palette.primary.light,
+                borderColor: theme.palette.primary.main,
+              },
+            }}
+          >
+            Back
+          </Button>
+        </Box>
+
+      </Stack>
+    </Box>
+  );
+};
+
+export default CloudKitchenHosting;
diff --git a/src/components/Home/HostKitchen/contcet/ConfirmationDialog.js b/src/components/Home/HostKitchen/contcet/ConfirmationDialog.js
new file mode 100644
index 0000000..6cf94a1
--- /dev/null
+++ b/src/components/Home/HostKitchen/contcet/ConfirmationDialog.js
@@ -0,0 +1,158 @@
+import React from 'react';
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogContentText,
+    DialogActions,
+    Button,
+    Box,
+    Typography,
+    useTheme,
+    Divider
+} from '@mui/material';
+import EditIcon from '@mui/icons-material/Edit';
+const ConfirmationDialog = ({ open, onClose, onConfirm }) => {
+    const theme = useTheme();
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            maxWidth="sm"
+
+            fullWidth
+            PaperProps={{
+                sx: {
+                    width: '525px',
+                    height: '300px',
+                    maxWidth: '100%',
+                    maxHeight: '100%',
+                    borderRadius: '12px',
+                    overflow: 'hidden'
+                }
+            }}
+        >
+            <Box sx={{
+
+                p: 3,
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-between',
+            }}>
+                <Box
+                    sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: 2,
+                        mb: 3,
+                        ml: -5,
+                    }}
+                >
+                    {/* الدوائر */}
+                    <Box sx={{
+                        position: 'relative',
+                        width: 100,
+                        height: 100,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}>
+                        {/* الدائرة الخلفية */}
+                        <Box sx={{
+                            position: 'absolute',
+                            backgroundColor: '#F5F8FF',
+                            width: '100%',
+                            height: '100%',
+                            borderRadius: '50%',
+                            zIndex: 0,
+                        }} />
+
+                        {/* الدائرة الأمامية مع الأيقونة */}
+                        <Box sx={{
+                            width: 80,
+                            height: 80,
+                            borderRadius: '50%',
+                            backgroundColor: '#E9EFFF',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            zIndex: 1,
+                        }}>
+                            <img
+                                src='/images/createProfile/Successful.png'
+                                style={{
+                                    width: 40,
+                                    height: 40,
+                                    objectFit: 'contain',
+                                }}
+                                alt="Success icon"
+                            />
+                        </Box>
+                    </Box>
+
+                    {/* العنوان بجانب الدائرة */}
+                    <DialogTitle sx={{ p: 0 }}>
+                        <Typography
+                            variant="h4"
+                            component="div"
+                            sx={{
+                                fontWeight: 600,
+                                fontSize: '28px',
+                                lineHeight: '1.2'
+                            }}
+                        >
+                            Register successful!
+                        </Typography>
+                    </DialogTitle>
+                </Box>
+                <DialogContent sx={{ p: 0 }}>
+                    <DialogContentText sx={{
+                        textAlign: 'center',
+                        mb: 0,
+                        fontSize: '16px',
+                        fontWeight: 500,
+                        color: theme.palette.text.secondary
+                    }}>
+                        Congratulations! you have registered your restaurant successfully on our platform
+                    </DialogContentText>
+                </DialogContent>
+
+                <DialogActions
+                    sx={{
+                        p: 0,
+                        px: 3,
+                        pt: 2,
+                        flexDirection: 'column',
+                        gap: 2,
+                    }}
+                >
+                    {/* الزر الأول - Filled */}
+                    <Button
+                        variant="contained"
+                        fullWidth
+                        onClick={onClose}
+                        sx={{
+                            fontWeight: 600,
+                            fontSize: '16px',
+                            height: '48px',
+                            borderRadius: '50px',
+                            textTransform: 'none',
+                            color: 'white',
+                            backgroundColor: theme.palette.primary.main,
+                            '&:hover': {
+                                backgroundColor: theme.palette.primary.dark,
+                            },
+                        }}
+                    >
+                        Done
+                    </Button>
+
+                </DialogActions>
+            </Box>
+        </Dialog>
+    );
+};
+
+export default ConfirmationDialog;
\ No newline at end of file
diff --git a/src/components/Home/HostKitchen/contcet/Expansion.js b/src/components/Home/HostKitchen/contcet/Expansion.js
new file mode 100644
index 0000000..af7596f
--- /dev/null
+++ b/src/components/Home/HostKitchen/contcet/Expansion.js
@@ -0,0 +1,233 @@
+import React, { useState } from 'react';
+import {
+    Box, Typography, Stack, Button, useTheme, TextField, Radio,
+    RadioGroup,
+    FormControlLabel,
+} from '@mui/material';
+import ConfirmationDialog from './ConfirmationDialog'; // ✅ استدعاء المودال المنفصل
+
+const Expansion = ({ currentStepIndex = 0, onNext, onBack }) => {
+    const theme = useTheme();
+    const [openModal, setOpenModal] = useState(false);
+
+    const handleOpenModal = () => setOpenModal(true);
+    const handleCloseModal = () => setOpenModal(false);
+    const handleConfirmNext = () => {
+        handleCloseModal();
+        onNext();
+    };
+    return (
+        <Box
+            sx={{
+                height: { xs: '90%', sm: '100%', md: '92.5%' },
+                backgroundColor: '#FFFFFF',
+                px: 4,
+                pt: 5,
+                pb: 23.2,
+                display: 'block',
+                borderRadius: 2,
+                boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
+                position: 'relative',
+                width: { xs: '85%', sm: '90%' },
+            }}
+        >
+            <Stack spacing={2.5}>
+                <Typography
+                    fontWeight={700}
+                    sx={{
+                        fontSize: {
+                            xs: '1.8rem',
+                            sm: '2rem',
+                            md: '2.2rem'
+                        }
+                    }}
+                >
+                    Expansion & Future Cooperation
+                </Typography>
+                <Box sx={{ width: '80%' }}>
+                    <Typography
+                        fontSize="16px"
+                        color="text.secondary"
+                        fontWeight={500}
+                        sx={{ pb: 1 }}
+                    >
+                        Enter your basic information to proceed to registration of your own restaurant on this platform
+                    </Typography>
+                </Box>
+                <Box>
+                    <Typography
+                        variant="body2"
+                        sx={{ fontWeight: 500, fontSize: '16px', mb: 1.5, color: '#191635' }}
+                    >
+                      Hosting Multiple Cloud Kitchens
+                    </Typography>
+                    <RadioGroup row name="additionalFacilities">
+                        <FormControlLabel
+                            value="yes"
+                            control={
+                                <Radio
+                                    sx={{
+                                        color: 'rgba(150, 155, 167, 0.6)', // شفافية اللون
+                                        transform: 'scale(0.85)',          // تقليل حجم الزر لتقليل "سُمك الحواف"
+                                        '&.Mui-checked': {
+                                            color: theme.palette.primary.main
+                                        }
+                                    }}
+                                />
+                            }
+                            label="Yes"
+                        />
+                        <FormControlLabel
+                            value="no"
+                            control={
+                                <Radio
+                                    sx={{
+                                        color: 'rgba(150, 155, 167, 0.6)',
+                                        transform: 'scale(0.85)',
+                                        '&.Mui-checked': {
+                                            color: theme.palette.primary.main
+                                        }
+                                    }}
+                                />
+                            }
+                            label="No"
+                        />
+                    </RadioGroup>
+                </Box>
+
+
+                {/* Inputs (Restaurant Name, Type, Address, City, Postal Code) */}
+                {[
+                    { label: 'Future Kitchen Plans', placeholder: '20' },
+                ].map((field, index) => (
+                    <Box key={index} sx={{ display: 'flex', flexDirection: 'column', gap: 1, mt: 3 }}>
+                        <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
+                            {field.label}
+                        </Typography>
+                        <TextField
+                            placeholder={field.placeholder}
+                            variant="outlined"
+                            fullWidth
+                            sx={{
+                                '& input': { fontWeight: 500, fontSize: '15px' },
+                                '& input::placeholder': { color: '#969BA7' },
+                                '& .MuiOutlinedInput-root': {
+                                    borderRadius: '10px',
+                                    transition: '0.3s',
+                                    '&.Mui-focused fieldset': {
+                                        borderColor: theme.palette.primary.main,
+                                        boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
+                                    }
+                                },
+                                '& .MuiOutlinedInput-root.Mui-focused': {
+                                    borderColor: '#3f51b5',
+                                    boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
+                                }
+                            }}
+                        />
+                    </Box>
+                ))}
+
+                <Box sx={{ mt: 2 }}>
+                    <Typography
+                        variant="body2"
+                        sx={{ fontWeight: 500, fontSize: '16px', mb: 1.5, mt: 2, color: '#191635' }}
+                    >
+                       Partnership & Support
+                    </Typography>
+                    <RadioGroup row name="additionalFacilities">
+                        <FormControlLabel
+                            value="yes"
+                            control={
+                                <Radio
+                                    sx={{
+                                        color: 'rgba(150, 155, 167, 0.6)', // شفافية اللون
+                                        transform: 'scale(0.85)',          // تقليل حجم الزر لتقليل "سُمك الحواف"
+                                        '&.Mui-checked': {
+                                            color: theme.palette.primary.main
+                                        }
+                                    }}
+                                />
+                            }
+                            label="Yes"
+                        />
+                        <FormControlLabel
+                            value="no"
+                            control={
+                                <Radio
+                                    sx={{
+                                        color: 'rgba(150, 155, 167, 0.6)',
+                                        transform: 'scale(0.85)',
+                                        '&.Mui-checked': {
+                                            color: theme.palette.primary.main
+                                        }
+                                    }}
+                                />
+                            }
+                            label="No"
+                        />
+                    </RadioGroup>
+                </Box>
+
+                <Box sx={{ pt: 2 }}>
+                    <Button
+                        variant="contained"
+                        fullWidth
+                        onClick={handleOpenModal}
+                        sx={{
+                            fontFamily: 'PlusJakartaSans',
+                            fontWeight: 600,
+                            fontSize: { xs: '14px', sm: '16px' },
+                            height: { xs: '45px', sm: '52px' },
+                            borderRadius: '50px',
+                            textTransform: 'none',
+                            color: 'white',
+                            backgroundColor: theme.palette.primary.main,
+                            '&:hover': {
+                                backgroundColor: theme.palette.primary.hover,
+                            },
+                        }}
+                    >
+                        Next
+                    </Button>
+
+                    {/* زر Back تحت زر Next */}
+                    <Button
+                        variant="outlined"
+                        fullWidth
+                        onClick={onBack}
+                        sx={{
+                            mt: 2,
+                            fontFamily: 'PlusJakartaSans',
+                            fontWeight: 600,
+                            fontSize: { xs: '14px', sm: '16px' },
+                            height: { xs: '45px', sm: '52px' },
+                            borderRadius: '50px',
+                            textTransform: 'none',
+                            display: { xs: 'block', sm: 'none', md: 'none' }, // يظهر فقط في xs و sm
+                            borderColor: theme.palette.primary.main,
+                            color: theme.palette.primary.main,
+                            '&:hover': {
+                                backgroundColor: theme.palette.primary.light,
+                                borderColor: theme.palette.primary.main,
+                            },
+                        }}
+                    >
+                        Back
+                    </Button>
+                </Box>
+            </Stack>
+
+            {/* ✅ Confirmation Modal */}
+            <ConfirmationDialog
+                open={openModal}
+                onClose={handleCloseModal}
+                onConfirm={handleConfirmNext}
+                title="Confirm Submission"
+                description="Are you sure you want to proceed to the next step?"
+            />
+        </Box>
+    );
+};
+
+export default Expansion;
diff --git a/src/components/Home/HostKitchen/contcet/Facilitation.js b/src/components/Home/HostKitchen/contcet/Facilitation.js
new file mode 100644
index 0000000..2d0360a
--- /dev/null
+++ b/src/components/Home/HostKitchen/contcet/Facilitation.js
@@ -0,0 +1,260 @@
+import React from 'react';
+import {
+    Box, Typography, Stack, Button, useTheme, TextField, Radio,
+    RadioGroup,
+    FormControlLabel,
+} from '@mui/material';
+
+const Facilitation = ({ currentStepIndex = 0, onNext, onBack }) => {
+    const theme = useTheme();
+
+    return (
+        <Box
+            sx={{
+                height: { xs: '90%', sm: '100%', md: '92.5%' },
+                backgroundColor: '#FFFFFF',
+                px: 4,
+                pt: 5,
+                pb: 5.8,
+                display: 'block',
+                borderRadius: 2,
+                boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
+                position: 'relative',
+                width: { xs: '85%', sm: '90%' },
+            }}
+        >
+            <Stack spacing={2.5}>
+                <Typography
+                    fontWeight={700}
+                    sx={{
+                        fontSize: {
+                            xs: '1.8rem',
+                            sm: '2rem',
+                            md: '2.2rem'
+                        }
+                    }}
+                >
+                    Facilitation & Cooperation
+                </Typography>
+                <Box sx={{ width: '80%' }}>
+                    <Typography
+                        fontSize="16px"
+                        color="text.secondary"
+                        fontWeight={500}
+                        sx={{ pb: 1 }}
+                    >
+                        Enter your basic information to proceed to registration of your own restaurant on this platform
+                    </Typography>
+                </Box>
+
+
+                <Box>
+                    <Typography
+                        variant="body2"
+                        sx={{ fontWeight: 500, fontSize: '16px', mb: 1, color: '#191635' }}
+                    >
+                        Additional Services Provided
+                    </Typography>
+                    <RadioGroup row name="additionalFacilities">
+                        <FormControlLabel
+                            value="yes"
+                            control={
+                                <Radio
+                                    sx={{
+                                        color: 'rgba(150, 155, 167, 0.6)', // شفافية اللون
+                                        transform: 'scale(0.85)',          // تقليل حجم الزر لتقليل "سُمك الحواف"
+                                        '&.Mui-checked': {
+                                            color: theme.palette.primary.main
+                                        }
+                                    }}
+                                />
+                            }
+                            label="Yes"
+                        />
+                        <FormControlLabel
+                            value="no"
+                            control={
+                                <Radio
+                                    sx={{
+                                        color: 'rgba(150, 155, 167, 0.6)',
+                                        transform: 'scale(0.85)',
+                                        '&.Mui-checked': {
+                                            color: theme.palette.primary.main
+                                        }
+                                    }}
+                                />
+                            }
+                            label="No"
+                        />
+                    </RadioGroup>
+
+                </Box>
+
+                {/* Additional Services Input */}
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                    <Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
+                        Additional Services
+                    </Typography>
+                    <TextField
+                        placeholder={`1. Marketing\n2. Logistics\n3. Staff Training`}
+                        variant="outlined"
+                        fullWidth
+                        multiline
+                        minRows={4}
+                        sx={{
+                            '& .MuiInputBase-root': {
+                                fontWeight: 500,
+                                fontSize: '15px',
+                                alignItems: 'start',
+                            },
+                            '& textarea::placeholder': {
+                                color: '#969BA7',
+                                whiteSpace: 'pre-line', // لعرض الأسطر بشكل صحيح
+                            },
+                            '& .MuiOutlinedInput-root': {
+                                borderRadius: '10px',
+                                transition: '0.3s',
+                                '&.Mui-focused fieldset': {
+                                    borderColor: theme.palette.primary.main,
+                                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)',
+                                },
+                            },
+                            '& .MuiOutlinedInput-root.Mui-focused': {
+                                borderColor: '#3f51b5',
+                                boxShadow: '0 0 0 2px rgba(63,81,181,0.1)',
+                            }
+                        }}
+                    />
+
+
+                </Box>
+
+                <Box sx={{}}>
+                    <Typography
+                        variant="body2"
+                        sx={{ fontWeight: 500, fontSize: '16px', mb: 1, color: '#191635' }}
+                    >
+                        Ventilation and Cooling System
+                    </Typography>
+                    <RadioGroup row name="additionalFacilities">
+                        <FormControlLabel
+                            value="yes"
+                            control={
+                                <Radio
+                                    sx={{
+                                        color: 'rgba(150, 155, 167, 0.6)', // شفافية اللون
+                                        transform: 'scale(0.85)',          // تقليل حجم الزر لتقليل "سُمك الحواف"
+                                        '&.Mui-checked': {
+                                            color: theme.palette.primary.main
+                                        }
+                                    }}
+                                />
+                            }
+                            label="Yes"
+                        />
+                        <FormControlLabel
+                            value="no"
+                            control={
+                                <Radio
+                                    sx={{
+                                        color: 'rgba(150, 155, 167, 0.6)',
+                                        transform: 'scale(0.85)',
+                                        '&.Mui-checked': {
+                                            color: theme.palette.primary.main
+                                        }
+                                    }}
+                                />
+                            }
+                            label="No"
+                        />
+                    </RadioGroup>
+
+                </Box>
+
+                {/* Inputs (Restaurant Name, Type, Address, City, Postal Code) */}
+                {[
+                    { label: 'Working Hours', placeholder: '8 hours' },
+                ].map((field, index) => (
+                    <Box key={index} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                        <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
+                            {field.label}
+                        </Typography>
+                        <TextField
+                            placeholder={field.placeholder}
+                            variant="outlined"
+                            fullWidth
+                            sx={{
+                                '& input': { fontWeight: 500, fontSize: '15px' },
+                                '& input::placeholder': { color: '#969BA7' },
+                                '& .MuiOutlinedInput-root': {
+                                    borderRadius: '10px',
+                                    transition: '0.3s',
+                                    '&.Mui-focused fieldset': {
+                                        borderColor: theme.palette.primary.main,
+                                        boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
+                                    }
+                                },
+                                '& .MuiOutlinedInput-root.Mui-focused': {
+                                    borderColor: '#3f51b5',
+                                    boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
+                                }
+                            }}
+                        />
+                    </Box>
+                ))}
+
+
+                <Box sx={{ pt: 1 }}>
+                    <Button
+                        variant="contained"
+                        fullWidth
+                        onClick={onNext}
+                        sx={{
+                            fontFamily: 'PlusJakartaSans',
+                            fontWeight: 600,
+                            fontSize: { xs: '14px', sm: '16px' },
+                            height: { xs: '45px', sm: '52px' },
+                            borderRadius: '50px',
+                            textTransform: 'none',
+                            color: 'white',
+                            backgroundColor: theme.palette.primary.main,
+                            '&:hover': {
+                                backgroundColor: theme.palette.primary.hover,
+                            },
+                        }}
+                    >
+                        Next
+                    </Button>
+
+                    {/* زر Back تحت زر Next */}
+                    <Button
+                        variant="outlined"
+                        fullWidth
+                        onClick={onBack}
+                        sx={{
+                            mt: 2,
+                            fontFamily: 'PlusJakartaSans',
+                            fontWeight: 600,
+                            fontSize: { xs: '14px', sm: '16px' },
+                            height: { xs: '45px', sm: '52px' },
+                            borderRadius: '50px',
+                            textTransform: 'none',
+                            display: { xs: 'block', sm: 'none', md: 'none' }, // يظهر فقط في xs و sm
+                            borderColor: theme.palette.primary.main,
+                            color: theme.palette.primary.main,
+                            '&:hover': {
+                                backgroundColor: theme.palette.primary.light,
+                                borderColor: theme.palette.primary.main,
+                            },
+                        }}
+                    >
+                        Back
+                    </Button>
+                </Box>
+
+            </Stack>
+        </Box>
+    );
+};
+
+export default Facilitation;
diff --git a/src/components/Home/HostKitchen/contcet/Infrastructure.js b/src/components/Home/HostKitchen/contcet/Infrastructure.js
new file mode 100644
index 0000000..a5010aa
--- /dev/null
+++ b/src/components/Home/HostKitchen/contcet/Infrastructure.js
@@ -0,0 +1,214 @@
+import React from 'react';
+import {
+    Box, Typography, Stack, Button, useTheme, TextField, Radio,
+    RadioGroup,
+    FormControlLabel,
+} from '@mui/material';
+
+const Infrastructure = ({ currentStepIndex = 0, onNext, onBack }) => {
+    const theme = useTheme();
+
+    return (
+        <Box
+            sx={{
+                height: { xs: '90%', sm: '100%', md: '92.5%' },
+                backgroundColor: '#FFFFFF',
+                px: 4,
+                pt: 5,
+                pb: 11,
+                display: 'block',
+                borderRadius: 2,
+                boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
+                position: 'relative',
+                width: { xs: '85%', sm: '90%' },
+            }}
+        >
+            <Stack spacing={2.5}>
+                <Typography
+                    fontWeight={700}
+                    sx={{
+                        fontSize: {
+                            xs: '1.8rem',
+                            sm: '2rem',
+                            md: '2.2rem'
+                        }
+                    }}
+                >
+                    Infrastructure & Equipments
+                </Typography>
+                <Box sx={{ width: '80%' }}>
+                    <Typography
+                        fontSize="16px"
+                        color="text.secondary"
+                        fontWeight={500}
+                        sx={{ pb: 1 }}
+                    >
+                        Enter your basic information to proceed to registration of your own restaurant on this platform
+                    </Typography>
+                </Box>
+
+                {/* Inputs (Restaurant Name, Type, Address, City, Postal Code) */}
+                {[
+                    { label: 'Current Equipment', placeholder: 'oven, refrgerators' },
+                ].map((field, index) => (
+                    <Box key={index} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                        <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
+                            {field.label}
+                        </Typography>
+                        <TextField
+                            placeholder={field.placeholder}
+                            variant="outlined"
+                            fullWidth
+                            sx={{
+                                '& input': { fontWeight: 500, fontSize: '15px' },
+                                '& input::placeholder': { color: '#969BA7' },
+                                '& .MuiOutlinedInput-root': {
+                                    borderRadius: '10px',
+                                    transition: '0.3s',
+                                    '&.Mui-focused fieldset': {
+                                        borderColor: theme.palette.primary.main,
+                                        boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
+                                    }
+                                },
+                                '& .MuiOutlinedInput-root.Mui-focused': {
+                                    borderColor: '#3f51b5',
+                                    boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
+                                }
+                            }}
+                        />
+                    </Box>
+                ))}
+
+
+                <Box sx={{}}>
+                    <Typography
+                        variant="body2"
+                        sx={{ fontWeight: 500, fontSize: '16px', mb: 1, mt: 2, color: '#191635' }}
+                    >
+                        Additional Facilities Needed
+                    </Typography>
+                    <RadioGroup row name="additionalFacilities">
+                        <FormControlLabel
+                            value="yes"
+                            control={
+                                <Radio
+                                    sx={{
+                                        color: 'rgba(150, 155, 167, 0.6)', // شفافية اللون
+                                        transform: 'scale(0.85)',          // تقليل حجم الزر لتقليل "سُمك الحواف"
+                                        '&.Mui-checked': {
+                                            color: theme.palette.primary.main
+                                        }
+                                    }}
+                                />
+                            }
+                            label="Yes"
+                        />
+                        <FormControlLabel
+                            value="no"
+                            control={
+                                <Radio
+                                    sx={{
+                                        color: 'rgba(150, 155, 167, 0.6)',
+                                        transform: 'scale(0.85)',
+                                        '&.Mui-checked': {
+                                            color: theme.palette.primary.main
+                                        }
+                                    }}
+                                />
+                            }
+                            label="No"
+                        />
+                    </RadioGroup>
+
+                </Box>
+
+                {/* Description Input */}
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                    <Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
+                        Description
+                    </Typography>
+                    <TextField
+                        placeholder="We need Pizza Machine"
+                        variant="outlined"
+                        fullWidth
+                        multiline
+                        minRows={5}
+                        sx={{
+                            '& .MuiInputBase-root': {
+                                fontWeight: 500,
+                                fontSize: '15px',
+                                alignItems: 'start',
+                            },
+                            '& textarea::placeholder': {
+                                color: '#969BA7',
+                            },
+                            '& .MuiOutlinedInput-root': {
+                                borderRadius: '10px',
+                                transition: '0.3s',
+                                '&.Mui-focused fieldset': {
+                                    borderColor: theme.palette.primary.main,
+                                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)',
+                                },
+                            },
+                            '& .MuiOutlinedInput-root.Mui-focused': {
+                                borderColor: '#3f51b5',
+                                boxShadow: '0 0 0 2px rgba(63,81,181,0.1)',
+                            }
+                        }}
+                    />
+                </Box>
+
+                <Box sx={{ pt: 2.8 }}>
+                    <Button
+                        variant="contained"
+                        fullWidth
+                        onClick={onNext}
+                        sx={{
+                            fontFamily: 'PlusJakartaSans',
+                            fontWeight: 600,
+                            fontSize: { xs: '14px', sm: '16px' },
+                            height: { xs: '45px', sm: '52px' },
+                            borderRadius: '50px',
+                            textTransform: 'none',
+                            color: 'white',
+                            backgroundColor: theme.palette.primary.main,
+                            '&:hover': {
+                                backgroundColor: theme.palette.primary.hover,
+                            },
+                        }}
+                    >
+                        Next
+                    </Button>
+
+                    {/* زر Back تحت زر Next */}
+                    <Button
+                        variant="outlined"
+                        fullWidth
+                        onClick={onBack}
+                        sx={{
+                            mt: 2,
+                            fontFamily: 'PlusJakartaSans',
+                            fontWeight: 600,
+                            fontSize: { xs: '14px', sm: '16px' },
+                            height: { xs: '45px', sm: '52px' },
+                            borderRadius: '50px',
+                            textTransform: 'none',
+                            display: { xs: 'block', sm: 'none', md: 'none' }, // يظهر فقط في xs و sm
+                            borderColor: theme.palette.primary.main,
+                            color: theme.palette.primary.main,
+                            '&:hover': {
+                                backgroundColor: theme.palette.primary.light,
+                                borderColor: theme.palette.primary.main,
+                            },
+                        }}
+                    >
+                        Back
+                    </Button>
+                </Box>
+
+            </Stack>
+        </Box>
+    );
+};
+
+export default Infrastructure;
diff --git a/src/components/Home/HostKitchen/contcet/PostSubmission.js b/src/components/Home/HostKitchen/contcet/PostSubmission.js
new file mode 100644
index 0000000..7a4cc1b
--- /dev/null
+++ b/src/components/Home/HostKitchen/contcet/PostSubmission.js
@@ -0,0 +1,230 @@
+import React from 'react';
+import { Box, Button, Card, CardContent, Stack, Typography, useMediaQuery } from '@mui/material';
+import AirportShuttleIcon from '@mui/icons-material/AirportShuttle';
+import CampaignIcon from '@mui/icons-material/Campaign';
+import Inventory2Icon from '@mui/icons-material/Inventory2';
+import DeveloperBoardIcon from '@mui/icons-material/DeveloperBoard';
+import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
+import { useTheme } from '@mui/material/styles';
+import AddIcon from '@mui/icons-material/Add';
+
+
+const IconCircle = ({ children, bgColor = '#DEDEFA', outerColor = '#EFEFFD' }) => (
+    <Box
+        sx={{
+            position: 'relative',
+            width: { xs: 40, sm: 45, md: 50 },
+            height: { xs: 43, sm: 48, md: 53 },
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }}
+    >
+        <Box
+            sx={{
+                position: 'absolute',
+                width: { xs: 32, sm: 36, md: 40 },
+                height: { xs: 35, sm: 39, md: 43 },
+                borderRadius: '50%',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                backgroundColor: outerColor,
+                zIndex: 0,
+            }}
+        />
+        <Box
+            sx={{
+                width: { xs: 24, sm: 27, md: 30 },
+                height: { xs: 27, sm: 30, md: 33 },
+                backgroundColor: bgColor,
+                borderRadius: '50%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                zIndex: 1,
+            }}
+        >
+            {children}
+        </Box>
+    </Box>
+);
+
+const StatusCard = ({
+    icon,
+    statusText,
+    statusColor,
+    iconColor,
+    outerColor,
+    innerColor,
+    height = {
+        xs: 'calc(140px + 0.5vh)',
+        sm: 'calc(150px + 0.5vh)',
+        md: 'calc(162px + 0.5vh)'
+    },
+    width = {
+        xs: 'min(90%, 600px)', // تقليل من 90% إلى 85% والحد الأقصى من 300px إلى 280px
+        sm: 'clamp(220px, 23vw, 280px)', // تقليل جميع القيم
+        md: 'clamp(220px, 19vw, 300px)'
+    },
+    transition = 'width 0.3s ease',
+    iconSpacing = { xs: 6, sm: 8, md: 12 },
+    extraButton,
+    statusButtonWidth,
+    title = 'Point Of Sale',
+}) => {
+    const theme = useTheme();
+    const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+
+    return (
+        <Card sx={{
+            height,
+            width,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            p: 0,
+            pb: 2,
+            borderRadius: '8px',
+            boxShadow: 'none',
+            minWidth: { xs: 180, sm: 220 }
+        }}>
+            <CardContent>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: iconSpacing }}>
+                    <IconCircle bgColor={innerColor} outerColor={outerColor}>
+                        {React.cloneElement(icon, { sx: { color: iconColor, fontSize: { xs: 16, sm: 18, md: 20 } } })}
+                    </IconCircle>
+                    <Button
+                        variant="contained"
+                        sx={{
+                            backgroundColor: '#E7F4EE',
+                            color: statusColor,
+                            textTransform: 'none',
+                            boxShadow: 'none',
+                            borderRadius: '100px',
+                            width: statusButtonWidth || 'auto',
+                            fontSize: { xs: '0.7rem', sm: '0.8rem', md: '0.9rem' },
+                            px: { xs: 1, sm: 1.5 },
+                            py: 0.5
+                        }}
+                    >
+                        {statusText}
+                    </Button>
+                </Box>
+
+                <Typography
+                    variant="h6"
+                    gutterBottom
+                    mt={1.5}
+                    sx={{
+                        color: '#667085',
+                        fontSize: { xs: '14px', sm: '15px', md: '16px' },
+                        fontWeight: 500
+                    }}
+                >
+                    {title}
+                </Typography>
+
+                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 2 }}>
+                    {extraButton ? extraButton : <Box />}
+                    <Button
+                        variant="contained"
+                        sx={{
+                            backgroundColor: '#F7F7F7',
+                            width: { xs: '26px', sm: '28px', md: '30px' },
+                            height: { xs: '26px', sm: '28px', md: '30px' },
+                            minWidth: '0',
+                            padding: 0,
+                            borderRadius: '12px',
+                            boxShadow: 'none',
+                            '&:hover': {
+                                backgroundColor: '#e0e0e0',
+                            },
+                        }}
+                    >
+                        <ArrowOutwardIcon
+                            sx={{
+                                color: theme.palette.primary.main,
+                                width: { xs: '16px', sm: '18px', md: '20px' },
+                                height: { xs: '16px', sm: '18px', md: '20px' },
+                            }}
+                        />
+                    </Button>
+                </Box>
+            </CardContent>
+        </Card>
+    );
+};
+
+const PostSubmission = () => {
+    const theme = useTheme();
+    const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+    const isMediumScreen = useMediaQuery(theme.breakpoints.between('sm', 'md'));
+
+    return (
+        <>
+            {/* Header Section */}
+            <Box
+                sx={{
+
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: { xs: 'flex-start', sm: 'center', md: 'center' },
+                    mb: 3,
+                    pl: 1,
+                    pr: { xs: 1, sm: 3 },
+                    flexDirection: { xs: 'column', sm: 'row', md: 'row' },
+                    gap: { xs: 2, sm: 0 }
+                }}
+            >
+                {/* Title */}
+                <Typography
+                    variant="h6"
+                    sx={{
+                        fontWeight: '500',
+                        fontSize: { xs: '20px', sm: '22px', md: '24px' },
+                        color: '#121212'
+                    }}
+                >
+                    Post Submission
+                </Typography>
+
+                {/* Buttons */}
+                <Box sx={{
+                    display: 'flex',
+                    gap: { xs: 1, sm: 2 },
+                    flexWrap: { xs: 'wrap', sm: 'nowrap' },
+                    width: { xs: '100%', sm: 'auto' },
+                    justifyContent: { xs: 'space-between', sm: 'space-between', md: 'flex-end' }
+                }}>
+                    <Button
+                        variant="contained"
+                        sx={{
+                            textTransform: 'none',
+                            color: 'white',
+                            backgroundColor: theme.palette.primary.main,
+                            boxShadow: 'none',
+                            borderRadius: '8px',
+                            height: '40px',
+                            width: { xs: '48%', sm: '130px', md: '100px' },
+                            fontSize: { xs: '12px', sm: '13px', md: '14px' },
+                            fontWeight: 600,
+                            p: 0,
+                            m: 0,
+                            whiteSpace: 'nowrap',
+                            minWidth: 'unset'
+                        }}
+                    >
+                       
+                        {!isSmallScreen && 'Interested'}
+                    </Button>
+             
+                </Box>
+            </Box>
+
+
+        </>
+    );
+};
+
+export default PostSubmission;
diff --git a/src/components/Home/HostKitchen/contcet/RstaurantOperations.js b/src/components/Home/HostKitchen/contcet/RstaurantOperations.js
new file mode 100644
index 0000000..67dbb66
--- /dev/null
+++ b/src/components/Home/HostKitchen/contcet/RstaurantOperations.js
@@ -0,0 +1,135 @@
+import React from 'react';
+import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material';
+
+const CloudKitchenHosting = ({ currentStepIndex = 0, onNext, onBack }) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      sx={{
+        height: { xs: '90%', sm: '100%', md: '92.5%' },
+        backgroundColor: '#FFFFFF',
+        px: 4,
+        pt: 5,
+        pb: 10,
+        display: 'block',
+        borderRadius: 2,
+        boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
+        position: 'relative',
+        width: { xs: '85%', sm: '90%' },
+      }}
+    >
+      <Stack spacing={2.5}>
+        <Typography
+          fontWeight={700}
+          sx={{
+            fontSize: {
+              xs: '1.8rem',
+              sm: '2rem',
+              md: '2.2rem'
+            }
+          }}
+        >
+          Rstaurant Operations
+        </Typography>
+        <Box sx={{ width: '80%' }}>
+          <Typography
+            fontSize="16px"
+            color="text.secondary"
+            fontWeight={500}
+            sx={{ pb: 1 }}
+          >
+            Enter your basic information to proceed to registration of your own restaurant on this platform
+          </Typography>
+        </Box>
+
+        {/* Inputs (Restaurant Name, Type, Address, City, Postal Code) */}
+        {[
+          { label: 'Monthly Sales Value', placeholder: '$400' },
+          { label: 'Operating Size (Customers/Day)', placeholder: '20' },
+          { label: 'Peak Hours', placeholder:'Breakfast' },
+          { label: 'Preferred Cuisine to Host', placeholder: 'Fast Food' },
+        ].map((field, index) => (
+          <Box key={index} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+            <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
+              {field.label}
+            </Typography>
+            <TextField
+              placeholder={field.placeholder}
+              variant="outlined"
+              fullWidth
+              sx={{
+                '& input': { fontWeight: 500, fontSize: '15px' },
+                '& input::placeholder': { color: '#969BA7' },
+                '& .MuiOutlinedInput-root': {
+                  borderRadius: '10px',
+                  transition: '0.3s',
+                  '&.Mui-focused fieldset': {
+                    borderColor: theme.palette.primary.main,
+                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
+                  }
+                },
+                '& .MuiOutlinedInput-root.Mui-focused': {
+                  borderColor: '#3f51b5',
+                  boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
+                }
+              }}
+            />
+          </Box>
+        ))}
+
+
+        <Box sx={{ pt: 2 }}>
+          <Button
+            variant="contained"
+            fullWidth
+            onClick={onNext}
+            sx={{
+              fontFamily: 'PlusJakartaSans',
+              fontWeight: 600,
+              fontSize: { xs: '14px', sm: '16px' },
+              height: { xs: '45px', sm: '52px' },
+              borderRadius: '50px',
+              textTransform: 'none',
+              color: 'white',
+              backgroundColor: theme.palette.primary.main,
+              '&:hover': {
+                backgroundColor: theme.palette.primary.hover,
+              },
+            }}
+          >
+            Next
+          </Button>
+
+          {/* زر Back تحت زر Next */}
+          <Button
+            variant="outlined"
+            fullWidth
+            onClick={onBack}
+            sx={{
+              mt: 2,
+              fontFamily: 'PlusJakartaSans',
+              fontWeight: 600,
+              fontSize: { xs: '14px', sm: '16px' },
+              height: { xs: '45px', sm: '52px' },
+              borderRadius: '50px',
+              textTransform: 'none',
+              display: { xs: 'block', sm: 'block', md: 'none' }, // يظهر فقط في xs و sm
+              borderColor: theme.palette.primary.main,
+              color: theme.palette.primary.main,
+              '&:hover': {
+                backgroundColor: theme.palette.primary.light,
+                borderColor: theme.palette.primary.main,
+              },
+            }}
+          >
+            Back
+          </Button>
+        </Box>
+
+      </Stack>
+    </Box>
+  );
+};
+
+export default CloudKitchenHosting;
diff --git a/src/components/Home/RestaurantProfile/RestaurantProfile.js b/src/components/Home/RestaurantProfile/RestaurantProfile.js
index b5ba92f..be3da8d 100644
--- a/src/components/Home/RestaurantProfile/RestaurantProfile.js
+++ b/src/components/Home/RestaurantProfile/RestaurantProfile.js
@@ -106,24 +106,24 @@ const RestaurantProfile = () => {
         <Box>
           <Box sx={{
             display: 'flex', height: '100vh',
- 
+
           }}>
             <Box sx={{
               height: '100vh',
               ml: 3,
               mb: 2,
               width: { md: '30%' },
-                   display: { xs: 'none', sm: 'none', md: 'block' },
-                 overflowY: 'auto',
-                           scrollbarWidth: 'none',
-            '&::-webkit-scrollbar': {
-              display: 'none',
-            },
+              display: { xs: 'none', sm: 'none', md: 'block' },
+              overflowY: 'auto',
+              scrollbarWidth: 'none',
+              '&::-webkit-scrollbar': {
+                display: 'none',
+              },
             }}>
 
               <Box sx={{
                 minHeight: '100%', pb: 15, pt: 3,
-           
+
               }}>
                 <SideProfile
                   currentStepIndex={currentStep}
@@ -136,23 +136,23 @@ const RestaurantProfile = () => {
 
             <Box sx={{
               ml: { xs: 2, md: 3 },
-              
+
               flexGrow: 1,
               height: '100vh',
               pr: { sm: 2, md: 1 },
-          
+
               pt: 3,
               mb: { sm: 20 },
-              width: { md: '60%' },     display: { xs: 'block', sm: 'block', md: 'block' },
-                 overflowY: 'auto',
-                           scrollbarWidth: 'none',
-            '&::-webkit-scrollbar': {
-              display: 'none',
-            },
+              width: { md: '60%' }, display: { xs: 'block', sm: 'block', md: 'block' },
+              overflowY: 'auto',
+              scrollbarWidth: 'none',
+              '&::-webkit-scrollbar': {
+                display: 'none',
+              },
             }}>
               <Box sx={{
-                minHeight: '100%', pb: 18, 
-           
+                minHeight: '100%', pb: 18,
+
               }}>
                 {steps[currentStep]}
               </Box>
diff --git a/src/components/Home/RestaurantProfile/contcet/BasicInformation.js b/src/components/Home/RestaurantProfile/contcet/BasicInformation.js
index 19eb41c..9b03896 100644
--- a/src/components/Home/RestaurantProfile/contcet/BasicInformation.js
+++ b/src/components/Home/RestaurantProfile/contcet/BasicInformation.js
@@ -10,13 +10,14 @@ const BasicInformation = ({ currentStepIndex = 0, onNext, onBack }) => {
         height: { xs: '90%', sm: '100%', md: 740 },
         backgroundColor: '#FFFFFF',
         px: 4,
-        pt: 4.5,
+         pt: {xs:4,md: 4.5},
+        
         pb: 10,
         display: 'block',
         borderRadius: 2,
         boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
         position: 'relative',
-        width: { xs: '80%', sm: '90%' },
+        width: { xs: '85%', sm: '90%' },
       }}
     >
       <Stack spacing={2.5}>
diff --git a/src/components/Home/RestaurantProfile/contcet/BusinessHours.js b/src/components/Home/RestaurantProfile/contcet/BusinessHours.js
index 8341452..4cc47ac 100644
--- a/src/components/Home/RestaurantProfile/contcet/BusinessHours.js
+++ b/src/components/Home/RestaurantProfile/contcet/BusinessHours.js
@@ -32,13 +32,13 @@ const BusinessHours = ({ currentStepIndex = 0, onNext, onBack }) => {
                 height: { xs: '90%', sm: '100%', md: 740 },
                 backgroundColor: '#FFFFFF',
                 px: 4,
-                pt: 4.5,
+                 pt: {xs:4,md:4.5},
                 pb: 10,
                 display: 'block',
                 borderRadius: 2,
                 boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
                 position: 'relative',
-                width: { xs: '80%', sm: '90%' },
+                width: { xs: '85%', sm: '90%' },
             }}
         >
             <Stack spacing={2.5}>
diff --git a/src/components/Home/RestaurantProfile/contcet/ContactInformation.js b/src/components/Home/RestaurantProfile/contcet/ContactInformation.js
index c78229c..4f5d00c 100644
--- a/src/components/Home/RestaurantProfile/contcet/ContactInformation.js
+++ b/src/components/Home/RestaurantProfile/contcet/ContactInformation.js
@@ -16,13 +16,13 @@ const ContactInformation = ({ currentStepIndex = 0, onNext, onBack }) => {
         height: { xs: '90%', sm: '100%', md: 740 },
         backgroundColor: '#FFFFFF',
         px: 4,
-        pt: { xs: 6, md: 14.5 },
+        pt: { xs: 4, md: 14.5 },
         pb: { xs: 20, sm: 20, md: 0 },
         display: 'block',
         borderRadius: 2,
         boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
         position: 'relative',
-        width: { xs: '80%', sm: '90%' },
+        width: { xs: '85%', sm: '90%' },
       }}
     >
       <Stack spacing={2.5}>
diff --git a/src/components/Home/RestaurantProfile/contcet/Equipment.js b/src/components/Home/RestaurantProfile/contcet/Equipment.js
index 5aa3c55..a3fc4d3 100644
--- a/src/components/Home/RestaurantProfile/contcet/Equipment.js
+++ b/src/components/Home/RestaurantProfile/contcet/Equipment.js
@@ -18,12 +18,12 @@ const Equipment = ({ currentStepIndex = 0, onNext, onBack }) => {
                 height: { xs: '90%', sm: '100%', md: 740 },
                 backgroundColor: '#FFFFFF',
                 px: 4,
-                pt: { xs: 6, md: 12 },
+                pt: { xs: 4, md: 12 },
                 pb: { xs: 20, sm: 12, md: 3 },
                 display: 'block',
                 borderRadius: 2,
                 boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
-                width: { xs: '80%', sm: '90%' },
+                width: { xs: '85%', sm: '90%' },
                 position: 'relative',
             }}
         >
diff --git a/src/components/Home/RestaurantProfile/contcet/OperationalCapacity.js b/src/components/Home/RestaurantProfile/contcet/OperationalCapacity.js
index 8d10217..418b9ea 100644
--- a/src/components/Home/RestaurantProfile/contcet/OperationalCapacity.js
+++ b/src/components/Home/RestaurantProfile/contcet/OperationalCapacity.js
@@ -10,13 +10,13 @@ const OperationalCapacity = ({ currentStepIndex = 0, onNext, onBack }) => {
                 height: { xs: '90%', sm: '100%', md:740 },
                 backgroundColor: '#FFFFFF',
                 px: 4,
-                pt: 12,
+                pt: {xs:4,md:12},
                 pb: 4,
                 display: 'block',
                 borderRadius: 2,
                 boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
                 position: 'relative',
-                width: { xs: '80%', sm: '90%' },
+                width: { xs: '85%', sm: '90%' },
             }}
         >
             <Stack spacing={2.5}>
diff --git a/src/components/Home/RestaurantProfile/contcet/TypeOfRestaurant.js b/src/components/Home/RestaurantProfile/contcet/TypeOfRestaurant.js
index 3c01e7f..e271a57 100644
--- a/src/components/Home/RestaurantProfile/contcet/TypeOfRestaurant.js
+++ b/src/components/Home/RestaurantProfile/contcet/TypeOfRestaurant.js
@@ -18,13 +18,13 @@ const TypeOfRestaurant = ({ currentStepIndex = 0, onNext, onBack }) => {
                 height: { xs: '90%', sm: '100%', md: 700 },
                 backgroundColor: '#FFFFFF',
                 px: 4,
-                pt: { xs: 6, md: 19.5 },
+                pt: { xs: 4, md: 19.5 },
                 pb: { xs: 20, sm: 20, md: 0 },
                 display: 'block',
                 borderRadius: 2,
                 boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
                 position: 'relative',
-                width: { xs: '80%', sm: '90%' },
+                width: { xs: '85%', sm: '90%' },
             }}
         >
             <Stack spacing={2.5}>
diff --git a/src/components/Home/RestaurantProfile/contcet/UploadMenu.js b/src/components/Home/RestaurantProfile/contcet/UploadMenu.js
index 2d012c2..eb860f1 100644
--- a/src/components/Home/RestaurantProfile/contcet/UploadMenu.js
+++ b/src/components/Home/RestaurantProfile/contcet/UploadMenu.js
@@ -18,11 +18,11 @@ const UploadMenu = ({ currentStepIndex = 0, onNext, onBack }) => {
                 height: { xs: '90%', sm: '100%', md: 740 },
                 backgroundColor: '#FFFFFF',
                 px: 4,
-                pt: 4.5,
+                pt: {xs:4,md:4.5},
                 pb: 10,
                 borderRadius: 2,
                 boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
-                width: { xs: '80%', sm: '90%' },
+                width: { xs: '85%', sm: '90%' },
                 mx: 'auto'
             }}
         >
diff --git a/src/components/Home/RestaurantProfile/contcet/UploadPhotos.js b/src/components/Home/RestaurantProfile/contcet/UploadPhotos.js
index 449be11..ecff280 100644
--- a/src/components/Home/RestaurantProfile/contcet/UploadPhotos.js
+++ b/src/components/Home/RestaurantProfile/contcet/UploadPhotos.js
@@ -27,13 +27,13 @@ const UploadPhotos = ({ currentStepIndex = 0, onNext, onBack }) => {
                 height: { xs: '90%', sm: '100%', md: 740 },
                 backgroundColor: '#FFFFFF',
                 px: 4,
-                pt: 11,
+                pt: {xs:4,md:11},
                 pb: 10,
                 display: 'block',
                 borderRadius: 2,
                 boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
                 position: 'relative',
-                width: { xs: '80%', sm: '90%' },
+                width: { xs: '85%', sm: '90%' },
             }}
         >
             <Stack spacing={2.5}>