From a2a13d9334bc6e0a81b83cf51c21fc85cc90f6ac Mon Sep 17 00:00:00 2001
From: Juan David Arias <juasda96@gmail.com>
Date: Sat, 26 Aug 2023 11:51:08 -0500
Subject: [PATCH] feat: list the models in the imagine sidenav (#107)

* disnplay models in side nav

* styles: add open and close animation to the accordion component

* reorganize imagine settings
* split inputs into base settings and model settings
* fix overflow-x when showing input info bug

* styles: display imagine image inputs before the prompt input on mobile

* show the morpheus brand in the navbar on mobile

* feat: standardize the ipainting image sizes

* feat: display the imagine menu inside a modal on mobile

* fix responsive problem with image inputs width
---
 .../ImageGallery/ImageGallery.module.scss     |   4 +
 .../ImagineBase/ImagineBase.module.scss       |  42 +--
 .../components/ImagineBase/ImagineBase.tsx    |  59 ++--
 .../ImagineImageInput.module.scss}            | 109 ++++---
 .../ImagineImageInput.tsx}                    |  50 ++-
 .../ImagineInput/ImagineInput.module.scss     |   4 +-
 .../ImagineMenu/ImagineMenu.module.scss       |  99 +++---
 .../components/ImagineMenu/ImagineMenu.tsx    | 301 +++++++++++++-----
 .../ImagineSettings.module.scss               |   8 +-
 .../ImagineSettings/ImagineSettings.tsx       | 229 ++++++-------
 .../MaskPaintingCanvas/MaskPaintingCanvas.tsx |  27 +-
 .../components/Navbar/Navbar.module.scss      |   1 +
 morpheus-client/components/Navbar/Navbar.tsx  |  42 ++-
 .../OpenSource/OpenSource.module.scss         |   3 +-
 .../atoms/accordion/Accordion.module.scss     |  42 +++
 .../components/atoms/accordion/Accordion.tsx  |  36 +++
 .../components/icons/arrowDown.tsx            |  17 +
 .../components/icons/arrowRight.tsx           |  17 +
 morpheus-client/context/CNContext.tsx         |   2 +-
 morpheus-client/context/ImagineContext.tsx    |   1 +
 morpheus-client/context/ModelsContext.tsx     | 149 +++++++++
 morpheus-client/context/SDContext.tsx         |  35 +-
 morpheus-client/excalidraw/css/app.scss       |   4 +
 morpheus-client/models/models.ts              |   4 +-
 morpheus-client/pages/_app.tsx                |  21 +-
 morpheus-client/utils/images.ts               |   6 +-
 .../scripts/models/models-info.yaml           |   4 +-
 27 files changed, 885 insertions(+), 431 deletions(-)
 rename morpheus-client/components/{ImageDraggable/ImageDraggable.module.scss => ImagineImageInput/ImagineImageInput.module.scss} (69%)
 rename morpheus-client/components/{ImageDraggable/ImageDraggable.tsx => ImagineImageInput/ImagineImageInput.tsx} (80%)
 create mode 100644 morpheus-client/components/atoms/accordion/Accordion.module.scss
 create mode 100644 morpheus-client/components/atoms/accordion/Accordion.tsx
 create mode 100644 morpheus-client/components/icons/arrowDown.tsx
 create mode 100644 morpheus-client/components/icons/arrowRight.tsx
 create mode 100644 morpheus-client/context/ModelsContext.tsx

diff --git a/morpheus-client/components/ImageGallery/ImageGallery.module.scss b/morpheus-client/components/ImageGallery/ImageGallery.module.scss
index e58b667f..45844536 100644
--- a/morpheus-client/components/ImageGallery/ImageGallery.module.scss
+++ b/morpheus-client/components/ImageGallery/ImageGallery.module.scss
@@ -36,6 +36,10 @@
   min-height: 420px;
   flex: 1;
 
+  @include media.mobile {
+    min-height: auto;
+  }
+
   &.small {
     height: 300px;
   }
diff --git a/morpheus-client/components/ImagineBase/ImagineBase.module.scss b/morpheus-client/components/ImagineBase/ImagineBase.module.scss
index e705ec06..cc9501de 100644
--- a/morpheus-client/components/ImagineBase/ImagineBase.module.scss
+++ b/morpheus-client/components/ImagineBase/ImagineBase.module.scss
@@ -1,16 +1,34 @@
 @use "styles/colors";
 @use "styles/media";
 
