diff --git a/resources/scripts/api/admin/eggs/createEggVariable.ts b/resources/scripts/api/admin/eggs/createEggVariable.ts
index 4226eef15..dd5ee38fe 100644
--- a/resources/scripts/api/admin/eggs/createEggVariable.ts
+++ b/resources/scripts/api/admin/eggs/createEggVariable.ts
@@ -4,7 +4,7 @@ import { EggVariable, rawDataToEggVariable } from '@/api/admin/eggs/getEgg';
 export default (eggId: number, variable: Omit<EggVariable, 'id' | 'eggId' | 'createdAt' | 'updatedAt'>): Promise<EggVariable> => {
     return new Promise((resolve, reject) => {
         http.post(
-            `/api/application/eggs/${eggId}`,
+            `/api/application/eggs/${eggId}/variables`,
             {
                 name: variable.name,
                 description: variable.description,
diff --git a/resources/scripts/api/admin/eggs/getEgg.ts b/resources/scripts/api/admin/eggs/getEgg.ts
index be0ca0395..5e380e113 100644
--- a/resources/scripts/api/admin/eggs/getEgg.ts
+++ b/resources/scripts/api/admin/eggs/getEgg.ts
@@ -1,6 +1,7 @@
 import { Nest } from '@/api/admin/nests/getNests';
 import { rawDataToServer, Server } from '@/api/admin/servers/getServers';
 import http, { FractalResponseData, FractalResponseList } from '@/api/http';
+import useSWR from 'swr';
 
 export interface EggVariable {
     id: number;
@@ -88,10 +89,16 @@ export const rawDataToEgg = ({ attributes }: FractalResponseData): Egg => ({
     },
 });
 
-export default (id: number, include: string[] = []): Promise<Egg> => {
-    return new Promise((resolve, reject) => {
-        http.get(`/api/application/eggs/${id}`, { params: { include: include.join(',') } })
-            .then(({ data }) => resolve(rawDataToEgg(data)))
-            .catch(reject);
+export const getEgg = async (id: number): Promise<Egg> => {
+    const { data } = await http.get(`/api/application/eggs/${id}`, { params: { include: [ 'variables' ] } });
+
+    return rawDataToEgg(data);
+};
+
+export default (id: number) => {
+    return useSWR<Egg>(`egg:${id}`, async () => {
+        const { data } = await http.get(`/api/application/eggs/${id}`, { params: { include: [ 'variables' ] } });
+
+        return rawDataToEgg(data);
     });
 };
diff --git a/resources/scripts/api/admin/eggs/updateEggVariables.ts b/resources/scripts/api/admin/eggs/updateEggVariables.ts
index 498fda0ba..3ccfe3d38 100644
--- a/resources/scripts/api/admin/eggs/updateEggVariables.ts
+++ b/resources/scripts/api/admin/eggs/updateEggVariables.ts
@@ -1,22 +1,20 @@
 import http from '@/api/http';
 import { EggVariable, rawDataToEggVariable } from '@/api/admin/eggs/getEgg';
 
-export default (eggId: number, variables: Omit<EggVariable, 'eggId' | 'createdAt' | 'updatedAt'>[]): Promise<EggVariable> => {
+export default (eggId: number, variables: Omit<EggVariable, 'eggId' | 'createdAt' | 'updatedAt'>[]): Promise<EggVariable[]> => {
     return new Promise((resolve, reject) => {
         http.patch(
             `/api/application/eggs/${eggId}/variables`,
-            variables.map(variable => {
-                return {
-                    id: variable.id,
-                    name: variable.name,
-                    description: variable.description,
-                    env_variable: variable.envVariable,
-                    default_value: variable.defaultValue,
-                    user_viewable: variable.userViewable,
-                    user_editable: variable.userEditable,
-                    rules: variable.rules,
-                };
-            }),
+            variables.map(variable => ({
+                id: variable.id,
+                name: variable.name,
+                description: variable.description,
+                env_variable: variable.envVariable,
+                default_value: variable.defaultValue,
+                user_viewable: variable.userViewable,
+                user_editable: variable.userEditable,
+                rules: variable.rules,
+            })),
         )
             .then(({ data }) => resolve((data.data || []).map(rawDataToEggVariable)))
             .catch(reject);
diff --git a/resources/scripts/components/admin/nests/eggs/EggRouter.tsx b/resources/scripts/components/admin/nests/eggs/EggRouter.tsx
index 1d591869e..0e11921fa 100644
--- a/resources/scripts/components/admin/nests/eggs/EggRouter.tsx
+++ b/resources/scripts/components/admin/nests/eggs/EggRouter.tsx
@@ -1,54 +1,23 @@
 import EggInstallContainer from '@/components/admin/nests/eggs/EggInstallContainer';
 import EggVariablesContainer from '@/components/admin/nests/eggs/EggVariablesContainer';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useLocation } from 'react-router';
 import tw from 'twin.macro';
 import { Route, Switch, useRouteMatch } from 'react-router-dom';
-import { action, Action, Actions, createContextStore, useStoreActions } from 'easy-peasy';
-import getEgg, { Egg } from '@/api/admin/eggs/getEgg';
+import getEgg from '@/api/admin/eggs/getEgg';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import Spinner from '@/components/elements/Spinner';
 import FlashMessageRender from '@/components/FlashMessageRender';
-import { ApplicationStore } from '@/state';
 import { SubNavigation, SubNavigationLink } from '@/components/admin/SubNavigation';
 import EggSettingsContainer from '@/components/admin/nests/eggs/EggSettingsContainer';
 
-interface ctx {
-    egg: Egg | undefined;
-    setEgg: Action<ctx, Egg | undefined>;
-}
-
-export const Context = createContextStore<ctx>({
-    egg: undefined,
-
-    setEgg: action((state, payload) => {
-        state.egg = payload;
-    }),
-});
-
 const EggRouter = () => {
     const location = useLocation();
     const match = useRouteMatch<{ id?: string }>();
 
-    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
-    const [ loading, setLoading ] = useState(true);
+    const { data: egg } = getEgg(Number(match.params?.id));
 
-    const egg = Context.useStoreState(state => state.egg);
-    const setEgg = Context.useStoreActions(actions => actions.setEgg);
-
-    useEffect(() => {
-        clearFlashes('egg');
-
-        getEgg(Number(match.params?.id), [ 'variables' ])
-            .then(egg => setEgg(egg))
-            .catch(error => {
-                console.error(error);
-                clearAndAddHttpError({ key: 'egg', error });
-            })
-            .then(() => setLoading(false));
-    }, []);
-
-    if (loading || egg === undefined) {
+    if (egg === undefined) {
         return (
             <AdminContentBlock>
                 <FlashMessageRender byKey={'egg'} css={tw`mb-4`}/>
@@ -109,9 +78,5 @@ const EggRouter = () => {
 };
 
 export default () => {
-    return (
-        <Context.Provider>
-            <EggRouter/>
-        </Context.Provider>
-    );
+    return <EggRouter/>;
 };
diff --git a/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx b/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx
index f8dc1c365..9ee665f15 100644
--- a/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx
+++ b/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx
@@ -162,7 +162,7 @@ const EggProcessContainer = forwardRef<any, EggProcessContainerProps>(
             <AdminBox icon={faMicrochip} title={'Process Configuration'} css={tw`relative`} className={className}>
                 <SpinnerOverlay visible={isSubmitting}/>
 
-                <div css={tw`mb-6`}>
+                <div css={tw`mb-5`}>
                     <Label>Startup Configuration</Label>
                     <Editor
                         mode={jsonLanguage}
diff --git a/resources/scripts/components/admin/nests/eggs/EggVariablesContainer.tsx b/resources/scripts/components/admin/nests/eggs/EggVariablesContainer.tsx
index f771a6f25..17ba749e4 100644
--- a/resources/scripts/components/admin/nests/eggs/EggVariablesContainer.tsx
+++ b/resources/scripts/components/admin/nests/eggs/EggVariablesContainer.tsx
@@ -1,9 +1,10 @@
 import { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
-import React, { useEffect } from 'react';
+import React from 'react';
 import tw from 'twin.macro';
 import { array, boolean, object, string } from 'yup';
-import { Egg, EggVariable } from '@/api/admin/eggs/getEgg';
+import getEgg, { Egg, EggVariable } from '@/api/admin/eggs/getEgg';
 import updateEggVariables from '@/api/admin/eggs/updateEggVariables';
+import NewVariableButton from '@/components/admin/nests/eggs/NewVariableButton';
 import AdminBox from '@/components/admin/AdminBox';
 import Button from '@/components/elements/Button';
 import Checkbox from '@/components/elements/Checkbox';
@@ -11,24 +12,30 @@ import Field, { FieldRow, TextareaField } from '@/components/elements/Field';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import useFlash from '@/plugins/useFlash';
 
-function EggVariableForm ({ variable: { name }, i }: { variable: EggVariable, i: number }) {
-    const { isSubmitting } = useFormikContext();
+export const validationSchema = object().shape({
+    name: string().required().min(1).max(191),
+    description: string(),
+    envVariable: string().required().min(1).max(191),
+    defaultValue: string(),
+    userViewable: boolean().required(),
+    userEditable: boolean().required(),
+    rules: string().required(),
+});
 
+export function EggVariableForm ({ prefix }: { prefix: string }) {
     return (
-        <AdminBox css={tw`relative w-full`} title={<p css={tw`text-sm uppercase`}>{name}</p>}>
-            <SpinnerOverlay visible={isSubmitting}/>
-
+        <>
             <Field
-                id={`[${i}].name`}
-                name={`[${i}].name`}
+                id={`${prefix}name`}
+                name={`${prefix}name`}
                 label={'Name'}
                 type={'text'}
                 css={tw`mb-6`}
             />
 
             <TextareaField
-                id={`[${i}].description`}
-                name={`[${i}].description`}
+                id={`${prefix}description`}
+                name={`${prefix}description`}
                 label={'Description'}
                 rows={3}
                 css={tw`mb-4`}
@@ -36,15 +43,15 @@ function EggVariableForm ({ variable: { name }, i }: { variable: EggVariable, i:
 
             <FieldRow>
                 <Field
-                    id={`[${i}].envVariable`}
-                    name={`[${i}].envVariable`}
+                    id={`${prefix}envVariable`}
+                    name={`${prefix}envVariable`}
                     label={'Environment Variable'}
                     type={'text'}
                 />
 
                 <Field
-                    id={`[${i}].defaultValue`}
-                    name={`[${i}].defaultValue`}
+                    id={`${prefix}defaultValue`}
+                    name={`${prefix}defaultValue`}
                     label={'Default Value'}
                     type={'text'}
                 />
@@ -52,26 +59,38 @@ function EggVariableForm ({ variable: { name }, i }: { variable: EggVariable, i:
 
             <div css={tw`flex flex-row mb-6`}>
                 <Checkbox
-                    id={`[${i}].userViewable`}
-                    name={`[${i}].userViewable`}
+                    id={`${prefix}userViewable`}
+                    name={`${prefix}userViewable`}
                     label={'User Viewable'}
                 />
 
                 <Checkbox
-                    id={`[${i}].userEditable`}
-                    name={`[${i}].userEditable`}
+                    id={`${prefix}userEditable`}
+                    name={`${prefix}userEditable`}
                     label={'User Editable'}
                     css={tw`ml-auto`}
                 />
             </div>
 
             <Field
-                id={`[${i}].rules`}
-                name={`[${i}].rules`}
+                id={`${prefix}rules`}
+                name={`${prefix}rules`}
                 label={'Validation Rules'}
                 type={'text'}
                 css={tw`mb-2`}
             />
+        </>
+    );
+}
+
+function EggVariableBox ({ variable, prefix }: { variable: EggVariable, prefix: string }) {
+    const { isSubmitting } = useFormikContext();
+
+    return (
+        <AdminBox css={tw`relative w-full`} title={<p css={tw`text-sm uppercase`}>{variable.name}</p>}>
+            <SpinnerOverlay visible={isSubmitting}/>
+
+            <EggVariableForm prefix={prefix}/>
         </AdminBox>
     );
 }
@@ -79,43 +98,33 @@ function EggVariableForm ({ variable: { name }, i }: { variable: EggVariable, i:
 export default function EggVariablesContainer ({ egg }: { egg: Egg }) {
     const { clearAndAddHttpError } = useFlash();
 
+    const { mutate } = getEgg(egg.id);
+
     const submit = (values: EggVariable[], { setSubmitting }: FormikHelpers<EggVariable[]>) => {
         updateEggVariables(egg.id, values)
-            .then(variables => console.log(variables))
+            .then(async (variables) => await mutate(egg => ({ ...egg!, relations: { variables: variables } })))
             .catch(error => clearAndAddHttpError({ key: 'egg', error }))
             .then(() => setSubmitting(false));
     };
 
-    useEffect(() => {
-        console.log(egg.relations?.variables || []);
-    }, []);
-
     return (
         <Formik
             onSubmit={submit}
             initialValues={egg.relations?.variables || []}
-            validationSchema={array().of(
-                object().shape({
-                    name: string().required().min(1).max(191),
-                    description: string(),
-                    envVariable: string().required().min(1).max(191),
-                    defaultValue: string(),
-                    userViewable: boolean().required(),
-                    userEditable: boolean().required(),
-                    rules: string().required(),
-                }),
-            )}
+            validationSchema={array().of(validationSchema)}
         >
             {({ isSubmitting, isValid }) => (
                 <Form>
                     <div css={tw`flex flex-col mb-16`}>
                         <div css={tw`grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-6`}>
-                            {egg.relations?.variables?.map((v, i) => <EggVariableForm key={v.id} i={i} variable={v}/>)}
+                            {egg.relations?.variables?.map((v, i) => <EggVariableBox key={i} prefix={`[${i}].`} variable={v}/>)}
                         </div>
 
-                        <div css={tw`bg-neutral-700 rounded shadow-md py-2 pr-6 mt-6`}>
+                        <div css={tw`bg-neutral-700 rounded shadow-md py-2 px-4 mt-6`}>
                             <div css={tw`flex flex-row`}>
-                                <Button type="submit" size="small" css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
+                                <NewVariableButton eggId={egg.id}/>
+
+                                <Button type={'submit'} size={'small'} css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
                                     Save Changes
                                 </Button>
                             </div>
diff --git a/resources/scripts/components/admin/nests/eggs/NewVariableButton.tsx b/resources/scripts/components/admin/nests/eggs/NewVariableButton.tsx
new file mode 100644
index 000000000..45058c7bb
--- /dev/null
+++ b/resources/scripts/components/admin/nests/eggs/NewVariableButton.tsx
@@ -0,0 +1,87 @@
+import { Form, Formik, FormikHelpers } from 'formik';
+import React, { useState } from 'react';
+import tw from 'twin.macro';
+import createEggVariable from '@/api/admin/eggs/createEggVariable';
+import getEgg from '@/api/admin/eggs/getEgg';
+import { EggVariableForm, validationSchema } from '@/components/admin/nests/eggs/EggVariablesContainer';
+import Modal from '@/components/elements/Modal';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import Button from '@/components/elements/Button';
+import useFlash from '@/plugins/useFlash';
+
+export default function NewVariableButton ({ eggId }: { eggId: number }) {
+    const [ visible, setVisible ] = useState(false);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+
+    const { mutate } = getEgg(eggId);
+
+    const submit = (values: any, { setSubmitting }: FormikHelpers<any>) => {
+        clearFlashes('variable:create');
+
+        createEggVariable(eggId, values)
+            .then(async (v) => {
+                await mutate(egg => ({ ...egg!, relations: { variables: [ ...egg!.relations.variables!, v ] } }));
+                setVisible(false);
+            })
+            .catch(error => {
+                clearAndAddHttpError({ key: 'variable:create', error });
+                setSubmitting(false);
+            });
+    };
+
+    return (
+        <>
+            <Formik
+                onSubmit={submit}
+                initialValues={{
+                    name: '',
+                    description: '',
+                    envVariable: '',
+                    defaultValue: '',
+                    userViewable: false,
+                    userEditable: false,
+                    rules: '',
+                }}
+                validationSchema={validationSchema}
+            >
+                {({ isSubmitting, resetForm }) => (
+                    <Modal
+                        visible={visible}
+                        dismissable={!isSubmitting}
+                        showSpinnerOverlay={isSubmitting}
+                        onDismissed={() => {
+                            resetForm();
+                            setVisible(false);
+                        }}
+                    >
+                        <FlashMessageRender byKey={'variable:create'} css={tw`mb-6`}/>
+
+                        <h2 css={tw`mb-6 text-2xl text-neutral-100`}>New Variable</h2>
+
+                        <Form css={tw`m-0`}>
+                            <EggVariableForm prefix={''}/>
+
+                            <div css={tw`flex flex-wrap justify-end mt-6`}>
+                                <Button
+                                    type={'button'}
+                                    isSecondary
+                                    css={tw`w-full sm:w-auto sm:mr-2`}
+                                    onClick={() => setVisible(false)}
+                                >
+                                    Cancel
+                                </Button>
+                                <Button css={tw`w-full mt-4 sm:w-auto sm:mt-0`} type={'submit'}>
+                                    Create Variable
+                                </Button>
+                            </div>
+                        </Form>
+                    </Modal>
+                )}
+            </Formik>
+
+            <Button type={'button'} color={'green'} onClick={() => setVisible(true)}>
+                Add a fucking variable
+            </Button>
+        </>
+    );
+}
diff --git a/resources/scripts/components/admin/servers/ServerStartupContainer.tsx b/resources/scripts/components/admin/servers/ServerStartupContainer.tsx
index d89230974..2184b217a 100644
--- a/resources/scripts/components/admin/servers/ServerStartupContainer.tsx
+++ b/resources/scripts/components/admin/servers/ServerStartupContainer.tsx
@@ -1,4 +1,4 @@
-import getEgg, { Egg, EggVariable } from '@/api/admin/eggs/getEgg';
+import { getEgg, Egg, EggVariable } from '@/api/admin/eggs/getEgg';
 import { Server } from '@/api/admin/servers/getServers';
 import updateServerStartup, { Values } from '@/api/admin/servers/updateServerStartup';
 import EggSelect from '@/components/admin/servers/EggSelect';
@@ -187,7 +187,7 @@ export default function ServerStartupContainer ({ server }: { server: Server })
     const setServer = Context.useStoreActions(actions => actions.setServer);
 
     useEffect(() => {
-        getEgg(server.eggId, [ 'variables' ])
+        getEgg(server.eggId)
             .then(egg => setEgg(egg))
             .catch(error => console.error(error));
     }, []);