diff --git a/src/pages/AddFeature/index.tsx b/src/pages/AddFeature/index.tsx
new file mode 100644
index 0000000..3f7dd33
--- /dev/null
+++ b/src/pages/AddFeature/index.tsx
@@ -0,0 +1,386 @@
+import * as Yup from 'yup';
+import { useFormik } from 'formik';
+import { Redirect, useHistory } from 'react-router';
+import { useMutation, useReactiveVar } from '@apollo/client';
+import React, { useState } from 'react';
+import { roleVar } from '../../graphql/state';
+import {
+  Box,
+  Button,
+  Text,
+  SectionSelector,
+  Input,
+  Alert,
+  TextArea,
+  CheckBox,
+} from '../../components';
+import { Wrapper } from './styles';
+import { ArrowLeft, General, Design } from '../../assets';
+import {
+  AddFeatureMutation,
+  AddFeatureMutationVariables,
+} from '../../graphql/types';
+import { ADD_CATEGORY } from '../../graphql/category.api';
+import { ADD_FEATURE } from '../../graphql/feature.api';
+
+const AddFeature = () => {
+  const history = useHistory();
+  const role = useReactiveVar(roleVar);
+  const [newFeature, setNewFeature] = useState<{
+    name: string;
+    description: string;
+    featureType: string;
+    image: {
+      name: string;
+      src: string;
+    };
+    wireframes?: Array<{
+      name: string;
+      src: string;
+    }>;
+    price: number;
+    repo: string;
+  }>();
+
+  const [selectedSection, setSelectedSection] = useState<
+    'general' | 'wireframes'
+  >('general');
+  const [error, setError] = useState<string>('');
+
+  const [addFeature, { loading }] = useMutation<
+    AddFeatureMutation,
+    AddFeatureMutationVariables
+  >(ADD_FEATURE, {
+    onCompleted({ addFeature: { id } }) {
+      history.push(`/feature/${id}`);
+    },
+    onError({ graphQLErrors }) {
+      setError(graphQLErrors[0]?.extensions?.info);
+      setTimeout(() => setError(''), 3000);
+    },
+  });
+
+  const generalForm = useFormik({
+    initialValues: {
+      name: '',
+      description: '',
+      imageName: '',
+      imageSource: '',
+      featureType: '',
+      price: '',
+      repo: '',
+    },
+    validationSchema: Yup.object().shape({
+      name: Yup.string().required('Name is required'),
+      description: Yup.string().required('Description is required'),
+      imageName: Yup.string().required('Image is required'),
+      imageSource: Yup.string().required('Image is required'),
+      featureType: Yup.string().required('Feature Type is required'),
+      // prettier-ignore
+      price: Yup.number().typeError('Price must be a number').required('Price is required'),
+      repo: Yup.string().required('Repo is required'),
+    }),
+    onSubmit: ({
+      name,
+      description,
+      imageName,
+      imageSource,
+      featureType,
+      price,
+      repo,
+    }) => {
+      setNewFeature({
+        name,
+        description,
+        featureType,
+        image: { name: imageName, src: imageSource },
+        price: parseFloat(price),
+        repo,
+      });
+      setSelectedSection('wireframes');
+    },
+  });
+
+  return role === 'developer' ? (
+    <Wrapper>
+      <Box>
+        <Button
+          text='Back'
+          color={role || 'client'}
+          size='small'
+          onClick={() => history.goBack()}
+          iconLeft={<ArrowLeft />}
+        />
+        <Text variant='headline' weight='bold'>
+          Add Feature
+        </Text>
+      </Box>
+      <Box
+        display='grid'
+        gridTemplateColumns='0.5fr 2fr'
+        columnGap='25px'
+        marginTop='1rem'
+      >
+        <Box display='grid' rowGap='0.5rem' gridTemplateRows='50px'>
+          <SectionSelector
+            icon={<General />}
+            color={role || 'client'}
+            text='General'
+            selected
+          />
+          <SectionSelector
+            icon={<Design />}
+            color={role || 'client'}
+            text='Wireframes'
+            selected={selectedSection === 'wireframes'}
+            onClick={() => setSelectedSection('wireframes')}
+          />
+        </Box>
+        <Box
+          background='white'
+          boxShadow='1px 1px 10px 0px rgba(50, 59, 105, 0.25)'
+          borderRadius='10px'
+          width='100%'
+          padding='30px'
+        >
+          <Box
+            display='grid'
+            gridTemplateColumns='auto 1fr'
+            columnGap='1rem'
+            alignItems='center'
+            marginBottom='50px'
+          >
+            <Text variant='subheader' weight='bold'>
+              General
+            </Text>
+            {error && <Alert color='error' text={error} />}
+          </Box>
+          {selectedSection === 'general' && (
+            <>
+              <form onSubmit={generalForm.handleSubmit}>
+                <Box
+                  display='grid'
+                  gridTemplateColumns='auto'
+                  rowGap='0.5rem'
+                  position='relative'
+                >
+                  <Input
+                    name='name'
+                    label='Name'
+                    color={role || 'client'}
+                    value={generalForm.values.name}
+                    onChange={generalForm.handleChange}
+                    onBlur={generalForm.handleBlur}
+                    error={
+                      generalForm.touched.name && !!generalForm.errors.name
+                    }
+                    errorMessage={generalForm.errors.name}
+                  />
+                  <Input
+                    type='file'
+                    label='Image'
+                    color={role || 'client'}
+                    onChange={async (
+                      event: React.ChangeEvent<HTMLInputElement>
+                    ) => {
+                      const formData = new FormData();
+
+                      if (event.target.files && event.target.files[0]) {
+                        formData.append('file', event.target.files[0]);
+                        formData.append('upload_preset', 'xofll5kc');
+
+                        generalForm.setFieldValue('imageName', '');
+                        generalForm.setFieldValue('imageSource', '');
+
+                        const data = await (
+                          await fetch(
+                            `${process.env.REACT_APP_CLOUDINARY_URL}`,
+                            {
+                              method: 'POST',
+                              body: formData,
+                            }
+                          )
+                        ).json();
+
+                        const filename = data.original_filename;
+                        const filesource = data.secure_url;
+
+                        generalForm.setFieldValue('imageName', filename);
+                        generalForm.setFieldValue('imageSource', filesource);
+                      }
+                    }}
+                    error={
+                      !!generalForm.errors.imageName ||
+                      !!generalForm.errors.imageSource
+                    }
+                    errorMessage={generalForm.errors.imageName}
+                  />
+                  <Box>
+                    <Box
+                      display='flex'
+                      flexDirection='row'
+                      alignItems='center'
+                      justifyContent='space-between'
+                    >
+                      <Box justifySelf='flex-start'>
+                        <Text
+                          variant='body'
+                          weight='bold'
+                          className='feature-type'
+                        >
+                          Type
+                        </Text>
+                      </Box>
+                      {!!generalForm.errors.featureType && (
+                        <Box justifySelf='flex-end'>
+                          <Text variant='body' color='error'>
+                            {generalForm.errors.featureType}
+                          </Text>
+                        </Box>
+                      )}
+                    </Box>
+                    <Box
+                      display='flex'
+                      flexDirection='row'
+                      alignItems='center'
+                      marginTop='5px'
+                    >
+                      <Box marginRight='50px'>
+                        <CheckBox
+                          label='Frontend'
+                          name='featureType'
+                          color={role || 'client'}
+                          onClick={() => {
+                            if (
+                              generalForm.values.featureType === 'fullstack'
+                            ) {
+                              generalForm.setFieldValue(
+                                'featureType',
+                                'backend'
+                              );
+                              return;
+                            }
+                            if (generalForm.values.featureType === 'backend') {
+                              generalForm.setFieldValue(
+                                'featureType',
+                                'fullstack'
+                              );
+                              return;
+                            }
+                            if (generalForm.values.featureType === 'frontend') {
+                              generalForm.setFieldValue('featureType', '');
+                              return;
+                            }
+                            generalForm.setFieldValue(
+                              'featureType',
+                              'frontend'
+                            );
+                          }}
+                          checked={
+                            generalForm.values.featureType === 'frontend' ||
+                            generalForm.values.featureType === 'fullstack'
+                          }
+                        />
+                      </Box>
+                      <Box>
+                        <CheckBox
+                          label='Backend'
+                          name='featureType'
+                          color={role || 'client'}
+                          onClick={() => {
+                            if (
+                              generalForm.values.featureType === 'fullstack'
+                            ) {
+                              generalForm.setFieldValue(
+                                'featureType',
+                                'frontend'
+                              );
+                              return;
+                            }
+                            if (generalForm.values.featureType === 'frontend') {
+                              generalForm.setFieldValue(
+                                'featureType',
+                                'fullstack'
+                              );
+                              return;
+                            }
+                            if (generalForm.values.featureType === 'backend') {
+                              generalForm.setFieldValue('featureType', '');
+                              return;
+                            }
+                            generalForm.setFieldValue('featureType', 'backend');
+                          }}
+                          checked={
+                            generalForm.values.featureType === 'backend' ||
+                            generalForm.values.featureType === 'fullstack'
+                          }
+                        />
+                      </Box>
+                    </Box>
+                  </Box>
+                  <TextArea
+                    name='description'
+                    label='Description'
+                    color={role || 'client'}
+                    value={generalForm.values.description}
+                    onChange={generalForm.handleChange}
+                    onBlur={generalForm.handleBlur}
+                    error={
+                      generalForm.touched.description &&
+                      !!generalForm.errors.description
+                    }
+                    errorMessage={generalForm.errors.description}
+                  />
+                  <Input
+                    name='price'
+                    label='Price'
+                    color={role || 'client'}
+                    value={generalForm.values.price}
+                    onChange={generalForm.handleChange}
+                    onBlur={generalForm.handleBlur}
+                    error={
+                      generalForm.touched.price && !!generalForm.errors.price
+                    }
+                    errorMessage={generalForm.errors.price}
+                  />
+                  <Input
+                    name='repo'
+                    label='Repo'
+                    color={role || 'client'}
+                    value={generalForm.values.repo}
+                    onChange={generalForm.handleChange}
+                    onBlur={generalForm.handleBlur}
+                    error={
+                      generalForm.touched.repo && !!generalForm.errors.repo
+                    }
+                    errorMessage={generalForm.errors.repo}
+                  />
+                  <Box
+                    marginTop='0.5rem'
+                    display='flex'
+                    justifyContent='flex-end'
+                  >
+                    <Button
+                      variant='primary-action'
+                      color={role || 'client'}
+                      text='Next'
+                      type='submit'
+                    />
+                  </Box>
+                </Box>
+              </form>
+            </>
+          )}
+        </Box>
+      </Box>
+    </Wrapper>
+  ) : (
+    <>
+      {role === 'admin' && <Redirect to='/clients' />}
+      {role === 'client' ||
+        (role === 'productOwner' && <Redirect to='/project' />)}
+    </>
+  );
+};
+
+export default AddFeature;
diff --git a/src/pages/AddFeature/styles.ts b/src/pages/AddFeature/styles.ts
new file mode 100644
index 0000000..ffc89a8
--- /dev/null
+++ b/src/pages/AddFeature/styles.ts
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  padding: 35px 45px 35px 120px;
+
+  .feature-type {
+    background: ${({ theme }) => theme.colors.gray.dark};
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+`;