diff --git a/packages/react-material-ui/src/components/submodules/ConfirmationModal/index.tsx b/packages/react-material-ui/src/components/submodules/ConfirmationModal/index.tsx
new file mode 100644
index 00000000..817fd471
--- /dev/null
+++ b/packages/react-material-ui/src/components/submodules/ConfirmationModal/index.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { Box, Button, Dialog, DialogContent, Typography } from '@mui/material';
+import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+};
+
+const ConfirmationModal = ({ isOpen, onClose, onConfirm }: Props) => {
+  return (
+    <Dialog open={isOpen} onClose={onClose} maxWidth="xs">
+      <DialogContent>
+        <Box
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          textAlign="center"
+        >
+          <Box
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            sx={{
+              backgroundColor: '#FEE2E2',
+              width: '48px',
+              height: '48px',
+              borderRadius: '24px',
+            }}
+          >
+            <ReportProblemOutlinedIcon
+              color="error"
+              sx={{ width: '24px', height: '24px' }}
+            />
+          </Box>
+          <Typography variant="h5" sx={{ marginTop: 2 }}>
+            Delete Item
+          </Typography>
+          <Typography sx={{ marginTop: 2 }}>
+            Are you sure you want to delete this item?
+          </Typography>
+        </Box>
+        <Box display="flex" justifyContent="center" sx={{ marginTop: 2 }}>
+          <Button
+            onClick={onClose}
+            variant="outlined"
+            color="error"
+            sx={{ marginRight: 2 }}
+          >
+            Cancel
+          </Button>
+          <Button onClick={onConfirm} variant="contained" color="error">
+            Confirm
+          </Button>
+        </Box>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ConfirmationModal;
diff --git a/packages/react-material-ui/src/components/submodules/DrawerForm/index.tsx b/packages/react-material-ui/src/components/submodules/DrawerForm/index.tsx
index db862d7e..6899a284 100644
--- a/packages/react-material-ui/src/components/submodules/DrawerForm/index.tsx
+++ b/packages/react-material-ui/src/components/submodules/DrawerForm/index.tsx
@@ -18,7 +18,7 @@ import useDataProvider, { useQuery } from '@concepta/react-data-provider';
 import validator from '@rjsf/validator-ajv6';
 
 import { SchemaForm, SchemaFormProps } from '../../../components/SchemaForm';
-
+import ConfirmationModal from '../ConfirmationModal';
 import { CustomTextFieldWidget } from '../../../styles/CustomWidgets';
 
 type Action = 'creation' | 'edit' | 'details' | null;
@@ -64,6 +64,9 @@ type DrawerFormSubmoduleProps = PropsWithChildren<
 };
 
 const DrawerFormSubmodule = (props: DrawerFormSubmoduleProps) => {
+  const [isConfirmationModalOpen, setConfirmationModalOpen] =
+    useState<boolean>(false);
+
   const {
     queryResource,
     viewMode,
@@ -257,7 +260,7 @@ const DrawerFormSubmodule = (props: DrawerFormSubmoduleProps) => {
               <Button
                 variant="contained"
                 color="error"
-                onClick={() => deleteItem(formData)}
+                onClick={() => setConfirmationModalOpen(true)}
                 sx={{ flex: 1 }}
               >
                 {isLoadingDelete ? (
@@ -290,6 +293,14 @@ const DrawerFormSubmodule = (props: DrawerFormSubmoduleProps) => {
           </Box>
         </Box>
       </Box>
+      <ConfirmationModal
+        isOpen={isConfirmationModalOpen}
+        onClose={() => setConfirmationModalOpen(false)}
+        onConfirm={() => {
+          setConfirmationModalOpen(false);
+          deleteItem(formData);
+        }}
+      />
     </Drawer>
   );
 };
diff --git a/packages/react-material-ui/src/components/submodules/ModalForm/index.tsx b/packages/react-material-ui/src/components/submodules/ModalForm/index.tsx
index 4224608a..488c3a4f 100644
--- a/packages/react-material-ui/src/components/submodules/ModalForm/index.tsx
+++ b/packages/react-material-ui/src/components/submodules/ModalForm/index.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, ReactNode } from 'react';
+import React, { PropsWithChildren, ReactNode, useState } from 'react';
 
 import type { RJSFSchema, UiSchema, CustomValidator } from '@rjsf/utils';
 import type { IChangeEvent, FormProps } from '@rjsf/core';
@@ -20,6 +20,7 @@ import validator from '@rjsf/validator-ajv6';
 
 import { SchemaForm, SchemaFormProps } from '../../../components/SchemaForm';
 import { CustomTextFieldWidget } from '../../../styles/CustomWidgets';
+import ConfirmationModal from '../ConfirmationModal';
 
 type Action = 'creation' | 'edit' | 'details' | null;
 
@@ -64,6 +65,9 @@ type ModalFormSubmoduleProps = PropsWithChildren<
 };
 
 const ModalFormSubmodule = (props: ModalFormSubmoduleProps) => {
+  const [isConfirmationModalOpen, setConfirmationModalOpen] =
+    useState<boolean>(false);
+
   const {
     queryResource,
     viewMode,
@@ -241,7 +245,7 @@ const ModalFormSubmodule = (props: ModalFormSubmoduleProps) => {
                   <Button
                     variant="contained"
                     color="error"
-                    onClick={() => deleteItem(formData)}
+                    onClick={() => setConfirmationModalOpen(true)}
                     sx={{ flex: 1 }}
                   >
                     {isLoadingDelete ? (
@@ -277,6 +281,14 @@ const ModalFormSubmodule = (props: ModalFormSubmoduleProps) => {
           </>
         </SchemaForm.Form>
       </DialogContent>
+      <ConfirmationModal
+        isOpen={isConfirmationModalOpen}
+        onClose={() => setConfirmationModalOpen(false)}
+        onConfirm={() => {
+          setConfirmationModalOpen(false);
+          deleteItem(formData);
+        }}
+      />
     </Dialog>
   );
 };
diff --git a/packages/react-material-ui/src/index.ts b/packages/react-material-ui/src/index.ts
index 60e76bf8..6d767b15 100644
--- a/packages/react-material-ui/src/index.ts
+++ b/packages/react-material-ui/src/index.ts
@@ -81,6 +81,7 @@ export {
 
 export { AuthModule, AuthModuleProps } from './modules/auth';
 export { default as CrudModule } from './modules/crud';
+export { default as FormModule } from './modules/form';
 export { default as UsersModule } from './modules/users';
 
 export { default as OtpInput } from './components/OtpInput';
diff --git a/packages/react-material-ui/src/modules/crud/index.tsx b/packages/react-material-ui/src/modules/crud/index.tsx
index bf098038..1f068271 100644
--- a/packages/react-material-ui/src/modules/crud/index.tsx
+++ b/packages/react-material-ui/src/modules/crud/index.tsx
@@ -64,7 +64,7 @@ export interface ModuleProps {
   title?: string;
   resource: string;
   tableProps: TableProps;
-  formContainerVariation?: 'drawer' | 'modal';
+  formContainerVariation?: 'drawer' | 'modal' | 'page';
   detailsFormProps?: PropsWithChildren<FormProps>;
   createFormProps?: PropsWithChildren<FormProps>;
   editFormProps?: PropsWithChildren<FormProps>;
@@ -221,11 +221,21 @@ const CrudModule = (props: ModuleProps) => {
         <TableSubmodule
           queryResource={props.resource}
           onAction={(payload) => {
+            if (props.formContainerVariation === 'page') {
+              props.navigate(
+                `/${props.resource}/${payload.action}/${payload.row.id}`,
+              );
+            }
+
             setSelectedRow(payload.row);
             setDrawerViewMode(payload.action);
             setCurrentViewIndex(payload.index);
           }}
           onAddNew={() => {
+            if (props.formContainerVariation === 'page') {
+              props.navigate(`/${props.resource}/new`);
+            }
+
             setSelectedRow(null);
             setDrawerViewMode('creation');
             setCurrentViewIndex(0);
diff --git a/packages/react-material-ui/src/modules/form/index.tsx b/packages/react-material-ui/src/modules/form/index.tsx
new file mode 100644
index 00000000..414fbcc8
--- /dev/null
+++ b/packages/react-material-ui/src/modules/form/index.tsx
@@ -0,0 +1,244 @@
+import React, { useMemo, useState } from 'react';
+
+import { Box, Button, CircularProgress } from '@mui/material';
+import useDataProvider, { useQuery } from '@concepta/react-data-provider';
+import validator from '@rjsf/validator-ajv6';
+
+import type { IChangeEvent } from '@rjsf/core';
+
+import Text from '../../components/Text';
+import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
+import ConfirmationModal from '../../components/submodules/ConfirmationModal';
+import { SchemaForm } from '../../components/SchemaForm';
+import { CustomTextFieldWidget } from '../../styles/CustomWidgets';
+
+import { ModuleProps } from '../crud';
+
+const FormModule = (props: ModuleProps) => {
+  const [formData, setFormData] = useState<Record<string, unknown> | null>(
+    null,
+  );
+  const [isConfirmationModalOpen, setConfirmationModalOpen] =
+    useState<boolean>(false);
+
+  const [, resource, viewMode, id] = window.location.pathname.split('/');
+
+  const formProps = useMemo(() => {
+    switch (viewMode) {
+      case 'new':
+        return props.createFormProps;
+      case 'edit':
+        return props.editFormProps;
+      case 'details':
+        return props.detailsFormProps;
+      default:
+        return props.createFormProps;
+    }
+  }, [
+    viewMode,
+    props.createFormProps,
+    props.detailsFormProps,
+    props.editFormProps,
+  ]);
+
+  const {
+    formSchema,
+    formUiSchema,
+    customValidate,
+    submitButtonTitle,
+    cancelButtonTitle,
+    children,
+    customFooterContent,
+    hideCancelButton,
+    onSuccess,
+    onError,
+    ...otherProps
+  } = formProps;
+
+  const { get, post, patch, del } = useDataProvider();
+
+  useQuery(
+    () =>
+      get({
+        uri: `/${resource}/${id}`,
+      }),
+    Boolean(id),
+    {
+      onSuccess: (data) => setFormData(data as Record<string, unknown>),
+    },
+  );
+
+  const { execute: createItem, isPending: isLoadingCreation } = useQuery(
+    (data: Record<string, unknown>) =>
+      post({
+        uri: `/${resource}`,
+        body: data,
+      }),
+    false,
+    {
+      onSuccess: onSuccess,
+      onError: onError,
+    },
+  );
+
+  const { execute: editItem, isPending: isLoadingEdit } = useQuery(
+    (data: Record<string, unknown>) =>
+      patch({
+        uri: `/${resource}/${id}`,
+        body: data,
+      }),
+    false,
+    {
+      onSuccess: onSuccess,
+      onError: onError,
+    },
+  );
+
+  const { execute: deleteItem, isPending: isLoadingDelete } = useQuery(
+    () =>
+      del({
+        uri: `/${resource}/${id}`,
+      }),
+    false,
+    {
+      onSuccess: (data) => {
+        if (onSuccess) {
+          onSuccess(data);
+        }
+        window.history.back();
+      },
+      onError: onError,
+    },
+  );
+
+  const handleFormSubmit = async (
+    values: IChangeEvent<Record<string, unknown>>,
+  ) => {
+    const fields = values.formData || {};
+
+    if (viewMode === 'new') {
+      await createItem(fields);
+    }
+
+    if (viewMode === 'edit') {
+      await editItem(fields);
+    }
+  };
+
+  const _widgets = {
+    TextWidget: CustomTextFieldWidget,
+  };
+
+  return (
+    <Box>
+      <Box mt={4}>
+        <Breadcrumbs
+          routes={[
+            { href: '/', label: 'Home' },
+            { href: '#', label: props.title || 'Table' },
+          ]}
+        />
+      </Box>
+
+      {props.title ? (
+        <Text fontFamily="Inter" fontSize={20} fontWeight={800} mt={4} mb={4}>
+          {props.title}
+        </Text>
+      ) : null}
+
+      <SchemaForm.Form
+        schema={{
+          ...formSchema,
+          required: formSchema?.required || [],
+          properties: formSchema?.properties || {},
+          title: '',
+        }}
+        uiSchema={formUiSchema}
+        validator={validator}
+        onSubmit={handleFormSubmit}
+        noHtml5Validate={true}
+        showErrorList={false}
+        formData={formData}
+        widgets={_widgets}
+        customValidate={customValidate}
+        readonly={viewMode === 'details'}
+        {...otherProps}
+      >
+        {children}
+        <Box
+          display="flex"
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="flex-start"
+          mt={4}
+        >
+          <Box
+            display="flex"
+            flexDirection="row"
+            alignItems="center"
+            mt={2}
+            gap={2}
+          >
+            {customFooterContent}
+            {viewMode === 'new' && !hideCancelButton && (
+              <Button
+                variant="outlined"
+                onClick={() => window.history.back()}
+                sx={{ flex: 1 }}
+              >
+                {cancelButtonTitle || 'Cancel'}
+              </Button>
+            )}
+            {viewMode === 'edit' && !hideCancelButton && (
+              <Button
+                variant="contained"
+                color="error"
+                onClick={() => setConfirmationModalOpen(true)}
+                sx={{ flex: 1 }}
+              >
+                {isLoadingDelete ? (
+                  <CircularProgress sx={{ color: 'white' }} size={24} />
+                ) : (
+                  cancelButtonTitle || 'Delete'
+                )}
+              </Button>
+            )}
+            {viewMode === 'details' && !hideCancelButton && (
+              <Button
+                variant="outlined"
+                onClick={() => window.history.back()}
+                sx={{ flex: 1 }}
+              >
+                {cancelButtonTitle || 'Close'}
+              </Button>
+            )}
+            {viewMode !== 'details' && (
+              <Button
+                type="submit"
+                variant="contained"
+                disabled={isLoadingCreation || isLoadingEdit || isLoadingDelete}
+                sx={{ flex: 1 }}
+              >
+                {isLoadingCreation || isLoadingEdit ? (
+                  <CircularProgress sx={{ color: 'white' }} size={24} />
+                ) : (
+                  submitButtonTitle || 'Save'
+                )}
+              </Button>
+            )}
+          </Box>
+        </Box>
+      </SchemaForm.Form>
+      <ConfirmationModal
+        isOpen={isConfirmationModalOpen}
+        onClose={() => setConfirmationModalOpen(false)}
+        onConfirm={() => {
+          setConfirmationModalOpen(false);
+          deleteItem(formData);
+        }}
+      />
+    </Box>
+  );
+};
+
+export default FormModule;
diff --git a/packages/react-navigation/src/components/AppBarContainer.tsx b/packages/react-navigation/src/components/AppBarContainer.tsx
index 0b15e7e7..5a663492 100644
--- a/packages/react-navigation/src/components/AppBarContainer.tsx
+++ b/packages/react-navigation/src/components/AppBarContainer.tsx
@@ -49,7 +49,7 @@ export default function AppBarContainer({
       />
       <AppBar.Main>
         <AppBar.Nav
-          text={(user as any)?.username || ''}
+          text={(user as { username: string })?.username || ''}
           headerMenuOptions={(handleClose) => (
             <MenuItem onClick={() => onLogoutClick(handleClose)}>
               Sign Out
diff --git a/packages/react-navigation/src/components/DefaultRoute.tsx b/packages/react-navigation/src/components/DefaultRoute.tsx
index 92d146b7..f9a73e03 100644
--- a/packages/react-navigation/src/components/DefaultRoute.tsx
+++ b/packages/react-navigation/src/components/DefaultRoute.tsx
@@ -7,6 +7,7 @@ import {
   DrawerItemProps,
   DrawerProps,
   NavbarProps,
+  FormModule,
 } from '@concepta/react-material-ui/';
 import { ModuleProps } from '@concepta/react-material-ui/dist/modules/crud';
 
@@ -18,6 +19,7 @@ type DefaultRouteProps = {
   showAppBar?: boolean;
   module?: ModuleProps;
   page?: ReactNode;
+  isFormPage?: boolean;
   items: DrawerItemProps[];
   drawerProps?: DrawerProps;
   navbarProps?: NavbarProps;
@@ -35,6 +37,7 @@ const DefaultRoute = ({
   showAppBar = true,
   module,
   page,
+  isFormPage = false,
   items,
   drawerProps,
   navbarProps,
@@ -48,16 +51,24 @@ const DefaultRoute = ({
     onClick: () => item?.id && navigate(item.id),
   }));
 
-  const content = module ? (
-    <CrudModule
-      {...module}
-      resource={resourceName}
-      title={name}
-      navigate={useNavigateFilter ? navigate : undefined}
-    />
-  ) : (
-    page
-  );
+  const content =
+    module && !isFormPage ? (
+      <CrudModule
+        {...module}
+        resource={resourceName}
+        title={name}
+        navigate={useNavigateFilter ? navigate : undefined}
+      />
+    ) : isFormPage ? (
+      <FormModule
+        {...module}
+        resource={resourceName}
+        title={name}
+        navigate={useNavigateFilter ? navigate : undefined}
+      />
+    ) : (
+      page
+    );
 
   const wrappedContent = showAppBar ? (
     renderAppBar ? (
diff --git a/packages/react-navigation/src/components/Resource.tsx b/packages/react-navigation/src/components/Resource.tsx
index 45994ca7..edbb20f1 100644
--- a/packages/react-navigation/src/components/Resource.tsx
+++ b/packages/react-navigation/src/components/Resource.tsx
@@ -4,13 +4,14 @@ import { ModuleProps } from '@concepta/react-material-ui/dist/modules/crud';
 
 type ResourceProps = {
   id: string;
-  name: string;
-  icon: ReactNode;
+  name?: string;
+  icon?: ReactNode;
   showDrawerItem?: boolean;
   isUnprotected?: boolean;
   showAppBar?: boolean;
   module?: Partial<ModuleProps>;
   page?: ReactNode;
+  isFormPage?: boolean;
 };
 
 const Resource = ({ id }: ResourceProps) => {
diff --git a/packages/react-navigation/src/components/Router.tsx b/packages/react-navigation/src/components/Router.tsx
index e699b3e7..0cf29032 100644
--- a/packages/react-navigation/src/components/Router.tsx
+++ b/packages/react-navigation/src/components/Router.tsx
@@ -134,6 +134,7 @@ const Router = ({
           name={child.props.name}
           showAppBar={child.props.showAppBar}
           module={child.props.module}
+          isFormPage={child.props.isFormPage}
           page={child.props.page}
           items={items}
           drawerProps={drawerProps}