diff --git a/src/common/components/text/NumberedText.jsx b/src/common/components/text/NumberedText.jsx
new file mode 100644
index 000000000..a2f3b8896
--- /dev/null
+++ b/src/common/components/text/NumberedText.jsx
@@ -0,0 +1,11 @@
+import { Flex, Text } from '@chakra-ui/layout';
+import styles from './NumberedText.module.css';
+
+export default function NumberedText({ number = 1, text = '' }) {
+  return (
+    <Flex>
+      <div className={styles.stylednumber}>{number}</div>
+      <Text>{text}</Text>
+    </Flex>
+  );
+}
diff --git a/src/common/components/text/NumberedText.module.css b/src/common/components/text/NumberedText.module.css
new file mode 100644
index 000000000..016dc4b7d
--- /dev/null
+++ b/src/common/components/text/NumberedText.module.css
@@ -0,0 +1,12 @@
+.stylednumber {
+  display: inline;
+  text-align: center;
+  color: white;
+  font-weight: 600;
+
+  background-color: #319795;
+  width: 1.5em;
+  border-radius: 1em;
+
+  margin-right: 0.5em;
+}
diff --git a/src/common/input/SingleTimeInput.jsx b/src/common/input/SingleTimeInput.jsx
new file mode 100644
index 000000000..014895eae
--- /dev/null
+++ b/src/common/input/SingleTimeInput.jsx
@@ -0,0 +1,27 @@
+import { Text } from '@chakra-ui/layout';
+import {
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+} from '@chakra-ui/number-input';
+import styles from './TimeInput.module.css';
+
+export default function SingleTimeInput(props) {
+  return (
+    <div className={styles.container}>
+      <Text className={styles.label}>{props.label}</Text>
+      <Text className={styles.label}>min</Text>
+      <div className={styles.timeInput}>
+        <NumberInput min={0} max={60} maxW={20} allowMouseWheel>
+          <NumberInputField />
+          <NumberInputStepper>
+            <NumberIncrementStepper />
+            <NumberDecrementStepper />
+          </NumberInputStepper>
+        </NumberInput>
+      </div>
+    </div>
+  );
+}
diff --git a/src/common/input/TimeInput.jsx b/src/common/input/TimeInput.jsx
new file mode 100644
index 000000000..09037156a
--- /dev/null
+++ b/src/common/input/TimeInput.jsx
@@ -0,0 +1,35 @@
+import { Text } from '@chakra-ui/layout';
+import {
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+} from '@chakra-ui/number-input';
+import styles from './TimeInput.module.css';
+
+export default function TimeInput(props) {
+  return (
+    <div className={styles.container}>
+      <Text className={styles.label}>{props.label}</Text>
+      <Text className={styles.label}>hour / min</Text>
+      <div className={styles.timeInput}>
+        <NumberInput min={0} max={24} maxW={20} allowMouseWheel>
+          <NumberInputField />
+          <NumberInputStepper>
+            <NumberIncrementStepper />
+            <NumberDecrementStepper />
+          </NumberInputStepper>
+        </NumberInput>
+        <div className={styles.spacer} />
+        <NumberInput min={0} max={59} maxW={20} allowMouseWheel>
+          <NumberInputField />
+          <NumberInputStepper>
+            <NumberIncrementStepper />
+            <NumberDecrementStepper />
+          </NumberInputStepper>
+        </NumberInput>
+      </div>
+    </div>
+  );
+}
diff --git a/src/common/input/TimeInput.module.css b/src/common/input/TimeInput.module.css
new file mode 100644
index 000000000..a0ba4d93e
--- /dev/null
+++ b/src/common/input/TimeInput.module.css
@@ -0,0 +1,17 @@
+.container {
+  padding-right: 1em;
+  padding-top: 2em;
+}
+
+.timeInput {
+  display: flex;
+}
+
+.label {
+  font-size: 0.9em;
+  color: #666;
+}
+
+.spacer {
+  width: 0.25em
+}
\ No newline at end of file
diff --git a/src/features/form/EventForm.jsx b/src/features/form/EventForm.jsx
new file mode 100644
index 000000000..a10bc1f39
--- /dev/null
+++ b/src/features/form/EventForm.jsx
@@ -0,0 +1,43 @@
+import { Button } from '@chakra-ui/button';
+import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
+import { Stack } from '@chakra-ui/layout';
+import { Spacer } from '@chakra-ui/layout';
+import { Text } from '@chakra-ui/layout';
+import SingleTimeInput from '../../common/input/SingleTimeInput';
+import TimeInput from '../../common/input/TimeInput';
+import styles from './EventForm.module.css';
+
+export default function EventForm(props) {
+  return (
+    <div>
+      <Text className={styles.label}>Event Title </Text>
+      <Editable defaultValue='Event Title'>
+        <EditablePreview />
+        <EditableInput />
+      </Editable>
+
+      <Text className={styles.label}>Event Subtitle </Text>
+      <Editable defaultValue='Event Subtitle'>
+        <EditablePreview />
+        <EditableInput />
+      </Editable>
+
+      <Text className={styles.label}>Presenter Name </Text>
+      <Editable defaultValue='Presenter Name'>
+        <EditablePreview />
+        <EditableInput />
+      </Editable>
+
+      <div className={styles.timings}>
+        <TimeInput label='Scheduled Start' />
+        <TimeInput label='Scheduled End' />
+        <SingleTimeInput label='Timer' />
+      </div>
+
+      <div className={styles.buttons}>
+        <Button variant='outline'>Cancel</Button>
+        <Button colorScheme='teal'>Save</Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/form/EventForm.module.css b/src/features/form/EventForm.module.css
new file mode 100644
index 000000000..d64c0934a
--- /dev/null
+++ b/src/features/form/EventForm.module.css
@@ -0,0 +1,23 @@
+.label {
+  padding-top: 1.5em;
+  font-size: 0.9em;
+  color: #666;
+}
+
+.timings {
+  display: flex;
+  justify-content: space-between;
+}
+
+.timeInput {
+  display: flex;
+  gap: 10px;
+}
+
+.buttons {
+  padding-top: 3em;
+  bottom: 10px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 1em;
+}