diff --git a/src/pages/FeatureSettings/index.tsx b/src/pages/FeatureSettings/index.tsx
new file mode 100644
index 0000000..45fc9ef
--- /dev/null
+++ b/src/pages/FeatureSettings/index.tsx
@@ -0,0 +1,466 @@
+import * as Yup from 'yup';
+import { useFormik } from 'formik';
+import { Redirect, useHistory, useParams } from 'react-router';
+import { useLazyQuery, useMutation, useReactiveVar } from '@apollo/client';
+import React, { useEffect, useState } from 'react';
+import { roleVar } from '../../graphql/state';
+import {
+  Box,
+  Button,
+  Text,
+  SectionSelector,
+  Input,
+  Alert,
+  TextArea,
+  Spinner,
+  Modal,
+  CheckBox,
+} from '../../components';
+import { Wrapper } from './styles';
+import { ArrowLeft, Design, General } from '../../assets';
+import {
+  DeleteFeatureMutation,
+  DeleteFeatureMutationVariables,
+  FeatureOutput,
+  GetFeatureByIdQuery,
+  GetFeatureByIdQueryVariables,
+  UpdateFeatureMutation,
+  UpdateFeatureMutationVariables,
+} from '../../graphql/types';
+import {
+  DELETE_FEATURE,
+  GET_FEATURE_BY_ID,
+  UPDATE_FEATURE,
+} from '../../graphql/feature.api';
+
+const FeatureSettings = () => {
+  const history = useHistory();
+  const { id } = useParams<{ id: string }>();
+  const role = useReactiveVar(roleVar);
+
+  const [selectedSection, setSelectedSection] = useState<
+    'general' | 'wireframes'
+  >('general');
+  const [error, setError] = useState<string>('');
+  const [success, setSuccess] = useState<boolean>(false);
+  const [feature, setFeature] = useState<FeatureOutput>();
+
+  const [deleteFeatureModal, setDeleteFeatureModal] = useState<boolean>(false);
+
+  const [getFeature, { loading: featureLoading }] = useLazyQuery<
+    GetFeatureByIdQuery,
+    GetFeatureByIdQueryVariables
+  >(GET_FEATURE_BY_ID, {
+    onCompleted({ getFeatureById }) {
+      setFeature(getFeatureById);
+    },
+    fetchPolicy: 'network-only',
+  });
+
+  const [updateFeature, { loading }] = useMutation<
+    UpdateFeatureMutation,
+    UpdateFeatureMutationVariables
+  >(UPDATE_FEATURE, {
+    onCompleted({ updateFeature: data }) {
+      setFeature(data);
+      setSuccess(true);
+      setTimeout(() => setSuccess(false), 3000);
+    },
+    onError({ graphQLErrors }) {
+      setError(graphQLErrors[0]?.extensions?.info);
+      setTimeout(() => setError(''), 3000);
+    },
+  });
+
+  const [deleteFeature] = useMutation<
+    DeleteFeatureMutation,
+    DeleteFeatureMutationVariables
+  >(DELETE_FEATURE, {
+    onCompleted() {
+      history.push('/feature');
+    },
+    onError({ graphQLErrors }) {
+      setError(graphQLErrors[0]?.extensions?.info);
+      setTimeout(() => setError(''), 3000);
+    },
+  });
+
+  useEffect(() => {
+    getFeature({ variables: { id } });
+
+    // eslint-disable-next-line
+  }, [id]);
+
+  const generalForm = useFormik({
+    initialValues: {
+      name: feature?.name || '',
+      description: feature?.description || '',
+      imageName: feature?.image.name || '',
+      imageSource: feature?.image.src || '',
+      featureType: feature?.featureType || '',
+      price: feature?.price || 0,
+      repo: feature?.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,
+    }) => {
+      updateFeature({
+        variables: {
+          id,
+          feature: {
+            name,
+            description,
+            featureType,
+            image: { name: imageName, src: imageSource },
+            price,
+            repo,
+          },
+        },
+      });
+    },
+    enableReinitialize: true,
+  });
+
+  return role === 'developer' ? (
+    <Wrapper>
+      <Box>
+        <Button
+          text='Back'
+          color={role || 'client'}
+          size='small'
+          onClick={() => history.goBack()}
+          iconLeft={<ArrowLeft />}
+        />
+        <Text variant='headline' weight='bold'>
+          Update 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} />}
+            {success && (
+              <Alert color='success' text='Account updated successfully' />
+            )}
+          </Box>
+          {selectedSection === 'general' && (
+            <>
+              {!featureLoading ? (
+                <>
+                  {deleteFeatureModal && (
+                    <Modal
+                      color={role || 'client'}
+                      title='Delete Feature'
+                      description='
+              If you delete this feature you cannot recover it.'
+                      onClose={() => setDeleteFeatureModal(false)}
+                      onConfirm={() => deleteFeature({ variables: { id } })}
+                    ></Modal>
+                  )}
+                  <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='space-between'
+                      >
+                        <Button
+                          variant='text'
+                          color='error'
+                          text='Delete Feature'
+                          onClick={() => setDeleteFeatureModal(true)}
+                        />
+                        <Button
+                          variant='primary-action'
+                          color={role || 'client'}
+                          text='Save'
+                          type='submit'
+                          loading={loading}
+                          disabled={loading}
+                        />
+                      </Box>
+                    </Box>
+                  </form>
+                </>
+              ) : (
+                <Box display='grid' alignItems='center' justifyContent='center'>
+                  <Spinner color={role || 'client'} />
+                </Box>
+              )}
+            </>
+          )}
+        </Box>
+      </Box>
+    </Wrapper>
+  ) : (
+    <>
+      {role === 'admin' && <Redirect to='/clients' />}
+      {role === 'client' ||
+        (role === 'productOwner' && <Redirect to='/project' />)}
+    </>
+  );
+};
+
+export default FeatureSettings;
diff --git a/src/pages/FeatureSettings/styles.ts b/src/pages/FeatureSettings/styles.ts
new file mode 100644
index 0000000..ffc89a8
--- /dev/null
+++ b/src/pages/FeatureSettings/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;
+  }
+`;