diff --git a/docs/package-lock.json b/docs/package-lock.json
index 97bc722b7..fa90368dd 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -16,6 +16,7 @@
         "prism-react-renderer": "^2.1.0",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
+        "react-hot-toast": "^2.4.1",
         "react-icons": "^4.12.0",
         "typewriter-effect": "^2.21.0"
       },
@@ -2062,9 +2063,10 @@
       "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.4",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.4.tgz",
-      "integrity": "sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.8.tgz",
+      "integrity": "sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==",
+      "license": "MIT",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -8243,6 +8245,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.14",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz",
+      "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -13833,6 +13844,22 @@
         "react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+      "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+      "license": "MIT",
+      "dependencies": {
+        "goober": "^2.1.10"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-icons": {
       "version": "4.12.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
@@ -18348,9 +18375,9 @@
       "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
     },
     "@babel/runtime": {
-      "version": "7.23.4",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.4.tgz",
-      "integrity": "sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.8.tgz",
+      "integrity": "sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==",
       "requires": {
         "regenerator-runtime": "^0.14.0"
       }
@@ -22807,6 +22834,12 @@
         "slash": "^3.0.0"
       }
     },
+    "goober": {
+      "version": "2.1.14",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz",
+      "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==",
+      "requires": {}
+    },
     "gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -26390,6 +26423,14 @@
         "shallowequal": "^1.1.0"
       }
     },
+    "react-hot-toast": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+      "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+      "requires": {
+        "goober": "^2.1.10"
+      }
+    },
     "react-icons": {
       "version": "4.12.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
diff --git a/docs/package.json b/docs/package.json
index ca00a3ed3..13f422464 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -24,6 +24,7 @@
     "prism-react-renderer": "^2.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^4.12.0",
     "typewriter-effect": "^2.21.0"
   },
diff --git a/docs/src/components/codeInputArea.tsx b/docs/src/components/codeInputArea.tsx
new file mode 100644
index 000000000..4cecc72c7
--- /dev/null
+++ b/docs/src/components/codeInputArea.tsx
@@ -0,0 +1,12 @@
+import clsx from 'clsx';
+import styles from '../pages/playground.module.css';
+
+const CodeInputArea = ({ onChange }) => (
+  <textarea
+    className={clsx(styles.codeArea)}
+    name="inputArea"
+    placeholder="Enter your code to try it out"
+    onChange={onChange}
+  />
+);
+export default CodeInputArea;
diff --git a/docs/src/components/imageDisplay.tsx b/docs/src/components/imageDisplay.tsx
new file mode 100644
index 000000000..15eefef37
--- /dev/null
+++ b/docs/src/components/imageDisplay.tsx
@@ -0,0 +1,18 @@
+const ImageDisplay = ({ imageUrl }) => (
+  <div>
+    {imageUrl ? (
+      <img
+        src={imageUrl}
+        style={{
+          objectFit: 'contain',
+          height: '100%',
+          width: '100%',
+        }}
+      />
+    ) : (
+      <div></div>
+    )}
+  </div>
+);
+
+export default ImageDisplay;
diff --git a/docs/src/components/options.tsx b/docs/src/components/options.tsx
new file mode 100644
index 000000000..299d9ef07
--- /dev/null
+++ b/docs/src/components/options.tsx
@@ -0,0 +1,32 @@
+const Options = ({ onSubmit }) => (
+  <div className="bottom-right-component">
+    <div className="row">
+      <div className="col">Resolution:</div>
+      <div className="col">
+        <select>
+          <option value="someOption">Some option</option>
+          <option value="otherOption">Other option</option>
+        </select>
+      </div>
+      <div className="col">
+        <select>
+          <option value="someOption">Some option</option>
+          <option value="otherOption">Other option</option>
+        </select>
+      </div>
+      <div className="col">
+        <select>
+          <option value="someOption">Some option</option>
+          <option value="otherOption">Other option</option>
+        </select>
+      </div>
+      <div className="col">
+        <button className="button button--outline button--primary" onClick={onSubmit}>
+          Submit
+        </button>
+      </div>
+    </div>
+  </div>
+);
+
+export default Options;
diff --git a/docs/src/pages/playground.module.css b/docs/src/pages/playground.module.css
index 11313f02a..a23e36d7c 100644
--- a/docs/src/pages/playground.module.css
+++ b/docs/src/pages/playground.module.css
@@ -2,29 +2,47 @@
  * CSS files with the .module.css suffix will be treated as CSS modules
  * and scoped locally.
  */
-
- .page {
-    margin: 30px;
- }
+.page {
+    display: flex;
+    flex-direction: row;
+    height: 75vh;
+    margin: 20px;
+  }
+  
+  .leftSide {
+    flex: 1;
+  }
   
