diff --git a/src/components/input-model/variable-editor.style.ts b/src/components/input-model/variable-editor.style.ts
index 04ee996f..04f470ff 100644
--- a/src/components/input-model/variable-editor.style.ts
+++ b/src/components/input-model/variable-editor.style.ts
@@ -1,16 +1,9 @@
 import { makeStyles } from '@mui/styles'
 
-export const useStyles = makeStyles(() => ({
-  narrowInput: {
-    float: 'left',
-    width: '50%',
-  },
-  narrowInputContainer: {
-    display: 'flex',
-  },
-  option: {
-    display: 'flex',
-    alignItems: 'center',
+export const useStyles = makeStyles(theme => ({
+  customTab: {
+    minWidth: 'auto',
+    fontSize: theme.typography.pxToRem(12),
   },
 }))
 
diff --git a/src/components/input-model/variable-editor.tsx b/src/components/input-model/variable-editor.tsx
index c070eb91..c5e7e919 100644
--- a/src/components/input-model/variable-editor.tsx
+++ b/src/components/input-model/variable-editor.tsx
@@ -1,10 +1,9 @@
-import { Box, Button } from '@mui/material'
+import CategoricalVariable from './categorical-variable'
+import ValueVariable from './value-variable'
+import { Box, Tab, Tabs } from '@mui/material'
+import { useState, ChangeEvent } from 'react'
 import useStyles from './variable-editor.style'
 import { CategoricalVariableType, ValueVariableType } from '@/types/common'
-import { useForm } from 'react-hook-form'
-import { FormInputText } from '@/utility/forms'
-import { FormRadioGroup } from '@/utility/forms/form-radio-group'
-import { validation } from '@/utility/forms/validation'
 
 type VariableEditorProps = {
   isAddVariableDisabled: boolean
@@ -13,80 +12,44 @@ type VariableEditorProps = {
 }
 
 export default function VariableEditor(props: VariableEditorProps) {
-  const { isAddVariableDisabled } = props
+  const { isAddVariableDisabled, addValueVariable, addCategoricalVariable } =
+    props
 
+  const [tabIndex, setTabIndex] = useState(0)
   const classes = useStyles()
 
-  // add useForm controller
-  const { handleSubmit, control } = useForm({})
-
-  const onSubmit = (data: any) => {
-    console.log(data)
+  const handleTabChange = (_event: ChangeEvent<{}>, newValue: number) => {
+    setTabIndex(newValue)
   }
 
   return (
     <>
+      <Tabs
+        variant="fullWidth"
+        value={tabIndex}
+        onChange={handleTabChange}
+        aria-label="variables"
+      >
+        <Tab label="Value" className={classes.customTab} />
+        <Tab label="Categorical" className={classes.customTab} />
+      </Tabs>
       <Box ml={2} mr={2}>
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <FormInputText
-            name="name"
-            control={control}
-            fullWidth
-            margin="dense"
-            label="Name"
-            rules={validation.required}
+        {tabIndex === 0 && (
+          <ValueVariable
+            isDisabled={isAddVariableDisabled}
+            onAdded={(valueVariable: ValueVariableType) =>
+              addValueVariable(valueVariable)
+            }
           />
-          <FormInputText
-            name="description"
-            control={control}
-            fullWidth
-            margin="dense"
-            label="Description"
+        )}
+        {tabIndex === 1 && (
+          <CategoricalVariable
+            isDisabled={isAddVariableDisabled}
+            onAdded={(categoricalVariable: CategoricalVariableType) =>
+              addCategoricalVariable(categoricalVariable)
+            }
           />
-          <Box mb={0} className={classes.narrowInputContainer}>
-            <Box className={classes.narrowInput} pr={1}>
-              <FormInputText
-                name="min"
-                control={control}
-                fullWidth
-                margin="dense"
-                label="Min"
-                rules={{ ...validation.required, ...validation.mustBeNumber }}
-              />
-            </Box>
-            <Box className={classes.narrowInput}>
-              <FormInputText
-                name="max"
-                control={control}
-                fullWidth
-                margin="dense"
-                label="Max"
-                rules={{ ...validation.required, ...validation.mustBeNumber }}
-              />
-            </Box>
-          </Box>
-          <Box mt={1} mb={1}>
-            <FormRadioGroup
-              name="type"
-              control={control}
-              values={['continuous', 'discrete']}
-              labels={['Continuous', 'Discrete']}
-              tooltips={[
-                'Values include non-integers',
-                'Values are only integers',
-              ]}
-              ariaLabel={'value-type'}
-            />
-          </Box>
-          <Button
-            size="small"
-            disabled={isAddVariableDisabled}
-            variant="outlined"
-            type="submit"
-          >
-            Add variable
-          </Button>
-        </form>
+        )}
       </Box>
     </>
   )