+.imageInputsContainer {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 24px;
+  flex: 1;
+  margin-bottom: 48px;
+
+  @include media.mobile {
+    margin-bottom: 16px;
+  }
+}
+
 .imagineBase {
   height: 100%;
   flex: 1 auto;
   display: flex;
   flex-direction: column;
   max-height: calc(100vh - 80px);
+  min-width: 300px;
+  max-width: 100vw;
 
   @include media.mobile {
     flex-direction: column;
     max-height: 100%;
+    background-color: colors.$background-secondary;
   }
 
   .imagesContent {
@@ -24,32 +42,18 @@
     border-bottom-left-radius: 24px;
     background-color: colors.$background-primary;
 
+    @include media.tablet {
+      border-bottom-left-radius: 0;
+    }
+
     @include media.mobile {
       flex-direction: column;
-      padding: 24px 24px 24px 24px;
+      padding: 48px 24px 48px 24px;
       height: 100%;
       max-height: 100%;
       border-bottom-left-radius: 0;
     }
 
-    .inputImage {
-      max-width: 100%;
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      flex: 1;
-      gap: 30px;
-      margin-bottom: 48px;
-
-      @include media.mobile {
-        flex: 0 1 50%;
-        flex-direction: column;
-        width: 100%;
-        max-width: 100%;
-        margin-right: 0;
-      }
-    }
-
     .results {
       width: 100%;
       height: 100%;
diff --git a/morpheus-client/components/ImagineBase/ImagineBase.tsx b/morpheus-client/components/ImagineBase/ImagineBase.tsx
index ed1b8d36..dc764762 100644
--- a/morpheus-client/components/ImagineBase/ImagineBase.tsx
+++ b/morpheus-client/components/ImagineBase/ImagineBase.tsx
@@ -1,6 +1,6 @@
-import React from "react";
+import React, { Fragment } from "react";
 import ImagineMenu from "../../components/ImagineMenu/ImagineMenu";
-import ImageDraggable from "@/components/ImageDraggable/ImageDraggable";
+import ImagineImageInput from "@/components/ImagineImageInput/ImagineImageInput";
 import ImageGallery from "@/components/ImageGallery/ImageGallery";
 import ImagineInput from "@/components/ImagineInput/ImagineInput";
 import ImagineLayout from "@/layout/ImagineLayout/ImagineLayout";
@@ -29,35 +29,42 @@ const ImagineBase = (props: MainContainerProps) => {
     />
   );
 
+  const ImageInputs = (props.showImageInput || props.showMaskInput) && (
+    <div className={styles.imageInputsContainer}>
+      {props.showImageInput && (
+        <ImagineImageInput
+          label={"Base Image"}
+          imageFile={img2imgFile}
+          setImageFile={setImg2imgFile}
+          showEditImage={props.showMaskInput}
+          showPaintImageLink={true}
+        />
+      )}
+      {props.showMaskInput && (
+        <ImagineImageInput
+          label={"Mask image"}
+          imageFile={maskFile}
+          setImageFile={setMaskFile}
+          icon={<UploadMaskIcon />}
+          showPaintMask={img2imgFile !== null}
+        />
+      )}
+    </div>
+  );
+
   return (
     <ImagineLayout>
       <main className={styles.imagineBase}>
-        {isMobile && <ImagineMenu />}
-        {isMobile && ImagineInputInstance}
+        {isMobile && (
+          <Fragment>
+            <ImagineMenu />
+            {ImageInputs}
+            {ImagineInputInstance}
+          </Fragment>
+        )}
 
         <div className={styles.imagesContent}>
-          {(props.showImageInput || props.showMaskInput) && (
-            <div className={styles.inputImage}>
-              {props.showImageInput && (
-                <ImageDraggable
-                  label={"Base Image"}
-                  imageFile={img2imgFile}
-                  setImageFile={setImg2imgFile}
-                  showEditImage={props.showMaskInput}
-                  showPaintImageLink={true}
-                />
-              )}
-              {props.showMaskInput && (
-                <ImageDraggable
-                  label={"Mask image"}
-                  imageFile={maskFile}
-                  setImageFile={setMaskFile}
-                  icon={<UploadMaskIcon />}
-                  showPaintMask={img2imgFile !== null}
-                />
-              )}
-            </div>
-          )}
+          {!isMobile && ImageInputs}
 
           <div className={styles.results}>
             <ImageGallery />
diff --git a/morpheus-client/components/ImageDraggable/ImageDraggable.module.scss b/morpheus-client/components/ImagineImageInput/ImagineImageInput.module.scss
similarity index 69%
rename from morpheus-client/components/ImageDraggable/ImageDraggable.module.scss
rename to morpheus-client/components/ImagineImageInput/ImagineImageInput.module.scss
index 3740f27a..c53edddd 100644
--- a/morpheus-client/components/ImageDraggable/ImageDraggable.module.scss
+++ b/morpheus-client/components/ImagineImageInput/ImagineImageInput.module.scss
@@ -1,11 +1,31 @@
 @use "styles/colors";
 @use "styles/media";
 
-.imageDraggable {
+.imagineImageInput {
+  min-width: 244px;
   display: flex;
   flex-direction: column;
   gap: 12px;
-  min-width: 244px;
+
+  @include media.tablet {
+    min-width: auto;
+  }
+
+  @include media.mobile {
+    padding: 0 24px;
+    min-width: auto;
+    width: auto;
+    flex: 1;
+  }
+
+  @include media.xsmall {
+    max-width: 100%;
+  }
+
+  .label {
+    z-index: 9;
+    max-width: 250px;
+  }
 
   .formContainer {
     width: 100%;
@@ -23,21 +43,11 @@
     @include media.mobile {
       width: 100%;
       height: auto;
-      flex-direction: column;
-      padding: 16px;
-    }
-
-    .separator {
-      display: none;
-      width: 100%;
-      border-bottom: 5px;
-      border-style: solid;
-      margin: 24px 0;
-      border-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100' fill='none' rx='8' ry='8' stroke='%23312E47FF' stroke-width='4' stroke-dasharray='10%2c 10' stroke-dashoffset='53' stroke-linecap='round'/%3e%3c/svg%3e") 30 round;
-
-      @include media.mobile {
-        display: block;
-      }
+      background-image: none;
+      justify-content: flex-start;
+      align-items: flex-start;
+      padding: 0;
+      gap: 24px;
     }
 
     .verticalSeparator {
@@ -53,7 +63,13 @@
         top: 0;
         bottom: 0;
         width: 2px;
-        background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 10px, #312E47FF 10px, #312E47FF 22px);
+        background-image: repeating-linear-gradient(
+                        to bottom, transparent 0, transparent 10px, #312E47FF 10px, #312E47FF 22px
+        );
+      }
+
+      @include media.tablet {
+        margin: 0 8px;
       }
 
       @include media.mobile {
@@ -62,29 +78,36 @@
     }
   }
 
-  .paintInfo {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding-bottom: 48px;
-    position: relative;
-
-    @include media.mobile {
-      padding-bottom: 0;
-    }
-  }
-
-  .formFileUpload {
+  .formInputItem {
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    min-width: 150px;
+    max-width: 170px;
+
+    @include media.tablet {
+      span {
+        display: none;
+      }
+    }
 
     @include media.mobile {
-      width: 100%;
-      height: auto;
-      padding: 0;
+      width: 160px;
+      height: 160px;
+      padding: 5px;
+      border-radius: 8px;
+      border: 1px solid colors.$background-border;
+      background-color: colors.$background-primary;
+
+      a {
+        font-size: 18px !important;
+      }
+
+      span {
+        display: none;
+      }
     }
 
     .inputFileUpload {
@@ -111,10 +134,6 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-
-      a {
-        text-decoration-line: underline;
-      }
     }
 
     .uploadButton:hover {
@@ -136,7 +155,9 @@
 
 .selectedFile {
   width: 100%;
-  min-height: 294px;
+  height: auto;
+  max-width: 300px;
+  max-height: 400px;
   position: relative;
   background-color: colors.$background-secondary;
   border-radius: 8px;
@@ -144,6 +165,13 @@
   flex-direction: column;
   padding: 8px;
 
+  @include media.mobile {
+    max-width: 100%;
+    max-height: initial;
+    margin-top: -40px;
+    padding: 0;
+  }
+
   .header {
     height: auto;
     display: flex;
@@ -159,9 +187,6 @@
   }
 
   img {
-    width: auto;
-    max-width: 100%;
-    max-height: 100%;
     border-radius: 8px;
     object-fit: contain;
     box-shadow: colors.$box-shadow;
diff --git a/morpheus-client/components/ImageDraggable/ImageDraggable.tsx b/morpheus-client/components/ImagineImageInput/ImagineImageInput.tsx
similarity index 80%
rename from morpheus-client/components/ImageDraggable/ImageDraggable.tsx
rename to morpheus-client/components/ImagineImageInput/ImagineImageInput.tsx
index 17b3526d..d5d448bd 100644
--- a/morpheus-client/components/ImageDraggable/ImageDraggable.tsx
+++ b/morpheus-client/components/ImagineImageInput/ImagineImageInput.tsx
@@ -7,7 +7,6 @@ import React, {
   useState,
 } from "react";
 
-import AppImage from "@/components/AppImage/AppImage";
 import Modal from "../Modal/Modal";
 import MaskPaintingCanvas from "../MaskPaintingCanvas/MaskPaintingCanvas";
 import { CloseIcon } from "../icons/close";
@@ -15,7 +14,7 @@ import { UploadImageIcon } from "../icons/uploadImage";
 import { PaintImageIcon } from "../icons/paintImage";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 import { MOBILE_SCREEN_WIDTH } from "@/utils/constants";
-import styles from "./ImageDraggable.module.scss";
+import styles from "./ImagineImageInput.module.scss";
 import Link from "next/link";
 
 interface DragDropFileProps {
@@ -31,28 +30,28 @@ interface DragDropFileProps {
   id?: string;
 }
 
-const DragDropFile = (props: DragDropFileProps) => {
+const ImagineImageInput = (props: DragDropFileProps) => {
   const inputRef = useRef<any>(null);
   const { width } = useWindowDimensions();
   const isMobile = width < MOBILE_SCREEN_WIDTH;
 
   const [dragActive, setDragActive] = useState(false);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
-  const [imgSrc, setImgSrc] = useState<any>(null);
+  const [imageSrc, setImageSrc] = useState<any>(null);
   const [showEditModal, setShowEditModal] = useState(false);
 
   useEffect(() => {
     if (selectedFile) {
-      setImgSrc(URL.createObjectURL(selectedFile));
+      setImageSrc(URL.createObjectURL(selectedFile));
       props.setImageFile(selectedFile);
     }
   }, [selectedFile]);
 
   useEffect(() => {
     if (props.imageFile) {
-      setImgSrc(URL.createObjectURL(props.imageFile));
+      setImageSrc(URL.createObjectURL(props.imageFile));
     } else {
-      setImgSrc(null);
+      setImageSrc(null);
     }
   }, [props.imageFile]);
 
@@ -89,7 +88,7 @@ const DragDropFile = (props: DragDropFileProps) => {
   };
 
   const clearImage = () => {
-    setImgSrc(null);
+    setImageSrc(null);
     setSelectedFile(null);
     props.setImageFile(null);
   };
@@ -97,7 +96,7 @@ const DragDropFile = (props: DragDropFileProps) => {
   const ImageInputForm = (
     <div className={styles.formContainer}>
       <form
-        className={styles.formFileUpload}
+        className={styles.formInputItem}
         onDragEnter={handleDrag}
         onSubmit={(e) => e.preventDefault()}
         style={props.styles}
@@ -117,11 +116,11 @@ const DragDropFile = (props: DragDropFileProps) => {
         >
           <div className={styles.dragInfo}>
             {props.icon ? props.icon : <UploadImageIcon />}
-            <a className="body-1 main pointer" onClick={onButtonClick}>
-              Click to upload
+            <a className="body-1 main underline pointer" onClick={onButtonClick}>
+              {isMobile ? "Upload" : "Upload an image"}
             </a>
-            <span className="body-1 white">or drag and drop</span>
-            <p className="body-2 secondary">Maximum file size 50 MB</p>
+            <span className="body-2 white">or drag and drop</span>
+            <span className="caption-1 secondary">Maximum file size 50 MB</span>
           </div>
         </label>
 
@@ -138,29 +137,28 @@ const DragDropFile = (props: DragDropFileProps) => {
 
       {props.showPaintImageLink || props.showPaintMask ? (
         <Fragment>
-          <div className={styles.separator} />
           <div className={styles.verticalSeparator} />
         </Fragment>
       ) : null}
 
       {props.showPaintImageLink && (
-        <div className={styles.paintInfo}>
+        <div className={styles.formInputItem}>
           <PaintImageIcon />
           <Link className="underline body-1 main" href={"/paint"}>
-            Paint an image
+            {isMobile ? "Paint" : "Paint an image"}
           </Link>
         </div>
       )}
 
       {props.showPaintMask && (
-        <div className={styles.paintInfo}>
+        <div className={styles.formInputItem}>
           <PaintImageIcon />
-          <span
+          <a
             className="underline body-1 main pointer"
             onClick={() => setShowEditModal(true)}
           >
-            Paint a mask
-          </span>
+            {isMobile ? "Paint" : "Paint an image"}
+          </a>
         </div>
       )}
     </div>
@@ -174,20 +172,20 @@ const DragDropFile = (props: DragDropFileProps) => {
         </span>
       </div>
 
-      <AppImage src={imgSrc} alt={"Base image"} />
+      <img src={imageSrc} alt={props.label} />
     </div>
   );
 
   return (
     <Fragment>
-      <div className={styles.imageDraggable}>
+      <div className={styles.imagineImageInput}>
         {props.label && (
-          <label htmlFor={props.id} className="base-2 white">
+          <span className={`${styles.label} base-2 white`}>
             {props.label}
-          </label>
+          </span>
         )}
 
-        {imgSrc ? ImageResultDetail : ImageInputForm}
+        {imageSrc ? ImageResultDetail : ImageInputForm}
       </div>
 
       <Modal
@@ -206,4 +204,4 @@ const DragDropFile = (props: DragDropFileProps) => {
   );
 };
 
-export default DragDropFile;
+export default ImagineImageInput;
diff --git a/morpheus-client/components/ImagineInput/ImagineInput.module.scss b/morpheus-client/components/ImagineInput/ImagineInput.module.scss
index c0849605..97d868b0 100644
--- a/morpheus-client/components/ImagineInput/ImagineInput.module.scss
+++ b/morpheus-client/components/ImagineInput/ImagineInput.module.scss
@@ -17,7 +17,9 @@
     width: 100%;
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
     margin-top: 24px;
+    gap: 16px;
 
     @include media.mobile {
       height: auto;
@@ -28,6 +30,7 @@
 
     .inputText {
       flex: 1;
+      min-width: 300px;
     }
 
     .ImagineActions {
@@ -35,7 +38,6 @@
       flex-direction: row;
       justify-content: space-between;
       align-items: flex-end;
-      margin-left: 8px;
 
       @include media.mobile {
         gap: 12px;
diff --git a/morpheus-client/components/ImagineMenu/ImagineMenu.module.scss b/morpheus-client/components/ImagineMenu/ImagineMenu.module.scss
index 4f95f0ae..8d67e1c1 100644
--- a/morpheus-client/components/ImagineMenu/ImagineMenu.module.scss
+++ b/morpheus-client/components/ImagineMenu/ImagineMenu.module.scss
@@ -1,46 +1,25 @@
 @use "styles/colors";
 @use "styles/media";
 
-%item {
-  width: 100%;
-  height: 64px;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  padding: 0 24px;
-
-  &:hover {
-    background-color: colors.$background-primary-3;
-    border-radius: 8px;
-  }
-
-  &.active {
-    background-color: colors.$background-primary-3;
-    border-radius: 8px;
-  }
+.mobileButton {
+  margin: 96px 24px 24px 24px;
+  width: calc(100% - 48px);
+}
 
-  @include media.mobile {
-    padding: 8px;
-    justify-content: center;
+.imagineMenu {
+  flex: 0 0 300px;
+  background-color: colors.$background-secondary;
+  max-height: 100%;
+  overflow-y: auto;
+  padding: 24px;
 
-    p {
-      display: none;
-    }
+  &::-webkit-scrollbar {
+    display: none;
   }
 
-
-  .icon {
-    margin-right: 12px;
-
-    @include media.mobile {
-      margin-right: 0;
-    }
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
   }
-}
-
-.imagineMenu {
-  flex: 0 0 250px;
-  background-color: colors.$background-secondary;
 
   @include media.mobile {
     flex: 1;
@@ -48,6 +27,7 @@
     max-width: 100vw;
     height: auto;
     margin: 94px 12px 0 12px;
+    padding: 0;
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -59,7 +39,6 @@
   .brandContainer {
     width: 100%;
     height: auto;
-    padding: 24px;
 
     @include media.mobile {
       display: none;
@@ -67,34 +46,44 @@
   }
 
   p[class^="base-1 white"] {
-    margin: 0 24px 24px 24px;
+    margin: 24px 0;
 
     @include media.mobile {
       display: none;
     }
   }
+}
 
-  .menuIcon {
-    @extend %item;
-    margin-top: 8px;
-    margin-bottom: 32px;
+.menuItem {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  margin-top: 16px;
+  margin-left: 24px;
+  font-weight: bold;
 
-    &:hover {
-      background-color: transparent;
-    }
+  &:hover {
+    color: colors.$white-color !important;
+  }
 
-    @include media.mobile {
-      display: none;
-    }
+  &.active {
+    color: colors.$main-color !important;
+  }
 
-    .closeTitle {
-      width: 100%;
-      display: flex;
-      align-items: center;
-    }
+  @include media.mobile {
+    flex-direction: row;
+    padding: 8px;
   }
 
-  .menuItem {
-    @extend %item;
+
+  .icon {
+    margin-right: 8px;
+
+    @include media.mobile {
+      margin-right: 16px;
+    }
   }
-}
+}
\ No newline at end of file
diff --git a/morpheus-client/components/ImagineMenu/ImagineMenu.tsx b/morpheus-client/components/ImagineMenu/ImagineMenu.tsx
index 9cb410a4..d45ba88a 100644
--- a/morpheus-client/components/ImagineMenu/ImagineMenu.tsx
+++ b/morpheus-client/components/ImagineMenu/ImagineMenu.tsx
@@ -1,8 +1,10 @@
-import { ReactNode } from "react";
+import { Fragment, ReactNode, useEffect, useState } from "react";
 import { useRouter } from "next/router";
 
 import Brand from "../Typography/Brand/Brand";
 import { SDOption } from "@/context/SDContext";
+import { ModelFeature, useModels } from "@/context/ModelsContext";
+import { Accordion } from "@/components/atoms/accordion/Accordion";
 import { Text2ImgIcon } from "../icons/text2img";
 import { Img2ImgIcon } from "../icons/img2img";
 import { ControlNetIcon } from "../icons/controlnet";
@@ -11,6 +13,8 @@ import { InpaintingIcon } from "../icons/inpainting";
 import { OpenSource } from "@/components/OpenSource/OpenSource";
 import { EnhanceIcon } from "../icons/enhance";
 import AppTooltip from "@/components/Tooltip/AppTooltip";
+import ButtonPrimary from "@/components/buttons/ButtonPrimary/ButtonPrimary";
+import Modal from "@/components/Modal/Modal";
 import {
   ControlNetDescription,
   Img2ImgDescription,
@@ -20,20 +24,223 @@ import {
   UpscalingDescription,
 } from "@/components/ImagineActionsDescription/ImagineActionsDescription";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
+import { Model } from "@/models/models";
 import { MOBILE_SCREEN_WIDTH } from "@/utils/constants";
 import styles from "./ImagineMenu.module.scss";
 
-interface LongItemProps {
+const ImagineMenu = () => {
+  const router = useRouter();
+  const { width } = useWindowDimensions();
+  const {
+    models,
+    selectedModel,
+    activeLink,
+    setActiveLink,
+    findValidModelForFeature,
+  } = useModels();
+  const imagineOptionPath = router.pathname.split("/").pop();
+  const isMobile = width < MOBILE_SCREEN_WIDTH;
+  const [openItem, setOpenItem] = useState<string>();
+  const [showModelsModal, setShowModelsModal] = useState(false);
+
+  useEffect(() => {
+    if (imagineOptionPath) {
+      if (!selectedModel.features.includes(imagineOptionPath)) {
+        const validModel = findValidModelForFeature(
+          imagineOptionPath as ModelFeature
+        );
+
+        setActiveLink({
+          model: validModel,
+          feature: imagineOptionPath as ModelFeature,
+        });
+      } else {
+        setActiveLink({
+          model: selectedModel,
+          feature: imagineOptionPath as ModelFeature,
+        });
+      }
+    }
+  }, []);
+
+  const ModelsAccordion = models.map((model: Model) => (
+    <Accordion
+      key={model.source}
+      itemId={model.source}
+      title={model.name}
+      setOpenedItem={setOpenItem}
+      isOpen={
+        openItem === model.source || activeLink.model.source === model.source
+      }
+    >
+      <ModelMenuFeatures model={model} />
+    </Accordion>
+  ));
+
+  return isMobile ? (
+    <Fragment>
+      <ButtonPrimary
+        text={`${activeLink.model.name} / ${activeLink.feature}`}
+        onClick={() => setShowModelsModal(true)}
+        loading={false}
+        className={styles.mobileButton}
+      />
+      <Modal
+        width={"610px"}
+        height={"auto"}
+        isOpen={showModelsModal}
+        toggleModal={() => setShowModelsModal(!showModelsModal)}
+      >
+        {ModelsAccordion}
+      </Modal>
+    </Fragment>
+  ) : (
+    <div className={styles.imagineMenu}>
+      <div className={styles.brandContainer}>
+        <Brand />
+      </div>
+
+      <p className="base-1 white">Models</p>
+      {ModelsAccordion}
+
+      <OpenSource />
+    </div>
+  );
+};
+
+interface ImagineMenuFeaturesProps {
+  model: Model;
+}
+
+const ModelMenuFeatures = (props: ImagineMenuFeaturesProps) => {
+  const { activeLink } = useModels();
+
+  const getItemActive = (option: SDOption | string) => {
+    return (
+      activeLink.model.source === props.model.source &&
+      activeLink.feature === option
+    );
+  };
+
+  const getIconColor = (option: SDOption | string) => {
+    return getItemActive(option) ? "#B3005E" : "#6D6D94";
+  };
+
+  return (
+    <Fragment>
+      {props.model.text2img && (
+        <ImagineMenuItem
+          title={"Text To Image"}
+          description={<Text2ImgDescription className="body-2 white" />}
+          active={getItemActive(SDOption.Text2Image)}
+          icon={
+            <Text2ImgIcon
+              height={"18px"}
+              width={"18px"}
+              color={getIconColor(SDOption.Text2Image)}
+            />
+          }
+          option={SDOption.Text2Image}
+          model={props.model}
+        />
+      )}
+      {props.model.img2img && (
+        <ImagineMenuItem
+          title={"Image to Image"}
+          description={<Img2ImgDescription className="body-2 white" />}
+          active={getItemActive(SDOption.Image2Image)}
+          icon={
+            <Img2ImgIcon
+              height={"18px"}
+              width={"18px"}
+              color={getIconColor(SDOption.Image2Image)}
+            />
+          }
+          option={SDOption.Image2Image}
+          model={props.model}
+        />
+      )}
+      {props.model.pix2pix && (
+        <ImagineMenuItem
+          title={"Pix2Pix"}
+          description={<Pix2PixDescription className="body-2 white" />}
+          active={getItemActive(SDOption.Pix2Pix)}
+          icon={
+            <Pix2PixIcon
+              height={"18px"}
+              width={"18px"}
+              color={getIconColor(SDOption.Pix2Pix)}
+            />
+          }
+          option={SDOption.Pix2Pix}
+          model={props.model}
+        />
+      )}
+      {props.model.controlnet && (
+        <ImagineMenuItem
+          title={"ControlNet"}
+          description={<ControlNetDescription className="body-2 white" />}
+          active={getItemActive(SDOption.ControlNet)}
+          icon={
+            <ControlNetIcon
+              height={"18px"}
+              width={"18px"}
+              color={getIconColor(SDOption.ControlNet)}
+            />
+          }
+          option={SDOption.ControlNet}
+          model={props.model}
+        />
+      )}
+      {props.model.inpainting && (
+        <ImagineMenuItem
+          title={"In-painting"}
+          description={<InpaintingDescription className="body-2 white" />}
+          active={getItemActive(SDOption.Inpainting)}
+          icon={
+            <InpaintingIcon
+              height={"18px"}
+              width={"18px"}
+              color={getIconColor(SDOption.Inpainting)}
+            />
+          }
+          option={SDOption.Inpainting}
+          model={props.model}
+        />
+      )}
+      {props.model.upscaling && (
+        <ImagineMenuItem
+          title={"Upscaling"}
+          description={<UpscalingDescription className="body-2 white" />}
+          active={getItemActive(SDOption.Upscaling)}
+          icon={
+            <EnhanceIcon
+              width={"18px"}
+              height={"18px"}
+              color={getIconColor(SDOption.Upscaling)}
+            />
+          }
+          option={SDOption.Upscaling}
+          model={props.model}
+        />
+      )}
+    </Fragment>
+  );
+};
+
+interface ImagineMenuItemProps {
   active?: boolean;
   icon: ReactNode;
   title: string;
   description: ReactNode;
   option: string;
+  model: Model;
 }
 
-const ImagineMenuItem = (props: LongItemProps) => {
+const ImagineMenuItem = (props: ImagineMenuItemProps) => {
   const router = useRouter();
   const { width } = useWindowDimensions();
+  const { setActiveLink } = useModels();
   const isMobile = width < MOBILE_SCREEN_WIDTH;
 
   const getItemStyles = () => {
@@ -41,100 +248,28 @@ const ImagineMenuItem = (props: LongItemProps) => {
   };
 
   const handleOnClick = () => {
-    router.push(`/imagine/${props.option}`);
+    setActiveLink({
+      model: props.model,
+      feature: props.option as ModelFeature,
+    });
+    router.push(props.option);
   };
 
   return (
     <AppTooltip
       title={props.title}
-      content={props.description}
+      content={isMobile ? null : props.description}
       direction={isMobile ? "bottom" : "right"}
     >
       <div className={getItemStyles()} onClick={handleOnClick}>
         <span className={styles.icon}>{props.icon}</span>
 
-        <p className={`base-1 ${props.active ? "primary" : "secondary"}`}>
+        <span className={`base-1 ${props.active ? "main" : "secondary"}`}>
           {props.title}
-        </p>
+        </span>
       </div>
     </AppTooltip>
   );
 };
 
-const ImagineMenu = () => {
-  const router = useRouter();
-  const currentPath = router.pathname;
-
-  const getItemActive = (option: SDOption | string) => {
-    const lastPath = currentPath.split("/").pop();
-    return lastPath === option;
-  };
-
-  const getIconColor = (option: SDOption | string) => {
-    const isActive = getItemActive(option);
-    return isActive ? "#ffffff" : "#6D6D94";
-  };
-
-  return (
-    <div className={styles.imagineMenu}>
-      <div className={styles.brandContainer}>
-        <Brand />
-      </div>
-
-      <p className="base-1 white">Models</p>
-
-      <ImagineMenuItem
-        title={"Text To Image"}
-        description={<Text2ImgDescription className="body-2 white" />}
-        active={getItemActive(SDOption.Text2Image)}
-        icon={<Text2ImgIcon color={getIconColor(SDOption.Text2Image)} />}
-        option={SDOption.Text2Image}
-      />
-      <ImagineMenuItem
-        title={"Image to Image"}
-        description={<Img2ImgDescription className="body-2 white" />}
-        active={getItemActive(SDOption.Image2Image)}
-        icon={<Img2ImgIcon color={getIconColor(SDOption.Image2Image)} />}
-        option={SDOption.Image2Image}
-      />
-      <ImagineMenuItem
-        title={"Pix2Pix"}
-        description={<Pix2PixDescription className="body-2 white" />}
-        active={getItemActive(SDOption.Pix2Pix)}
-        icon={<Pix2PixIcon color={getIconColor(SDOption.Pix2Pix)} />}
-        option={SDOption.Pix2Pix}
-      />
-      <ImagineMenuItem
-        title={"ControlNet"}
-        description={<ControlNetDescription className="body-2 white" />}
-        active={getItemActive(SDOption.ControlNet)}
-        icon={<ControlNetIcon color={getIconColor(SDOption.ControlNet)} />}
-        option={SDOption.ControlNet}
-      />
-      <ImagineMenuItem
-        title={"In-painting"}
-        description={<InpaintingDescription className="body-2 white" />}
-        active={getItemActive(SDOption.Inpainting)}
-        icon={<InpaintingIcon color={getIconColor(SDOption.Inpainting)} />}
-        option={SDOption.Inpainting}
-      />
-      <ImagineMenuItem
-        title={"Upscaling"}
-        description={<UpscalingDescription className="body-2 white" />}
-        active={getItemActive(SDOption.Upscaling)}
-        icon={
-          <EnhanceIcon
-            color={getIconColor(SDOption.Upscaling)}
-            width={"24"}
-            height={"24"}
-          />
-        }
-        option={SDOption.Upscaling}
-      />
-
-      <OpenSource />
-    </div>
-  );
-};
-
 export default ImagineMenu;
diff --git a/morpheus-client/components/ImagineSettings/ImagineSettings.module.scss b/morpheus-client/components/ImagineSettings/ImagineSettings.module.scss
index eb241bf6..ce401373 100644
--- a/morpheus-client/components/ImagineSettings/ImagineSettings.module.scss
+++ b/morpheus-client/components/ImagineSettings/ImagineSettings.module.scss
@@ -22,11 +22,11 @@
       display: none;
       position: absolute;
       bottom: 28px;
-      left: 144px;
-      width: 300px;
-      max-width: 300px;
+      left: 50px;
+      width: 280px;
+      max-width: 280px;
       height: auto;
-      max-height: 200px;
+      max-height: 300px;
       padding: 8px;
       transform: translateX(-50%);
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
diff --git a/morpheus-client/components/ImagineSettings/ImagineSettings.tsx b/morpheus-client/components/ImagineSettings/ImagineSettings.tsx
index d99362fc..49bd3422 100644
--- a/morpheus-client/components/ImagineSettings/ImagineSettings.tsx
+++ b/morpheus-client/components/ImagineSettings/ImagineSettings.tsx
@@ -6,7 +6,8 @@ import InputNumber from "../Inputs/InputNumber/InputNumber";
 import InputSeed from "../Inputs/InputSeed/InputSeed";
 import InputSelect from "../Inputs/InputSelect/InputSelect";
 import InputTextArea from "../Inputs/InputTextArea/InputTextArea";
-import ModelSelect from "../ModelSelect/ModelSelect";
+import InputEmbedding from "@/components/Inputs/InputEmbedding/InputEmbedding";
+import InputLora from "@/components/Inputs/InputLora/InputLora";
 import SamplerSelect from "../SamplerSelect/SamplerSelect";
 import AppTooltip from "@/components/Tooltip/AppTooltip";
 import { CloseIcon } from "../icons/close";
@@ -14,8 +15,6 @@ import { InfoIcon } from "../icons/info";
 import { SettingsIcon } from "../icons/settings";
 import { useShowSettings } from "@/hooks/useShowSettings";
 import styles from "./ImagineSettings.module.scss";
-import InputLora from "../Inputs/InputLora/InputLora";
-import InputEmbedding from "../Inputs/InputEmbedding/InputEmbedding";
 
 interface OptionState {
   title: string;
@@ -57,13 +56,51 @@ const ImagineSettings = () => {
     setAmount,
     negativePrompt,
     setNegativePrompt,
+    useLora,
     loraScale,
-    setLoraScale
+    setLoraScale,
   } = useDiffusion();
 
   const SettingsContent = (
     <div className={styles.settingsContainer}>
       <div className={styles.optionsContainer}>
+        <div className={styles.settingItemNegativePrompt}>
+          <OptionInfo
+            title={"Negative prompt"}
+            description={
+              "Describe what you don't want to see in the generated images."
+            }
+          />
+          <InputTextArea
+            id="textAreaNegativePrompt"
+            text={negativePrompt}
+            setText={setNegativePrompt}
+            isRequired={false}
+            placeholder={"Enter your negative prompt here."}
+            color={"white"}
+            numRows={5}
+            showCount={true}
+            disableGrammarly={true}
+          />
+        </div>
+
+        <div className={styles.settingItem}>
+          <OptionInfo
+            title={"Number of Images"}
+            description={
+              "How many images to create in a single run.  Higher values will take longer."
+            }
+          />
+
+          <InputNumber
+            id="inputNumberAmount"
+            minValue={1}
+            maxValue={4}
+            number={amount}
+            setNumber={setAmount}
+          />
+        </div>
+
         <div className={styles.settingItem}>
           <OptionInfo
             title={"Image Size"}
@@ -84,31 +121,6 @@ const ImagineSettings = () => {
           />
         </div>
 
-        <div className={styles.settingItem}>
-          <OptionInfo title={"Model"} description={"Select a model to use."} />
-          <ModelSelect />
-        </div>
-
-        {selectedOption === SDOption.ControlNet && (
-          <div className={styles.settingItem}>
-            <OptionInfo
-              title={"ControlNet Model"}
-              description={
-                "Select a ControlNet model to use. This only works with stable diffusion v1.5."
-              }
-            />
-            <ControlNetModelSelect />
-          </div>
-        )}
-
-        <div className={styles.settingItem}>
-          <OptionInfo
-            title={"Sampler"}
-            description={"Select a sampler to use."}
-          />
-          <SamplerSelect />
-        </div>
-
         <div className={styles.settingItem}>
           <OptionInfo
             title={"CFG Scale"}
@@ -128,6 +140,25 @@ const ImagineSettings = () => {
           />
         </div>
 
+        <div className={styles.settingItem}>
+          <OptionInfo
+            title={"Number of Steps"}
+            description={
+              "This parameter controls how many times the generated image is iteratively improved. " +
+              "Higher values are better quality but take longer, while very low values are faster but can produce " +
+              "less desirable results."
+            }
+          />
+
+          <InputNumber
+            id="inputNumberSteps"
+            minValue={0}
+            maxValue={150}
+            number={steps}
+            setNumber={setSteps}
+          />
+        </div>
+
         {(selectedOption === SDOption.Image2Image ||
           selectedOption === SDOption.ControlNet) && (
           <div className={styles.settingItem}>
@@ -151,42 +182,6 @@ const ImagineSettings = () => {
           </div>
         )}
 
-        <div className={styles.settingItem}>
-          <OptionInfo
-            title={"Number of Steps"}
-            description={
-              "This parameter controls how many times the generated image is iteratively improved. " +
-              "Higher values are better quality but take longer, while very low values are faster but can produce " +
-              "less desirable results."
-            }
-          />
-
-          <InputNumber
-            id="inputNumberSteps"
-            minValue={0}
-            maxValue={150}
-            number={steps}
-            setNumber={setSteps}
-          />
-        </div>
-
-        <div className={styles.settingItem}>
-          <OptionInfo
-            title={"Number of Images"}
-            description={
-              "How many images to create in a single run.  Higher values will take longer."
-            }
-          />
-
-          <InputNumber
-            id="inputNumberAmount"
-            minValue={1}
-            maxValue={4}
-            number={amount}
-            setNumber={setAmount}
-          />
-        </div>
-
         <div className={styles.settingItem}>
           <OptionInfo
             title={"Seed Generator"}
@@ -199,82 +194,90 @@ const ImagineSettings = () => {
 
           <InputSeed />
         </div>
+      </div>
 
-        {(selectedOption === SDOption.Text2Image || selectedOption === SDOption.Image2Image || 
-        selectedOption === SDOption.ControlNet) && (
+      <p className="headline-4 white my-10">Model settings</p>
+      <div className={styles.optionsContainer}>
+        {selectedOption === SDOption.ControlNet && (
           <div className={styles.settingItem}>
             <OptionInfo
-              title={"LoRA"}
+              title={"ControlNet Model"}
               description={
-                "Fill this textbox with wither the path \n of an existing LoRA from HuggingFace (ex: lora-library/dragon-ball-wufan) " +
-                "or from the url of a Civitai model (ex: https://civitai.com/models/48139/lowra). Make sure to include associated trigger words " +
-                "in the prompt."
+                "Select a ControlNet model to use. This only works with stable diffusion v1.5."
               }
             />
-
-            <InputLora />
+            <ControlNetModelSelect />
           </div>
         )}
 
-        {(selectedOption === SDOption.Text2Image || selectedOption === SDOption.Image2Image || 
-        selectedOption === SDOption.ControlNet) && (
+        <div className={styles.settingItem}>
+          <OptionInfo
+            title={"Sampler"}
+            description={"Select a sampler to use."}
+          />
+          <SamplerSelect />
+        </div>
+
+        {(selectedOption === SDOption.Text2Image ||
+          selectedOption === SDOption.Image2Image ||
+          selectedOption === SDOption.ControlNet) && (
           <div className={styles.settingItem}>
             <OptionInfo
-              title={"LoRA Scale"}
+              title={"LoRA"}
               description={
-                "A scale value of 0 is the same as not using your LoRA weights and you’re only using the base model " +
-                "weights, and a scale value of 1 means you’re only using the fully finetuned LoRA weights. Values " +
-                "between 0 and 1 interpolates between the two weights."
+                "Fill this textbox with wither the path \n of an existing LoRA from HuggingFace (ex: lora-library/dragon-ball-wufan) " +
+                "or from the url of a Civitai model (ex: https://civitai.com/models/48139/lowra). Make sure to include associated trigger words " +
+                "in the prompt."
               }
             />
 
-            <InputNumber
-              id="inputLoraScale"
-              number={loraScale}
-              setNumber={setLoraScale}
-              minValue={0}
-              maxValue={1}
-              step={0.01}
-              isRequired={true}
-            />
+            <InputLora />
           </div>
         )}
 
-        {(selectedOption === SDOption.Text2Image || selectedOption === SDOption.Image2Image || 
-        selectedOption === SDOption.ControlNet) && (
+        {useLora.value &&
+          (selectedOption === SDOption.Text2Image ||
+            selectedOption === SDOption.Image2Image ||
+            selectedOption === SDOption.ControlNet) && (
+            <div className={styles.settingItem}>
+              <OptionInfo
+                title={"LoRA Scale"}
+                description={
+                  "A scale value of 0 is the same as not using your LoRA weights and you’re only using the base model " +
+                  "weights, and a scale value of 1 means you’re only using the fully finetuned LoRA weights. Values " +
+                  "between 0 and 1 interpolates between the two weights."
+                }
+              />
+
+              <InputNumber
+                id="inputLoraScale"
+                number={loraScale}
+                setNumber={setLoraScale}
+                minValue={0}
+                maxValue={1}
+                step={0.01}
+                isRequired={true}
+              />
+            </div>
+          )}
+
+        {(selectedOption === SDOption.Text2Image ||
+          selectedOption === SDOption.Image2Image ||
+          selectedOption === SDOption.ControlNet) && (
           <div className={styles.settingItem}>
             <OptionInfo
               title={"TI Embedding"}
               description={
-                "Fill this textbox with wither the path \n of an existing textual inversion embedding from HuggingFace (ex: sd-concepts-library/cat-toy) " +
-                "or from the url of a Civitai model (ex: https://civitai.com/models/6841/adventure-diffusion). Make sure to include associated" +
-                " trigger words in the prompt."
+                "Fill this textbox with wither the path \n of an existing textual inversion embedding from " +
+                "HuggingFace (ex: sd-concepts-library/cat-toy) or from the url of a Civitai model " +
+                "(ex: https://civitai.com/models/6841/adventure-diffusion). Make sure to include associated " +
+                "trigger words in the prompt."
               }
             />
 
             <InputEmbedding />
           </div>
         )}
-
-        <div className={styles.settingItemNegativePrompt}>
-          <OptionInfo
-            title={"Negative prompt"}
-            description={
-              "Describe what you don't want to see in the generated images."
-            }
-          />
-          <InputTextArea
-            id="textAreaNegativePrompt"
-            text={negativePrompt}
-            setText={setNegativePrompt}
-            isRequired={false}
-            placeholder={"Enter your negative prompt here."}
-            color={"white"}
-            numRows={5}
-            showCount={true}
-            disableGrammarly={true}
-          />
-        </div>
       </div>
     </div>
   );
diff --git a/morpheus-client/components/MaskPaintingCanvas/MaskPaintingCanvas.tsx b/morpheus-client/components/MaskPaintingCanvas/MaskPaintingCanvas.tsx
index 03a34c8e..861c6a10 100644
--- a/morpheus-client/components/MaskPaintingCanvas/MaskPaintingCanvas.tsx
+++ b/morpheus-client/components/MaskPaintingCanvas/MaskPaintingCanvas.tsx
@@ -20,7 +20,7 @@ type MaskedCanvasProps = {
 };
 
 const MaskPaintingCanvas = (props: MaskedCanvasProps) => {
-  const { img2imgFile, maskFile, setMaskFile } = useImagine();
+  const { img2imgFile, setImg2imgFile, maskFile, setMaskFile } = useImagine();
 
   const imageCanvasRef = useRef<HTMLCanvasElement>(null);
   const drawingCanvasRef = useRef<HTMLCanvasElement>(null);
@@ -162,17 +162,28 @@ const MaskPaintingCanvas = (props: MaskedCanvasProps) => {
   };
 
   const handleCompleted = () => {
-    const canvas = drawingCanvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
+    const drawingCanvas = drawingCanvasRef.current;
+    const imageCanvas = imageCanvasRef.current;
+    if (!drawingCanvas || !imageCanvas) return;
+
+    const drawingCtx = drawingCanvas.getContext("2d");
+    if (!drawingCtx) return;
 
-    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const imageData = drawingCtx.getImageData(
+      0,
+      0,
+      drawingCanvas.width,
+      drawingCanvas.height
+    );
     const invertedImageData = convertMaskToInpaintingMask(imageData);
-    ctx.putImageData(invertedImageData, 0, 0);
-    canvas.toBlob((blob) => {
+    drawingCtx.putImageData(invertedImageData, 0, 0);
+    drawingCanvas.toBlob((blob) => {
       if (!blob) return;
       setMaskFile(getFileFromBlob(blob, "mask.png"));
+      imageCanvas.toBlob((blob) => {
+        if (!blob) return;
+        setImg2imgFile(getFileFromBlob(blob, "image.png"));
+      });
       props.closeModal();
     });
   };
diff --git a/morpheus-client/components/Navbar/Navbar.module.scss b/morpheus-client/components/Navbar/Navbar.module.scss
index e1287576..8ffe0025 100644
--- a/morpheus-client/components/Navbar/Navbar.module.scss
+++ b/morpheus-client/components/Navbar/Navbar.module.scss
@@ -6,6 +6,7 @@
   height: 80px;
   min-height: 80px;
   max-height: 80px;
+  min-width: 300px;
   width: 100%;
   padding: 0 32px;
   display: flex;
diff --git a/morpheus-client/components/Navbar/Navbar.tsx b/morpheus-client/components/Navbar/Navbar.tsx
index 6e71dda5..1dd44c69 100644
--- a/morpheus-client/components/Navbar/Navbar.tsx
+++ b/morpheus-client/components/Navbar/Navbar.tsx
@@ -116,22 +116,32 @@ const Navbar = (props: NavbarProps) => {
   return (
     <div className={styles.navbarContainer}>
       {isMobile ? (
-        <BurgerMenu
-          isOpen={showMobileMenu}
-          onStateChange={(state) => setShowMobileMenu(state.isOpen)}
-        >
-          <div className={styles.burgerMenuContent}>
-            <NavMenu
-              user={user}
-              selectedOption={selectedOption}
-              redirectToHome={redirectToHome}
-              redirectToProfile={redirectToProfile}
-              handleAuthActionClick={handleAuthActionClick}
-              isMobile={true}
-              closeMenu={() => setShowMobileMenu(false)}
-            />
-          </div>
-        </BurgerMenu>
+        <Fragment>
+          <BurgerMenu
+            isOpen={showMobileMenu}
+            onStateChange={(state) => setShowMobileMenu(state.isOpen)}
+          >
+            <div className={styles.burgerMenuContent}>
+              <NavMenu
+                user={user}
+                selectedOption={selectedOption}
+                redirectToHome={redirectToHome}
+                redirectToProfile={redirectToProfile}
+                handleAuthActionClick={handleAuthActionClick}
+                isMobile={true}
+                closeMenu={() => setShowMobileMenu(false)}
+              />
+            </div>
+          </BurgerMenu>
+          <Brand
+            styles={{
+              width: "100%",
+              display: "flex",
+              alignSelf: "center",
+              justifyContent: "center",
+            }}
+          />
+        </Fragment>
       ) : (
         <NavMenu
           user={user}
diff --git a/morpheus-client/components/OpenSource/OpenSource.module.scss b/morpheus-client/components/OpenSource/OpenSource.module.scss
index 6b478f0a..2c98d7cb 100644
--- a/morpheus-client/components/OpenSource/OpenSource.module.scss
+++ b/morpheus-client/components/OpenSource/OpenSource.module.scss
@@ -9,8 +9,7 @@
   flex-direction: column;
   border-radius: 18px;
   border: 1px solid colors.$white-color;
-  margin: 16px;
-  padding: 19px 17px;
+  padding: 24px;
   gap: 14px;
 
   .openSourceTitle {
diff --git a/morpheus-client/components/atoms/accordion/Accordion.module.scss b/morpheus-client/components/atoms/accordion/Accordion.module.scss
new file mode 100644
index 00000000..07341470
--- /dev/null
+++ b/morpheus-client/components/atoms/accordion/Accordion.module.scss
@@ -0,0 +1,42 @@
+.accordion {
+  width: 100%;
+  height: auto;
+  margin-bottom: 24px;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+
+  .accordionHeader {
+    width: 100%;
+    height: auto;
+    max-height: 32px;
+    display: flex;
+    align-self: center;
+    cursor: pointer;
+
+    p {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    span {
+      margin-top: 4px;
+    }
+  }
+
+  .accordionContent {
+    width: auto;
+    height: auto;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
+
+    &.active {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}
+
diff --git a/morpheus-client/components/atoms/accordion/Accordion.tsx b/morpheus-client/components/atoms/accordion/Accordion.tsx
new file mode 100644
index 00000000..bd04d7aa
--- /dev/null
+++ b/morpheus-client/components/atoms/accordion/Accordion.tsx
@@ -0,0 +1,36 @@
+import React, { ReactNode } from "react";
+import { ArrowDownIcon } from "@/components/icons/arrowDown";
+import { ArrowRightIcon } from "@/components/icons/arrowRight";
+import styles from "./Accordion.module.scss";
+
+interface AccordionProps {
+  itemId: string;
+  title: string;
+  isOpen?: boolean;
+  setOpenedItem: (item: string) => void;
+  children: ReactNode;
+}
+
+export const Accordion = (props: AccordionProps) => {
+  const onToggle = () => {
+    props.setOpenedItem(props.itemId)
+  };
+
+  return (
+    <div className={styles.accordion}>
+      <div className={styles.accordionHeader} onClick={onToggle}>
+        <span>{props.isOpen ? <ArrowDownIcon /> : <ArrowRightIcon />}</span>
+        <p className="headline-6 white bold">{props.title}</p>
+      </div>
+      {props.isOpen && (
+        <div
+          className={`${styles.accordionContent} ${
+            props.isOpen && styles.active
+          }`}
+        >
+          {props.children}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/morpheus-client/components/icons/arrowDown.tsx b/morpheus-client/components/icons/arrowDown.tsx
new file mode 100644
index 00000000..8b8b2086
--- /dev/null
+++ b/morpheus-client/components/icons/arrowDown.tsx
@@ -0,0 +1,17 @@
+export const ArrowDownIcon = () => (
+  <svg
+    width="24"
+    height="25"
+    viewBox="0 0 24 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6 9.42017L12 15.4202L18 9.42017"
+      stroke="white"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/morpheus-client/components/icons/arrowRight.tsx b/morpheus-client/components/icons/arrowRight.tsx
new file mode 100644
index 00000000..4f17e607
--- /dev/null
+++ b/morpheus-client/components/icons/arrowRight.tsx
@@ -0,0 +1,17 @@
+export const ArrowRightIcon = () => (
+  <svg
+    width="24"
+    height="25"
+    viewBox="0 0 24 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9 6.31946L15 12.3195L9 18.3195"
+      stroke="white"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/morpheus-client/context/CNContext.tsx b/morpheus-client/context/CNContext.tsx
index 84c69b73..a6c0e7ff 100644
--- a/morpheus-client/context/CNContext.tsx
+++ b/morpheus-client/context/CNContext.tsx
@@ -5,7 +5,7 @@ import {
   useEffect,
   useState,
 } from "react";
-import { getAvailableModels } from "../services/models";
+import { getAvailableModels } from "@/services/models";
 import { useDiffusion } from "./SDContext";
 
 export interface IControlNetContext {
diff --git a/morpheus-client/context/ImagineContext.tsx b/morpheus-client/context/ImagineContext.tsx
index 4e41be58..ef821b3e 100644
--- a/morpheus-client/context/ImagineContext.tsx
+++ b/morpheus-client/context/ImagineContext.tsx
@@ -81,6 +81,7 @@ const ImagineProvider = (props: { children: ReactNode }) => {
   );
 
   useEffect(() => {
+    console.log("img2ImgURL", img2ImgURL)
     if (img2ImgURL) {
       getFileBlobFromURL(img2ImgURL)
         .then((file: File) => {
diff --git a/morpheus-client/context/ModelsContext.tsx b/morpheus-client/context/ModelsContext.tsx
new file mode 100644
index 00000000..c3db685d
--- /dev/null
+++ b/morpheus-client/context/ModelsContext.tsx
@@ -0,0 +1,149 @@
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { getAvailableModels } from "@/services/models";
+import { getAvailableSamplers } from "@/services/samplers";
+import { Model } from "@/models/models";
+
+export enum ModelFeature {
+  Empty = "",
+  Text2Image = "text2img",
+  Image2Image = "img2img",
+  Inpainting = "inpainting",
+  ControlNet = "controlnet",
+  Pix2Pix = "pix2pix",
+  Upscaling = "upscaling",
+}
+
+export interface ActiveLink {
+  model: Model;
+  feature: ModelFeature;
+}
+
+export interface IModelsContext {
+  models: Model[];
+  selectedModel: Model;
+  setSelectedModel: (model: Model) => void;
+  samplers: any[];
+  sampler: string;
+  setSampler: (sampler: string) => void;
+  activeLink: ActiveLink;
+  setActiveLink: (option: ActiveLink) => void;
+  findValidModelForFeature: (feature: ModelFeature) => Model;
+}
+
+const initialConfig = {
+  model: undefined,
+  sampler: "PNDMScheduler",
+  initialFeatures: [ModelFeature.Text2Image, ModelFeature.Image2Image],
+};
+
+const defaultState = {
+  models: [],
+  selectedModel: {} as Model,
+  setSelectedModel: () => console.log("setSelectedSDModel"),
+  samplers: [],
+  sampler: initialConfig.sampler,
+  setSampler: () => console.log("setSampler"),
+  activeLink: {} as ActiveLink,
+  setActiveLink: () => console.log("setActiveLink"),
+  findValidModelForFeature: () => ({} as Model),
+};
+
+const mapModelBooleanFeaturesToStringFeatures = (model: Model) => {
+  const features = [];
+  if (model.text2img) features.push(ModelFeature.Text2Image);
+  if (model.img2img) features.push(ModelFeature.Image2Image);
+  if (model.inpainting) features.push(ModelFeature.Inpainting);
+  if (model.controlnet) features.push(ModelFeature.ControlNet);
+  if (model.pix2pix) features.push(ModelFeature.Pix2Pix);
+  if (model.upscaling) features.push(ModelFeature.Upscaling);
+  return features;
+};
+
+const ModelsContext = createContext<IModelsContext>(defaultState);
+
+const ModelsProvider = (props: { children: ReactNode }) => {
+  // Stable Diffusion Models
+  const [models, setModels] = useState<Model[]>([]);
+  const [selectedModel, setSelectedModel] = useState<Model>(models[0]);
+
+  // Sampler settings
+  const [samplers, setSamplers] = useState<any[]>([]);
+  const [sampler, setSampler] = useState<string>(initialConfig.sampler);
+
+  // Selected model and feature
+  const [activeLink, setActiveLink] = useState<ActiveLink>({} as ActiveLink);
+
+  useEffect(() => {
+    getAvailableModels("/models").then((response) => {
+      if (response.success && response.data) {
+        if (response.data.length > 0) {
+          const modelsWithFeatures = response.data.map((model: Model) => {
+            return {
+              ...model,
+              features: mapModelBooleanFeaturesToStringFeatures(model),
+            };
+          });
+          setModels(modelsWithFeatures || []);
+          setActiveLink({
+            model: modelsWithFeatures[0],
+            feature: modelsWithFeatures[0].features[0],
+          });
+        }
+      }
+    });
+
+    getAvailableSamplers().then((response) => {
+      if (response.success && response.data) {
+        const samplersData = response.data || [];
+        setSamplers(samplersData);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    if (activeLink.model) {
+      setSelectedModel(activeLink.model);
+    }
+  }, [activeLink]);
+
+  const findValidModelForFeature = (feature: ModelFeature) => {
+    return (
+      models.find((model: Model) => model.features.includes(feature)) ||
+      models[0]
+    );
+  };
+
+  return (
+    <ModelsContext.Provider
+      value={{
+        models,
+        selectedModel,
+        setSelectedModel,
+        samplers,
+        sampler,
+        setSampler,
+        activeLink,
+        setActiveLink,
+        findValidModelForFeature,
+      }}
+    >
+      {props.children}
+    </ModelsContext.Provider>
+  );
+};
+
+const useModels = () => {
+  const context = useContext(ModelsContext);
+  if (context === undefined) {
+    throw new Error("useModels must be used within a ModelsProvider");
+  }
+  return context;
+};
+
+export { ModelsProvider, useModels };
diff --git a/morpheus-client/context/SDContext.tsx b/morpheus-client/context/SDContext.tsx
index c43a3dff..5e7d8939 100644
--- a/morpheus-client/context/SDContext.tsx
+++ b/morpheus-client/context/SDContext.tsx
@@ -36,6 +36,10 @@ export enum SDOption {
   Upscaling = "upscaling",
 }
 
+const DEFAULT_NEGATIVE_PROMPT =
+  "Bad proportions, cropped, bad anatomy, bad composition, bad proportions, bad shadow, blurred, blurry, " +
+  "colorless, deformed, dehydrated, disfigured, duplicate, error, gross proportions, low quality, worst quality";
+
 export interface IDiffusionContext {
   selectedOption: SDOption;
   validSDModels: any[];
@@ -76,21 +80,6 @@ export interface IDiffusionContext {
   restartSDSettings: () => void;
 }
 
-const DEFAULT_NEGATIVE_PROMPT =
-  "(((deformed))), (extra_limb), (long body :1.3), (mutated hands and fingers:1.5), (mutation poorly drawn :1.2), " +
-  "(poorly drawn hands), (ugly), Images cut out at the top, anatomical nonsense, bad anatomy, bad anatomy, " +
-  "bad breasts, bad composition, bad ears, bad hands, bad proportions, bad shadow, blurred, blurry, blurry imag, " +
-  "bottom, broken legs, cloned face, colorless, cropped, deformed, deformed body feature, dehydrated, " +
-  "disappearing arms, disappearing calf, disappearing legs, disappearing thigh, disfigure, disfigured, " +
-  "duplicate, error, extra arms, extra breasts, extra ears, extra fingers, extra legs, extra limbs, " +
-  "fused ears, fused fingers, fused hand, gross proportions, heavy breasts, heavy ears, left, liquid body, " +
-  "liquid breasts, liquid ears, liquid tongue, long neck, low quality, low res, low resolution, lowers, " +
-  "malformed, malformed hands, malformed limbs, messy drawing, missing arms, missing breasts, missing ears, " +
-  "missing hand, missing legs, morbid, mutated, mutated body part, mutated hands, mutation, mutilated, " +
-  "old photo, out of frame, oversaturate, poor facial detail, poorly Rendered fac, poorly drawn fac, " +
-  "poorly drawn face, poorly drawn hand, poorly drawn hands, poorly rendered hand, right, signature, " +
-  "text font ui, too many fingers, ugly, uncoordinated body, unnatural body, username, watermark, worst quality";
-
 const PROMPTS = [
   "An astronaut cycling on the moon, Abstract Expressionism",
   "A Man looking at the Starry Sky by Vincent Van Gogh",
@@ -145,7 +134,7 @@ const initialConfig = {
   useEmbedding: initializeCheckbox(false),
   loraPath: initializeText(String("")),
   useLora: initializeCheckbox(false),
-  loraScale: initializeNumber(1.0)
+  loraScale: initializeNumber(1.0),
 };
 
 const defaultState = {
@@ -221,11 +210,17 @@ const DiffusionProvider = (props: { children: ReactNode }) => {
   const [randomizeSeed, setRandomizeSeed] = useState<CheckboxState>(
     initialConfig.randomizeSeed
   );
-  const [embeddingPath, setEmbeddingPath] = useState<TextState>(initialConfig.embeddingPath);
-  const [useEmbedding, setEmbedding] = useState<CheckboxState>(initialConfig.useEmbedding);
+  const [embeddingPath, setEmbeddingPath] = useState<TextState>(
+    initialConfig.embeddingPath
+  );
+  const [useEmbedding, setEmbedding] = useState<CheckboxState>(
+    initialConfig.useEmbedding
+  );
   const [loraPath, setLoraPath] = useState<TextState>(initialConfig.loraPath);
   const [useLora, setLora] = useState<CheckboxState>(initialConfig.useLora);
-  const [loraScale, setLoraScale] = useState<NumberState>(initialConfig.loraScale);
+  const [loraScale, setLoraScale] = useState<NumberState>(
+    initialConfig.loraScale
+  );
 
   useEffect(() => {
     // Fetch Stable Diffusion models
@@ -296,7 +291,7 @@ const DiffusionProvider = (props: { children: ReactNode }) => {
       lora_path: loraPath.value,
       use_embedding: useEmbedding.value,
       embedding_path: embeddingPath.value,
-      lora_scale: loraScale.value
+      lora_scale: loraScale.value,
     };
   };
 
diff --git a/morpheus-client/excalidraw/css/app.scss b/morpheus-client/excalidraw/css/app.scss
index 62e5d469..f73ce488 100644
--- a/morpheus-client/excalidraw/css/app.scss
+++ b/morpheus-client/excalidraw/css/app.scss
@@ -1,5 +1,9 @@
 @import "open-color/open-color.scss";
 
+//* {
+//  outline: 1px solid #f00 !important;
+//}
+
 .visually-hidden {
   position: absolute !important;
   height: 1px;
diff --git a/morpheus-client/models/models.ts b/morpheus-client/models/models.ts
index 27c4d81d..9be562ae 100644
--- a/morpheus-client/models/models.ts
+++ b/morpheus-client/models/models.ts
@@ -60,7 +60,7 @@ export interface ArtWork {
 export interface Model {
   id?: string;
   name: string;
-  source?: string;
+  source: string;
   description?: string;
   is_active: boolean;
   url_docs?: string;
@@ -69,6 +69,8 @@ export interface Model {
   inpainting?: boolean;
   controlnet?: boolean;
   pix2pix?: boolean;
+  upscaling?: boolean;
+  features: string[];
 }
 
 export interface ControlNetModel extends Model {
diff --git a/morpheus-client/pages/_app.tsx b/morpheus-client/pages/_app.tsx
index fddb751d..023a39c4 100644
--- a/morpheus-client/pages/_app.tsx
+++ b/morpheus-client/pages/_app.tsx
@@ -15,6 +15,7 @@ import CookiesConsent from "@/components/CookiesConsent/CookiesConsent";
 import "../App.scss";
 import "../styles/globals.css";
 import "../excalidraw/main.scss";
+import { ModelsProvider } from "@/context/ModelsContext";
 
 const App: FC<AppProps> = ({ Component, pageProps }) => {
   return (
@@ -128,15 +129,17 @@ const App: FC<AppProps> = ({ Component, pageProps }) => {
       <FirebaseTrackingProvider>
         <ToastProvider>
           <AuthProvider>
-            <DiffusionProvider>
-              <ControlNetProvider>
-                <ImagineProvider>
-                  <Component {...pageProps} />
-                  <CookiesConsent />
-                  <Toaster />
-                </ImagineProvider>
-              </ControlNetProvider>
-            </DiffusionProvider>
+            <ModelsProvider>
+              <DiffusionProvider>
+                <ControlNetProvider>
+                  <ImagineProvider>
+                    <Component {...pageProps} />
+                    <CookiesConsent />
+                    <Toaster />
+                  </ImagineProvider>
+                </ControlNetProvider>
+              </DiffusionProvider>
+            </ModelsProvider>
           </AuthProvider>
         </ToastProvider>
       </FirebaseTrackingProvider>
diff --git a/morpheus-client/utils/images.ts b/morpheus-client/utils/images.ts
index 40b1979a..e9b62642 100644
--- a/morpheus-client/utils/images.ts
+++ b/morpheus-client/utils/images.ts
@@ -48,7 +48,7 @@ export const getFileFromBlob = (blob: Blob, filename: string) => {
   return new File([blob], filename, { type: "image/png" });
 };
 
-export const convertMaskToInpaintingMask = (imageData: ImageData) => {
+export const convertMaskToInpaintingMask = (imageData: any) => {
   const data = imageData.data;
   for (let i = 0; i < data.length; i += 4) {
     const r = data[i];
@@ -73,7 +73,7 @@ export const convertMaskToInpaintingMask = (imageData: ImageData) => {
   return imageData;
 };
 
-export const convertInpaintingMaskToMask = (imageData: ImageData) => {
+export const convertInpaintingMaskToMask = (imageData: any) => {
   const data = imageData.data;
 
   for (let i = 0; i < data.length; i += 4) {
@@ -96,4 +96,4 @@ export const convertInpaintingMaskToMask = (imageData: ImageData) => {
   }
 
   return imageData;
-};
+};
\ No newline at end of file
diff --git a/morpheus-server/scripts/models/models-info.yaml b/morpheus-server/scripts/models/models-info.yaml
index a5423e55..666c83fd 100644
--- a/morpheus-server/scripts/models/models-info.yaml
+++ b/morpheus-server/scripts/models/models-info.yaml
@@ -48,7 +48,7 @@ models:
     pix2pix: true
     upscaling: false
 
-  - name: "Stable Diffusion Inpaint"
+  - name: "SD Inpainting"
     description: "Modify an existing image with a text prompt and an image mask."
     source: "runwayml/stable-diffusion-inpainting"
     is_active: true
@@ -60,7 +60,7 @@ models:
     pix2pix: false
     upscaling: false
 
-  - name: "Stable Diffusion x4 Upscaler"
+  - name: "SD x4 Upscaler"
     description: "Stable Diffusion x4 Upscaler can be used to enhance the resolution of input images by a factor of 4."
     source: "stabilityai/stable-diffusion-x4-upscaler"
     is_active: true