diff --git a/src/components/dropdowns/MajorDropdownField/index.js b/src/components/dropdowns/MajorDropdownField/index.js
new file mode 100644
index 00000000..31a153b0
--- /dev/null
+++ b/src/components/dropdowns/MajorDropdownField/index.js
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { MenuItem } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+import { Field } from 'formik';
+import { TextField } from 'formik-material-ui';
+
+import ELIGIBLE_MAJORS from '../../../constants/eligibleMajors';
+import styles from './styles';
+
+const createFullMajorTitle = (department, major) => {
+  let fullMajorTitle = '';
+
+  if (ELIGIBLE_MAJORS[department][major] === 'Computer Engineering') {
+    if (department === 'CSE')
+      fullMajorTitle = `${ELIGIBLE_MAJORS[department][major]} - CSE`;
+    else if (department === 'ECE')
+      fullMajorTitle = `${ELIGIBLE_MAJORS[department][major]} - ECE`;
+  } else fullMajorTitle = ELIGIBLE_MAJORS[department][major];
+
+  return fullMajorTitle;
+};
+
+const MajorDropdownField = props => {
+  const { classes, ...otherProps } = props;
+
+  return (
+    <Field
+      className={classes.root}
+      component={TextField}
+      select
+      {...otherProps}
+    >
+      {Object.keys(ELIGIBLE_MAJORS).map(department =>
+        Object.keys(ELIGIBLE_MAJORS[department]).map(major => {
+          const fullMajorTitle = createFullMajorTitle(department, major);
+          return <MenuItem value={fullMajorTitle}>{fullMajorTitle}</MenuItem>;
+        })
+      )}
+    </Field>
+  );
+};
+
+export default withStyles(styles)(MajorDropdownField);
diff --git a/src/components/dropdowns/MajorDropdownField/styles.js b/src/components/dropdowns/MajorDropdownField/styles.js
new file mode 100644
index 00000000..ece329ba
--- /dev/null
+++ b/src/components/dropdowns/MajorDropdownField/styles.js
@@ -0,0 +1,7 @@
+const styles = () => ({
+  root: {
+    minWidth: '273.333px',
+  },
+});
+
+export default styles;
diff --git a/src/components/dropdowns/YearDropdownField/index.js b/src/components/dropdowns/YearDropdownField/index.js
new file mode 100644
index 00000000..3b852344
--- /dev/null
+++ b/src/components/dropdowns/YearDropdownField/index.js
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import { MenuItem } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+import { Field } from 'formik';
+import { TextField } from 'formik-material-ui';
+
+import styles from './styles';
+
+const yearDropdownChoices = (minYear, maxYear) => {
+  const yearChoices = [];
+
+  for (let year = 0; year <= maxYear - minYear; year += 1) {
+    yearChoices.push(year + minYear);
+  }
+
+  return yearChoices;
+};
+
+const YearDropdownField = props => {
+  const { classes, minYear, maxYear, ...otherProps } = props;
+
+  return (
+    <Field
+      className={classes.root}
+      component={TextField}
+      select
+      {...otherProps}
+    >
+      {yearDropdownChoices(minYear, maxYear).map(year => (
+        <MenuItem key={year} value={year}>
+          {year}
+        </MenuItem>
+      ))}
+    </Field>
+  );
+};
+
+YearDropdownField.propTypes = {
+  minYear: PropTypes.number.isRequired,
+  maxYear: PropTypes.number.isRequired,
+};
+
+export default withStyles(styles)(YearDropdownField);
diff --git a/src/components/dropdowns/YearDropdownField/styles.js b/src/components/dropdowns/YearDropdownField/styles.js
new file mode 100644
index 00000000..be8da976
--- /dev/null
+++ b/src/components/dropdowns/YearDropdownField/styles.js
@@ -0,0 +1,7 @@
+const styles = () => ({
+  root: {
+    minWidth: '124.667px',
+  },
+});
+
+export default styles;
diff --git a/src/components/dropdowns/index.js b/src/components/dropdowns/index.js
index 4c144a62..2dd91aa6 100644
--- a/src/components/dropdowns/index.js
+++ b/src/components/dropdowns/index.js
@@ -1,4 +1,5 @@
-import MajorDropdown from './MajorDropdown';
-import YearDropdown from './YearDropdown';
+import MajorDropdownField from './MajorDropdownField';
+import YearDropdownField from './YearDropdownField';
+
+export { MajorDropdownField, YearDropdownField };
 
-export { MajorDropdown, YearDropdown };