-.codeArea {
-    height: 75dvh;
+  .rightSide {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .codeArea {
+    height: 100%;
     width: 100%;
-    left: 0;
-    top: 0;
     resize: none;
 }
 
+.imageDisplay,
 .options {
-    margin: 30px;
+  margin-left: 10px;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.options {
+    width: 100%;
+    height: 100%;
+    margin-top: 5px;
 }
 
 .imageDisplay {
     border-radius: 2px;
     border-style: groove;
-    height: 45dvh;
     width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    height: 100%;
+    margin-bottom: 5px;
 }
diff --git a/docs/src/pages/playground.tsx b/docs/src/pages/playground.tsx
index b90c3a8b2..bb165ccfd 100644
--- a/docs/src/pages/playground.tsx
+++ b/docs/src/pages/playground.tsx
@@ -4,62 +4,12 @@ import Layout from '@theme/Layout';
 
 import styles from './playground.module.css';
 import { useState } from 'react';
+import Options from '../components/options';
+import ImageDisplay from '../components/imageDisplay';
+import CodeInputArea from '../components/codeInputArea';
+import toast, { Toaster } from 'react-hot-toast';
 
-const CodeInputArea = ({ value, onChange }) => (
-  <textarea
-    className={clsx(styles.codeArea)}
-    name="inputArea"
-    placeholder="Enter your code to try it out"
-    onChange={onChange}
-    style={{ height: value, width: '100%' }}
-  />
-);
-
-const ImageDisplay = ({ imageUrl }) => (
-  <div className={clsx(styles.imageDisplay)}>
-    {imageUrl ? (
-      <img
-        src={imageUrl}
-        alt="Generated"
-        style={{
-          objectFit: 'contain',
-          height: '100%',
-          width: '100%',
-        }}
-      />
-    ) : (
-      <div></div>
-    )}
-  </div>
-);
-
-const Options = ({ onSubmit }) => (
-  <div className={clsx('row', styles.options)}>
-    <div className="col">
-      <select>
-        <option value="someOption">Some option</option>
-        <option value="otherOption">Other option</option>
-      </select>
-    </div>
-    <div className="col">
-      <select>
-        <option value="someOption">Some option</option>
-        <option value="otherOption">Other option</option>
-      </select>
-    </div>
-    <div className="col">
-      <select>
-        <option value="someOption">Some option</option>
-        <option value="otherOption">Other option</option>
-      </select>
-    </div>
-    <div className="col">
-      <button className="button button--outline button--primary" onClick={onSubmit}>
-        Submit
-      </button>
-    </div>
-  </div>
-);
+const backendUrl = 'http://localhost:8081/render_image';
 
 function Homepage() {
   const [textAreaValue, setTextAreaValue] = useState('');
@@ -70,8 +20,6 @@ function Homepage() {
   };
 
   const handleSubmit = async () => {
-    const backendUrl = 'http://localhost:8081/render_image';
-
     try {
       const response = await fetch(backendUrl, {
         method: 'POST',
@@ -81,26 +29,42 @@ function Homepage() {
         body: textAreaValue,
       });
 
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
+      if (response.status >= 400) {
+        const contentType = response.headers.get('Content-Type');
+        const errorStatus = `Error status: ${response.status}`;
+        let errorMessage = '';
+
+        if (contentType === 'text/plain; charset=utf-8') {
+          const txt = await response.text();
+          errorMessage = `Error message:\n${txt}`;
+        } else if (contentType === 'application/json') {
+          const apiError = await response.json();
+          errorMessage = `Error message:\n${apiError.stack}`;
+        }
+
+        throw new Error(`${errorStatus}\n${errorMessage}`);
       }
 
       const blob = await response.blob();
       const imageObjectURL = URL.createObjectURL(blob);
       setImageUrl(imageObjectURL);
     } catch (error) {
-      console.error('Error:', error);
+      toast.error(`${error.message}`);
     }
   };
 
   return (
     <div className={clsx(styles.page)}>
-      <div className="row">
-        <div className={clsx('col col-6', styles.codeArea)}>
-          <CodeInputArea value={textAreaValue} onChange={handleInputChange} />
+      <div className={clsx(styles.leftSide)}>
+        <div className={clsx(styles.codeArea)}>
+          <CodeInputArea onChange={handleInputChange} />
         </div>
-        <div className="col col-6">
+      </div>
+      <div className={clsx(styles.rightSide)}>
+        <div className={clsx(styles.imageDisplay)}>
           <ImageDisplay imageUrl={imageUrl} />
+        </div>
+        <div className={clsx(styles.options)}>
           <Options onSubmit={handleSubmit} />
         </div>
       </div>
@@ -112,6 +76,7 @@ export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout title={siteConfig.title}>
+      <Toaster />
       <Homepage />
     </Layout>
   );