diff --git a/package-lock.json b/package-lock.json
index cf907aed..623bc489 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1069,6 +1069,11 @@
             "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
             "dev": true
         },
+        "@rjsf/mui": {
+            "version": "5.12.1",
+            "resolved": "https://registry.npmjs.org/@rjsf/mui/-/mui-5.12.1.tgz",
+            "integrity": "sha512-d7cNFIdt6N24m5NPrNSqfCe2SUyUjX48Goo7z4J9vOHWxo5kdDfBEa3UwNA/DR9lo+9cYY7QTvKbgrTkxWU58A=="
+        },
         "@rjsf/utils": {
             "version": "5.13.2",
             "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.13.2.tgz",
diff --git a/package.json b/package.json
index a20a9eb3..8b5a7b50 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
         "@codemirror/legacy-modes": "^6.3.1",
         "@codemirror/lint": "^6.2.0",
         "@mui/x-date-pickers": "6.11.1",
+        "@rjsf/mui": "^5.12.1",
         "@rjsf/utils": "^5.1.0",
         "@toast-ui/editor": "^3.2.2",
         "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0",
diff --git a/src/other/rjsf/CustomObjectFieldTemplate.tsx b/src/other/rjsf/templates/CustomObjectFieldTemplate.tsx
similarity index 100%
rename from src/other/rjsf/CustomObjectFieldTemplate.tsx
rename to src/other/rjsf/templates/CustomObjectFieldTemplate.tsx
diff --git a/src/other/rjsf/widgets/InputWithInfoPopover.tsx b/src/other/rjsf/widgets/InputWithInfoPopover.tsx
new file mode 100644
index 00000000..9ec046be
--- /dev/null
+++ b/src/other/rjsf/widgets/InputWithInfoPopover.tsx
@@ -0,0 +1,32 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import Typography from "@mui/material/Typography";
+import { Templates } from "@rjsf/mui";
+import React from "react";
+
+import InfoPopover from "../../../mui/components/popover/info-popover/InfoPopover";
+import { PositionInfoPopover } from "./PositionInfoPopover.styled";
+import { WidgetWithInfoPopoverProps } from "./types";
+
+const { BaseInputTemplate } = Templates;
+
+export default function InputWithInfoPopover(props: WidgetWithInfoPopoverProps) {
+    const { uiSchema = {} } = props;
+    const infoPopover = uiSchema["ui:options"] && uiSchema["ui:options"].infoPopover;
+
+    if (!BaseInputTemplate) return null;
+
+    return (
+        <>
+            <BaseInputTemplate {...props} size="small" />
+            <PositionInfoPopover>
+                <InfoPopover title={infoPopover?.title} iconSize="small">
+                    <Typography
+                        variant="body2"
+                        pb={2}
+                        dangerouslySetInnerHTML={{ __html: infoPopover?.content || "" }}
+                    />
+                </InfoPopover>
+            </PositionInfoPopover>
+        </>
+    );
+}
diff --git a/src/other/rjsf/widgets/PositionInfoPopover.styled.ts b/src/other/rjsf/widgets/PositionInfoPopover.styled.ts
new file mode 100644
index 00000000..c634ca9e
--- /dev/null
+++ b/src/other/rjsf/widgets/PositionInfoPopover.styled.ts
@@ -0,0 +1,10 @@
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+
+export const PositionInfoPopover = styled(Box)(({ theme }) => ({
+    backgroundColor: theme.palette.background.paper,
+    position: "absolute",
+    borderRadius: "50%",
+    right: -14,
+    top: -14,
+}));
diff --git a/src/other/rjsf/widgets/SelectWithInfoPopover.tsx b/src/other/rjsf/widgets/SelectWithInfoPopover.tsx
new file mode 100644
index 00000000..3a615d70
--- /dev/null
+++ b/src/other/rjsf/widgets/SelectWithInfoPopover.tsx
@@ -0,0 +1,30 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import Typography from "@mui/material/Typography";
+import { Widgets } from "@rjsf/mui";
+import React from "react";
+
+import InfoPopover from "../../../mui/components/popover/info-popover/InfoPopover";
+import { PositionInfoPopover } from "./PositionInfoPopover.styled";
+import { WidgetWithInfoPopoverProps } from "./types";
+
+const { SelectWidget } = Widgets;
+
+export default function SelectWithInfoPopover(props: WidgetWithInfoPopoverProps) {
+    const { uiSchema = {} } = props;
+    const infoPopover = uiSchema["ui:options"] && uiSchema["ui:options"].infoPopover;
+
+    return (
+        <>
+            <SelectWidget {...props} size="small" />
+            <PositionInfoPopover>
+                <InfoPopover title={infoPopover?.title} iconSize="small">
+                    <Typography
+                        variant="body2"
+                        pb={2}
+                        dangerouslySetInnerHTML={{ __html: infoPopover?.content || "" }}
+                    />
+                </InfoPopover>
+            </PositionInfoPopover>
+        </>
+    );
+}
diff --git a/src/other/rjsf/widgets/TimePicker.tsx b/src/other/rjsf/widgets/TimePicker.tsx
new file mode 100644
index 00000000..0c0fa1e2
--- /dev/null
+++ b/src/other/rjsf/widgets/TimePicker.tsx
@@ -0,0 +1,45 @@
+import Typography from "@mui/material/Typography";
+import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { TimePicker as MuiTimePicker } from "@mui/x-date-pickers/TimePicker";
+import moment from "moment";
+import React from "react";
+
+import InfoPopover from "../../../mui/components/popover/info-popover/InfoPopover";
+import { PositionInfoPopover } from "./PositionInfoPopover.styled";
+import { WidgetWithInfoPopoverProps } from "./types";
+
+export default function TimePicker(props: WidgetWithInfoPopoverProps) {
+    const { onChange, value, label } = props;
+    const { uiSchema = {}, options } = props;
+    const infoPopover = uiSchema["ui:options"] && uiSchema["ui:options"].infoPopover;
+
+    return (
+        <LocalizationProvider dateAdapter={AdapterMoment}>
+            <MuiTimePicker
+                onChange={(timeObj) => onChange(timeObj?.format("HH:mm:ss"))}
+                views={["hours", "minutes", "seconds"]}
+                format="HH:mm:ss"
+                ampm={false}
+                value={moment("1970-01-01 " + value)}
+                label={label}
+                disabled={options.disabled}
+                slotProps={{
+                    textField: {
+                        size: "small",
+                        className: "timePickerInput",
+                    },
+                }}
+            />
+            <PositionInfoPopover>
+                <InfoPopover title={infoPopover?.title} iconSize="small">
+                    <Typography
+                        variant="body2"
+                        pb={2}
+                        dangerouslySetInnerHTML={{ __html: infoPopover?.content || "" }}
+                    />
+                </InfoPopover>
+            </PositionInfoPopover>
+        </LocalizationProvider>
+    );
+}
diff --git a/src/other/rjsf/widgets/types.ts b/src/other/rjsf/widgets/types.ts
new file mode 100644
index 00000000..a676a706
--- /dev/null
+++ b/src/other/rjsf/widgets/types.ts
@@ -0,0 +1,13 @@
+import { WidgetProps } from "@rjsf/utils";
+
+export type InfoPopoverOptions = { title: string; content: string };
+
+type InfoPopoverUISchema = {
+    "ui:options"?: {
+        infoPopover?: InfoPopoverOptions;
+    };
+};
+
+export type WidgetWithInfoPopoverProps = WidgetProps & {
+    uiSchema?: InfoPopoverUISchema;
+};