Merge branch 'main' into feat/delete-message

2024-02-22 20:57:46 -05:00 · 2024-02-22 20:57:46 -05:00 · 9c1aa92451
commit 9c1aa92451
parent a3a0e18307 b0f3ae5708
64 changed files with 2281 additions and 771 deletions
--- a/.env.example
+++ b/.env.example
@ -5,6 +5,8 @@ OLLAMA_API_BASE_URL='http://localhost:11434/api'
 OPENAI_API_BASE_URL=''
 OPENAI_API_KEY=''

+# AUTOMATIC1111_BASE_URL="http://localhost:7860"
+
 # DO NOT TRACK
 SCARF_NO_ANALYTICS=true
 DO_NOT_TRACK=true
--- a/.github/workflows/build-release.yml
+++ b/.github/workflows/build-release.yml
@ -0,0 +1,49 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main # or whatever branch you want to use
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    - name: Check for changes in package.json
+      run: |
+        git diff --cached --diff-filter=d package.json || {
+          echo "No changes to package.json"
+          exit 1
+        }
+
+    - name: Get version number from package.json
+      id: get_version
+      run: |
+        VERSION=$(jq -r '.version' package.json)
+        echo "::set-output name=version::$VERSION"
+
+    - name: Create GitHub release
+      uses: actions/github-script@v5
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
+        script: |
+          const release = await github.rest.repos.createRelease({
+            owner: context.repo.owner,
+            repo: context.repo.repo,
+            tag_name: `v${{ steps.get_version.outputs.version }}`,
+            name: `v${{ steps.get_version.outputs.version }}`,
+            body: 'Automatically created new release',
+          })
+          console.log(`Created release ${release.data.html_url}`)
+
+    - name: Upload package to GitHub release
+      uses: actions/upload-artifact@v3
+      with:
+        name: package
+        path: .
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/23
+++ b/23
@ -30,10 +30,24 @@ ENV WEBUI_SECRET_KEY ""
 ENV SCARF_NO_ANALYTICS true
 ENV DO_NOT_TRACK true

-#Whisper TTS Settings
+######## Preloaded models ########
+# whisper TTS Settings
 ENV WHISPER_MODEL="base"
 ENV WHISPER_MODEL_DIR="/app/backend/data/cache/whisper/models"

+# RAG Embedding Model Settings
+# any sentence transformer model; models to use can be found at https://huggingface.co/models?library=sentence-transformers
+# Leaderboard: https://huggingface.co/spaces/mteb/leaderboard 
+# for better persormance and multilangauge support use "intfloat/multilingual-e5-large" (~2.5GB) or "intfloat/multilingual-e5-base" (~1.5GB)
+# IMPORTANT: If you change the default model (all-MiniLM-L6-v2) and vice versa, you aren't able to use RAG Chat with your previous documents loaded in the WebUI! You need to re-embed them.
+ENV RAG_EMBEDDING_MODEL="all-MiniLM-L6-v2"
+# device type for whisper tts and ebbeding models - "cpu" (default), "cuda" (nvidia gpu and CUDA required) or "mps" (apple silicon) - choosing this right can lead to better performance
+ENV RAG_EMBEDDING_MODEL_DEVICE_TYPE="cpu"
+ENV RAG_EMBEDDING_MODEL_DIR="/app/backend/data/cache/embedding/models"
+ENV SENTENCE_TRANSFORMERS_HOME $RAG_EMBEDDING_MODEL_DIR
+
+######## Preloaded models ########
+
 WORKDIR /app/backend

 # install python dependencies
