diff --git a/src/Controls.jsx b/src/Controls.jsx
index 6a0b2a3..68c8058 100644
--- a/src/Controls.jsx
+++ b/src/Controls.jsx
@@ -1,10 +1,8 @@
-import ExpressionUploader from "./ExpressionLoader";
 import ExpressionAnalysis from "./ExpressionAnalysis";
 
 const Controls = () => {
   return (
     <div className="ast-ctrls-container flex h-9">
-      <ExpressionUploader />
       <ExpressionAnalysis />
     </div>
   );
diff --git a/src/ExpressionAnalysis.jsx b/src/ExpressionAnalysis.jsx
index 247e758..280058b 100644
--- a/src/ExpressionAnalysis.jsx
+++ b/src/ExpressionAnalysis.jsx
@@ -1,6 +1,6 @@
 const ExpressionAnalysis = () => {
   return (
-    <div className="ast-ctrls-expr-analyze-container flex w-1/2 justify-evenly">
+    <div className="ast-ctrls-expr-analyze-container flex w-full justify-evenly">
       <div className="ast-ea-icon m-auto text-center">
         <span className="fa-solid fa-calculator" aria-hidden="true"></span>
         <span className="sr-only">Calculator</span>
diff --git a/src/ExpressionLoader.jsx b/src/ExpressionLoader.jsx
index 459b30f..ea307ac 100644
--- a/src/ExpressionLoader.jsx
+++ b/src/ExpressionLoader.jsx
@@ -32,22 +32,22 @@ const ExpressionLoader = () => {
     setMathExpression([...mathExpression, expressionDetails]);
   };
 
-
-
   useEffect(() => {
-    async function getMathPixToken(){
+    async function getMathPixToken() {
       try {
-        let response = await fetch("http://aspacetech.us-east-2.elasticbeanstalk.com/token",{
-          "content-type": "application/json",
-          method: "POST"
-        }).then(res => res.json());
+        let response = await fetch(
+          "http://aspacetech.us-east-2.elasticbeanstalk.com/token",
+          {
+            "content-type": "application/json",
+            method: "POST",
+          }
+        ).then((res) => res.json());
 
         return response.token;
-      }
-      catch (e){
+      } catch (e) {
         console.log("Failed to get temporary token");
       }
-    };
+    }
 
     async function imageToMathPix(img) {
       try {
@@ -84,10 +84,28 @@ const ExpressionLoader = () => {
   }, [image]);
 
   return (
-    <div className="ast-ctrls-expr-upload-container flex w-1/2 justify-evenly">
-      <ImageUpload setImage={setImage} />
-      <ImageDraw />
-      <ImageCapture />
+    <div className="ast-ctrls-expr-upload-container mt-1 flex h-9 w-full justify-center bg-white">
+      <div className="flex w-full bg-asm_mgreen">
+        <div className="m-auto text-center">
+          <button>
+            <span
+              className="fa-solid fa-plus text-asm_white"
+              aria-hidden="true"
+            ></span>
+            <span className="sr-only">Image Upload</span>
+          </button>
+        </div>
+        <ImageUpload setImage={setImage} />
+        <ImageDraw />
+        <ImageCapture />
+      </div>
+      <input
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            storeExpression(e.target.value);
+          }
+        }}
+      />
     </div>
   );
 };
diff --git a/src/Expressions.jsx b/src/Expressions.jsx
index 410f0e0..3914626 100644
--- a/src/Expressions.jsx
+++ b/src/Expressions.jsx
@@ -1,6 +1,7 @@
 import { useContext } from "react";
 import MathContext from "./MathContext";
 import { MathJax } from "better-react-mathjax";
+import ExpressionUploader from "./ExpressionLoader";
 //import EquationSolver from "./EquationSolver";
 
 const Expressions = () => {
@@ -9,52 +10,55 @@ const Expressions = () => {
 
   return (
     <div className="ast-expr-container flex w-full sm:flex-wrap">
-      {mathExpressions ? (
-        mathExpressions.map((mExpr) => {
-          return (
-            <div
-              key={mExpr.asciimathExpr}
-              className="ast-expression mt-2 ml-2 w-full font-bold text-black"
-            >
-              <MathJax>
-                <h2 className="text-center text-xl">
-                  {"`" + mExpr.asciimathExpr + "`"}
-                </h2>
-                <p>{"`" + mExpr.nodeExpr.toString() + "`"}</p>
-                <div>
-                  {Object.keys(mExpr.currentScope).map((variable) => {
-                    return (
-                      <div key={variable}>
-                        <label htmlFor={variable}>
-                          {"`" + variable + ": `"}{" "}
-                        </label>
-                        <input
-                          className="w-12 rounded-sm border-solid bg-asm_lbrown"
-                          id={variable}
-                          type="number"
-                          defaultValue={mExpr.currentScope[variable].toString()}
-                          onChange={(e) => {
-                            mathExpressions.find(
-                              (m) => m.asciimathExpr === mExpr.asciimathExpr
-                            ).currentScope[variable] = e.target.value;
-                            setMathExpressions([...mathExpressions]);
-                          }}
-                        ></input>
-                      </div>
-                    );
-                  })}
-                </div>
-              </MathJax>
+      {mathExpressions
+        ? mathExpressions.map((mExpr, idx) => {
+            return (
               <div
                 key={mExpr.asciimathExpr}
-                className="h-1 w-full bg-asm_dgreen"
-              ></div>
-            </div>
-          );
-        })
-      ) : (
-        <p>Upload math expression</p>
-      )}
+                className="ast-expression w-full font-bold text-black"
+              >
+                <div
+                  key={mExpr.asciimathExpr}
+                  className="h-1 w-full bg-asm_mgreen"
+                ></div>
+                <MathJax>
+                  <h2 className="my-1 text-center text-xl">
+                    {"`" + "y_" + idx + "=" + mExpr.asciimathExpr + "`"}
+                  </h2>
+                  <p className="mt-1 ml-2">
+                    {"`" + mExpr.nodeExpr.toString() + "`"}
+                  </p>
+                  <div>
+                    {Object.keys(mExpr.currentScope).map((variable) => {
+                      return (
+                        <div className="ml-2" key={variable}>
+                          <label htmlFor={variable}>
+                            {"`" + variable + ": `"}{" "}
+                          </label>
+                          <input
+                            className="w-12 rounded-sm border-solid bg-asm_lbrown"
+                            id={variable}
+                            type="number"
+                            defaultValue={mExpr.currentScope[
+                              variable
+                            ].toString()}
+                            onChange={(e) => {
+                              mathExpressions.find(
+                                (m) => m.asciimathExpr === mExpr.asciimathExpr
+                              ).currentScope[variable] = e.target.value;
+                              setMathExpressions([...mathExpressions]);
+                            }}
+                          ></input>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </MathJax>
+              </div>
+            );
+          })
+        : null}
+      <ExpressionUploader />
     </div>
   );
 };
diff --git a/src/ImageCapture.jsx b/src/ImageCapture.jsx
index 8de2fa9..3d38ec7 100644
--- a/src/ImageCapture.jsx
+++ b/src/ImageCapture.jsx
@@ -1,7 +1,7 @@
 const ImageCapture = () => {
   //const ImageDraw = ({ setImage }) => {
   return (
-    <button className="ast-ul-icon m-auto text-center">
+    <button className="ast-ul-icon m-auto text-center text-asm_white">
       <span className="fa-solid fa-camera" aria-hidden="true"></span>
       <span className="sr-only">Camera Upload</span>
     </button>
diff --git a/src/ImageDraw.jsx b/src/ImageDraw.jsx
index a4650bb..296a7cb 100644
--- a/src/ImageDraw.jsx
+++ b/src/ImageDraw.jsx
@@ -94,7 +94,7 @@
 const ImageDraw = () => {
   //const ImageDraw = ({ setImage }) => {
   return (
-    <button className="ast-ul-icon m-auto text-center">
+    <button className="ast-ul-icon m-auto text-center text-asm_white">
       <span className="fa-solid fa-pencil" aria-hidden="true"></span>
       <span className="sr-only">Draw Upload</span>
     </button>
diff --git a/src/ImageUpload.jsx b/src/ImageUpload.jsx
index 089f747..3a073b3 100644
--- a/src/ImageUpload.jsx
+++ b/src/ImageUpload.jsx
@@ -23,7 +23,10 @@ const ImageUpload = ({ setImage }) => {
     <div className="ast-ul-icon m-auto text-center">
       <input type="file" onChange={onChange} hidden ref={inputRef} />
       <button onClick={() => inputRef.current.click()}>
-        <span className="fa-regular fa-image" aria-hidden="true"></span>
+        <span
+          className="fa-regular fa-image text-asm_white"
+          aria-hidden="true"
+        ></span>
         <span className="sr-only">Image Upload</span>
       </button>
     </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 602aa4b..c8d9038 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,6 +5,7 @@ module.exports = {
     extend: {
       colors: {
         asm_dgreen: "rgb(57,61,50)",
+        asm_mgreen: "rgb(73,84,67)",
         asm_lgreen: "rgb(88,106,83)",
         asm_white: "rgb(241,243,238)",
         asm_dbrown: "rgb(158,150,131)",
diff --git a/test_images/cos.png b/test_images/cos.png
new file mode 100644
index 0000000..553e2fa
Binary files /dev/null and b/test_images/cos.png differ
diff --git a/test_images/sin.png b/test_images/sin.png
new file mode 100644
index 0000000..4863ee9
Binary files /dev/null and b/test_images/sin.png differ