diff --git a/src/pages/newWarehouseDetails/index.js b/src/pages/newWarehouseDetails/index.js
new file mode 100644
index 0000000..0a11836
--- /dev/null
+++ b/src/pages/newWarehouseDetails/index.js
@@ -0,0 +1,102 @@
+import { Box, Grid, TextField } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+import DashboardNavbar from 'components/DashboardNavbar';
+import DashboardLayout from 'layouts/DashboardLayout';
+import ImageUpload from 'components/ImageUpload/Index';
+import MDButton from 'components/Button';
+
+const useStyles = makeStyles({
+  labelSize: {
+    fontSize: '16px',
+    letterSpacing: '0.01em',
+    color: '#000',
+    marginBottom: '4px'
+  }
+});
+
+function NewWarehouseDetails() {
+  const classes = useStyles();
+  return (
+    <>
+      <DashboardLayout>
+        <DashboardNavbar />
+        <Box mx={3} my={3}>
+          <Box sx={{ backgroundColor: '#fff', padding: '30px' }}>
+            <Box
+              component="div"
+              sx={{
+                fontSize: '22px',
+                letterSpacing: '0.01em',
+                color: '#000',
+                marginBottom: '30px'
+              }}
+            >
+              Form to Input
+            </Box>
+            <Grid container spacing={2}>
+              <Grid item xs={12} sm={6} md={6}>
+                <Box component="div" sx={{ marginBottom: '15px' }}>
+                  <Box component="div" className={classes.labelSize}>
+                    Warehouse name
+                  </Box>
+                  <TextField fullWidth variant="outlined" />
+                </Box>
+                <Box component="div" sx={{ marginBottom: '15px' }}>
+                  <Box component="div" className={classes.labelSize}>
+                    Address
+                  </Box>
+                  <TextField fullWidth variant="outlined" />
+                </Box>
+                <Box component="div" sx={{ marginBottom: '15px' }}>
+                  <Box component="div" className={classes.labelSize}>
+                    Types of inventories hosted
+                  </Box>
+                  <TextField fullWidth variant="outlined" />
+                </Box>
+                <Box component="div" sx={{ marginBottom: '15px' }}>
+                  <Box component="div" className={classes.labelSize}>
+                    Other attributes
+                  </Box>
+                  <TextField fullWidth variant="outlined" />
+                </Box>
+              </Grid>
+              <Grid item xs={12} sm={6} md={6}>
+                <Box sx={{ marginTop: '30px' }}>
+                  <ImageUpload />
+                </Box>
+              </Grid>
+            </Grid>
+            <Box
+              sx={{
+                marginTop: '60px',
+                display: 'flex',
+                justifyContent: 'center',
+                columnGap: '20px'
+              }}
+            >
+              <MDButton size="medium" color="error" variant="outlined">
+                CANCEL
+              </MDButton>
+              <MDButton size="medium" color="primary" variant="outlined">
+                SAVE
+              </MDButton>
+              <MDButton size="medium" color="primary" variant="contained">
+                NEXT
+              </MDButton>
+
+              {/* ---edit-- */}
+              <MDButton size="large" color="primary" variant="outlined">
+                EDIT DETAILS
+              </MDButton>
+              <MDButton size="large" color="primary" variant="contained">
+                SHOW DETAILS
+              </MDButton>
+            </Box>
+          </Box>
+        </Box>
+      </DashboardLayout>
+    </>
+  );
+}
+
+export default NewWarehouseDetails;
diff --git a/src/routes/index.js b/src/routes/index.js
index 4e2fd1a..3bcf11d 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -45,6 +45,7 @@ import LoginScreen from 'pages/authentication';
 // @mui icons
 import Icon from '@mui/material/Icon';
 import WarehouseScreen from 'pages/warehouse';
+import NewWarehouseDetails from 'pages/newWarehouseDetails';
 import SetupHome from 'pages/setup';
 import LabelingScreen from 'pages/labeling';
 
@@ -108,6 +109,12 @@ const protectedRoutes = [
         route: '/warehouse',
         component: <WarehouseScreen />
       },
+      {
+        name: 'New/Edit Warehouse Details',
+        key: 'warehouse-form',
+        route: '/warehouse-design-form',
+        component: <NewWarehouseDetails />
+      },
       {
         name: 'Labeling',
         key: 'labeling',