@ -48,9 +62,10 @@ RUN apt-get update \
    && apt-get install -y pandoc netcat-openbsd \
    && rm -rf /var/lib/apt/lists/*

-# RUN python -c "from sentence_transformers import SentenceTransformer; model = SentenceTransformer('all-MiniLM-L6-v2')"
-RUN python -c "import os; from faster_whisper import WhisperModel; WhisperModel(os.environ['WHISPER_MODEL'], device='cpu', compute_type='int8', download_root=os.environ['WHISPER_MODEL_DIR'])"
-
+# preload embedding model
+RUN python -c "import os; from chromadb.utils import embedding_functions; sentence_transformer_ef = embedding_functions.SentenceTransformerEmbeddingFunction(model_name=os.environ['RAG_EMBEDDING_MODEL'], device=os.environ['RAG_EMBEDDING_MODEL_DEVICE_TYPE'])"
+# preload tts model
+RUN python -c "import os; from faster_whisper import WhisperModel; WhisperModel(os.environ['WHISPER_MODEL'], device='auto', compute_type='int8', download_root=os.environ['WHISPER_MODEL_DIR'])"

 # copy embedding weight from build
 RUN mkdir -p /root/.cache/chroma/onnx_models/all-MiniLM-L6-v2
--- a/README.md
+++ b/README.md
@ -1,17 +1,17 @@
 # Open WebUI (Formerly Ollama WebUI) 👋

-![GitHub stars](https://img.shields.io/github/stars/ollama-webui/ollama-webui?style=social)
-![GitHub forks](https://img.shields.io/github/forks/ollama-webui/ollama-webui?style=social)
-![GitHub watchers](https://img.shields.io/github/watchers/ollama-webui/ollama-webui?style=social)
-![GitHub repo size](https://img.shields.io/github/repo-size/ollama-webui/ollama-webui)
-![GitHub language count](https://img.shields.io/github/languages/count/ollama-webui/ollama-webui)
-![GitHub top language](https://img.shields.io/github/languages/top/ollama-webui/ollama-webui)
-![GitHub last commit](https://img.shields.io/github/last-commit/ollama-webui/ollama-webui?color=red)
+![GitHub stars](https://img.shields.io/github/stars/open-webui/open-webui?style=social)
+![GitHub forks](https://img.shields.io/github/forks/open-webui/open-webui?style=social)
+![GitHub watchers](https://img.shields.io/github/watchers/open-webui/open-webui?style=social)
+![GitHub repo size](https://img.shields.io/github/repo-size/open-webui/open-webui)
+![GitHub language count](https://img.shields.io/github/languages/count/open-webui/open-webui)
+![GitHub top language](https://img.shields.io/github/languages/top/open-webui/open-webui)
+![GitHub last commit](https://img.shields.io/github/last-commit/open-webui/open-webui?color=red)
 ![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Follama-webui%2Follama-wbui&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)
 [![Discord](https://img.shields.io/badge/Discord-Open_WebUI-blue?logo=discord&logoColor=white)](https://discord.gg/5rJgQTnV4s)
 [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/tjbck)

-ChatGPT-Style Web Interface for Ollama 🦙
+User-friendly WebUI for LLMs, Inspired by ChatGPT

 ![Open WebUI Demo](./demo.gif)

@ -83,11 +83,11 @@ Don't forget to explore our sibling project, [Open WebUI Community](https://open

 🌟 **Important Note on User Roles and Privacy:**

- **Admin Creation:** The very first account to sign up on the Open WebUI will be granted **Administrator privileges**. This account will have comprehensive control over the platform, including user management and system settings.
+- **Admin Creation:** The very first account to sign up on Open WebUI will be granted **Administrator privileges**. This account will have comprehensive control over the platform, including user management and system settings.

 - **User Registrations:** All subsequent users signing up will initially have their accounts set to **Pending** status by default. These accounts will require approval from the Administrator to gain access to the platform functionalities.

- **Privacy and Data Security:** We prioritize your privacy and data security above all. Please be reassured that all data entered into the Open WebUI is stored locally on your device. Our system is designed to be privacy-first, ensuring that no external requests are made, and your data does not leave your local environment. We are committed to maintaining the highest standards of data privacy and security, ensuring that your information remains confidential and under your control.
+- **Privacy and Data Security:** We prioritize your privacy and data security above all. Please be reassured that all data entered into Open WebUI is stored locally on your device. Our system is designed to be privacy-first, ensuring that no external requests are made, and your data does not leave your local environment. We are committed to maintaining the highest standards of data privacy and security, ensuring that your information remains confidential and under your control.

 ### Steps to Install Open WebUI

@ -212,14 +212,13 @@ For other ways to install, like using Kustomize or Helm, check out [INSTALLATION

 ### Updating your Docker Installation

-In case you want to update your local Docker installation to the latest version, you can do it performing the following actions:
+In case you want to update your local Docker installation to the latest version, you can do it with [Watchtower](https://containrrr.dev/watchtower/):

 ```bash
-docker rm -f open-webui
-docker pull ghcr.io/open-webui/open-webui:main
-[insert command you used to install]
+docker run --rm --volume /var/run/docker.sock:/var/run/docker.sock containrrr/watchtower --run-once open-webui
 ```
-In the last line, you need to use the very same command you used to install (local install, remote server, etc.)
+
+In the last part of the command, replace `open-webui` with your container name if it is different.

 ### Moving from Ollama WebUI to Open WebUI

@ -257,17 +256,13 @@ Once you verify that all the data has been migrated you can erase the old volume
 docker volume rm ollama-webui
 ```

-
-
-
-
 ## How to Install Without Docker

 While we strongly recommend using our convenient Docker container installation for optimal support, we understand that some situations may require a non-Docker setup, especially for development purposes. Please note that non-Docker installations are not officially supported, and you might need to troubleshoot on your own.

 ### Project Components

-The Open WebUI consists of two primary components: the frontend and the backend (which serves as a reverse proxy, handling static frontend files, and additional features). Both need to be running concurrently for the development environment.
+Open WebUI consists of two primary components: the frontend and the backend (which serves as a reverse proxy, handling static frontend files, and additional features). Both need to be running concurrently for the development environment.

 > [!IMPORTANT]
 > The backend is required for proper functionality
@ -286,7 +281,7 @@ git clone https://github.com/open-webui/open-webui.git
 cd open-webui/

 # Copying required .env file
-cp -RPp example.env .env
+cp -RPp .env.example .env

 # Building Frontend Using Node
 npm i
@ -302,7 +297,7 @@ pip install -r requirements.txt -U
 sh start.sh
 ```

-You should have the Open WebUI up and running at http://localhost:8080/. Enjoy! 😄
+You should have Open WebUI up and running at http://localhost:8080/. Enjoy! 😄

 ## Troubleshooting

--- a/backend/.gitignore
+++ b/backend/.gitignore
@ -7,4 +7,5 @@ uploads
 _test
 Pipfile
 data/*
+!data/config.json
 .webui_secret_key
--- a/backend/apps/audio/main.py
+++ b/backend/apps/audio/main.py
@ -56,7 +56,7 @@ def transcribe(

        model = WhisperModel(
            WHISPER_MODEL,
-            device="cpu",
+            device="auto",
            compute_type="int8",
            download_root=WHISPER_MODEL_DIR,
        )
--- a/backend/apps/images/main.py
+++ b/backend/apps/images/main.py
@ -0,0 +1,165 @@
+import os
+import requests
+from fastapi import (
+    FastAPI,
+    Request,
+    Depends,
+    HTTPException,
+    status,
+    UploadFile,
+    File,
+    Form,
+)
+from fastapi.middleware.cors import CORSMiddleware
+from faster_whisper import WhisperModel
+
+from constants import ERROR_MESSAGES
+from utils.utils import (
+    get_current_user,
+    get_admin_user,
+)
+from utils.misc import calculate_sha256
+from typing import Optional
+from pydantic import BaseModel
+from config import AUTOMATIC1111_BASE_URL
+
+app = FastAPI()
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+app.state.AUTOMATIC1111_BASE_URL = AUTOMATIC1111_BASE_URL
+app.state.ENABLED = app.state.AUTOMATIC1111_BASE_URL != ""
+
+
+@app.get("/enabled", response_model=bool)
+async def get_enable_status(request: Request, user=Depends(get_admin_user)):
+    return app.state.ENABLED
+
+
+@app.get("/enabled/toggle", response_model=bool)
+async def toggle_enabled(request: Request, user=Depends(get_admin_user)):
+    try:
+        r = requests.head(app.state.AUTOMATIC1111_BASE_URL)
+        app.state.ENABLED = not app.state.ENABLED
+        return app.state.ENABLED
+    except Exception as e:
+        raise HTTPException(status_code=r.status_code, detail=ERROR_MESSAGES.DEFAULT(e))
+
+
+class UrlUpdateForm(BaseModel):
+    url: str
+
+
+@app.get("/url")
+async def get_openai_url(user=Depends(get_admin_user)):
+    return {"AUTOMATIC1111_BASE_URL": app.state.AUTOMATIC1111_BASE_URL}
+
+
+@app.post("/url/update")
+async def update_openai_url(form_data: UrlUpdateForm, user=Depends(get_admin_user)):
+
+    if form_data.url == "":
+        app.state.AUTOMATIC1111_BASE_URL = AUTOMATIC1111_BASE_URL
+    else:
+        app.state.AUTOMATIC1111_BASE_URL = form_data.url.strip("/")
+
+    return {
+        "AUTOMATIC1111_BASE_URL": app.state.AUTOMATIC1111_BASE_URL,
+        "status": True,
+    }
+
+
+@app.get("/models")
+def get_models(user=Depends(get_current_user)):
+    try:
+        r = requests.get(url=f"{app.state.AUTOMATIC1111_BASE_URL}/sdapi/v1/sd-models")
+        models = r.json()
+        return models
+    except Exception as e:
+        raise HTTPException(status_code=r.status_code, detail=ERROR_MESSAGES.DEFAULT(e))
+
+
+@app.get("/models/default")
+async def get_default_model(user=Depends(get_admin_user)):
+    try:
+        r = requests.get(url=f"{app.state.AUTOMATIC1111_BASE_URL}/sdapi/v1/options")
+        options = r.json()
+
+        return {"model": options["sd_model_checkpoint"]}
+    except Exception as e:
+        raise HTTPException(status_code=r.status_code, detail=ERROR_MESSAGES.DEFAULT(e))
+
+
+class UpdateModelForm(BaseModel):
+    model: str
+
+
+def set_model_handler(model: str):
+    r = requests.get(url=f"{app.state.AUTOMATIC1111_BASE_URL}/sdapi/v1/options")
+    options = r.json()
+
+    if model != options["sd_model_checkpoint"]:
+        options["sd_model_checkpoint"] = model
+        r = requests.post(
+            url=f"{app.state.AUTOMATIC1111_BASE_URL}/sdapi/v1/options", json=options
+        )
+
+    return options
+
+
+@app.post("/models/default/update")
+def update_default_model(
+    form_data: UpdateModelForm,
+    user=Depends(get_current_user),
+):
+    return set_model_handler(form_data.model)
+
+
+class GenerateImageForm(BaseModel):
+    model: Optional[str] = None
+    prompt: str
+    n: int = 1
+    size: str = "512x512"
+    negative_prompt: Optional[str] = None
+
+
+@app.post("/generations")
+def generate_image(
+    form_data: GenerateImageForm,
+    user=Depends(get_current_user),
+):
+
+    print(form_data)
+
+    try:
+        if form_data.model:
+            set_model_handler(form_data.model)
+
+        width, height = tuple(map(int, form_data.size.split("x")))
+
+        data = {
+            "prompt": form_data.prompt,
+            "batch_size": form_data.n,
+            "width": width,
+            "height": height,
+        }
+
+        if form_data.negative_prompt != None:
+            data["negative_prompt"] = form_data.negative_prompt
+
+        print(data)
+
+        r = requests.post(
+            url=f"{app.state.AUTOMATIC1111_BASE_URL}/sdapi/v1/txt2img",
+            json=data,
+        )
+
+        return r.json()
+    except Exception as e:
+        print(e)
+        raise HTTPException(status_code=r.status_code, detail=ERROR_MESSAGES.DEFAULT(e))
--- a/backend/apps/rag/main.py
+++ b/backend/apps/rag/main.py
@ -1,6 +1,5 @@
 from fastapi import (
    FastAPI,
-    Request,
    Depends,
    HTTPException,
    status,
@ -14,7 +13,8 @@ import os, shutil
 from pathlib import Path
 from typing import List

-# from chromadb.utils import embedding_functions
+from sentence_transformers import SentenceTransformer
+from chromadb.utils import embedding_functions

 from langchain_community.document_loaders import (
    WebBaseLoader,
@ -30,16 +30,12 @@ from langchain_community.document_loaders import (
    UnstructuredExcelLoader,
 )
 from langchain.text_splitter import RecursiveCharacterTextSplitter
-from langchain.chains import RetrievalQA
-from langchain_community.vectorstores import Chroma
-

 from pydantic import BaseModel
 from typing import Optional
 import mimetypes
 import uuid
 import json
-import time


 from apps.web.models.documents import (
@ -58,23 +54,37 @@ from utils.utils import get_current_user, get_admin_user
 from config import (
    UPLOAD_DIR,
    DOCS_DIR,
-    EMBED_MODEL,
+    RAG_EMBEDDING_MODEL,
+    RAG_EMBEDDING_MODEL_DEVICE_TYPE,
    CHROMA_CLIENT,
    CHUNK_SIZE,
    CHUNK_OVERLAP,
    RAG_TEMPLATE,
 )
+
 from constants import ERROR_MESSAGES

-# EMBEDDING_FUNC = embedding_functions.SentenceTransformerEmbeddingFunction(
-#     model_name=EMBED_MODEL
-# )
+#
+# if RAG_EMBEDDING_MODEL:
+#    sentence_transformer_ef = SentenceTransformer(
+#        model_name_or_path=RAG_EMBEDDING_MODEL,
+#        cache_folder=RAG_EMBEDDING_MODEL_DIR,
+#        device=RAG_EMBEDDING_MODEL_DEVICE_TYPE,
+#    )
+

 app = FastAPI()

 app.state.CHUNK_SIZE = CHUNK_SIZE
 app.state.CHUNK_OVERLAP = CHUNK_OVERLAP
 app.state.RAG_TEMPLATE = RAG_TEMPLATE
+app.state.RAG_EMBEDDING_MODEL = RAG_EMBEDDING_MODEL
+app.state.sentence_transformer_ef = (
+    embedding_functions.SentenceTransformerEmbeddingFunction(
+        model_name=app.state.RAG_EMBEDDING_MODEL,
+        device=RAG_EMBEDDING_MODEL_DEVICE_TYPE,
+    )
+)


 origins = ["*"]
@ -106,7 +116,10 @@ def store_data_in_vector_db(data, collection_name) -> bool:
    metadatas = [doc.metadata for doc in docs]

    try:
-        collection = CHROMA_CLIENT.create_collection(name=collection_name)
+        collection = CHROMA_CLIENT.create_collection(
+            name=collection_name,
+            embedding_function=app.state.sentence_transformer_ef,
+        )

        collection.add(
            documents=texts, metadatas=metadatas, ids=[str(uuid.uuid1()) for _ in texts]
@ -126,6 +139,38 @@ async def get_status():
        "status": True,
        "chunk_size": app.state.CHUNK_SIZE,
        "chunk_overlap": app.state.CHUNK_OVERLAP,
+        "template": app.state.RAG_TEMPLATE,
+        "embedding_model": app.state.RAG_EMBEDDING_MODEL,
+    }
+
+
+@app.get("/embedding/model")
+async def get_embedding_model(user=Depends(get_admin_user)):
+    return {
+        "status": True,
+        "embedding_model": app.state.RAG_EMBEDDING_MODEL,
+    }
+
+
+class EmbeddingModelUpdateForm(BaseModel):
+    embedding_model: str
+
+
+@app.post("/embedding/model/update")
+async def update_embedding_model(
+    form_data: EmbeddingModelUpdateForm, user=Depends(get_admin_user)
+):
+    app.state.RAG_EMBEDDING_MODEL = form_data.embedding_model
+    app.state.sentence_transformer_ef = (
+        embedding_functions.SentenceTransformerEmbeddingFunction(
+            model_name=app.state.RAG_EMBEDDING_MODEL,
+            device=RAG_EMBEDDING_MODEL_DEVICE_TYPE,
+        )
+    )
+
+    return {
+        "status": True,
+        "embedding_model": app.state.RAG_EMBEDDING_MODEL,
    }


@ -190,8 +235,10 @@ def query_doc(
    user=Depends(get_current_user),
 ):
    try:
+        # if you use docker use the model from the environment variable
        collection = CHROMA_CLIENT.get_collection(
            name=form_data.collection_name,
+            embedding_function=app.state.sentence_transformer_ef,
        )
        result = collection.query(query_texts=[form_data.query], n_results=form_data.k)
        return result
@ -263,9 +310,12 @@ def query_collection(

    for collection_name in form_data.collection_names:
        try:
+            # if you use docker use the model from the environment variable
            collection = CHROMA_CLIENT.get_collection(
                name=collection_name,
+                embedding_function=app.state.sentence_transformer_ef,
            )
+
            result = collection.query(
                query_texts=[form_data.query], n_results=form_data.k
            )
--- a/backend/apps/web/main.py
+++ b/backend/apps/web/main.py
@ -26,6 +26,8 @@ app = FastAPI()
 origins = ["*"]

 app.state.ENABLE_SIGNUP = ENABLE_SIGNUP
+app.state.JWT_EXPIRES_IN = "-1"
+
 app.state.DEFAULT_MODELS = DEFAULT_MODELS
 app.state.DEFAULT_PROMPT_SUGGESTIONS = DEFAULT_PROMPT_SUGGESTIONS
 app.state.DEFAULT_USER_ROLE = DEFAULT_USER_ROLE
@ -55,7 +57,6 @@ app.include_router(utils.router, prefix="/utils", tags=["utils"])
 async def get_status():
    return {
        "status": True,
-        "version": WEBUI_VERSION,
        "auth": WEBUI_AUTH,
        "default_models": app.state.DEFAULT_MODELS,
        "default_prompt_suggestions": app.state.DEFAULT_PROMPT_SUGGESTIONS,
--- a/backend/apps/web/routers/auths.py
+++ b/backend/apps/web/routers/auths.py
@ -7,6 +7,7 @@ from fastapi import APIRouter, status
 from pydantic import BaseModel
 import time
 import uuid
+import re

 from apps.web.models.auths import (
    SigninForm,
@ -25,7 +26,7 @@ from utils.utils import (
    get_admin_user,
    create_token,
 )
-from utils.misc import get_gravatar_url, validate_email_format
+from utils.misc import parse_duration, validate_email_format
 from constants import ERROR_MESSAGES

 router = APIRouter()
@ -95,10 +96,13 @@ async def update_password(


@router.post("/signin", response_model=SigninResponse)
-async def signin(form_data: SigninForm):
+async def signin(request: Request, form_data: SigninForm):
    user = Auths.authenticate_user(form_data.email.lower(), form_data.password)
    if user:
-        token = create_token(data={"id": user.id})
+        token = create_token(
+            data={"id": user.id},
+            expires_delta=parse_duration(request.app.state.JWT_EXPIRES_IN),
+        )

        return {
            "token": token,
@ -145,7 +149,10 @@ async def signup(request: Request, form_data: SignupForm):
        )

        if user:
-            token = create_token(data={"id": user.id})
+            token = create_token(
+                data={"id": user.id},
+                expires_delta=parse_duration(request.app.state.JWT_EXPIRES_IN),
+            )
            # response.set_cookie(key='token', value=token, httponly=True)

            return {
@ -200,3 +207,33 @@ async def update_default_user_role(
    if form_data.role in ["pending", "user", "admin"]:
        request.app.state.DEFAULT_USER_ROLE = form_data.role
    return request.app.state.DEFAULT_USER_ROLE
+
+
+############################
+# JWT Expiration
+############################
+
+
+@router.get("/token/expires")
+async def get_token_expires_duration(request: Request, user=Depends(get_admin_user)):
+    return request.app.state.JWT_EXPIRES_IN
+
+
+class UpdateJWTExpiresDurationForm(BaseModel):
+    duration: str
+
+
+@router.post("/token/expires/update")
+async def update_token_expires_duration(
+    request: Request,
+    form_data: UpdateJWTExpiresDurationForm,
+    user=Depends(get_admin_user),
+):
+    pattern = r"^(-1|0|(-?\d+(\.\d+)?)(ms|s|m|h|d|w))$"
+
+    # Check if the input string matches the pattern
+    if re.match(pattern, form_data.duration):
+        request.app.state.JWT_EXPIRES_IN = form_data.duration
+        return request.app.state.JWT_EXPIRES_IN
+    else:
+        return request.app.state.JWT_EXPIRES_IN
--- a/backend/config.py
+++ b/backend/config.py
@ -5,6 +5,8 @@ from secrets import token_bytes
 from base64 import b64encode
 from constants import ERROR_MESSAGES
 from pathlib import Path
+import json
+

 try:
    from dotenv import load_dotenv, find_dotenv
@ -28,6 +30,12 @@ ENV = os.environ.get("ENV", "dev")
 DATA_DIR = str(Path(os.getenv("DATA_DIR", "./data")).resolve())
 FRONTEND_BUILD_DIR = str(Path(os.getenv("FRONTEND_BUILD_DIR", "../build")))

+try:
+    with open(f"{DATA_DIR}/config.json", "r") as f:
+        CONFIG_DATA = json.load(f)
+except:
+    CONFIG_DATA = {}
+
 ####################################
 # File Upload DIR
 ####################################
@ -80,9 +88,14 @@ if OPENAI_API_BASE_URL == "":

 ENABLE_SIGNUP = os.environ.get("ENABLE_SIGNUP", True)
 DEFAULT_MODELS = os.environ.get("DEFAULT_MODELS", None)
-DEFAULT_PROMPT_SUGGESTIONS = os.environ.get(
-    "DEFAULT_PROMPT_SUGGESTIONS",
-    [
+
+
+DEFAULT_PROMPT_SUGGESTIONS = (
+    CONFIG_DATA["ui"]["prompt_suggestions"]
+    if "ui" in CONFIG_DATA
+    and "prompt_suggestions" in CONFIG_DATA["ui"]
+    and type(CONFIG_DATA["ui"]["prompt_suggestions"]) is list
+    else [
        {
            "title": ["Help me study", "vocabulary for a college entrance exam"],
            "content": "Help me study vocabulary: write a sentence for me to fill in the blank, and I'll try to pick the correct option.",
@ -99,8 +112,10 @@ DEFAULT_PROMPT_SUGGESTIONS = os.environ.get(
            "title": ["Show me a code snippet", "of a website's sticky header"],
            "content": "Show me a code snippet of a website's sticky header in CSS and JavaScript.",
        },
-    ],
+    ]
 )
+
+
 DEFAULT_USER_ROLE = "pending"
 USER_PERMISSIONS = {"chat": {"deletion": True}}

@ -136,7 +151,12 @@ if WEBUI_AUTH and WEBUI_SECRET_KEY == "":
 ####################################

 CHROMA_DATA_PATH = f"{DATA_DIR}/vector_db"
-EMBED_MODEL = "all-MiniLM-L6-v2"
+# this uses the model defined in the Dockerfile ENV variable. If you dont use docker or docker based deployments such as k8s, the default embedding model will be used (all-MiniLM-L6-v2)
+RAG_EMBEDDING_MODEL = os.environ.get("RAG_EMBEDDING_MODEL", "all-MiniLM-L6-v2")
+# device type ebbeding models - "cpu" (default), "cuda" (nvidia gpu required) or "mps" (apple silicon) - choosing this right can lead to better performance
+RAG_EMBEDDING_MODEL_DEVICE_TYPE = os.environ.get(
+    "RAG_EMBEDDING_MODEL_DEVICE_TYPE", "cpu"
+)
 CHROMA_CLIENT = chromadb.PersistentClient(
    path=CHROMA_DATA_PATH,
    settings=Settings(allow_reset=True, anonymized_telemetry=False),
@ -165,3 +185,10 @@ Query: [query]"""

 WHISPER_MODEL = os.getenv("WHISPER_MODEL", "base")
 WHISPER_MODEL_DIR = os.getenv("WHISPER_MODEL_DIR", f"{CACHE_DIR}/whisper/models")
+
+
+####################################
+# Images
+####################################
+
+AUTOMATIC1111_BASE_URL = os.getenv("AUTOMATIC1111_BASE_URL", "")
--- a/backend/data/config.json
+++ b/backend/data/config.json
@ -0,0 +1,34 @@
+{
+    "ui": {
+        "prompt_suggestions": [
+            {
+                "title": [
+                    "Help me study",
+                    "vocabulary for a college entrance exam"
+                ],
+                "content": "Help me study vocabulary: write a sentence for me to fill in the blank, and I'll try to pick the correct option."
+            },
+            {
+                "title": [
+                    "Give me ideas",
+                    "for what to do with my kids' art"
+                ],
+                "content": "What are 5 creative things I could do with my kids' art? I don't want to throw them away, but it's also so much clutter."
+            },
+            {
+                "title": [
+                    "Tell me a fun fact",
+                    "about the Roman Empire"
+                ],
+                "content": "Tell me a random fun fact about the Roman Empire"
+            },
+            {
+                "title": [
+                    "Show me a code snippet",
+                    "of a website's sticky header"
+                ],
+                "content": "Show me a code snippet of a website's sticky header in CSS and JavaScript."
+            }
+        ]
+    }
+}
--- a/backend/main.py
+++ b/backend/main.py
@ -11,10 +11,10 @@ from starlette.exceptions import HTTPException as StarletteHTTPException
 from apps.ollama.main import app as ollama_app
 from apps.openai.main import app as openai_app
 from apps.audio.main import app as audio_app
-
+from apps.images.main import app as images_app
+from apps.rag.main import app as rag_app

 from apps.web.main import app as webui_app
-from apps.rag.main import app as rag_app

 from config import ENV, FRONTEND_BUILD_DIR

@ -58,10 +58,21 @@ app.mount("/api/v1", webui_app)
 app.mount("/ollama/api", ollama_app)
 app.mount("/openai/api", openai_app)

+app.mount("/images/api/v1", images_app)
 app.mount("/audio/api/v1", audio_app)
 app.mount("/rag/api/v1", rag_app)


+@app.get("/api/config")
+async def get_app_config():
+    return {
+        "status": True,
+        "images": images_app.state.ENABLED,
+        "default_models": webui_app.state.DEFAULT_MODELS,
+        "default_prompt_suggestions": webui_app.state.DEFAULT_PROMPT_SUGGESTIONS,
+    }
+
+
 app.mount(
    "/",
    SPAStaticFiles(directory=FRONTEND_BUILD_DIR, html=True),
--- a/backend/utils/misc.py
+++ b/backend/utils/misc.py
@ -1,6 +1,8 @@
 from pathlib import Path
 import hashlib
 import re
+from datetime import timedelta
+from typing import Optional


 def get_gravatar_url(email):
@ -76,3 +78,34 @@ def extract_folders_after_data_docs(path):
        tags.append("/".join(folders[: idx + 1]))

    return tags
+
+
+def parse_duration(duration: str) -> Optional[timedelta]:
+    if duration == "-1" or duration == "0":
+        return None
+
+    # Regular expression to find number and unit pairs
+    pattern = r"(-?\d+(\.\d+)?)(ms|s|m|h|d|w)"
+    matches = re.findall(pattern, duration)
+
+    if not matches:
+        raise ValueError("Invalid duration string")
+
+    total_duration = timedelta()
+
+    for number, _, unit in matches:
+        number = float(number)
+        if unit == "ms":
+            total_duration += timedelta(milliseconds=number)
+        elif unit == "s":
+            total_duration += timedelta(seconds=number)
+        elif unit == "m":
+            total_duration += timedelta(minutes=number)
+        elif unit == "h":
+            total_duration += timedelta(hours=number)
+        elif unit == "d":
+            total_duration += timedelta(days=number)
+        elif unit == "w":
+            total_duration += timedelta(weeks=number)
+
+    return total_duration
--- a/demo.gif
+++ b/demo.gif
--- a/kubernetes/helm/Chart.yaml
+++ b/kubernetes/helm/Chart.yaml
@ -1,5 +1,5 @@
 apiVersion: v2
-name: ollama-webui
-description: "Ollama Web UI: A User-Friendly Web Interface for Chat Interactions 👋"
+name: open-webui
+description: "Open WebUI: A User-Friendly Web Interface for Chat Interactions 👋"
 version: 1.0.0
-icon: https://raw.githubusercontent.com/ollama-webui/ollama-webui/main/static/favicon.png
+icon: https://raw.githubusercontent.com/open-webui/open-webui/main/static/favicon.png
--- a/kubernetes/helm/templates/webui-deployment.yaml
+++ b/kubernetes/helm/templates/webui-deployment.yaml
@ -1,20 +1,20 @@
 apiVersion: apps/v1
 kind: Deployment
 metadata:
-  name: ollama-webui-deployment
+  name: open-webui-deployment
  namespace: {{ .Values.namespace }}
 spec:
  replicas: 1
  selector:
    matchLabels:
-      app: ollama-webui
+      app: open-webui
  template:
    metadata:
      labels:
-        app: ollama-webui
+        app: open-webui
    spec:
      containers:
-      - name: ollama-webui
+      - name: open-webui
        image: {{ .Values.webui.image }}
        ports:
        - containerPort: 8080
@ -35,4 +35,4 @@ spec:
      volumes:
      - name: webui-volume
        persistentVolumeClaim:
-          claimName: ollama-webui-pvc
+          claimName: open-webui-pvc
--- a/kubernetes/helm/templates/webui-ingress.yaml
+++ b/kubernetes/helm/templates/webui-ingress.yaml
@ -2,7 +2,7 @@
 apiVersion: networking.k8s.io/v1
 kind: Ingress
 metadata:
-  name: ollama-webui-ingress
+  name: open-webui-ingress
  namespace: {{ .Values.namespace }}
 {{- if .Values.webui.ingress.annotations }}
  annotations:
@ -17,7 +17,7 @@ spec:
        pathType: Prefix
        backend:
          service:
-            name: ollama-webui-service
+            name: open-webui-service
            port:
              number: {{ .Values.webui.servicePort }}
 {{- end }}
--- a/kubernetes/helm/templates/webui-pvc.yaml
+++ b/kubernetes/helm/templates/webui-pvc.yaml
@ -2,8 +2,8 @@ apiVersion: v1
 kind: PersistentVolumeClaim
 metadata:
  labels:
-    app: ollama-webui
-  name: ollama-webui-pvc
+    app: open-webui
+  name: open-webui-pvc
  namespace: {{ .Values.namespace }}  
 spec:
  accessModes: [ "ReadWriteOnce" ]
--- a/kubernetes/helm/templates/webui-service.yaml
+++ b/kubernetes/helm/templates/webui-service.yaml
@ -1,12 +1,12 @@
 apiVersion: v1
 kind: Service
 metadata:
-  name: ollama-webui-service
+  name: open-webui-service
  namespace: {{ .Values.namespace }}
 spec:
  type: {{ .Values.webui.service.type }} # Default: NodePort  # Use LoadBalancer if you're on a cloud that supports it
  selector:
-    app: ollama-webui
+    app: open-webui
  ports:
    - protocol: TCP
      port: {{ .Values.webui.servicePort }}
--- a/kubernetes/helm/values.yaml
+++ b/kubernetes/helm/values.yaml
@ -1,15 +1,18 @@
-namespace: ollama-namespace
+namespace: open-webui

 ollama:
  replicaCount: 1
  image: ollama/ollama:latest
  servicePort: 11434
  resources:
-    limits:
+    requests:
      cpu: "2000m"
      memory: "2Gi"
+    limits:
+      cpu: "4000m"
+      memory: "4Gi"
      nvidia.com/gpu: "0"
-  volumeSize: 1Gi
+  volumeSize: 30Gi
  nodeSelector: {}
  tolerations: []
  service:
@ -19,19 +22,22 @@ ollama:

 webui:
  replicaCount: 1
-  image: ghcr.io/ollama-webui/ollama-webui:main
+  image: ghcr.io/open-webui/open-webui:main
  servicePort: 8080
  resources:
-    limits:
+    requests:
      cpu: "500m"
      memory: "500Mi"
+    limits:
+      cpu: "1000m"
+      memory: "1Gi"
  ingress:
    enabled: true
    annotations:
    # Use appropriate annotations for your Ingress controller, e.g., for NGINX:
      # nginx.ingress.kubernetes.io/rewrite-target: /
-    host: ollama.minikube.local
-  volumeSize: 1Gi
+    host: open-webui.minikube.local
+  volumeSize: 2Gi
  nodeSelector: {}
  tolerations: []
  service:
--- a/kubernetes/manifest/base/ollama-service.yaml
+++ b/kubernetes/manifest/base/ollama-service.yaml
@ -2,7 +2,7 @@ apiVersion: v1
 kind: Service
 metadata:
  name: ollama-service
-  namespace: ollama-namespace
+  namespace: open-webui
 spec:
  selector:
    app: ollama
--- a/kubernetes/manifest/base/ollama-statefulset.yaml
+++ b/kubernetes/manifest/base/ollama-statefulset.yaml
@ -2,7 +2,7 @@ apiVersion: apps/v1
 kind: StatefulSet
 metadata:
  name: ollama
-  namespace: ollama-namespace
+  namespace: open-webui
 spec:
  serviceName: "ollama"
  replicas: 1
@ -20,9 +20,13 @@ spec:
        ports:
        - containerPort: 11434
        resources:
-          limits:
+          requests:
            cpu: "2000m"
            memory: "2Gi"
+          limits:
+            cpu: "4000m"
+            memory: "4Gi"
+            nvidia.com/gpu: "0"
        volumeMounts:
        - name: ollama-volume
          mountPath: /root/.ollama
@ -34,4 +38,4 @@ spec:
      accessModes: [ "ReadWriteOnce" ]
      resources:
        requests:
-          storage: 1Gi
+          storage: 30Gi
--- a/kubernetes/manifest/base/ollama-namespace.yaml
+++ b/kubernetes/manifest/base/ollama-namespace.yaml
@ -1,4 +1,4 @@
 apiVersion: v1
 kind: Namespace
 metadata:
-  name: ollama-namespace
+  name: open-webui
--- a/kubernetes/manifest/base/webui-deployment.yaml
+++ b/kubernetes/manifest/base/webui-deployment.yaml
@ -1,28 +1,38 @@
 apiVersion: apps/v1
 kind: Deployment
 metadata:
-  name: ollama-webui-deployment
-  namespace: ollama-namespace
+  name: open-webui-deployment
+  namespace: open-webui
 spec:
  replicas: 1
  selector:
    matchLabels:
-      app: ollama-webui
+      app: open-webui
  template:
    metadata:
      labels:
-        app: ollama-webui
+        app: open-webui
    spec:
      containers:
-      - name: ollama-webui
-        image: ghcr.io/ollama-webui/ollama-webui:main
+      - name: open-webui
+        image: ghcr.io/open-webui/open-webui:main
        ports:
        - containerPort: 8080
        resources:
-          limits:
+          requests:
            cpu: "500m"
            memory: "500Mi"
+          limits:
+            cpu: "1000m"
+            memory: "1Gi"
        env:
        - name: OLLAMA_API_BASE_URL
-          value: "http://ollama-service.ollama-namespace.svc.cluster.local:11434/api"
+          value: "http://ollama-service.open-webui.svc.cluster.local:11434/api"
        tty: true
+        volumeMounts:
+        - name: webui-volume
+          mountPath: /app/backend/data
+      volumes:
+      - name: webui-volume
+        persistentVolumeClaim:
+          claimName: ollama-webui-pvc          
--- a/kubernetes/manifest/base/webui-ingress.yaml
+++ b/kubernetes/manifest/base/webui-ingress.yaml
@ -1,20 +1,20 @@
 apiVersion: networking.k8s.io/v1
 kind: Ingress
 metadata:
-  name: ollama-webui-ingress
-  namespace: ollama-namespace
+  name: open-webui-ingress
+  namespace: open-webui
  #annotations:
    # Use appropriate annotations for your Ingress controller, e.g., for NGINX:
    # nginx.ingress.kubernetes.io/rewrite-target: /
 spec:
  rules:
-  - host: ollama.minikube.local
+  - host: open-webui.minikube.local
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
-            name: ollama-webui-service
+            name: open-webui-service
            port:
              number: 8080
--- a/kubernetes/manifest/base/webui-pvc.yaml
+++ b/kubernetes/manifest/base/webui-pvc.yaml
@ -0,0 +1,12 @@
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+  labels:
+    app: ollama-webui
+  name: ollama-webui-pvc
+  namespace: ollama-namespace
+spec:
+  accessModes: ["ReadWriteOnce"]
+  resources:
+    requests:
+      storage: 2Gi
--- a/kubernetes/manifest/base/webui-service.yaml
+++ b/kubernetes/manifest/base/webui-service.yaml
@ -1,12 +1,12 @@
 apiVersion: v1
 kind: Service
 metadata:
-  name: ollama-webui-service
-  namespace: ollama-namespace
+  name: open-webui-service
+  namespace: open-webui
 spec:
  type: NodePort  # Use LoadBalancer if you're on a cloud that supports it
  selector:
-    app: ollama-webui
+    app: open-webui
  ports:
    - protocol: TCP
      port: 8080
--- a/kubernetes/manifest/kustomization.yaml
+++ b/kubernetes/manifest/kustomization.yaml
@ -1,5 +1,5 @@
 resources:
- base/ollama-namespace.yaml
+- base/open-webui.yaml
 - base/ollama-service.yaml
 - base/ollama-statefulset.yaml
 - base/webui-deployment.yaml
--- a/kubernetes/manifest/patches/ollama-statefulset-gpu.yaml
+++ b/kubernetes/manifest/patches/ollama-statefulset-gpu.yaml
@ -2,7 +2,7 @@ apiVersion: apps/v1
 kind: StatefulSet
 metadata:
  name: ollama
-  namespace: ollama-namespace
+  namespace: open-webui
 spec:
  selector:
    matchLabels:
--- a/package-lock.json
+++ b/package-lock.json
@ -1,11 +1,11 @@
 {
-	"name": "ollama-webui",
+	"name": "open-webui",
 	"version": "0.0.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
-			"name": "ollama-webui",
+			"name": "open-webui",
 			"version": "0.0.1",
 			"dependencies": {
 				"@sveltejs/adapter-node": "^1.3.1",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
-	"name": "ollama-webui",
-	"version": "0.0.1",
+	"name": "open-webui",
+	"version": "0.1.0-101",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev --host",
--- a/run.sh
+++ b/run.sh
@ -1,7 +1,7 @@
 #!/bin/bash

-image_name="ollama-webui"
-container_name="ollama-webui"
+image_name="open-webui"
+container_name="open-webui"
 host_port=3000
 container_port=8080

--- a/src/lib/apis/auths/index.ts
+++ b/src/lib/apis/auths/index.ts
@ -261,3 +261,60 @@ export const toggleSignUpEnabledStatus = async (token: string) => {

 	return res;
 };
+
+export const getJWTExpiresDuration = async (token: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/auths/token/expires`, {
+		method: 'GET',
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			error = err.detail;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const updateJWTExpiresDuration = async (token: string, duration: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/auths/token/expires/update`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`
+		},
+		body: JSON.stringify({
+			duration: duration
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			error = err.detail;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
--- a/src/lib/apis/images/index.ts
+++ b/src/lib/apis/images/index.ts
@ -0,0 +1,266 @@
+import { IMAGES_API_BASE_URL } from '$lib/constants';
+
+export const getImageGenerationEnabledStatus = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${IMAGES_API_BASE_URL}/enabled`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			if ('detail' in err) {
+				error = err.detail;
+			} else {
+				error = 'Server connection failed';
+			}
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const toggleImageGenerationEnabledStatus = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${IMAGES_API_BASE_URL}/enabled/toggle`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			if ('detail' in err) {
+				error = err.detail;
+			} else {
+				error = 'Server connection failed';
+			}
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const getAUTOMATIC1111Url = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${IMAGES_API_BASE_URL}/url`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			if ('detail' in err) {
+				error = err.detail;
+			} else {
+				error = 'Server connection failed';
+			}
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res.AUTOMATIC1111_BASE_URL;
+};
+
+export const updateAUTOMATIC1111Url = async (token: string = '', url: string) => {
+	let error = null;
+
+	const res = await fetch(`${IMAGES_API_BASE_URL}/url/update`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		},
+		body: JSON.stringify({
+			url: url
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			if ('detail' in err) {
+				error = err.detail;
+			} else {
+				error = 'Server connection failed';
+			}
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res.AUTOMATIC1111_BASE_URL;
+};
+
+export const getDiffusionModels = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${IMAGES_API_BASE_URL}/models`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			if ('detail' in err) {
+				error = err.detail;
+			} else {
+				error = 'Server connection failed';
+			}
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const getDefaultDiffusionModel = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${IMAGES_API_BASE_URL}/models/default`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			if ('detail' in err) {
+				error = err.detail;
+			} else {
+				error = 'Server connection failed';
+			}
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res.model;
+};
+
+export const updateDefaultDiffusionModel = async (token: string = '', model: string) => {
+	let error = null;
+
+	const res = await fetch(`${IMAGES_API_BASE_URL}/models/default/update`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		},
+		body: JSON.stringify({
+			model: model
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			if ('detail' in err) {
+				error = err.detail;
+			} else {
+				error = 'Server connection failed';
+			}
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res.model;
+};
+
+export const imageGenerations = async (token: string = '', prompt: string) => {
+	let error = null;
+
+	const res = await fetch(`${IMAGES_API_BASE_URL}/generations`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		},
+		body: JSON.stringify({
+			prompt: prompt
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			if ('detail' in err) {
+				error = err.detail;
+			} else {
+				error = 'Server connection failed';
+			}
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
--- a/src/lib/apis/index.ts
+++ b/src/lib/apis/index.ts
@ -1,9 +1,9 @@
-import { WEBUI_API_BASE_URL } from '$lib/constants';
+import { WEBUI_BASE_URL } from '$lib/constants';

 export const getBackendConfig = async () => {
 	let error = null;

-	const res = await fetch(`${WEBUI_API_BASE_URL}/`, {
+	const res = await fetch(`${WEBUI_BASE_URL}/api/config`, {
 		method: 'GET',
 		headers: {
 			'Content-Type': 'application/json'
--- a/src/lib/apis/ollama/index.ts
+++ b/src/lib/apis/ollama/index.ts
@ -133,9 +133,19 @@ export const getOllamaModels = async (token: string = '') => {
 	});
 };

-export const generateTitle = async (token: string = '', model: string, prompt: string) => {
+// TODO: migrate to backend
+export const generateTitle = async (
+	token: string = '',
+	template: string,
+	model: string,
+	prompt: string
+) => {
 	let error = null;

+	template = template.replace(/{{prompt}}/g, prompt);
+
+	console.log(template);
+
 	const res = await fetch(`${OLLAMA_API_BASE_URL}/generate`, {
 		method: 'POST',
 		headers: {
@ -144,7 +154,7 @@ export const generateTitle = async (token: string = '', model: string, prompt: s
 		},
 		body: JSON.stringify({
 			model: model,
-			prompt: `Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title': ${prompt}`,
+			prompt: template,
 			stream: false
 		})
 	})
--- a/src/lib/components/admin/Settings/General.svelte
+++ b/src/lib/components/admin/Settings/General.svelte
@ -1,15 +1,18 @@
 <script lang="ts">
 	import {
 		getDefaultUserRole,
+		getJWTExpiresDuration,
 		getSignUpEnabledStatus,
 		toggleSignUpEnabledStatus,
-		updateDefaultUserRole
+		updateDefaultUserRole,
+		updateJWTExpiresDuration
 	} from '$lib/apis/auths';
 	import { onMount } from 'svelte';

 	export let saveHandler: Function;
 	let signUpEnabled = true;
 	let defaultUserRole = 'pending';
+	let JWTExpiresIn = '';

 	const toggleSignUpEnabled = async () => {
 		signUpEnabled = await toggleSignUpEnabledStatus(localStorage.token);
@ -19,9 +22,14 @@
 		defaultUserRole = await updateDefaultUserRole(localStorage.token, role);
 	};

+	const updateJWTExpiresDurationHandler = async (duration) => {
+		JWTExpiresIn = await updateJWTExpiresDuration(localStorage.token, duration);
+	};
+
 	onMount(async () => {
 		signUpEnabled = await getSignUpEnabledStatus(localStorage.token);
 		defaultUserRole = await getDefaultUserRole(localStorage.token);
+		JWTExpiresIn = await getJWTExpiresDuration(localStorage.token);
 	});
 </script>

@ -29,6 +37,7 @@
 	class="flex flex-col h-full justify-between space-y-3 text-sm"
 	on:submit|preventDefault={() => {
 		// console.log('submit');
+		updateJWTExpiresDurationHandler(JWTExpiresIn);
 		saveHandler();
 	}}
 >
@ -94,6 +103,29 @@
 					</select>
 				</div>
 			</div>
+
+			<hr class=" dark:border-gray-700 my-3" />
+
+			<div class=" w-full justify-between">
+				<div class="flex w-full justify-between">
+					<div class=" self-center text-xs font-medium">JWT Expiration</div>
+				</div>
+
+				<div class="flex mt-2 space-x-2">
+					<input
+						class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
+						type="text"
+						placeholder={`e.g.) "30m","1h", "10d". `}
+						bind:value={JWTExpiresIn}
+					/>
+				</div>
+
+				<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
+					Valid time units: <span class=" text-gray-300 font-medium"
+						>'s', 'm', 'h', 'd', 'w' or '-1' for no expiration.</span
+					>
+				</div>
+			</div>
 		</div>
 	</div>

--- a/src/lib/components/chat/Messages.svelte
+++ b/src/lib/components/chat/Messages.svelte
@ -11,6 +11,7 @@
 	import ResponseMessage from './Messages/ResponseMessage.svelte';
 	import Placeholder from './Messages/Placeholder.svelte';
 	import Spinner from '../common/Spinner.svelte';
+	import { imageGenerations } from '$lib/apis/images';

 	export let chatId = '';
 	export let sendPrompt: Function;
@ -328,18 +329,28 @@
 								{/if}
 							{:else}
 								<ResponseMessage
-									{message}
-									modelfiles={selectedModelfiles}
-									siblings={history.messages[message.parentId]?.childrenIds ?? []}
-									isLastMessage={messageIdx + 1 === messages.length}
-									{confirmEditResponseMessage}
-									{showPreviousMessage}
-									{showNextMessage}
-									{rateMessage}
-									{copyToClipboard}
-									{continueGeneration}
-									{regenerateResponse}
-								/>
+								{message}
+								modelfiles={selectedModelfiles}
+								siblings={history.messages[message.parentId]?.childrenIds ?? []}
+								isLastMessage={messageIdx + 1 === messages.length}
+								{confirmEditResponseMessage}
+								{showPreviousMessage}
+								{showNextMessage}
+								{rateMessage}
+								{copyToClipboard}
+								{continueGeneration}
+								{regenerateResponse}
+								on:save={async (e) => {
+									console.log('save', e);
+
+									const message = e.detail;
+									history.messages[message.id] = message;
+									await updateChatById(localStorage.token, chatId, {
+										messages: messages,
+										history: history
+									});
+								}}
+							/>
 							{/if}
 						</div>
 					</div>
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@ -2,21 +2,25 @@
 	import toast from 'svelte-french-toast';
 	import dayjs from 'dayjs';
 	import { marked } from 'marked';
-	import { settings } from '$lib/stores';
 	import tippy from 'tippy.js';
 	import auto_render from 'katex/dist/contrib/auto-render.mjs';
 	import 'katex/dist/katex.min.css';

+	import { createEventDispatcher } from 'svelte';
 	import { onMount, tick } from 'svelte';

+	const dispatch = createEventDispatcher();
+
+	import { config, settings } from '$lib/stores';
+	import { synthesizeOpenAISpeech } from '$lib/apis/openai';
+	import { imageGenerations } from '$lib/apis/images';
+	import { extractSentences } from '$lib/utils';
+
 	import Name from './Name.svelte';
 	import ProfileImage from './ProfileImage.svelte';
 	import Skeleton from './Skeleton.svelte';
 	import CodeBlock from './CodeBlock.svelte';

-	import { synthesizeOpenAISpeech } from '$lib/apis/openai';
-	import { extractSentences } from '$lib/utils';
-
 	export let modelfiles = [];
 	export let message;
 	export let siblings;
@ -43,6 +47,8 @@

 	let loadingSpeech = false;

+	let generatingImage = false;
+
 	$: tokens = marked.lexer(message.content);

 	const renderer = new marked.Renderer();
@ -81,7 +87,9 @@
 				}<br/>
 					prompt_token/s: ${
 						Math.round(
-							((message.info.prompt_eval_count ?? 0) / (message.info.prompt_eval_duration / 1000000000)) * 100
+							((message.info.prompt_eval_count ?? 0) /
+								(message.info.prompt_eval_duration / 1000000000)) *
+								100
 						) / 100 ?? 'N/A'
 					} tokens<br/>
                    total_duration: ${
@ -114,10 +122,11 @@
 				// customised options
 				// • auto-render specific keys, e.g.:
 				delimiters: [
-					{ left: '$$', right: '$$', display: true },
-					// { left: '$', right: '$', display: false },
-					{ left: '\\(', right: '\\)', display: true },
-					{ left: '\\[', right: '\\]', display: true }
+					{ left: '$$', right: '$$', display: false },
+					{ left: '$', right: '$', display: false },
+					{ left: '\\(', right: '\\)', display: false },
+					{ left: '\\[', right: '\\]', display: false },
+					{ left: '[ ', right: ' ]', display: false }
 				],
 				// • rendering keys, e.g.:
 				throwOnError: false
@ -264,6 +273,23 @@
 		renderStyling();
 	};

+	const generateImage = async (message) => {
+		generatingImage = true;
+		const res = await imageGenerations(localStorage.token, message.content);
+		console.log(res);
+
+		if (res) {
+			message.files = res.images.map((image) => ({
+				type: 'image',
+				url: `data:image/png;base64,${image}`
+			}));
+
+			dispatch('save', message);
+		}
+
+		generatingImage = false;
+	};
+
 	onMount(async () => {
 		await tick();
 		renderStyling();
@ -292,6 +318,18 @@
 			{#if message.content === ''}
 				<Skeleton />
 			{:else}
+				{#if message.files}
+					<div class="my-2.5 w-full flex overflow-x-auto gap-2 flex-wrap">
+						{#each message.files as file}
+							<div>
+								{#if file.type === 'image'}
+									<img src={file.url} alt="input" class=" max-h-96 rounded-lg" draggable="false" />
+								{/if}
+							</div>
+						{/each}
+					</div>
+				{/if}
+
 				<div
 					class="prose chat-{message.role} w-full max-w-full dark:prose-invert prose-headings:my-0 prose-p:m-0 prose-p:-mb-6 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-6 prose-ol:-mb-8 prose-li:-mb-4 whitespace-pre-line"
 				>
@ -592,6 +630,71 @@
 											{/if}
 										</button>

+										{#if $config.images}
+											<button
+												class="{isLastMessage
+													? 'visible'
+													: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition"
+												on:click={() => {
+													if (!generatingImage) {
+														generateImage(message);
+													}
+												}}
+											>
+												{#if generatingImage}
+													<svg
+														class=" w-4 h-4"
+														fill="currentColor"
+														viewBox="0 0 24 24"
+														xmlns="http://www.w3.org/2000/svg"
+														><style>
+															.spinner_S1WN {
+																animation: spinner_MGfb 0.8s linear infinite;
+																animation-delay: -0.8s;
+															}
+															.spinner_Km9P {
+																animation-delay: -0.65s;
+															}
+															.spinner_JApP {
+																animation-delay: -0.5s;
+															}
+															@keyframes spinner_MGfb {
+																93.75%,
+																100% {
+																	opacity: 0.2;
+																}
+															}
+														</style><circle class="spinner_S1WN" cx="4" cy="12" r="3" /><circle
+															class="spinner_S1WN spinner_Km9P"
+															cx="12"
+															cy="12"
+															r="3"
+														/><circle
+															class="spinner_S1WN spinner_JApP"
+															cx="20"
+															cy="12"
+															r="3"
+														/></svg
+													>
+												{:else}
+													<svg
+														xmlns="http://www.w3.org/2000/svg"
+														fill="none"
+														viewBox="0 0 24 24"
+														stroke-width="1.5"
+														stroke="currentColor"
+														class="w-4 h-4"
+													>
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+														/>
+													</svg>
+												{/if}
+											</button>
+										{/if}
+
 										{#if message.info}
 											<button
 												class=" {isLastMessage
--- a/src/lib/components/chat/Settings/About.svelte
+++ b/src/lib/components/chat/Settings/About.svelte
@ -18,7 +18,7 @@
 			<div class=" mb-2.5 text-sm font-medium">{WEBUI_NAME} Version</div>
 			<div class="flex w-full">
 				<div class="flex-1 text-xs text-gray-700 dark:text-gray-200">
-					{$config && $config.version ? $config.version : WEB_UI_VERSION}
+					v{WEB_UI_VERSION}
 				</div>
 			</div>
 		</div>
@ -44,10 +44,17 @@
 				/>
 			</a>

-			<a href="https://github.com/ollama-webui/ollama-webui" target="_blank">
+			<a href="https://twitter.com/OpenWebUI" target="_blank">
+				<img
+					alt="X (formerly Twitter) Follow"
+					src="https://img.shields.io/twitter/follow/OpenWebUI"
+				/>
+			</a>
+
+			<a href="https://github.com/open-webui/open-webui" target="_blank">
 				<img
 					alt="Github Repo"
-					src="https://img.shields.io/github/stars/ollama-webui/ollama-webui?style=social&label=Star us on Github"
+					src="https://img.shields.io/github/stars/open-webui/open-webui?style=social&label=Star us on Github"
 				/>
 			</a>
 		</div>
--- a/src/lib/components/chat/Settings/Account.svelte
+++ b/src/lib/components/chat/Settings/Account.svelte
@ -7,11 +7,14 @@

 	import UpdatePassword from './Account/UpdatePassword.svelte';
 	import { getGravatarUrl } from '$lib/apis/utils';
+	import { copyToClipboard } from '$lib/utils';

 	export let saveHandler: Function;

 	let profileImageUrl = '';
 	let name = '';
+	let showJWTToken = false;
+	let JWTTokenCopied = false;

 	const submitHandler = async () => {
 		const updatedUser = await updateUserProfile(localStorage.token, name, profileImageUrl).catch(
@ -160,6 +163,108 @@

 		<hr class=" dark:border-gray-700 my-4" />
 		<UpdatePassword />
+
+		<hr class=" dark:border-gray-700 my-4" />
+
+		<div class=" w-full justify-between">
+			<div class="flex w-full justify-between">
+				<div class=" self-center text-xs font-medium">JWT Token</div>
+			</div>
+
+			<div class="flex mt-2">
+				<div class="flex w-full">
+					<input
+						class="w-full rounded-l-lg py-1.5 pl-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
+						type={showJWTToken ? 'text' : 'password'}
+						value={localStorage.token}
+						disabled
+					/>
+
+					<button
+						class="dark:bg-gray-800 px-2 transition rounded-r-lg"
+						on:click={() => {
+							showJWTToken = !showJWTToken;
+						}}
+					>
+						{#if showJWTToken}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 16 16"
+								fill="currentColor"
+								class="w-4 h-4"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
+									clip-rule="evenodd"
+								/>
+								<path
+									d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
+								/>
+							</svg>
+						{:else}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 16 16"
+								fill="currentColor"
+								class="w-4 h-4"
+							>
+								<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+								<path
+									fill-rule="evenodd"
+									d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+						{/if}
+					</button>
+				</div>
+
+				<button
+					class="ml-1.5 px-1.5 py-1 hover:bg-gray-800 transition rounded-lg"
+					on:click={() => {
+						copyToClipboard(localStorage.token);
+						JWTTokenCopied = true;
+						setTimeout(() => {
+							JWTTokenCopied = false;
+						}, 2000);
+					}}
+				>
+					{#if JWTTokenCopied}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="w-4 h-4"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					{:else}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 16 16"
+							fill="currentColor"
+							class="w-4 h-4"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M11.986 3H12a2 2 0 0 1 2 2v6a2 2 0 0 1-1.5 1.937V7A2.5 2.5 0 0 0 10 4.5H4.063A2 2 0 0 1 6 3h.014A2.25 2.25 0 0 1 8.25 1h1.5a2.25 2.25 0 0 1 2.236 2ZM10.5 4v-.75a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0-.75.75V4h3Z"
+								clip-rule="evenodd"
+							/>
+							<path
+								fill-rule="evenodd"
+								d="M3 6a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H3Zm1.75 2.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5ZM4 11.75a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 0 1.5h-3.5a.75.75 0 0 1-.75-.75Z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					{/if}
+				</button>
+			</div>
+		</div>
 	</div>

 	<div class="flex justify-end pt-3 text-sm font-medium">
--- a/src/lib/components/chat/Settings/Account/UpdatePassword.svelte
+++ b/src/lib/components/chat/Settings/Account/UpdatePassword.svelte
@ -39,7 +39,7 @@
 		updatePasswordHandler();
 	}}
 >
-	<div class="flex justify-between mb-2.5 items-center text-sm">
+	<div class="flex justify-between items-center text-sm">
 		<div class="  font-medium">Change Password</div>
 		<button
 			class=" text-xs font-medium text-gray-500"
@ -51,7 +51,7 @@
 	</div>

 	{#if show}
-		<div class=" space-y-1.5">
+		<div class=" py-2.5 space-y-1.5">
 			<div class="flex flex-col w-full">
 				<div class=" mb-1 text-xs text-gray-500">Current Password</div>

--- a/src/lib/components/chat/Settings/Connections.svelte
+++ b/src/lib/components/chat/Settings/Connections.svelte
@ -1,12 +1,17 @@
 <script lang="ts">
-	import { getOpenAIKey, getOpenAIUrl, updateOpenAIKey, updateOpenAIUrl } from '$lib/apis/openai';
 	import { models, user } from '$lib/stores';
 	import { createEventDispatcher, onMount } from 'svelte';
 	const dispatch = createEventDispatcher();

+	import { getOllamaAPIUrl, updateOllamaAPIUrl } from '$lib/apis/ollama';
+	import { getOpenAIKey, getOpenAIUrl, updateOpenAIKey, updateOpenAIUrl } from '$lib/apis/openai';
+	import toast from 'svelte-french-toast';
+
 	export let getModels: Function;

 	// External
+	let API_BASE_URL = '';
+
 	let OPENAI_API_KEY = '';
 	let OPENAI_API_BASE_URL = '';

@ -17,8 +22,19 @@
 		await models.set(await getModels());
 	};

+	const updateOllamaAPIUrlHandler = async () => {
+		API_BASE_URL = await updateOllamaAPIUrl(localStorage.token, API_BASE_URL);
+		const _models = await getModels('ollama');
+
+		if (_models.length > 0) {
+			toast.success('Server connection verified');
+			await models.set(_models);
+		}
+	};
+
 	onMount(async () => {
 		if ($user.role === 'admin') {
+			API_BASE_URL = await getOllamaAPIUrl(localStorage.token);
 			OPENAI_API_BASE_URL = await getOpenAIUrl(localStorage.token);
 			OPENAI_API_KEY = await getOpenAIKey(localStorage.token);
 		}
@ -26,7 +42,7 @@
 </script>

 <form
-	class="flex flex-col h-full justify-between space-y-3 text-sm"
+	class="flex flex-col h-full space-y-3 text-sm"
 	on:submit|preventDefault={() => {
 		updateOpenAIHandler();
 		dispatch('save');
@ -37,6 +53,52 @@
 		// });
 	}}
 >
+	<div>
+		<div class=" mb-2.5 text-sm font-medium">Ollama API URL</div>
+		<div class="flex w-full">
+			<div class="flex-1 mr-2">
+				<input
+					class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
+					placeholder="Enter URL (e.g. http://localhost:11434/api)"
+					bind:value={API_BASE_URL}
+				/>
+			</div>
+			<button
+				class="px-3 bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 rounded transition"
+				on:click={() => {
+					updateOllamaAPIUrlHandler();
+				}}
+				type="button"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+					class="w-4 h-4"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</button>
+		</div>
+
+		<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
+			Trouble accessing Ollama?
+			<a
+				class=" text-gray-300 font-medium"
+				href="https://github.com/open-webui/open-webui#troubleshooting"
+				target="_blank"
+			>
+				Click here for help.
+			</a>
+		</div>
+	</div>
+
+	<hr class=" dark:border-gray-700" />
+
 	<div class=" space-y-3">
 		<div>
 			<div class=" mb-2.5 text-sm font-medium">OpenAI API Key</div>
@ -50,13 +112,8 @@
 					/>
 				</div>
 			</div>
-			<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
-				Adds optional support for online models.
-			</div>
 		</div>

-		<hr class=" dark:border-gray-700" />
-
 		<div>
 			<div class=" mb-2.5 text-sm font-medium">OpenAI API Base URL</div>
 			<div class="flex w-full">
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@ -3,31 +3,20 @@
 	import { createEventDispatcher, onMount } from 'svelte';
 	const dispatch = createEventDispatcher();

-	import { getOllamaAPIUrl, updateOllamaAPIUrl } from '$lib/apis/ollama';
 	import { models, user } from '$lib/stores';

+	import AdvancedParams from './Advanced/AdvancedParams.svelte';
+
 	export let saveSettings: Function;
 	export let getModels: Function;

 	// General
-	let API_BASE_URL = '';
 	let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light'];
 	let theme = 'dark';
 	let notificationEnabled = false;
 	let system = '';

-	const toggleTheme = async () => {
-		if (theme === 'dark') {
-			theme = 'light';
-		} else {
-			theme = 'dark';
-		}
-
-		localStorage.theme = theme;
-
-		document.documentElement.classList.remove(theme === 'dark' ? 'light' : 'dark');
-		document.documentElement.classList.add(theme);
-	};
+	let showAdvanced = false;

 	const toggleNotification = async () => {
 		const permission = await Notification.requestPermission();
@ -42,170 +31,233 @@
 		}
 	};

-	const updateOllamaAPIUrlHandler = async () => {
-		API_BASE_URL = await updateOllamaAPIUrl(localStorage.token, API_BASE_URL);
-		const _models = await getModels('ollama');
+	// Advanced
+	let requestFormat = '';
+	let keepAlive = null;

-		if (_models.length > 0) {
-			toast.success('Server connection verified');
-			await models.set(_models);
+	let options = {
+		// Advanced
+		seed: 0,
+		temperature: '',
+		repeat_penalty: '',
+		repeat_last_n: '',
+		mirostat: '',
+		mirostat_eta: '',
+		mirostat_tau: '',
+		top_k: '',
+		top_p: '',
+		stop: '',
+		tfs_z: '',
+		num_ctx: '',
+		num_predict: ''
+	};
+
+	const toggleRequestFormat = async () => {
+		if (requestFormat === '') {
+			requestFormat = 'json';
+		} else {
+			requestFormat = '';
 		}
+
+		saveSettings({ requestFormat: requestFormat !== '' ? requestFormat : undefined });
 	};

 	onMount(async () => {
-		if ($user.role === 'admin') {
-			API_BASE_URL = await getOllamaAPIUrl(localStorage.token);
-		}
-
 		let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');

 		theme = localStorage.theme ?? 'dark';
 		notificationEnabled = settings.notificationEnabled ?? false;
 		system = settings.system ?? '';
+
+		requestFormat = settings.requestFormat ?? '';
+		keepAlive = settings.keepAlive ?? null;
+
+		options.seed = settings.seed ?? 0;
+		options.temperature = settings.temperature ?? '';
+		options.repeat_penalty = settings.repeat_penalty ?? '';
+		options.top_k = settings.top_k ?? '';
+		options.top_p = settings.top_p ?? '';
+		options.num_ctx = settings.num_ctx ?? '';
+		options = { ...options, ...settings.options };
+		options.stop = (settings?.options?.stop ?? []).join(',');
 	});
 </script>

-<div class="flex flex-col space-y-3">
-	<div>
-		<div class=" mb-1 text-sm font-medium">WebUI Settings</div>
+<div class="flex flex-col h-full justify-between text-sm">
+	<div class="  pr-1.5 overflow-y-scroll max-h-[21rem]">
+		<div class="">
+			<div class=" mb-1 text-sm font-medium">WebUI Settings</div>

-		<div class=" py-0.5 flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Theme</div>
-			<div class="flex items-center relative">
-				<div class=" absolute right-16">
-					{#if theme === 'dark'}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 20 20"
-							fill="currentColor"
-							class="w-4 h-4"
-						>
-							<path
-								fill-rule="evenodd"
-								d="M7.455 2.004a.75.75 0 01.26.77 7 7 0 009.958 7.967.75.75 0 011.067.853A8.5 8.5 0 116.647 1.921a.75.75 0 01.808.083z"
-								clip-rule="evenodd"
-							/>
-						</svg>
-					{:else if theme === 'light'}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 20 20"
-							fill="currentColor"
-							class="w-4 h-4 self-center"
-						>
-							<path
-								d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z"
-							/>
-						</svg>
-					{/if}
-				</div>
+			<div class=" py-0.5 flex w-full justify-between">
+				<div class=" self-center text-xs font-medium">Theme</div>
+				<div class="flex items-center relative">
+					<div class=" absolute right-16">
+						{#if theme === 'dark'}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 20 20"
+								fill="currentColor"
+								class="w-4 h-4"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M7.455 2.004a.75.75 0 01.26.77 7 7 0 009.958 7.967.75.75 0 011.067.853A8.5 8.5 0 116.647 1.921a.75.75 0 01.808.083z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+						{:else if theme === 'light'}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 20 20"
+								fill="currentColor"
+								class="w-4 h-4 self-center"
+							>
+								<path
+									d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z"
+								/>
+							</svg>
+						{/if}
+					</div>

-				<select
-					class="w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right"
-					bind:value={theme}
-					placeholder="Select a theme"
-					on:change={(e) => {
-						localStorage.theme = theme;
+					<select
+						class="w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right"
+						bind:value={theme}
+						placeholder="Select a theme"
+						on:change={(e) => {
+							localStorage.theme = theme;

-						themes
-							.filter((e) => e !== theme)
-							.forEach((e) => {
-								e.split(' ').forEach((e) => {
-									document.documentElement.classList.remove(e);
+							themes
+								.filter((e) => e !== theme)
+								.forEach((e) => {
+									e.split(' ').forEach((e) => {
+										document.documentElement.classList.remove(e);
+									});
 								});
+
+							theme.split(' ').forEach((e) => {
+								document.documentElement.classList.add(e);
 							});

-						theme.split(' ').forEach((e) => {
-							document.documentElement.classList.add(e);
-						});
-
-						console.log(theme);
-					}}
-				>
-					<option value="dark">Dark</option>
-					<option value="light">Light</option>
-					<option value="rose-pine dark">Rosé Pine</option>
-					<option value="rose-pine-dawn light">Rosé Pine Dawn</option>
-				</select>
-			</div>
-		</div>
-
-		<div>
-			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Notification</div>
-
-				<button
-					class="p-1 px-3 text-xs flex rounded transition"
-					on:click={() => {
-						toggleNotification();
-					}}
-					type="button"
-				>
-					{#if notificationEnabled === true}
-						<span class="ml-2 self-center">On</span>
-					{:else}
-						<span class="ml-2 self-center">Off</span>
-					{/if}
-				</button>
-			</div>
-		</div>
-	</div>
-
-	{#if $user.role === 'admin'}
-		<hr class=" dark:border-gray-700" />
-		<div>
-			<div class=" mb-2.5 text-sm font-medium">Ollama API URL</div>
-			<div class="flex w-full">
-				<div class="flex-1 mr-2">
-					<input
-						class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
-						placeholder="Enter URL (e.g. http://localhost:11434/api)"
-						bind:value={API_BASE_URL}
-					/>
-				</div>
-				<button
-					class="px-3 bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 rounded transition"
-					on:click={() => {
-						updateOllamaAPIUrlHandler();
-					}}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 20 20"
-						fill="currentColor"
-						class="w-4 h-4"
+							console.log(theme);
+						}}
 					>
-						<path
-							fill-rule="evenodd"
-							d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
-							clip-rule="evenodd"
-						/>
-					</svg>
-				</button>
+						<option value="dark">Dark</option>
+						<option value="light">Light</option>
+						<option value="rose-pine dark">Rosé Pine</option>
+						<option value="rose-pine-dawn light">Rosé Pine Dawn</option>
+					</select>
+				</div>
 			</div>

-			<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
-				Trouble accessing Ollama?
-				<a
-					class=" text-gray-300 font-medium"
-					href="https://github.com/ollama-webui/ollama-webui#troubleshooting"
-					target="_blank"
-				>
-					Click here for help.
-				</a>
+			<div>
+				<div class=" py-0.5 flex w-full justify-between">
+					<div class=" self-center text-xs font-medium">Notification</div>
+
+					<button
+						class="p-1 px-3 text-xs flex rounded transition"
+						on:click={() => {
+							toggleNotification();
+						}}
+						type="button"
+					>
+						{#if notificationEnabled === true}
+							<span class="ml-2 self-center">On</span>
+						{:else}
+							<span class="ml-2 self-center">Off</span>
+						{/if}
+					</button>
+				</div>
 			</div>
 		</div>
-	{/if}

-	<hr class=" dark:border-gray-700" />
+		<hr class=" dark:border-gray-700 my-3" />

-	<div>
-		<div class=" mb-2.5 text-sm font-medium">System Prompt</div>
-		<textarea
-			bind:value={system}
-			class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
-			rows="4"
-		/>
+		<div>
+			<div class=" my-2.5 text-sm font-medium">System Prompt</div>
+			<textarea
+				bind:value={system}
+				class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
+				rows="4"
+			/>
+		</div>
+
+		<div class="mt-2 space-y-3 pr-1.5">
+			<div class="flex justify-between items-center text-sm">
+				<div class="  font-medium">Advanced Parameters</div>
+				<button
+					class=" text-xs font-medium text-gray-500"
+					type="button"
+					on:click={() => {
+						showAdvanced = !showAdvanced;
+					}}>{showAdvanced ? 'Hide' : 'Show'}</button
+				>
+			</div>
+
+			{#if showAdvanced}
+				<AdvancedParams bind:options />
+				<hr class=" dark:border-gray-700" />
+
+				<div class=" py-1 w-full justify-between">
+					<div class="flex w-full justify-between">
+						<div class=" self-center text-xs font-medium">Keep Alive</div>
+
+						<button
+							class="p-1 px-3 text-xs flex rounded transition"
+							type="button"
+							on:click={() => {
+								keepAlive = keepAlive === null ? '5m' : null;
+							}}
+						>
+							{#if keepAlive === null}
+								<span class="ml-2 self-center"> Default </span>
+							{:else}
+								<span class="ml-2 self-center"> Custom </span>
+							{/if}
+						</button>
+					</div>
+
+					{#if keepAlive !== null}
+						<div class="flex mt-1 space-x-2">
+							<input
+								class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
+								type="text"
+								placeholder={`e.g.) "30s","10m". Valid time units are "s", "m", "h".`}
+								bind:value={keepAlive}
+							/>
+						</div>
+					{/if}
+				</div>
+
+				<div>
+					<div class=" py-1 flex w-full justify-between">
+						<div class=" self-center text-sm font-medium">Request Mode</div>
+
+						<button
+							class="p-1 px-3 text-xs flex rounded transition"
+							on:click={() => {
+								toggleRequestFormat();
+							}}
+						>
+							{#if requestFormat === ''}
+								<span class="ml-2 self-center"> Default </span>
+							{:else if requestFormat === 'json'}
+								<!-- <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            class="w-4 h-4 self-center"
+                        >
+                            <path
+                                d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z"
+                            />
+                        </svg> -->
+								<span class="ml-2 self-center"> JSON </span>
+							{/if}
+						</button>
+					</div>
+				</div>
+			{/if}
+		</div>
 	</div>

 	<div class="flex justify-end pt-3 text-sm font-medium">
@ -213,7 +265,23 @@
 			class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
 			on:click={() => {
 				saveSettings({
-					system: system !== '' ? system : undefined
+					system: system !== '' ? system : undefined,
+					options: {
+						seed: (options.seed !== 0 ? options.seed : undefined) ?? undefined,
+						stop: options.stop !== '' ? options.stop.split(',').filter((e) => e) : undefined,
+						temperature: options.temperature !== '' ? options.temperature : undefined,
+						repeat_penalty: options.repeat_penalty !== '' ? options.repeat_penalty : undefined,
+						repeat_last_n: options.repeat_last_n !== '' ? options.repeat_last_n : undefined,
+						mirostat: options.mirostat !== '' ? options.mirostat : undefined,
+						mirostat_eta: options.mirostat_eta !== '' ? options.mirostat_eta : undefined,
+						mirostat_tau: options.mirostat_tau !== '' ? options.mirostat_tau : undefined,
+						top_k: options.top_k !== '' ? options.top_k : undefined,
+						top_p: options.top_p !== '' ? options.top_p : undefined,
+						tfs_z: options.tfs_z !== '' ? options.tfs_z : undefined,
+						num_ctx: options.num_ctx !== '' ? options.num_ctx : undefined,
+						num_predict: options.num_predict !== '' ? options.num_predict : undefined
+					},
+					keepAlive: keepAlive ? (isNaN(keepAlive) ? keepAlive : parseInt(keepAlive)) : undefined
 				});
 				dispatch('save');
 			}}
--- a/src/lib/components/chat/Settings/Images.svelte
+++ b/src/lib/components/chat/Settings/Images.svelte
@ -0,0 +1,234 @@
+<script lang="ts">
+	import toast from 'svelte-french-toast';
+
+	import { createEventDispatcher, onMount } from 'svelte';
+	import { config, user } from '$lib/stores';
+	import {
+		getAUTOMATIC1111Url,
+		getDefaultDiffusionModel,
+		getDiffusionModels,
+		getImageGenerationEnabledStatus,
+		toggleImageGenerationEnabledStatus,
+		updateAUTOMATIC1111Url,
+		updateDefaultDiffusionModel
+	} from '$lib/apis/images';
+	import { getBackendConfig } from '$lib/apis';
+	const dispatch = createEventDispatcher();
+
+	export let saveSettings: Function;
+
+	let loading = false;
+
+	let enableImageGeneration = true;
+	let AUTOMATIC1111_BASE_URL = '';
+
+	let selectedModel = '';
+	let models = [];
+
+	const getModels = async () => {
+		models = await getDiffusionModels(localStorage.token).catch((error) => {
+			toast.error(error);
+			return null;
+		});
+		selectedModel = await getDefaultDiffusionModel(localStorage.token);
+	};
+
+	const updateAUTOMATIC1111UrlHandler = async () => {
+		const res = await updateAUTOMATIC1111Url(localStorage.token, AUTOMATIC1111_BASE_URL).catch(
+			(error) => {
+				toast.error(error);
+				return null;
+			}
+		);
+
+		if (res) {
+			AUTOMATIC1111_BASE_URL = res;
+
+			await getModels();
+
+			if (models) {
+				toast.success('Server connection verified');
+			}
+		} else {
+			AUTOMATIC1111_BASE_URL = await getAUTOMATIC1111Url(localStorage.token);
+		}
+	};
+
+	const toggleImageGeneration = async () => {
+		if (AUTOMATIC1111_BASE_URL) {
+			enableImageGeneration = await toggleImageGenerationEnabledStatus(localStorage.token).catch(
+				(error) => {
+					toast.error(error);
+					return false;
+				}
+			);
+
+			if (enableImageGeneration) {
+				config.set(await getBackendConfig(localStorage.token));
+				getModels();
+			}
+		} else {
+			enableImageGeneration = false;
+			toast.error('AUTOMATIC1111_BASE_URL not provided');
+		}
+	};
+
+	onMount(async () => {
+		if ($user.role === 'admin') {
+			enableImageGeneration = await getImageGenerationEnabledStatus(localStorage.token);
+			AUTOMATIC1111_BASE_URL = await getAUTOMATIC1111Url(localStorage.token);
+
+			if (enableImageGeneration && AUTOMATIC1111_BASE_URL) {
+				getModels();
+			}
+		}
+	});
+</script>
+
+<form
+	class="flex flex-col h-full justify-between space-y-3 text-sm"
+	on:submit|preventDefault={async () => {
+		loading = true;
+		const res = await updateDefaultDiffusionModel(localStorage.token, selectedModel);
+
+		dispatch('save');
+		loading = false;
+	}}
+>
+	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
+		<div>
+			<div class=" mb-1 text-sm font-medium">Image Settings</div>
+
+			<div>
+				<div class=" py-0.5 flex w-full justify-between">
+					<div class=" self-center text-xs font-medium">Image Generation (Experimental)</div>
+
+					<button
+						class="p-1 px-3 text-xs flex rounded transition"
+						on:click={() => {
+							toggleImageGeneration();
+						}}
+						type="button"
+					>
+						{#if enableImageGeneration === true}
+							<span class="ml-2 self-center">On</span>
+						{:else}
+							<span class="ml-2 self-center">Off</span>
+						{/if}
+					</button>
+				</div>
+			</div>
+		</div>
+		<hr class=" dark:border-gray-700" />
+
+		<div class=" mb-2.5 text-sm font-medium">AUTOMATIC1111 Base URL</div>
+		<div class="flex w-full">
+			<div class="flex-1 mr-2">
+				<input
+					class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
+					placeholder="Enter URL (e.g. http://127.0.0.1:7860/)"
+					bind:value={AUTOMATIC1111_BASE_URL}
+				/>
+			</div>
+			<button
+				class="px-3 bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 rounded transition"
+				type="button"
+				on:click={() => {
+					// updateOllamaAPIUrlHandler();
+
+					updateAUTOMATIC1111UrlHandler();
+				}}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+					class="w-4 h-4"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</button>
+		</div>
+
+		<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
+			Include `--api` flag when running stable-diffusion-webui
+			<a
+				class=" text-gray-300 font-medium"
+				href="https://github.com/AUTOMATIC1111/stable-diffusion-webui/discussions/3734"
+				target="_blank"
+			>
+				(e.g. `sh webui.sh --api`)
+			</a>
+		</div>
+
+		{#if enableImageGeneration}
+			<hr class=" dark:border-gray-700" />
+
+			<div>
+				<div class=" mb-2.5 text-sm font-medium">Set default model</div>
+				<div class="flex w-full">
+					<div class="flex-1 mr-2">
+						<select
+							class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
+							bind:value={selectedModel}
+							placeholder="Select a model"
+						>
+							{#if !selectedModel}
+								<option value="" disabled selected>Select a model</option>
+							{/if}
+							{#each models as model}
+								<option value={model.title} class="bg-gray-100 dark:bg-gray-700"
+									>{model.model_name}</option
+								>
+							{/each}
+						</select>
+					</div>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<div class="flex justify-end pt-3 text-sm font-medium">
+		<button
+			class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded flex flex-row space-x-1 items-center {loading
+				? ' cursor-not-allowed'
+				: ''}"
+			type="submit"
+			disabled={loading}
+		>
+			Save
+
+			{#if loading}
+				<div class="ml-2 self-center">
+					<svg
+						class=" w-4 h-4"
+						viewBox="0 0 24 24"
+						fill="currentColor"
+						xmlns="http://www.w3.org/2000/svg"
+						><style>
+							.spinner_ajPY {
+								transform-origin: center;
+								animation: spinner_AtaB 0.75s infinite linear;
+							}
+							@keyframes spinner_AtaB {
+								100% {
+									transform: rotate(360deg);
+								}
+							}
+						</style><path
+							d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+							opacity=".25"
+						/><path
+							d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+							class="spinner_ajPY"
+						/></svg
+					>
+				</div>
+			{/if}
+		</button>
+	</div>
+</form>
--- a/src/lib/components/chat/Settings/Interface.svelte
+++ b/src/lib/components/chat/Settings/Interface.svelte
@ -13,6 +13,7 @@
 	let responseAutoCopy = false;
 	let titleAutoGenerateModel = '';
 	let fullScreenMode = false;
+	let titleGenerationPrompt = '';

 	// Interface
 	let promptSuggestions = [];
@ -56,8 +57,14 @@
 	};

 	const updateInterfaceHandler = async () => {
-		promptSuggestions = await setDefaultPromptSuggestions(localStorage.token, promptSuggestions);
-		await config.set(await getBackendConfig());
+		if ($user.role === 'admin') {
+			promptSuggestions = await setDefaultPromptSuggestions(localStorage.token, promptSuggestions);
+			await config.set(await getBackendConfig());
+		}
+
+		saveSettings({
+			titleGenerationPrompt: titleGenerationPrompt ? titleGenerationPrompt : undefined
+		});
 	};

 	onMount(async () => {
@ -72,6 +79,9 @@
 		showUsername = settings.showUsername ?? false;
 		fullScreenMode = settings.fullScreenMode ?? false;
 		titleAutoGenerateModel = settings.titleAutoGenerateModel ?? '';
+		titleGenerationPrompt =
+			settings.titleGenerationPrompt ??
+			`Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title': {{prompt}}`;
 	});
 </script>

@ -212,6 +222,14 @@
 					</svg>
 				</button>
 			</div>
+			<div class="mt-3">
+				<div class=" mb-2.5 text-sm font-medium">Title Generation Prompt</div>
+				<textarea
+					bind:value={titleGenerationPrompt}
+					class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
+					rows="3"
+				/>
+			</div>
 		</div>

 		{#if $user.role === 'admin'}
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@ -7,14 +7,14 @@

 	import Modal from '../common/Modal.svelte';
 	import Account from './Settings/Account.svelte';
-	import Advanced from './Settings/Advanced.svelte';
 	import About from './Settings/About.svelte';
 	import Models from './Settings/Models.svelte';
 	import General from './Settings/General.svelte';
-	import External from './Settings/External.svelte';
 	import Interface from './Settings/Interface.svelte';
 	import Audio from './Settings/Audio.svelte';
 	import Chats from './Settings/Chats.svelte';
+	import Connections from './Settings/Connections.svelte';
+	import Images from './Settings/Images.svelte';

 	export let show = false;

@ -102,31 +102,31 @@
 					<div class=" self-center">General</div>
 				</button>

-				<button
-					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
-					'advanced'
-						? 'bg-gray-200 dark:bg-gray-700'
-						: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
-					on:click={() => {
-						selectedTab = 'advanced';
-					}}
-				>
-					<div class=" self-center mr-2">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 20 20"
-							fill="currentColor"
-							class="w-4 h-4"
-						>
-							<path
-								d="M17 2.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5zM17 15.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM3.75 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zM4.5 2.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5zM10 11a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 11zM10.75 2.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM10 6a2 2 0 100 4 2 2 0 000-4zM3.75 10a2 2 0 100 4 2 2 0 000-4zM16.25 10a2 2 0 100 4 2 2 0 000-4z"
-							/>
-						</svg>
-					</div>
-					<div class=" self-center">Advanced</div>
-				</button>
-
 				{#if $user?.role === 'admin'}
+					<button
+						class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+						'connections'
+							? 'bg-gray-200 dark:bg-gray-700'
+							: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
+						on:click={() => {
+							selectedTab = 'connections';
+						}}
+					>
+						<div class=" self-center mr-2">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 16 16"
+								fill="currentColor"
+								class="w-4 h-4"
+							>
+								<path
+									d="M1 9.5A3.5 3.5 0 0 0 4.5 13H12a3 3 0 0 0 .917-5.857 2.503 2.503 0 0 0-3.198-3.019 3.5 3.5 0 0 0-6.628 2.171A3.5 3.5 0 0 0 1 9.5Z"
+								/>
+							</svg>
+						</div>
+						<div class=" self-center">Connections</div>
+					</button>
+
 					<button
 						class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
 						'models'
@ -152,30 +152,6 @@
 						</div>
 						<div class=" self-center">Models</div>
 					</button>
-
-					<button
-						class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
-						'external'
-							? 'bg-gray-200 dark:bg-gray-700'
-							: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
-						on:click={() => {
-							selectedTab = 'external';
-						}}
-					>
-						<div class=" self-center mr-2">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 16 16"
-								fill="currentColor"
-								class="w-4 h-4"
-							>
-								<path
-									d="M1 9.5A3.5 3.5 0 0 0 4.5 13H12a3 3 0 0 0 .917-5.857 2.503 2.503 0 0 0-3.198-3.019 3.5 3.5 0 0 0-6.628 2.171A3.5 3.5 0 0 0 1 9.5Z"
-								/>
-							</svg>
-						</div>
-						<div class=" self-center">External</div>
-					</button>
 				{/if}

 				<button
@ -196,7 +172,7 @@
 						>
 							<path
 								fill-rule="evenodd"
-								d="M2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm10.5 5.707a.5.5 0 0 0-.146-.353l-1-1a.5.5 0 0 0-.708 0L9.354 9.646a.5.5 0 0 1-.708 0L6.354 7.354a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0-.146.353V12a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V9.707ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+								d="M2 4.25A2.25 2.25 0 0 1 4.25 2h7.5A2.25 2.25 0 0 1 14 4.25v5.5A2.25 2.25 0 0 1 11.75 12h-1.312c.1.128.21.248.328.36a.75.75 0 0 1 .234.545v.345a.75.75 0 0 1-.75.75h-4.5a.75.75 0 0 1-.75-.75v-.345a.75.75 0 0 1 .234-.545c.118-.111.228-.232.328-.36H4.25A2.25 2.25 0 0 1 2 9.75v-5.5Zm2.25-.75a.75.75 0 0 0-.75.75v4.5c0 .414.336.75.75.75h7.5a.75.75 0 0 0 .75-.75v-4.5a.75.75 0 0 0-.75-.75h-7.5Z"
 								clip-rule="evenodd"
 							/>
 						</svg>
@ -231,6 +207,34 @@
 					<div class=" self-center">Audio</div>
 				</button>

+				{#if $user.role === 'admin'}
+					<button
+						class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+						'images'
+							? 'bg-gray-200 dark:bg-gray-700'
+							: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
+						on:click={() => {
+							selectedTab = 'images';
+						}}
+					>
+						<div class=" self-center mr-2">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 16 16"
+								fill="currentColor"
+								class="w-4 h-4"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm10.5 5.707a.5.5 0 0 0-.146-.353l-1-1a.5.5 0 0 0-.708 0L9.354 9.646a.5.5 0 0 1-.708 0L6.354 7.354a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0-.146.353V12a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V9.707ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+						</div>
+						<div class=" self-center">Images</div>
+					</button>
+				{/if}
+
 				<button
 					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
 					'chats'
@ -318,17 +322,10 @@
 							show = false;
 						}}
 					/>
-				{:else if selectedTab === 'advanced'}
-					<Advanced
-						on:save={() => {
-							show = false;
-						}}
-						{saveSettings}
-					/>
 				{:else if selectedTab === 'models'}
 					<Models {getModels} />
-				{:else if selectedTab === 'external'}
-					<External
+				{:else if selectedTab === 'connections'}
+					<Connections
 						{getModels}
 						on:save={() => {
 							show = false;
@ -348,6 +345,13 @@
 							show = false;
 						}}
 					/>
+				{:else if selectedTab === 'images'}
+					<Images
+						{saveSettings}
+						on:save={() => {
+							show = false;
+						}}
+					/>
 				{:else if selectedTab === 'chats'}
 					<Chats {saveSettings} />
 				{:else if selectedTab === 'account'}
--- a/src/lib/components/common/Modal.svelte
+++ b/src/lib/components/common/Modal.svelte
@ -13,7 +13,7 @@
 		} else if (size === 'sm') {
 			return 'w-[30rem]';
 		} else {
-			return 'w-[42rem]';
+			return 'w-[44rem]';
 		}
 	};

--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@ -139,11 +139,9 @@

 		{#if $user?.role === 'admin'}
 			<div class="px-2.5 flex justify-center mt-0.5">
-				<button
+				<a
 					class="flex-grow flex space-x-3 rounded-md px-3 py-2 hover:bg-gray-900 transition"
-					on:click={async () => {
-						goto('/modelfiles');
-					}}
+					href="/modelfiles"
 				>
 					<div class="self-center">
 						<svg
@ -165,15 +163,13 @@
 					<div class="flex self-center">
 						<div class=" self-center font-medium text-sm">Modelfiles</div>
 					</div>
-				</button>
+				</a>
 			</div>

 			<div class="px-2.5 flex justify-center">
-				<button
+				<a
 					class="flex-grow flex space-x-3 rounded-md px-3 py-2 hover:bg-gray-900 transition"
-					on:click={async () => {
-						goto('/prompts');
-					}}
+					href="/prompts"
 				>
 					<div class="self-center">
 						<svg
@ -195,15 +191,13 @@
 					<div class="flex self-center">
 						<div class=" self-center font-medium text-sm">Prompts</div>
 					</div>
-				</button>
+				</a>
 			</div>

 			<div class="px-2.5 flex justify-center mb-1">
-				<button
+				<a
 					class="flex-grow flex space-x-3 rounded-md px-3 py-2 hover:bg-gray-900 transition"
-					on:click={async () => {
-						goto('/documents');
-					}}
+					href="/documents"
 				>
 					<div class="self-center">
 						<svg
@ -225,7 +219,7 @@
 					<div class="flex self-center">
 						<div class=" self-center font-medium text-sm">Documents</div>
 					</div>
-				</button>
+				</a>
 			</div>
 		{/if}

@ -360,22 +354,12 @@
 					}
 				}) as chat, i}
 					<div class=" w-full pr-2 relative">
-						<button
+						<a
 							class=" w-full flex justify-between rounded-md px-3 py-2 hover:bg-gray-900 {chat.id ===
 							$chatId
 								? 'bg-gray-900'
 								: ''} transition whitespace-nowrap text-ellipsis"
-							on:click={() => {
-								// goto(`/c/${chat.id}`);
-								if (chat.id !== chatTitleEditId) {
-									chatTitleEditId = null;
-									chatTitle = '';
-								}
-
-								if (chat.id !== $chatId) {
-									loadChat(chat.id);
-								}
-							}}
+							href="/c/{chat.id}"
 						>
 							<div class=" flex self-center flex-1">
 								<div class=" self-center mr-3">
@ -406,7 +390,7 @@
 									{/if}
 								</div>
 							</div>
-						</button>
+						</a>

 						{#if chat.id === $chatId}
 							<div class=" absolute right-[22px] top-[10px]">
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@ -1,4 +1,5 @@
 import { dev } from '$app/environment';
+// import { version } from '../../package.json';

 export const WEBUI_NAME = 'Open WebUI';
 export const WEBUI_BASE_URL = dev ? `http://${location.hostname}:8080` : ``;
@ -6,10 +7,11 @@ export const WEBUI_BASE_URL = dev ? `http://${location.hostname}:8080` : ``;
 export const WEBUI_API_BASE_URL = `${WEBUI_BASE_URL}/api/v1`;
 export const OLLAMA_API_BASE_URL = `${WEBUI_BASE_URL}/ollama/api`;
 export const OPENAI_API_BASE_URL = `${WEBUI_BASE_URL}/openai/api`;
-export const RAG_API_BASE_URL = `${WEBUI_BASE_URL}/rag/api/v1`;
 export const AUDIO_API_BASE_URL = `${WEBUI_BASE_URL}/audio/api/v1`;
+export const IMAGES_API_BASE_URL = `${WEBUI_BASE_URL}/images/api/v1`;
+export const RAG_API_BASE_URL = `${WEBUI_BASE_URL}/rag/api/v1`;

-export const WEB_UI_VERSION = 'v1.0.0-alpha-static';
+export const WEB_UI_VERSION = APP_VERSION;

 export const REQUIRED_OLLAMA_VERSION = '0.1.16';

--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@ -268,7 +268,7 @@
 									Trouble accessing Ollama?
 									<a
 										class=" text-black dark:text-white font-semibold underline"
-										href="https://github.com/ollama-webui/ollama-webui#troubleshooting"
+										href="https://github.com/open-webui/open-webui#troubleshooting"
 										target="_blank"
 									>
 										Click here for help.
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@ -742,6 +742,8 @@
 		if ($settings.titleAutoGenerate ?? true) {
 			const title = await generateTitle(
 				localStorage.token,
+				$settings?.titleGenerationPrompt ??
+					"Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title': {{prompt}}",
 				$settings?.titleAutoGenerateModel ?? selectedModels[0],
 				userPrompt
 			);
--- a/src/routes/(app)/admin/+page.svelte
+++ b/src/routes/(app)/admin/+page.svelte
@ -79,14 +79,20 @@
 >
 	{#if loaded}
 		<div class="overflow-y-auto w-full flex justify-center">
-			<div class="w-full max-w-3xl px-10 md:px-16 flex flex-col">
+			<div class="w-full max-w-3xl px-6 md:px-16 flex flex-col">
 				<div class="py-10 w-full">
 					<div class=" flex flex-col justify-center">
 						<div class=" flex justify-between items-center">
-							<div class=" text-2xl font-semibold">Users ({users.length})</div>
+							<div class="flex items-center text-2xl font-semibold">
+								All Users
+								<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-200 dark:bg-gray-700" />
+								<span class="text-lg font-medium text-gray-500 dark:text-gray-300"
+									>{users.length}</span
+								>
+							</div>
 							<div>
 								<button
-									class="flex items-center space-x-1 border border-gray-200 dark:border-gray-600 px-3 py-1 rounded-lg"
+									class="flex items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition"
 									type="button"
 									on:click={() => {
 										showSettingsModal = !showSettingsModal;
@ -109,45 +115,34 @@
 								</button>
 							</div>
 						</div>
-						<div class=" text-gray-500 text-xs font-medium mt-1">
-							Click on the user role cell in the table to change a user's role.
+						<div class=" text-gray-500 text-xs mt-1">
+							ⓘ Click on the user role button to change a user's role.
 						</div>

 						<hr class=" my-3 dark:border-gray-600" />

 						<div class="scrollbar-hidden relative overflow-x-auto whitespace-nowrap">
-							<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+							<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto">
 								<thead
 									class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
 								>
 									<tr>
-										<th scope="col" class="px-6 py-3"> Name </th>
-										<th scope="col" class="px-6 py-3"> Email </th>
-										<th scope="col" class="px-6 py-3"> Role </th>
-										<th scope="col" class="px-6 py-3"> Action </th>
+										<th scope="col" class="px-3 py-2"> Role </th>
+										<th scope="col" class="px-3 py-2"> Name </th>
+										<th scope="col" class="px-3 py-2"> Email </th>
+										<th scope="col" class="px-3 py-2"> Action </th>
 									</tr>
 								</thead>
 								<tbody>
 									{#each users as user}
-										<tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-700">
-											<th
-												scope="row"
-												class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white w-fit"
-											>
-												<div class="flex flex-row">
-													<img
-														class=" rounded-full max-w-[30px] max-h-[30px] object-cover mr-4"
-														src={user.profile_image_url}
-														alt="user"
-													/>
-
-													<div class=" font-semibold self-center">{user.name}</div>
-												</div>
-											</th>
-											<td class="px-6 py-4"> {user.email} </td>
-											<td class="px-6 py-4">
+										<tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-700 text-xs">
+											<td class="px-3 py-2 min-w-[7rem] w-28">
 												<button
-													class="  dark:text-white underline"
+													class=" flex items-center gap-2 text-xs px-3 py-0.5 rounded-lg {user.role ===
+														'admin' &&
+														'text-sky-600 dark:text-sky-200 bg-sky-200/30'} {user.role === 'user' &&
+														'text-green-600 dark:text-green-200 bg-green-200/30'} {user.role ===
+														'pending' && 'text-gray-600 dark:text-gray-200 bg-gray-200/30'}"
 													on:click={() => {
 														if (user.role === 'user') {
 															updateRoleHandler(user.id, 'admin');
@ -156,52 +151,77 @@
 														} else {
 															updateRoleHandler(user.id, 'pending');
 														}
-													}}>{user.role}</button
+													}}
+												>
+													<div
+														class="w-1 h-1 rounded-full {user.role === 'admin' &&
+															'bg-sky-600 dark:bg-sky-300'} {user.role === 'user' &&
+															'bg-green-600 dark:bg-green-300'} {user.role === 'pending' &&
+															'bg-gray-600 dark:bg-gray-300'}"
+													/>
+													{user.role}</button
 												>
 											</td>
-											<td class="px-6 py-4 space-x-1 text-center flex justify-center">
-												<button
-													class="self-center w-fit text-sm p-1.5 border dark:border-gray-600 rounded-xl flex"
-													on:click={async () => {
-														showEditUserModal = !showEditUserModal;
-														selectedUser = user;
-													}}
-												>
-													<svg
-														xmlns="http://www.w3.org/2000/svg"
-														viewBox="0 0 16 16"
-														fill="currentColor"
-														class="w-4 h-4"
-													>
-														<path
-															fill-rule="evenodd"
-															d="M11.013 2.513a1.75 1.75 0 0 1 2.475 2.474L6.226 12.25a2.751 2.751 0 0 1-.892.596l-2.047.848a.75.75 0 0 1-.98-.98l.848-2.047a2.75 2.75 0 0 1 .596-.892l7.262-7.261Z"
-															clip-rule="evenodd"
-														/>
-													</svg>
-												</button>
+											<td class="px-3 py-2 font-medium text-gray-900 dark:text-white w-max">
+												<div class="flex flex-row w-max">
+													<img
+														class=" rounded-full w-6 h-6 object-cover mr-2.5"
+														src={user.profile_image_url}
+														alt="user"
+													/>

-												<button
-													class="self-center w-fit text-sm p-1.5 border dark:border-gray-600 rounded-xl flex"
-													on:click={async () => {
-														deleteUserHandler(user.id);
-													}}
-												>
-													<svg
-														xmlns="http://www.w3.org/2000/svg"
-														fill="none"
-														viewBox="0 0 24 24"
-														stroke-width="1.5"
-														stroke="currentColor"
-														class="w-4 h-4"
+													<div class=" font-medium self-center">{user.name}</div>
+												</div>
+											</td>
+											<td class=" px-3 py-2"> {user.email} </td>
+
+											<td class="px-3 py-2">
+												<div class="flex justify-start w-full">
+													<button
+														class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+														on:click={async () => {
+															showEditUserModal = !showEditUserModal;
+															selectedUser = user;
+														}}
 													>
-														<path
-															stroke-linecap="round"
-															stroke-linejoin="round"
-															d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-														/>
-													</svg>
-												</button>
+														<svg
+															xmlns="http://www.w3.org/2000/svg"
+															fill="none"
+															viewBox="0 0 24 24"
+															stroke-width="1.5"
+															stroke="currentColor"
+															class="w-4 h-4"
+														>
+															<path
+																stroke-linecap="round"
+																stroke-linejoin="round"
+																d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
+															/>
+														</svg>
+													</button>
+
+													<button
+														class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+														on:click={async () => {
+															deleteUserHandler(user.id);
+														}}
+													>
+														<svg
+															xmlns="http://www.w3.org/2000/svg"
+															fill="none"
+															viewBox="0 0 24 24"
+															stroke-width="1.5"
+															stroke="currentColor"
+															class="w-4 h-4"
+														>
+															<path
+																stroke-linecap="round"
+																stroke-linejoin="round"
+																d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+															/>
+														</svg>
+													</button>
+												</div>
 											</td>
 										</tr>
 									{/each}
--- a/src/routes/(app)/c/[id]/+page.svelte
+++ b/src/routes/(app)/c/[id]/+page.svelte
@ -755,7 +755,13 @@

 	const generateChatTitle = async (_chatId, userPrompt) => {
 		if ($settings.titleAutoGenerate ?? true) {
-			const title = await generateTitle(localStorage.token, selectedModels[0], userPrompt);
+			const title = await generateTitle(
+				localStorage.token,
+				$settings?.titleGenerationPrompt ??
+					"Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title': {{prompt}}",
+				$settings?.titleAutoGenerateModel ?? selectedModels[0],
+				userPrompt
+			);

 			if (title) {
 				await setChatTitle(_chatId, title);
--- a/src/routes/(app)/documents/+page.svelte
+++ b/src/routes/(app)/documents/+page.svelte
@ -184,34 +184,39 @@
 <SettingsModal bind:show={showSettingsModal} />

 <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
-	<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto">
+	<div class=" flex flex-col justify-between w-full overflow-y-auto">
 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
-			<div class="mb-6 flex justify-between items-center">
-				<div class=" text-2xl font-semibold self-center">My Documents</div>
+			<div class="mb-6">
+				<div class="flex justify-between items-center">
+					<div class=" text-2xl font-semibold self-center">My Documents</div>

-				<div>
-					<button
-						class="flex items-center space-x-1 border border-gray-200 dark:border-gray-600 px-3 py-1 rounded-lg"
-						type="button"
-						on:click={() => {
-							showSettingsModal = !showSettingsModal;
-						}}
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 16 16"
-							fill="currentColor"
-							class="w-4 h-4"
+					<div>
+						<button
+							class="flex items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition"
+							type="button"
+							on:click={() => {
+								showSettingsModal = !showSettingsModal;
+							}}
 						>
-							<path
-								fill-rule="evenodd"
-								d="M6.955 1.45A.5.5 0 0 1 7.452 1h1.096a.5.5 0 0 1 .497.45l.17 1.699c.484.12.94.312 1.356.562l1.321-1.081a.5.5 0 0 1 .67.033l.774.775a.5.5 0 0 1 .034.67l-1.08 1.32c.25.417.44.873.561 1.357l1.699.17a.5.5 0 0 1 .45.497v1.096a.5.5 0 0 1-.45.497l-1.699.17c-.12.484-.312.94-.562 1.356l1.082 1.322a.5.5 0 0 1-.034.67l-.774.774a.5.5 0 0 1-.67.033l-1.322-1.08c-.416.25-.872.44-1.356.561l-.17 1.699a.5.5 0 0 1-.497.45H7.452a.5.5 0 0 1-.497-.45l-.17-1.699a4.973 4.973 0 0 1-1.356-.562L4.108 13.37a.5.5 0 0 1-.67-.033l-.774-.775a.5.5 0 0 1-.034-.67l1.08-1.32a4.971 4.971 0 0 1-.561-1.357l-1.699-.17A.5.5 0 0 1 1 8.548V7.452a.5.5 0 0 1 .45-.497l1.699-.17c.12-.484.312-.94.562-1.356L2.629 4.107a.5.5 0 0 1 .034-.67l.774-.774a.5.5 0 0 1 .67-.033L5.43 3.71a4.97 4.97 0 0 1 1.356-.561l.17-1.699ZM6 8c0 .538.212 1.026.558 1.385l.057.057a2 2 0 0 0 2.828-2.828l-.058-.056A2 2 0 0 0 6 8Z"
-								clip-rule="evenodd"
-							/>
-						</svg>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 16 16"
+								fill="currentColor"
+								class="w-4 h-4"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M6.955 1.45A.5.5 0 0 1 7.452 1h1.096a.5.5 0 0 1 .497.45l.17 1.699c.484.12.94.312 1.356.562l1.321-1.081a.5.5 0 0 1 .67.033l.774.775a.5.5 0 0 1 .034.67l-1.08 1.32c.25.417.44.873.561 1.357l1.699.17a.5.5 0 0 1 .45.497v1.096a.5.5 0 0 1-.45.497l-1.699.17c-.12.484-.312.94-.562 1.356l1.082 1.322a.5.5 0 0 1-.034.67l-.774.774a.5.5 0 0 1-.67.033l-1.322-1.08c-.416.25-.872.44-1.356.561l-.17 1.699a.5.5 0 0 1-.497.45H7.452a.5.5 0 0 1-.497-.45l-.17-1.699a4.973 4.973 0 0 1-1.356-.562L4.108 13.37a.5.5 0 0 1-.67-.033l-.774-.775a.5.5 0 0 1-.034-.67l1.08-1.32a4.971 4.971 0 0 1-.561-1.357l-1.699-.17A.5.5 0 0 1 1 8.548V7.452a.5.5 0 0 1 .45-.497l1.699-.17c.12-.484.312-.94.562-1.356L2.629 4.107a.5.5 0 0 1 .034-.67l.774-.774a.5.5 0 0 1 .67-.033L5.43 3.71a4.97 4.97 0 0 1 1.356-.561l.17-1.699ZM6 8c0 .538.212 1.026.558 1.385l.057.057a2 2 0 0 0 2.828-2.828l-.058-.056A2 2 0 0 0 6 8Z"
+									clip-rule="evenodd"
+								/>
+							</svg>

-						<div class=" text-xs">Document Settings</div>
-					</button>
+							<div class=" text-xs">Document Settings</div>
+						</button>
+					</div>
+				</div>
+				<div class=" text-gray-500 text-xs mt-1">
+					ⓘ Use '#' in the prompt input to load and select your documents.
 				</div>
 			</div>

@ -240,7 +245,7 @@

 				<div>
 					<button
-						class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
+						class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
 						on:click={() => {
 							document.getElementById('upload-doc-input')?.click();
 						}}
@ -281,9 +286,9 @@
 			<hr class=" dark:border-gray-700 my-2.5" />

 			{#if tags.length > 0}
-				<div class="px-2.5 mt-0.5 mb-2 flex gap-1 flex-wrap">
+				<div class="px-2.5 pt-1 flex gap-1 flex-wrap">
 					<button
-						class="px-2 py-0.5 space-x-1 flex h-fit items-center rounded-full transition border dark:border-gray-600 dark:text-white"
+						class="px-2 py-0.5 space-x-1 flex h-fit items-center rounded-full transition bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:text-white"
 						on:click={async () => {
 							selectedTag = '';
 							// await chats.set(await getChatListByTagName(localStorage.token, tag.name));
@ -293,7 +298,7 @@
 					</button>
 					{#each tags as tag}
 						<button
-							class="px-2 py-0.5 space-x-1 flex h-fit items-center rounded-full transition border dark:border-gray-600 dark:text-white"
+							class="px-2 py-0.5 space-x-1 flex h-fit items-center rounded-full transition bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:text-white"
 							on:click={async () => {
 								selectedTag = tag;
 								// await chats.set(await getChatListByTagName(localStorage.token, tag.name));
@ -307,156 +312,154 @@
 				</div>
 			{/if}

-			{#each $documents.filter((doc) => (selectedTag === '' || (doc?.content?.tags ?? [])
-							.map((tag) => tag.name)
-							.includes(selectedTag)) && (query === '' || doc.name.includes(query))) as doc}
-				<div class=" flex space-x-4 cursor-pointer w-full mt-3 mb-3">
-					<div class=" flex flex-1 space-x-4 cursor-pointer w-full">
-						<div class=" flex items-center space-x-3">
-							<div class="p-2.5 bg-red-400 text-white rounded-lg">
-								{#if doc}
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 24 24"
-										fill="currentColor"
-										class="w-6 h-6"
-									>
-										<path
-											fill-rule="evenodd"
-											d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z"
-											clip-rule="evenodd"
-										/>
-										<path
-											d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z"
-										/>
-									</svg>
-								{:else}
-									<svg
-										class=" w-6 h-6 translate-y-[0.5px]"
-										fill="currentColor"
-										viewBox="0 0 24 24"
-										xmlns="http://www.w3.org/2000/svg"
-										><style>
-											.spinner_qM83 {
-												animation: spinner_8HQG 1.05s infinite;
-											}
-											.spinner_oXPr {
-												animation-delay: 0.1s;
-											}
-											.spinner_ZTLf {
-												animation-delay: 0.2s;
-											}
-											@keyframes spinner_8HQG {
-												0%,
-												57.14% {
-													animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
-													transform: translate(0);
+			<div class="my-3 mb-5">
+				{#each $documents.filter((doc) => (selectedTag === '' || (doc?.content?.tags ?? [])
+								.map((tag) => tag.name)
+								.includes(selectedTag)) && (query === '' || doc.name.includes(query))) as doc}
+					<div
+						class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl"
+					>
+						<div class=" flex flex-1 space-x-4 cursor-pointer w-full">
+							<div class=" flex items-center space-x-3">
+								<div class="p-2.5 bg-red-400 text-white rounded-lg">
+									{#if doc}
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 24 24"
+											fill="currentColor"
+											class="w-6 h-6"
+										>
+											<path
+												fill-rule="evenodd"
+												d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z"
+												clip-rule="evenodd"
+											/>
+											<path
+												d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z"
+											/>
+										</svg>
+									{:else}
+										<svg
+											class=" w-6 h-6 translate-y-[0.5px]"
+											fill="currentColor"
+											viewBox="0 0 24 24"
+											xmlns="http://www.w3.org/2000/svg"
+											><style>
+												.spinner_qM83 {
+													animation: spinner_8HQG 1.05s infinite;
 												}
-												28.57% {
-													animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
-													transform: translateY(-6px);
+												.spinner_oXPr {
+													animation-delay: 0.1s;
 												}
-												100% {
-													transform: translate(0);
+												.spinner_ZTLf {
+													animation-delay: 0.2s;
 												}
-											}
-										</style><circle class="spinner_qM83" cx="4" cy="12" r="2.5" /><circle
-											class="spinner_qM83 spinner_oXPr"
-											cx="12"
-											cy="12"
-											r="2.5"
-										/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="2.5" /></svg
-									>
-								{/if}
-							</div>
-							<div class=" flex-1 self-center flex-1">
-								<div class=" font-bold line-clamp-1">#{doc.name} ({doc.filename})</div>
-								<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1">
-									{doc.title}
+												@keyframes spinner_8HQG {
+													0%,
+													57.14% {
+														animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
+														transform: translate(0);
+													}
+													28.57% {
+														animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
+														transform: translateY(-6px);
+													}
+													100% {
+														transform: translate(0);
+													}
+												}
+											</style><circle class="spinner_qM83" cx="4" cy="12" r="2.5" /><circle
+												class="spinner_qM83 spinner_oXPr"
+												cx="12"
+												cy="12"
+												r="2.5"
+											/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="2.5" /></svg
+										>
+									{/if}
+								</div>
+								<div class=" self-center flex-1">
+									<div class=" font-bold line-clamp-1">#{doc.name} ({doc.filename})</div>
+									<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1">
+										{doc.title}
+									</div>
 								</div>
 							</div>
 						</div>
-					</div>
-					<div class="flex flex-row space-x-1 self-center">
-						<button
-							class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
-							type="button"
-							on:click={async () => {
-								showEditDocModal = !showEditDocModal;
-								selectedDoc = doc;
-							}}
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="1.5"
-								stroke="currentColor"
-								class="w-4 h-4"
+						<div class="flex flex-row space-x-1 self-center">
+							<button
+								class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+								type="button"
+								on:click={async () => {
+									showEditDocModal = !showEditDocModal;
+									selectedDoc = doc;
+								}}
 							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
-								/>
-							</svg>
-						</button>
-
-						<!-- <button
-									class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
-									type="button"
-									on:click={() => {
-										console.log('download file');
-									}}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke-width="1.5"
+									stroke="currentColor"
+									class="w-4 h-4"
 								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 16 16"
-										fill="currentColor"
-										class="w-4 h-4"
-									>
-										<path
-											d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"
-										/>
-										<path
-											d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
-										/>
-									</svg>
-								</button> -->
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
+									/>
+								</svg>
+							</button>

-						<button
-							class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
-							type="button"
-							on:click={() => {
-								deleteDoc(doc.name);
-							}}
+							<!-- <button
+						class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
+						type="button"
+						on:click={() => {
+							console.log('download file');
+						}}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 16 16"
+							fill="currentColor"
+							class="w-4 h-4"
 						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="1.5"
-								stroke="currentColor"
-								class="w-4 h-4"
+							<path
+								d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"
+							/>
+							<path
+								d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
+							/>
+						</svg>
+					</button> -->
+
+							<button
+								class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+								type="button"
+								on:click={() => {
+									deleteDoc(doc.name);
+								}}
 							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-								/>
-							</svg>
-						</button>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke-width="1.5"
+									stroke="currentColor"
+									class="w-4 h-4"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+									/>
+								</svg>
+							</button>
+						</div>
 					</div>
-				</div>
+				{/each}
+			</div>

-				<div class=" my-2.5" />
-			{/each}
-
-			{#if $documents.length > 0}
-				<hr class=" dark:border-gray-700 my-2.5" />
-			{/if}
-
-			<div class=" flex justify-between w-full mb-3">
+			<div class=" flex justify-end w-full mb-2">
 				<div class="flex space-x-2">
 					<input
 						id="documents-import-input"
@ -493,7 +496,7 @@
 					/>

 					<button
-						class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex"
+						class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
 						on:click={async () => {
 							document.getElementById('documents-import-input')?.click();
 						}}
@ -517,7 +520,7 @@
 					</button>

 					<button
-						class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex"
+						class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
 						on:click={async () => {
 							let blob = new Blob([JSON.stringify($documents)], {
 								type: 'application/json'
@ -544,29 +547,6 @@
 					</button>
 				</div>
 			</div>
-
-			<div class="text-xs flex items-center space-x-1">
-				<div>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						class="w-3 h-3"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
-						/>
-					</svg>
-				</div>
-
-				<div class="line-clamp-1">
-					Tip: Use '#' in the prompt input to swiftly load and select your documents.
-				</div>
-			</div>
 		</div>
 	</div>
 </div>
--- a/src/routes/(app)/modelfiles/+page.svelte
+++ b/src/routes/(app)/modelfiles/+page.svelte
@ -12,6 +12,7 @@
 		deleteModelfileByTagName,
 		getModelfiles
 	} from '$lib/apis/modelfiles';
+	import { goto } from '$app/navigation';

 	let localModelfiles = [];
 	let importFiles;
@ -69,11 +70,11 @@
 </script>

 <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
-	<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto">
+	<div class="flex flex-col justify-between w-full overflow-y-auto">
 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
-			<div class=" text-2xl font-semibold mb-6">My Modelfiles</div>
+			<div class=" text-2xl font-semibold mb-3">My Modelfiles</div>

-			<a class=" flex space-x-4 cursor-pointer w-full mb-3" href="/modelfiles/create">
+			<a class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2" href="/modelfiles/create">
 				<div class=" self-center w-10">
 					<div
 						class="w-full h-10 flex justify-center rounded-full bg-transparent dark:bg-gray-700 border border-dashed border-gray-200"
@ -99,105 +100,132 @@
 				</div>
 			</a>

-			{#each $modelfiles as modelfile}
-				<hr class=" dark:border-gray-700 my-2.5" />
-				<div class=" flex space-x-4 cursor-pointer w-full mb-3">
-					<a
-						class=" flex flex-1 space-x-4 cursor-pointer w-full"
-						href={`/?models=${encodeURIComponent(modelfile.tagName)}`}
+			<hr class=" dark:border-gray-700" />
+
+			<div class=" my-2 mb-5">
+				{#each $modelfiles as modelfile}
+					<div
+						class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl"
 					>
-						<div class=" self-center w-10">
-							<div class=" rounded-full bg-stone-700">
-								<img
-									src={modelfile.imageUrl ?? '/user.png'}
-									alt="modelfile profile"
-									class=" rounded-full w-full h-auto object-cover"
-								/>
-							</div>
-						</div>
-
-						<div class=" flex-1 self-center">
-							<div class=" font-bold capitalize">{modelfile.title}</div>
-							<div class=" text-sm overflow-hidden text-ellipsis line-clamp-2">
-								{modelfile.desc}
-							</div>
-						</div>
-					</a>
-					<div class="flex flex-row space-x-1 self-center">
 						<a
-							class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
-							type="button"
-							href={`/modelfiles/edit?tag=${encodeURIComponent(modelfile.tagName)}`}
+							class=" flex flex-1 space-x-4 cursor-pointer w-full"
+							href={`/?models=${encodeURIComponent(modelfile.tagName)}`}
 						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="1.5"
-								stroke="currentColor"
-								class="w-4 h-4"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
-								/>
-							</svg>
+							<div class=" self-center w-10">
+								<div class=" rounded-full bg-stone-700">
+									<img
+										src={modelfile.imageUrl ?? '/user.png'}
+										alt="modelfile profile"
+										class=" rounded-full w-full h-auto object-cover"
+									/>
+								</div>
+							</div>
+
+							<div class=" flex-1 self-center">
+								<div class=" font-bold capitalize">{modelfile.title}</div>
+								<div class=" text-sm overflow-hidden text-ellipsis line-clamp-1">
+									{modelfile.desc}
+								</div>
+							</div>
 						</a>
-
-						<button
-							class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
-							type="button"
-							on:click={() => {
-								shareModelfile(modelfile);
-							}}
-						>
-							<!-- TODO: update to share icon -->
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="1.5"
-								stroke="currentColor"
-								class="w-4 h-4"
+						<div class="flex flex-row space-x-1 self-center">
+							<a
+								class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+								type="button"
+								href={`/modelfiles/edit?tag=${encodeURIComponent(modelfile.tagName)}`}
 							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z"
-								/>
-							</svg>
-						</button>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke-width="1.5"
+									stroke="currentColor"
+									class="w-4 h-4"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
+									/>
+								</svg>
+							</a>

-						<button
-							class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
-							type="button"
-							on:click={() => {
-								deleteModelfile(modelfile.tagName);
-							}}
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="1.5"
-								stroke="currentColor"
-								class="w-4 h-4"
+							<button
+								class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+								type="button"
+								on:click={() => {
+									// console.log(modelfile);
+									sessionStorage.modelfile = JSON.stringify(modelfile);
+									goto('/modelfiles/create');
+								}}
 							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-								/>
-							</svg>
-						</button>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke-width="1.5"
+									stroke="currentColor"
+									class="w-4 h-4"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+									/>
+								</svg>
+							</button>
+
+							<button
+								class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+								type="button"
+								on:click={() => {
+									shareModelfile(modelfile);
+								}}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke-width="1.5"
+									stroke="currentColor"
+									class="w-4 h-4"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z"
+									/>
+								</svg>
+							</button>
+
+							<button
+								class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+								type="button"
+								on:click={() => {
+									deleteModelfile(modelfile.tagName);
+								}}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke-width="1.5"
+									stroke="currentColor"
+									class="w-4 h-4"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+									/>
+								</svg>
+							</button>
+						</div>
 					</div>
-				</div>
-			{/each}
+				{/each}
+			</div>

-			<hr class=" dark:border-gray-700 my-2.5" />
-
-			<div class=" flex justify-between w-full mb-3">
+			<div class=" flex justify-end w-full mb-3">
 				<div class="flex space-x-1">
 					<input
 						id="modelfiles-import-input"
@ -227,7 +255,7 @@
 					/>

 					<button
-						class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex"
+						class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
 						on:click={async () => {
 							document.getElementById('modelfiles-import-input')?.click();
 						}}
@ -251,7 +279,7 @@
 					</button>

 					<button
-						class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex"
+						class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
 						on:click={async () => {
 							saveModelfiles($modelfiles);
 						}}
@ -348,10 +376,10 @@
 			</div>

 			<div class=" my-16">
-				<div class=" text-2xl font-semibold mb-6">Made by OpenWebUI Community</div>
+				<div class=" text-2xl font-semibold mb-3">Made by OpenWebUI Community</div>

 				<a
-					class=" flex space-x-4 cursor-pointer w-full mb-3"
+					class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2"
 					href="https://openwebui.com/"
 					target="_blank"
 				>
@ -376,7 +404,7 @@

 					<div class=" self-center">
 						<div class=" font-bold">Discover a modelfile</div>
-						<div class=" text-sm">Discover, download, and explore Ollama Modelfiles</div>
+						<div class=" text-sm">Discover, download, and explore model presets</div>
 					</div>
 				</a>
 			</div>
--- a/src/routes/(app)/modelfiles/create/+page.svelte
+++ b/src/routes/(app)/modelfiles/create/+page.svelte
@ -209,7 +209,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 		success = false;
 	};

-	onMount(() => {
+	onMount(async () => {
 		window.addEventListener('message', async (event) => {
 			if (
 				![
@ -253,11 +253,36 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 		if (window.opener ?? false) {
 			window.opener.postMessage('loaded', '*');
 		}
+
+		if (sessionStorage.modelfile) {
+			const modelfile = JSON.parse(sessionStorage.modelfile);
+			console.log(modelfile);
+			imageUrl = modelfile.imageUrl;
+			title = modelfile.title;
+			await tick();
+			tagName = modelfile.tagName;
+			desc = modelfile.desc;
+			content = modelfile.content;
+			suggestions =
+				modelfile.suggestionPrompts.length != 0
+					? modelfile.suggestionPrompts
+					: [
+							{
+								content: ''
+							}
+					  ];
+
+			for (const category of modelfile.categories) {
+				categories[category.toLowerCase()] = true;
+			}
+
+			sessionStorage.removeItem('modelfile');
+		}
 	});
 </script>

 <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
-	<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto">
+	<div class=" flex flex-col justify-between w-full overflow-y-auto">
 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
 			<input
 				bind:this={filesInputElement}
--- a/src/routes/(app)/modelfiles/edit/+page.svelte
+++ b/src/routes/(app)/modelfiles/edit/+page.svelte
@ -181,7 +181,7 @@
 </script>

 <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
-	<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto">
+	<div class="flex flex-col justify-between w-full overflow-y-auto">
 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
 			<input
 				bind:this={filesInputElement}
--- a/src/routes/(app)/prompts/+page.svelte
+++ b/src/routes/(app)/prompts/+page.svelte
@ -7,6 +7,7 @@
 	import { prompts } from '$lib/stores';
 	import { createNewPrompt, deletePromptByCommand, getPrompts } from '$lib/apis/prompts';
 	import { error } from '@sveltejs/kit';
+	import { goto } from '$app/navigation';

 	let importFiles = '';
 	let query = '';
@ -36,7 +37,7 @@
 </script>

 <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
-	<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto">
+	<div class="flex flex-col justify-between w-full overflow-y-auto">
 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
 			<div class="mb-6 flex justify-between items-center">
 				<div class=" text-2xl font-semibold self-center">My Prompts</div>
@ -67,7 +68,7 @@

 				<div>
 					<a
-						class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
+						class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
 						href="/prompts/create"
 					>
 						<svg
@ -83,13 +84,13 @@
 					</a>
 				</div>
 			</div>
+			<hr class=" dark:border-gray-700 my-2.5" />

-			{#if $prompts.length === 0}
-				<div />
-			{:else}
+			<div class="my-3 mb-5">
 				{#each $prompts.filter((p) => query === '' || p.command.includes(query)) as prompt}
-					<hr class=" dark:border-gray-700 my-2.5" />
-					<div class=" flex space-x-4 cursor-pointer w-full mb-3">
+					<div
+						class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl"
+					>
 						<div class=" flex flex-1 space-x-4 cursor-pointer w-full">
 							<a href={`/prompts/edit?command=${encodeURIComponent(prompt.command)}`}>
 								<div class=" flex-1 self-center pl-5">
@ -102,7 +103,7 @@
 						</div>
 						<div class="flex flex-row space-x-1 self-center">
 							<a
-								class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
+								class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 								type="button"
 								href={`/prompts/edit?command=${encodeURIComponent(prompt.command)}`}
 							>
@ -123,7 +124,32 @@
 							</a>

 							<button
-								class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
+								class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+								type="button"
+								on:click={() => {
+									// console.log(modelfile);
+									sessionStorage.prompt = JSON.stringify(prompt);
+									goto('/prompts/create');
+								}}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke-width="1.5"
+									stroke="currentColor"
+									class="w-4 h-4"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+									/>
+								</svg>
+							</button>
+
+							<button
+								class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 								type="button"
 								on:click={() => {
 									sharePrompt(prompt);
@ -146,7 +172,7 @@
 							</button>

 							<button
-								class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
+								class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 								type="button"
 								on:click={() => {
 									deletePrompt(prompt.command);
@ -170,11 +196,9 @@
 						</div>
 					</div>
 				{/each}
-			{/if}
+			</div>

-			<hr class=" dark:border-gray-700 my-2.5" />
-
-			<div class=" flex justify-between w-full mb-3">
+			<div class=" flex justify-end w-full mb-3">
 				<div class="flex space-x-2">
 					<input
 						id="prompts-import-input"
@ -210,7 +234,7 @@
 					/>

 					<button
-						class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex"
+						class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
 						on:click={async () => {
 							document.getElementById('prompts-import-input')?.click();
 						}}
@ -234,7 +258,7 @@
 					</button>

 					<button
-						class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex"
+						class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
 						on:click={async () => {
 							// document.getElementById('modelfiles-import-input')?.click();
 							let blob = new Blob([JSON.stringify($prompts)], {
@ -272,10 +296,10 @@
 			</div>

 			<div class=" my-16">
-				<div class=" text-2xl font-semibold mb-6">Made by OpenWebUI Community</div>
+				<div class=" text-2xl font-semibold mb-3">Made by OpenWebUI Community</div>

 				<a
-					class=" flex space-x-4 cursor-pointer w-full mb-3"
+					class=" flex space-x-4 cursor-pointer w-full mb-3 px-3 py-2"
 					href="https://openwebui.com/?type=prompts"
 					target="_blank"
 				>
@ -300,7 +324,7 @@

 					<div class=" self-center">
 						<div class=" font-bold">Discover a prompt</div>
-						<div class=" text-sm">Discover, download, and explore custom Prompts</div>
+						<div class=" text-sm">Discover, download, and explore custom prompts</div>
 					</div>
 				</a>
 			</div>
--- a/src/routes/(app)/prompts/create/+page.svelte
+++ b/src/routes/(app)/prompts/create/+page.svelte
@ -50,7 +50,7 @@
 		return regex.test(inputString);
 	};

-	onMount(() => {
+	onMount(async () => {
 		window.addEventListener('message', async (event) => {
 			if (
 				![
@ -74,11 +74,23 @@
 		if (window.opener ?? false) {
 			window.opener.postMessage('loaded', '*');
 		}
+
+		if (sessionStorage.prompt) {
+			const prompt = JSON.parse(sessionStorage.prompt);
+
+			console.log(prompt);
+			title = prompt.title;
+			await tick();
+			content = prompt.content;
+			command = prompt.command.at(0) === '/' ? prompt.command.slice(1) : prompt.command;
+
+			sessionStorage.removeItem('prompt');
+		}
 	});
 </script>

 <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
-	<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto">
+	<div class=" flex flex-col justify-between w-full overflow-y-auto">
 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
 			<div class=" text-2xl font-semibold mb-6">My Prompts</div>

--- a/src/routes/(app)/prompts/edit/+page.svelte
+++ b/src/routes/(app)/prompts/edit/+page.svelte
@ -72,7 +72,7 @@
 </script>

 <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
-	<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto">
+	<div class="flex flex-col justify-between w-full overflow-y-auto">
 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
 			<div class=" text-2xl font-semibold mb-6">My Prompts</div>

--- a/src/routes/error/+page.svelte
+++ b/src/routes/error/+page.svelte
@ -30,7 +30,7 @@
 						<br class=" " />
 						<a
 							class=" font-semibold underline"
-							href="https://github.com/ollama-webui/ollama-webui#how-to-install-"
+							href="https://github.com/open-webui/open-webui#how-to-install-"
 							target="_blank">See readme.md for instructions</a
 						>
 						or
--- a/vite.config.ts
+++ b/vite.config.ts
@ -2,5 +2,8 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';

 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
+	define: {
+		APP_VERSION: JSON.stringify(process.env.npm_package_version)
+	}
 });