diff --git a/client/src/components/derived/IngredientSelector.tsx b/client/src/components/derived/IngredientSelector.tsx
index 77f3fa7..49f3131 100644
--- a/client/src/components/derived/IngredientSelector.tsx
+++ b/client/src/components/derived/IngredientSelector.tsx
@@ -16,19 +16,13 @@ function IngredientSelector({ position, ingredients, units, destroy }: Ingredien
     const [newOptions, setNewOptions] = useState(new Array<string>());
     const [selected, setSelected] = useState(new Array<string>());
 
-    useEffect(() => {
-        console.log(units);
-    }, [])
-
     return (
-        <table style={{ display: "flex", flexDirection: "row", alignItems: "center" }}><tbody>
+        <table className="ingredient-widget"><tbody>
             <tr>
                 <td className="quantity-of-unit">
-                    <label>Quantity:</label>
-                    <TextField />
+                    <TextField variant="outlined" label="Quantity" />
                 </td>
                 <td className="ingredient-unit">
-                    <label>Unit:</label>
                     <Autocomplete 
                         autoHighlight
                         options={measurementUnits}
@@ -36,8 +30,8 @@ function IngredientSelector({ position, ingredients, units, destroy }: Ingredien
                         renderInput={(params) => (
                             <TextField
                                 {...params}
-                                variant="filled"
-                                placeholder="Unit of Measurement"
+                                variant="outlined"
+                                label="Unit"
                             />
                         )}
                         onKeyDown={(e) => {
@@ -53,7 +47,6 @@ function IngredientSelector({ position, ingredients, units, destroy }: Ingredien
                     />
                 </td>
                 <td className="ingredient-name">
-                    <label>Ingredient:</label>
                     <Autocomplete
                         autoHighlight
                         options={options}
@@ -61,8 +54,8 @@ function IngredientSelector({ position, ingredients, units, destroy }: Ingredien
                         renderInput={(params) => (
                             <TextField
                                 {...params}
-                                variant="filled"
-                                placeholder="Ingredient Name"
+                                variant="outlined"
+                                label="Ingredient Name"
                             />
                         )}
                         onKeyDown={(e) => {
diff --git a/client/src/components/pages/AddRecipe.tsx b/client/src/components/pages/AddRecipe.tsx
index 6e26aa7..07a2eaa 100644
--- a/client/src/components/pages/AddRecipe.tsx
+++ b/client/src/components/pages/AddRecipe.tsx
@@ -2,11 +2,14 @@ import { useAuthContext } from "../../context/AuthContext";
 import { useCallback, useEffect, useState } from "react";
 import { Button, Card, Divider, Page, Panel } from "../ui"
 import { DropdownData, IIngredient, IRecipe } from "../../schemas";
-import API from "../../util/API";
 import { useSelectorContext } from "../../context/SelectorContext";
 import IngredientSelector from "../derived/IngredientSelector";
-import { v4 } from "uuid";
 import Protect from "../../util/Protect";
+import API from "../../util/API";
+import { v4 } from "uuid";
+import RichText from "../ui/RichText";
+import { TextareaAutosize, TextField } from "@mui/material";
+// import "/src/sass/pages/AddRecipe.scss";
 
 const AddRecipe = () => {
     const { user, token } = useAuthContext();
@@ -45,7 +48,6 @@ const AddRecipe = () => {
 
     // once user information is available, store it in recipe data
     useEffect(() => {
-        if (!user) return;
         user && setInput((prev: IRecipe) => {
             return {
                 ...prev,
@@ -98,6 +100,10 @@ const AddRecipe = () => {
         setIngredientFields((prev) => [...prev, <IngredientSelector position={optionCount + 1} key={v4()} ingredients={data} units={measurements} destroy={destroySelector} />])
         setOptionCount(prev => prev + 1);
     }
+
+    useEffect(() => {
+        console.log(input);
+    }, [input])
     
     return (
         <Protect redirect="/add-recipe">
@@ -107,12 +113,12 @@ const AddRecipe = () => {
             <Panel id="create-recipe-panel" extraClasses="ui-form-component width-80">
                 <div className="form-row">
                     <label>Recipe Name:</label>
-                    <input onChange={(e) => setInput({ ...input, name: e.target.value })} />
+                    <TextField variant="outlined" label="Recipe Name" onChange={(e) => setInput({ ...input, name: e.target.value })}/>
                 </div>
 
                 <div className="form-row">
                     <label>Prep Time:</label>
-                    <input onChange={(e) => setInput({ ...input, preptime: e.target.value })} />
+                    <TextField variant="outlined" label="Prep Time" onChange={(e) => setInput({ ...input, preptime: e.target.value })}/>
                 </div>
 
                 <div className="form-row">
@@ -121,20 +127,22 @@ const AddRecipe = () => {
                 </div>
                 
                 { data && (
+                    <>
                     <Card extraClasses="form-row flex-row ingredient-card">
-                        <label>Ingredients:</label>
-                        <div id="ingredient-container">
+                        <label id="ingredients-label">Ingredients:</label>
+                        <div className="ingredient-container">
                             { ingredientFields }
-                            <Button onClick={handleNewOption}>Add Ingredient</Button>
+                            <Button id="add-ingredient-button" onClick={handleNewOption}>Add Ingredient</Button>
                         </div>
                     </Card>
+                    </>
                 )}
 
                 <Divider />
 
                 <div className="form-row">
-                    <label>Description:</label>
-                    { "description here" }
+                    <label id="description-label">Description:</label>
+                    <RichText id="add-ingredient-description" getState={(text) => setInput({ ...input, description: text })} />
                 </div>
 
                 <Button onClick={handleCreate}>Create Recipe!</Button>
diff --git a/client/src/components/ui/Button.tsx b/client/src/components/ui/Button.tsx
index d76e36d..071e260 100644
--- a/client/src/components/ui/Button.tsx
+++ b/client/src/components/ui/Button.tsx
@@ -1,7 +1,15 @@
 import { ButtonComponent } from "../../util/types"
 import "/src/sass/components/Button.scss";
 
-const Button: ButtonComponent = ({ onClick = (() => {}), children, extraClasses, disabled = false, disabledText = null }) => {
+const Button: ButtonComponent = ({ onClick = (() => {}), children, extraClasses, id = null, disabled = false, disabledText = null }) => {
+    if (id?.length) {
+        return (
+            <button id={id} onClick={onClick} disabled={disabled} className={`ui-button ${extraClasses || ''}`}>
+                { disabled ? (disabledText || children || "Button") : (children || "Button") }
+            </button>
+        )
+    }
+
     return (
         <button onClick={onClick} disabled={disabled} className={`ui-button ${extraClasses || ''}`}>
             { disabled ? (disabledText || children || "Button") : (children || "Button") }
diff --git a/client/src/components/ui/RichText.tsx b/client/src/components/ui/RichText.tsx
index d249dd4..0b8a344 100644
--- a/client/src/components/ui/RichText.tsx
+++ b/client/src/components/ui/RichText.tsx
@@ -25,7 +25,7 @@ const RichText: FC<RichTextProps> = ({ id, initialValue, getState }) => {
             onEditorChange={(txt, editor) => handleChange(txt, editor)}
             initialValue={initialValue || '<p></p>'}
             init={{
-                height: 500,
+                height: 300,
                 menubar: false,
                 plugins: [
                 'advlist autolink lists link image charmap print preview anchor',
diff --git a/client/src/sass/components/Form.scss b/client/src/sass/components/Form.scss
index d173348..3cff7ab 100644
--- a/client/src/sass/components/Form.scss
+++ b/client/src/sass/components/Form.scss
@@ -7,20 +7,63 @@
     .form-row {
         display: inline-flex;
         justify-content: flex-start;
+        align-items: center;
+        padding: 4px;
         margin-bottom: 6px;
 
         label {
             text-align: left;
-            width: 25%;
+            width: 15%;
         }
+
         input {
-            border-radius: 4px;
-            width: 65%;
+            width: 85%;
         }
 
         select {
-            width: 65%;
-            margin: 0;
+            width: 85%;
+        }
+
+        .MuiFormControl-root {
+            width: 85%;
+        }
+
+        #ingredients-label, #description-label {
+            align-self: flex-start;
+            padding-top: 1rem;
+        }
+
+        // special properties for form containers on AddRecipe page
+        .ingredient-container {
+            width: 85%;
+
+            .ingredient-widget {
+                width: 100%;
+
+                tr {
+                    width: 100%;
+                    td {
+                        width: 30%;
+
+                        .MuiFormControl-root {
+                            width: 100%;
+                        }
+
+                        label {
+                            width: unset;
+                        }
+                    }
+
+                    td:last-child {
+                        width: 10%;
+                    }
+                }
+            }
+
+            #add-ingredient-button {
+                margin-top: 1rem;
+                float: right;
+            }
         }
     }
 
diff --git a/client/src/sass/pages/AddRecipe.scss b/client/src/sass/pages/AddRecipe.scss
new file mode 100644
index 0000000..e83c0e5
--- /dev/null
+++ b/client/src/sass/pages/AddRecipe.scss
@@ -0,0 +1,8 @@
+#create-recipe-panel {
+    .ingredient-card {
+        .ingredient-container {
+            background-color: blue;
+            width: 75%;
+        }
+    }
+}
\ No newline at end of file