diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts
new file mode 100644
index 00000000..88808cd7
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts
@@ -0,0 +1,22 @@
+import { style, globalStyle } from '@vanilla-extract/css';
+
+export const AdvancedSettingsList = style({
+  // font-size: 9pt;
+  // margin-bottom: 5px;
+  // padding-left: 10px;
+  // list-style-type: none;
+
+  fontSize: '9pt',
+  marginBottom: '5px',
+  paddingLeft: '10px',
+  listStyleType: 'none',
+
+});
+
+export const AdvancedSettingItem = style({
+  paddingBottom: '5px',
+});
+
+globalStyle( 'button > h4', {
+  color:'lightgrey' 
+});
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx
new file mode 100644
index 00000000..db42a828
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx
@@ -0,0 +1,70 @@
+import React, {useState} from "react";
+import { useImageCreate } from "../../../../../store/imageCreateStore";
+
+
+export default function GpuSettings() {
+
+  const turbo = useImageCreate((state) => state.getValueForRequestKey("turbo"));
+  const use_cpu = useImageCreate((state) =>
+    state.getValueForRequestKey("use_cpu")
+  );
+  const use_full_precision = useImageCreate((state) =>
+    state.getValueForRequestKey("use_full_precision")
+  );
+
+  const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+
+  const [gpuOpen, setGpuOpen] = useState(false);
+
+  const toggleGpuOpen = () => {
+    setGpuOpen(!gpuOpen);
+  };
+
+  return (
+    <div>
+      <button
+        type="button"
+        className="panel-box-toggle-btn"
+        onClick={toggleGpuOpen}
+      >
+        <h4>GPU Settings</h4>
+      </button>
+      {gpuOpen && <>
+      <div>
+        <label>
+          <input
+            checked={turbo}
+            onChange={(e) => setRequestOption("turbo", e.target.checked)}
+            type="checkbox"
+          />
+          Turbo mode (generates images faster, but uses an additional 1 GB of
+          GPU memory)
+        </label>
+      </div>
+      <div>
+        <label>
+          <input
+            type="checkbox"
+            checked={use_cpu}
+            onChange={(e) => setRequestOption("use_cpu", e.target.checked)}
+          />
+          Use CPU instead of GPU (warning: this will be *very* slow)
+        </label>
+      </div>
+      <div>
+        <label>
+          <input
+            checked={use_full_precision}
+            onChange={(e) =>
+              setRequestOption("use_full_precision", e.target.checked)
+            }
+            type="checkbox"
+          />
+          Use full precision (for GPU-only. warning: this will consume more
+          VRAM)
+        </label>
+      </div>
+      </>}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx
new file mode 100644
index 00000000..49f3f727
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx
@@ -0,0 +1,94 @@
+import React, {useState} from "react";
+import { useImageCreate } from "../../../../../store/imageCreateStore";
+
+export default function ImprovementSettings() {
+
+  // these are conditionals that should be retired and inferred from the store
+  const isUsingUpscaling = useImageCreate((state) => state.isUsingUpscaling());
+  const isUsingFaceCorrection = useImageCreate((state) =>state.isUsingFaceCorrection());
+
+  const use_upscale = useImageCreate((state) =>
+    state.getValueForRequestKey("use_upscale")
+  );
+  
+  const show_only_filtered_image = useImageCreate((state) =>
+    state.getValueForRequestKey("show_only_filtered_image")
+  );
+
+  const toggleUseFaceCorrection = useImageCreate(
+    (state) => state.toggleUseFaceCorrection
+  );
+
+  const toggleUseUpscaling = useImageCreate(
+    (state) => state.toggleUseUpscaling
+  );
+
+  const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+
+  const [improvementOpen, setImprovementOpen] = useState(true);
+
+  const toggleImprovementOpen = () => {
+    setImprovementOpen(!improvementOpen);
+  };
+
+
+  return (
+    <div>
+     <button
+        type="button"
+        className="panel-box-toggle-btn"
+        onClick={toggleImprovementOpen}
+      >
+        <h4>Improvement Settings</h4>
+      </button>
+      {improvementOpen && <>
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              checked={isUsingFaceCorrection}
+              onChange={(e) => toggleUseFaceCorrection()}
+            />
+            Fix incorrect faces and eyes (uses GFPGAN)
+          </label>
+        </div>
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              checked={isUsingUpscaling}
+              onChange={(e) => toggleUseUpscaling()}
+            />
+            Upscale the image to 4x resolution using
+            <select
+              id="upscale_model"
+              name="upscale_model"
+              disabled={!isUsingUpscaling}
+              value={use_upscale}
+              onChange={(e) => {
+                setRequestOption("use_upscale", e.target.value);
+              }}
+            >
+              <option value="RealESRGAN_x4plus">RealESRGAN_x4plus</option>
+              <option value="RealESRGAN_x4plus_anime_6B">
+                RealESRGAN_x4plus_anime_6B
+              </option>
+            </select>
+          </label>
+        </div>
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              checked={show_only_filtered_image}
+              onChange={(e) =>
+                setRequestOption("show_only_filtered_image", e.target.checked)
+              }
+            />
+            Show only filtered image
+          </label>
+        </div>
+      </>}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
index 9b1aa5a0..938e4d44 100644
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
@@ -1,343 +1,36 @@
 import React, { useEffect } from "react";
 import { useImageCreate } from "../../../../store/imageCreateStore";
-// import "./advancedSettings.css";
+import { 
+  AdvancedSettingsList,
+  AdvancedSettingItem
+} // @ts-ignore 
+from "./advancedsettings.css.ts";
 
-// todo: move this someplace more global
-const IMAGE_DIMENSIONS = [
-  { value: 128, label: "128 (*)" },
-  { value: 192, label: "192" },
-  { value: 256, label: "256 (*)" },
-  { value: 320, label: "320" },
-  { value: 384, label: "384" },
-  { value: 448, label: "448" },
-  { value: 512, label: "512 (*)" },
-  { value: 576, label: "576" },
-  { value: 640, label: "640" },
-  { value: 704, label: "704" },
-  { value: 768, label: "768 (*)" },
-  { value: 832, label: "832" },
-  { value: 896, label: "896" },
-  { value: 960, label: "960" },
-  { value: 1024, label: "1024 (*)" },
-];
+import ImprovementSettings from "./improvementSettings";
+import PropertySettings from "./propertySettings";
+import WorkflowSettings from "./workflowSettings";
+import GpuSettings from "./gpuSettings";
 
 function SettingsList() {
-  const parallelCount = useImageCreate((state) => state.parallelCount);
-  const setParallelCount = useImageCreate((state) => state.setParallelCount);
-  const setRequestOption = useImageCreate((state) => state.setRequestOptions);
-
-  const toggleUseFaceCorrection = useImageCreate(
-    (state) => state.toggleUseFaceCorrection
-  );
-
-  const isUsingFaceCorrection = useImageCreate((state) =>
-    state.isUsingFaceCorrection()
-  );
-
-  const toggleUseUpscaling = useImageCreate(
-    (state) => state.toggleUseUpscaling
-  );
-  const isUsingUpscaling = useImageCreate((state) => state.isUsingUpscaling());
-
-  const toggleUseRandomSeed = useImageCreate(
-    (state) => state.toggleUseRandomSeed
-  );
-  const isRandomSeed = useImageCreate((state) => state.isRandomSeed());
-
-  const toggleUseAutoSave = useImageCreate((state) => state.toggleUseAutoSave);
-  const isUseAutoSave = useImageCreate((state) => state.isUseAutoSave());
-
-  const toggleSoundEnabled = useImageCreate(
-    (state) => state.toggleSoundEnabled
-  );
-  const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled());
-
-  const use_upscale = useImageCreate((state) =>
-    state.getValueForRequestKey("use_upscale")
-  );
-  const show_only_filtered_image = useImageCreate((state) =>
-    state.getValueForRequestKey("show_only_filtered_image")
-  );
-  const seed = useImageCreate((state) => state.getValueForRequestKey("seed"));
-  const width = useImageCreate((state) => state.getValueForRequestKey("width"));
-  const num_outputs = useImageCreate((state) =>
-    state.getValueForRequestKey("num_outputs")
-  );
-  const height = useImageCreate((state) =>
-    state.getValueForRequestKey("height")
-  );
-  const steps = useImageCreate((state) =>
-    state.getValueForRequestKey("num_inference_steps")
-  );
-  const guidance_scale = useImageCreate((state) =>
-    state.getValueForRequestKey("guidance_scale")
-  );
-  const prompt_strength = useImageCreate((state) =>
-    state.getValueForRequestKey("prompt_strength")
-  );
-  const save_to_disk_path = useImageCreate((state) =>
-    state.getValueForRequestKey("save_to_disk_path")
-  );
-  const turbo = useImageCreate((state) => state.getValueForRequestKey("turbo"));
-  const use_cpu = useImageCreate((state) =>
-    state.getValueForRequestKey("use_cpu")
-  );
-  const use_full_precision = useImageCreate((state) =>
-    state.getValueForRequestKey("use_full_precision")
-  );
 
   return (
-    <ul id="editor-settings-entries">
-      {/*IMAGE CORRECTION */}
-      <li>
-        <label>
-          <input
-            type="checkbox"
-            checked={isUsingFaceCorrection}
-            onChange={(e) => toggleUseFaceCorrection()}
-          />
-          Fix incorrect faces and eyes (uses GFPGAN)
-        </label>
+    <ul className={AdvancedSettingsList}>
+      <li className={AdvancedSettingItem}>
+        <ImprovementSettings />
       </li>
-      <li>
-        <label>
-          <input
-            type="checkbox"
-            checked={isUsingUpscaling}
-            onChange={(e) => toggleUseUpscaling()}
-          />
-          Upscale the image to 4x resolution using
-          <select
-            id="upscale_model"
-            name="upscale_model"
-            disabled={!isUsingUpscaling}
-            value={use_upscale}
-            onChange={(e) => {
-              setRequestOption("use_upscale", e.target.value);
-            }}
-          >
-            <option value="RealESRGAN_x4plus">RealESRGAN_x4plus</option>
-            <option value="RealESRGAN_x4plus_anime_6B">
-              RealESRGAN_x4plus_anime_6B
-            </option>
-          </select>
-        </label>
+      <li className={AdvancedSettingItem}>
+        <PropertySettings />
       </li>
-      <li>
-        <label>
-          <input
-            type="checkbox"
-            checked={show_only_filtered_image}
-            onChange={(e) =>
-              setRequestOption("show_only_filtered_image", e.target.checked)
-            }
-          />
-          Show only filtered image
-        </label>
+      <li className={AdvancedSettingItem}>
+        <WorkflowSettings />
       </li>
-      {/* SEED */}
-      <li>
-        <label>
-          Seed:
-          <input
-            size={10}
-            value={seed}
-            onChange={(e) => setRequestOption("seed", e.target.value)}
-            disabled={isRandomSeed}
-            placeholder="random"
-          />
-        </label>
-        <label>
-          <input
-            type="checkbox"
-            checked={isRandomSeed}
-            onChange={(e) => toggleUseRandomSeed()}
-          />{" "}
-          Random Image
-        </label>
-      </li>
-      {/* COUNT */}
-      <li>
-        <label>
-          Number of images to make:{" "}
-          <input
-            type="number"
-            value={num_outputs}
-            onChange={(e) =>
-              setRequestOption("num_outputs", parseInt(e.target.value, 10))
-            }
-            size={4}
-          />
-        </label>
-        <label>
-          Generate in parallel:
-          <input
-            type="number"
-            value={parallelCount}
-            onChange={(e) => setParallelCount(parseInt(e.target.value, 10))}
-            size={4}
-          />
-        </label>
-      </li>
-      {/* DIMENTIONS */}
-      <li>
-        <label>
-          Width:
-          <select
-            value={width}
-            onChange={(e) => setRequestOption("width", e.target.value)}
-          >
-            {IMAGE_DIMENSIONS.map((dimension) => (
-              <option
-                key={"width-option_" + dimension.value}
-                value={dimension.value}
-              >
-                {dimension.label}
-              </option>
-            ))}
-          </select>
-        </label>
-      </li>
-      <li>
-        <label>
-          Height:
-          <select
-            value={height}
-            onChange={(e) => setRequestOption("height", e.target.value)}
-          >
-            {IMAGE_DIMENSIONS.map((dimension) => (
-              <option
-                key={"height-option_" + dimension.value}
-                value={dimension.value}
-              >
-                {dimension.label}
-              </option>
-            ))}
-          </select>
-        </label>
-      </li>
-      {/* STEPS */}
-      <li>
-        <label>
-          Number of inference steps:{" "}
-          <input
-            value={steps}
-            onChange={(e) => {
-              setRequestOption("num_inference_steps", e.target.value);
-            }}
-            size={4}
-          />
-        </label>
-      </li>
-      {/* GUIDANCE SCALE */}
-      <li>
-        <label>
-          Guidance Scale:
-          <input
-            value={guidance_scale}
-            onChange={(e) => setRequestOption("guidance_scale", e.target.value)}
-            type="range"
-            min="0"
-            max="20"
-            step=".1"
-          />
-        </label>
-        <span>{guidance_scale}</span>
-      </li>
-      {/* PROMPT STRENGTH */}
-      <li className="mb-4">
-        <label>
-          Prompt Strength:{" "}
-          <input
-            value={prompt_strength}
-            onChange={(e) =>
-              // setImageOptions({ promptStrength: Number(e.target.value) })
-              setRequestOption("prompt_strength", e.target.value)
-            }
-            type="range"
-            min="0"
-            max="1"
-            step=".05"
-          />
-        </label>
-        <span>{prompt_strength}</span>
-      </li>
-      {/* AUTO SAVE */}
-      <li>
-        <label>
-          <input
-            checked={isUseAutoSave}
-            onChange={(e) => toggleUseAutoSave()}
-            type="checkbox"
-          />
-          Automatically save to{" "}
-        </label>
-        <label>
-          <input
-            value={save_to_disk_path}
-            onChange={(e) =>
-              setRequestOption("save_to_disk_path", e.target.value)
-            }
-            size={40}
-            disabled={!isUseAutoSave}
-          />
-          <span className="visually-hidden">
-            Path on disk where images will be saved
-          </span>
-        </label>
-      </li>
-      {/* SOUND */}
-      <li>
-        <label>
-          <input
-            checked={isSoundEnabled}
-            onChange={(e) => toggleSoundEnabled()}
-            type="checkbox"
-          />
-          Play sound on task completion
-        </label>
-      </li>
-      {/* GENERATE */}
-      <li>
-        <label>
-          <input
-            checked={turbo}
-            onChange={(e) => setRequestOption("turbo", e.target.checked)}
-            type="checkbox"
-          />
-          Turbo mode (generates images faster, but uses an additional 1 GB of
-          GPU memory)
-        </label>
-      </li>
-      <li>
-        <label>
-          <input
-            type="checkbox"
-            checked={use_cpu}
-            onChange={(e) => setRequestOption("use_cpu", e.target.checked)}
-          />
-          Use CPU instead of GPU (warning: this will be *very* slow)
-        </label>
-      </li>
-      <li>
-        <label>
-          <input
-            checked={use_full_precision}
-            onChange={(e) =>
-              setRequestOption("use_full_precision", e.target.checked)
-            }
-            type="checkbox"
-          />
-          Use full precision (for GPU-only. warning: this will consume more
-          VRAM)
-        </label>
+      <li className={AdvancedSettingItem}>
+        <GpuSettings />
       </li>
     </ul>
   );
 }
 
-//  {/* <!-- <li><input id="allow_nsfw" name="allow_nsfw" type="checkbox"/> <label htmlFor="allow_nsfw">Allow NSFW Content (You confirm you are above 18 years of age)</label></li> --> */}
-
 export default function AdvancedSettings() {
   const advancedSettingsIsOpen = useImageCreate(
     (state) => state.uiOptions.advancedSettingsIsOpen
@@ -354,7 +47,7 @@ export default function AdvancedSettings() {
         onClick={toggleAdvancedSettingsIsOpen}
         className="panel-box-toggle-btn"
       >
-        <h4>Advanced Settings</h4>
+        <h3>Advanced Settings</h3>
       </button>
       {advancedSettingsIsOpen && <SettingsList />}
     </div>
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx
new file mode 100644
index 00000000..a9378e00
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx
@@ -0,0 +1,173 @@
+import React, {useState} from "react";
+import { useImageCreate } from "../../../../../store/imageCreateStore";
+
+
+// todo: move this someplace more global
+const IMAGE_DIMENSIONS = [
+  { value: 128, label: "128 (*)" },
+  { value: 192, label: "192" },
+  { value: 256, label: "256 (*)" },
+  { value: 320, label: "320" },
+  { value: 384, label: "384" },
+  { value: 448, label: "448" },
+  { value: 512, label: "512 (*)" },
+  { value: 576, label: "576" },
+  { value: 640, label: "640" },
+  { value: 704, label: "704" },
+  { value: 768, label: "768 (*)" },
+  { value: 832, label: "832" },
+  { value: 896, label: "896" },
+  { value: 960, label: "960" },
+  { value: 1024, label: "1024 (*)" },
+];
+
+
+export default function PropertySettings() {
+
+
+  const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+  const toggleUseRandomSeed = useImageCreate(
+    (state) => state.toggleUseRandomSeed
+  );
+  const isRandomSeed = useImageCreate((state) => state.isRandomSeed());
+
+  const seed = useImageCreate((state) => state.getValueForRequestKey("seed"));
+  const steps = useImageCreate((state) =>
+    state.getValueForRequestKey("num_inference_steps")
+  );
+  const guidance_scale = useImageCreate((state) =>
+    state.getValueForRequestKey("guidance_scale")
+  );
+  const prompt_strength = useImageCreate((state) =>
+    state.getValueForRequestKey("prompt_strength")
+  );
+  const width = useImageCreate((state) => state.getValueForRequestKey("width"));
+  const height = useImageCreate((state) =>
+    state.getValueForRequestKey("height")
+  );
+
+  const [propertyOpen, setPropertyOpen] = useState(true);
+
+  const togglePropertyOpen = () => {
+    setPropertyOpen(!propertyOpen);
+  };
+
+  return (
+    <div>
+      <button
+        type="button"
+        className="panel-box-toggle-btn"
+        onClick={togglePropertyOpen}
+      >
+        <h4>Property Settings</h4>
+      </button>
+      {propertyOpen && <>
+        <div>
+          <label>
+              Seed:
+              <input
+                size={10}
+                value={seed}
+                onChange={(e) => setRequestOption("seed", e.target.value)}
+                disabled={isRandomSeed}
+                placeholder="random"
+              />
+          </label>
+          <label>
+              <input
+                type="checkbox"
+                checked={isRandomSeed}
+                onChange={(e) => toggleUseRandomSeed()}
+              />{" "}
+              Random Image
+          </label>
+        </div>
+    
+        <div>
+          <label>
+            Number of inference steps:{" "}
+            <input
+              value={steps}
+              onChange={(e) => {
+                setRequestOption("num_inference_steps", e.target.value);
+              }}
+              size={4}
+            />
+          </label>
+        </div>
+
+        <div>
+          <label>
+            Guidance Scale:
+            <input
+              value={guidance_scale}
+              onChange={(e) => setRequestOption("guidance_scale", e.target.value)}
+              type="range"
+              min="0"
+              max="20"
+              step=".1"
+            />
+          </label>
+          <span>{guidance_scale}</span>
+        </div>
+
+        <div className="mb-4">
+          <label>
+            Prompt Strength:{" "}
+            <input
+              value={prompt_strength}
+              onChange={(e) =>
+                // setImageOptions({ promptStrength: Number(e.target.value) })
+                setRequestOption("prompt_strength", e.target.value)
+              }
+              type="range"
+              min="0"
+              max="1"
+              step=".05"
+            />
+          </label>
+          <span>{prompt_strength}</span>
+        </div>
+
+        <div>
+          <label>
+            Width:
+            <select
+              value={width}
+              onChange={(e) => setRequestOption("width", e.target.value)}
+            >
+              {IMAGE_DIMENSIONS.map((dimension) => (
+                <option
+                  key={"width-option_" + dimension.value}
+                  value={dimension.value}
+                >
+                  {dimension.label}
+                </option>
+              ))}
+            </select>
+          </label>
+        </div>
+
+        <div>
+          <label>
+            Height:
+            <select
+              value={height}
+              onChange={(e) => setRequestOption("height", e.target.value)}
+            >
+              {IMAGE_DIMENSIONS.map((dimension) => (
+                <option
+                  key={"height-option_" + dimension.value}
+                  value={dimension.value}
+                >
+                  {dimension.label}
+                </option>
+              ))}
+            </select>
+          </label>
+        </div>
+      
+      </>}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx
new file mode 100644
index 00000000..4633e0a7
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx
@@ -0,0 +1,100 @@
+import React, {useState} from "react";
+import { useImageCreate } from "../../../../../store/imageCreateStore";
+
+export default function WorkflowSettings() {
+ 
+  const num_outputs = useImageCreate((state) =>
+    state.getValueForRequestKey("num_outputs")
+  );
+  const parallelCount = useImageCreate((state) => state.parallelCount);
+  const isUseAutoSave = useImageCreate((state) => state.isUseAutoSave());
+  const save_to_disk_path = useImageCreate((state) =>
+  state.getValueForRequestKey("save_to_disk_path")
+);
+  const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled());
+
+  const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+  const setParallelCount = useImageCreate((state) => state.setParallelCount);
+  const toggleUseAutoSave = useImageCreate((state) => state.toggleUseAutoSave);
+  const toggleSoundEnabled = useImageCreate(
+    (state) => state.toggleSoundEnabled
+  );
+
+
+  const [workflowOpen, setWorkflowOpen] = useState(true);
+
+  const toggleWorkflowOpen = () => {
+    setWorkflowOpen(!workflowOpen);
+  };
+
+  return (
+    <div>
+       <button
+        type="button"
+        className="panel-box-toggle-btn"
+        onClick={toggleWorkflowOpen}
+      >
+        <h4>Workflow Settings</h4>
+      </button>
+      {workflowOpen && <>
+        <div>
+          <label>
+            Number of images to make:{" "}
+            <input
+              type="number"
+              value={num_outputs}
+              onChange={(e) =>
+                setRequestOption("num_outputs", parseInt(e.target.value, 10))
+              }
+              size={4}
+            />
+          </label>
+        </div>
+        <div>
+          <label>
+            Generate in parallel:
+            <input
+              type="number"
+              value={parallelCount}
+              onChange={(e) => setParallelCount(parseInt(e.target.value, 10))}
+              size={4}
+            />
+          </label>
+        </div>
+        <div>
+          <label>
+            <input
+              checked={isUseAutoSave}
+              onChange={(e) => toggleUseAutoSave()}
+              type="checkbox"
+            />
+            Automatically save to{" "}
+          </label>
+          <label>
+            <input
+              value={save_to_disk_path}
+              onChange={(e) =>
+                setRequestOption("save_to_disk_path", e.target.value)
+              }
+              size={40}
+              disabled={!isUseAutoSave}
+            />
+            <span className="visually-hidden">
+              Path on disk where images will be saved
+            </span>
+          </label>
+        </div>
+        <div>
+          <label>
+            <input
+              checked={isSoundEnabled}
+              onChange={(e) => toggleSoundEnabled()}
+              type="checkbox"
+            />
+            Play sound on task completion
+          </label>
+        </div>
+      </>}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx
index d07e7f94..18fa4522 100644
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx
@@ -64,7 +64,6 @@ export default function SeedImage(_props: any) {
         {init_image && (
           <>
             <img src={init_image} width="100" height="100" />
-
             <button className={XButton} onClick={_handleClearImage}>
               X
             </button>
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts
index da211031..c4ae4a45 100644
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts
@@ -1,8 +1,8 @@
-import { style } from "@vanilla-extract/css";
+import { style } from '@vanilla-extract/css';
 
 export const CreationPaneMain = style({
-  position: "relative",
-  width: "100%",
-  height: "100%",
-  padding: "0 10px",
-});
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  padding:'0 10px',
+});
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx
index 7b7ebb18..bfdfa2c5 100644
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx
@@ -15,11 +15,8 @@ export default function CreationPanel() {
   return (
     <div className={CreationPaneMain}>
       <BasicCreation></BasicCreation>
-
-      <div className="advanced-create">
-        <AdvancedSettings></AdvancedSettings>
-        <ImageModifiers></ImageModifiers>
-      </div>
+      <AdvancedSettings></AdvancedSettings>
+      <ImageModifiers></ImageModifiers>
     </div>
   );
 }
diff --git a/ui/frontend/build_src/src/components/organisms/footerDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/footerDisplay/index.tsx
index 6e78b3fd..2519648f 100644
--- a/ui/frontend/build_src/src/components/organisms/footerDisplay/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/footerDisplay/index.tsx
@@ -2,13 +2,15 @@ import React from "react";
 
 import "./footerDisplay.css";
 
+import { API_URL } from "../../../api";
+
 export default function FooterDisplay() {
   return (
     <div id="footer" className="panel-box">
       <p>
         If you found this project useful and want to help keep it alive, please{" "}
         <a href="https://ko-fi.com/cmdr2_stablediffusion_ui" target="_blank">
-          <img src="./kofi.png" id="coffeeButton" />
+          <img src={`${API_URL}/kofi.png`} id="coffeeButton" />
         </a>{" "}
         to help cover the cost of development and maintenance! Thank you for
         your support!