diff --git a/.github/workflows/on-pull-req.yaml b/.github/workflows/on-pull-req.yaml
index 153f40b7..e6874174 100644
--- a/.github/workflows/on-pull-req.yaml
+++ b/.github/workflows/on-pull-req.yaml
@@ -3,7 +3,7 @@ on:
   pull_request:
     branches: [main]
 jobs:
-  prettier:
+  check:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v4
diff --git a/.github/workflows/on-push-server.yaml b/.github/workflows/on-push-server.yaml
deleted file mode 100644
index 1d740cf1..00000000
--- a/.github/workflows/on-push-server.yaml
+++ /dev/null
@@ -1,32 +0,0 @@
-name: On Push Server
-on:
-  push: {branches: [server]}
-jobs:
-  push-docker-image:
-    runs-on: ubuntu-latest
-    env:
-      DOCKER_CLI_EXPERIMENTAL: enabled
-    steps:
-    - uses: actions/checkout@v4
-    - name: metadata
-      id: metadata
-      run: |
-        git fetch --all --tags
-        TAG=$(git describe --tags)
-        echo "tag=${TAG/-*}" >> $GITHUB_OUTPUT
-    - uses: docker/setup-qemu-action@v3
-    - uses: docker/setup-buildx-action@v3
-      with:
-        install: true
-    - uses: docker/login-action@v3
-      with:
-        registry: ghcr.io
-        username: ${{ github.repository_owner }}
-        password: ${{ secrets.GITHUB_TOKEN }}
-    - name: Build & push prem
-      run: >-
-        docker buildx build --push
-        --file Dockerfile
-        --tag ghcr.io/premai-io/prem-app:latest
-        --tag ghcr.io/premai-io/prem-app:${{ steps.metadata.outputs.tag }}
-        --platform linux/arm64,linux/amd64 .
diff --git a/.github/workflows/on-workflow-dispatch-docker.yaml b/.github/workflows/on-workflow-dispatch-docker.yaml
new file mode 100644
index 00000000..01d5002d
--- /dev/null
+++ b/.github/workflows/on-workflow-dispatch-docker.yaml
@@ -0,0 +1,52 @@
+name: 🚀 Docker Image
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Version tag for the Docker image (optional, will use latest Git tag if empty)'
+        required: false
+        type: string
+      tag_as_latest:
+        description: 'Also tag as latest?'
+        required: false
+        default: false
+        type: boolean
+
+jobs:
+  push-docker-image:
+    runs-on: ubuntu-latest
+    env:
+      DOCKER_CLI_EXPERIMENTAL: enabled
+    steps:
+      - uses: actions/checkout@v4
+      - name: Determine tag
+        id: tag
+        run: |
+          if [ -z "${{ github.event.inputs.version }}" ]; then
+            git fetch --all --tags
+            TAG=$(git describe --tags `git rev-list --tags --max-count=1`)
+          else
+            TAG=${{ github.event.inputs.version }}
+          fi
+          echo "VERSION_TAG=$TAG" >> $GITHUB_ENV
+      - uses: docker/setup-qemu-action@v3
+      - uses: docker/setup-buildx-action@v3
+        with:
+          install: true
+      - uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Build & push
+        run: |
+            docker buildx build --push \
+              --file Dockerfile \
+              --tag ghcr.io/premai-io/prem-app:$VERSION_TAG \
+              ${{ github.event.inputs.tag_as_latest == 'true' && '--tag ghcr.io/premai-io/prem-app:latest' || '' }} \
+              --platform linux/arm64,linux/amd64 .
+        shell: /usr/bin/bash -e {0}
+        env:
+          DOCKER_CLI_EXPERIMENTAL: enabled
+        
diff --git a/.github/workflows/on-workflow-dispatch-tauri.yaml b/.github/workflows/on-workflow-dispatch-tauri.yaml
new file mode 100644
index 00000000..91cd07aa
--- /dev/null
+++ b/.github/workflows/on-workflow-dispatch-tauri.yaml
@@ -0,0 +1,132 @@
+name: 🚀 Tauri Dekstop App
+
+on:
+  workflow_dispatch:
+    inputs:
+      branchName:
+        description: 'Branch Name you are releasing from'
+        required: true
+      version:
+          description: 'Version tag for the Github Release and the .dmg for MacOS'
+          required: true
+      release_as_draft:
+            description: 'Release as Draft'
+            required: false
+            default: true
+            type: boolean
+
+jobs:
+  publish-tauri:
+    permissions: write-all
+    strategy:
+      fail-fast: false
+      matrix:
+        platform: [macos-latest]
+
+    runs-on: ${{ matrix.platform }}
+
+    steps:
+
+      - name: View branch name
+        run: |
+          echo "Branch name: ${{ github.event.inputs.branchName }}"
+      
+      - name: View version 
+        run: |
+          echo "Tag: ${{ github.event.inputs.version }}"
+
+      - name: Version as Number 
+        id: next_version
+        run: |
+          tag=${{ github.event.inputs.version }}
+          echo "version=${tag:1}" >> $GITHUB_OUTPUT
+
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Rust setup
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: install dependencies (ubuntu only)
+        if: matrix.platform == 'ubuntu-20.04'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev libappindicator3-dev librsvg2-dev patchelf
+
+      - name: Install missing Rust target for universal Mac build
+        if: matrix.platform == 'macos-latest'
+        run: rustup target add aarch64-apple-darwin
+
+      - name: Rust cache
+        uses: swatinem/rust-cache@v2
+        with:
+          workspaces: "./src-tauri -> target"
+
+      - name: Sync node version and setup cache
+        uses: actions/setup-node@v3
+        with:
+          node-version: "lts/*"
+          cache: "npm"
+
+      - name: Install frontend dependencies
+        run: npm install
+
+
+      - name: Set up Go
+        uses: actions/setup-go@v3
+        with:
+          go-version: ^1.20.1
+        id: go
+
+      - name: Install dasel
+        run: |
+          go install github.com/tomwright/dasel/cmd/dasel@latest
+
+
+      - name: Update with latest branch
+        run: |
+          git config --local user.email "$(git log --format='%ae' HEAD^!)"
+          git config --local user.name "$(git log --format='%an' HEAD^!)"
+          git config pull.rebase true
+          git stash  
+          git fetch origin ${{ github.event.inputs.branchName }}
+          git pull origin ${{ github.event.inputs.branchName }}
+          git stash pop || true
+
+      - name: Increment version
+        run: |
+          dasel put string -f package.json ".version" "${{ steps.next_version.outputs.version }}"
+          dasel put string -f src-tauri/tauri.conf.json ".package.version" "${{ steps.next_version.outputs.version }}"
+          dasel put string -f src-tauri/Cargo.toml ".package.version" "${{ steps.next_version.outputs.version }}"
+
+      - name: Build the app
+        uses: tauri-apps/tauri-action@dev
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          ENABLE_CODE_SIGNING: ${{ secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
+          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
+          APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+        with:
+          tagName: ${{ github.event.inputs.version }}
+          releaseName: "PremAI App ${{ github.event.inputs.version }}"
+          releaseBody: "See the assets to download and install this version."
+          releaseDraft: ${{ github.event.inputs.release_as_draft }} 
+          includeDebug: true
+          updaterJsonKeepUniversal: true
+          args: ${{matrix.platform == 'ubuntu-20.04' && '--target x86_64-unknown-linux-gnu' || '--target universal-apple-darwin'}}
+      
+
+      # Commit package.json, tauri.conf.json and Cargo.toml to master
+      - name: Commit & Push
+        continue-on-error: true
+        run: |
+          git add .
+          git commit -m "${{ github.event.inputs.version }}"
+          git push origin HEAD:${{ github.event.inputs.branchName }}
+          
+  
diff --git a/docker-compose.gateway.yml b/docker-compose.gateway.yml
new file mode 100644
index 00000000..6fedfd79
--- /dev/null
+++ b/docker-compose.gateway.yml
@@ -0,0 +1,114 @@
+version: '3.7'
+services:
+  
+  premapp:
+    container_name: premapp
+    build: .
+    environment:
+      - VITE_DESTINATION=browser
+      - VITE_IS_PACKAGED=true
+      - VITE_PROXY_ENABLED=true
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.premapp-http.rule=PathPrefix(`/`)"
+      - "traefik.http.routers.premapp-http.entrypoints=web"
+      - "traefik.http.services.premapp.loadbalancer.server.port=8080"
+    ports:
+      - "8085:8080"
+    restart: unless-stopped
+
+  premd:
+    container_name: premd
+    image: ghcr.io/premai-io/premd:latest
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    environment:
+      - PREM_REGISTRY_URL=https://raw.githubusercontent.com/premAI-io/prem-registry/main/manifests.json
+      - PROXY_ENABLED=True
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.premd.rule=PathPrefix(`/premd`)"
+      - "traefik.http.middlewares.premd-strip-prefix.stripprefix.prefixes=/premd"
+      - "traefik.http.routers.premd.middlewares=premd-strip-prefix"
+    ports:
+      - "8084:8000"
+    restart: unless-stopped
+
+  
+  
+  traefik:
+    container_name: traefik
+    image: traefik:v2.4
+    command:
+      - "--providers.docker=true"
+      - "--providers.docker.exposedbydefault=false"
+      - "--accesslog=true"
+      - "--ping"
+      - "--entrypoints.web.address=:80"
+    ports:
+      - "80:80"
+      - "8080:8080"
+      - "443:443"
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+      - traefik-letsencrypt:/letsencrypt
+    depends_on:
+      - dnsd
+    restart: unless-stopped
+
+  dnsd:
+    container_name: dnsd
+    image: ghcr.io/premai-io/dnsd:latest
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.dnsd.rule=PathPrefix(`/dnsd`)"
+      - "traefik.http.middlewares.dnsd-strip-prefix.stripprefix.prefixes=/dnsd"
+      - "traefik.http.routers.dnsd.middlewares=dnsd-strip-prefix"
+    depends_on:
+      - dnsd-db-pg
+      - authd
+    environment:
+      PREM_GATEWAY_DNS_DB_USER: root
+      PREM_GATEWAY_DNS_DB_PASS: secret
+      PREM_GATEWAY_DNS_DB_NAME: dnsd-db
+      PREM_GATEWAY_DNS_DB_HOST: dnsd-db-pg
+    ports:
+      - "8082:8080"
+    restart: unless-stopped
+
+  dnsd-db-pg:
+    container_name: dnsd-db-pg
+    image: postgres:14.7
+    ports:
+      - "5432:5432"
+    environment:
+      POSTGRES_USER: root
+      POSTGRES_PASSWORD: secret
+      POSTGRES_DB: dnsd-db
+    volumes:
+      - dnsd-pg-data:/var/lib/postgresql/data
+    restart: unless-stopped
+
+  authd:
+    container_name: authd
+    image: ghcr.io/premai-io/authd:latest
+    ports:
+      - "8081:8080"
+    restart: unless-stopped
+
+  controllerd:
+    container_name: controllerd
+    image: ghcr.io/premai-io/controllerd:latest
+    ports:
+      - "8083:8080"
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    user: root
+    environment:
+      LETSENCRYPT_PROD: false
+      SERVICES: premd,premapp
+    restart: unless-stopped
+
+volumes:
+  dnsd-pg-data:
+  traefik-letsencrypt:
\ No newline at end of file
diff --git a/latest.json b/latest.json
index 14086336..a31a3696 100644
--- a/latest.json
+++ b/latest.json
@@ -1,11 +1,19 @@
 {
-  "version": "0.1.2",
+  "version": "0.2.0",
   "notes": "See the assets to download and install this version.",
-  "pub_date": "2023-10-26T17:02:17.290Z",
+  "pub_date": "2023-11-08T12:51:18.968Z",
   "platforms": {
-    "linux-x86_64": {
-      "signature": "dW50cnVzdGVkIGNvbW1lbnQ6IHNpZ25hdHVyZSBmcm9tIHRhdXJpIHNlY3JldCBrZXkKUlVTck91dEJzS1kvNnhxSDVuUGVZQ3diN0owNUd1YWd0UldlVmRTWjJsNWFWVHZMbFNxNDE1M2k2Qnd5aEMyNUJJZFlqbFc5VEdQaDlKMzFRejlMc2ZhM25Eb2ozbTJtWXdRPQp0cnVzdGVkIGNvbW1lbnQ6IHRpbWVzdGFtcDoxNjk4MzM5MjA0CWZpbGU6cHJlbV8wLjEuMl9hbWQ2NC5BcHBJbWFnZS50YXIuZ3oKWkt6RE5sc3F3Y0dSS1dGdGx2dzR6N3JrVzdkODliQ1l5QVkyTnJSbzZpdkNLSE1Xa08zeXNQaVNTTkpleWk1dkQvdHdLV2wvVmxaalovZHRqSXR3REE9PQo=",
-      "url": "https://github.com/premAI-io/prem-app/releases/download/v0.1.2/prem_0.1.2_amd64.AppImage.tar.gz"
+    "darwin-aarch64": {
+      "signature": "dW50cnVzdGVkIGNvbW1lbnQ6IHNpZ25hdHVyZSBmcm9tIHRhdXJpIHNlY3JldCBrZXkKUlVTck91dEJzS1kvNjJKRnU2c200a0Y2cy9TRnF6N3M4UmZrU0pRYnVCNjRQUlJLZUpacnpoekM1akl0K1l3VFBxT0hZand1SU1wY0dOb3NRUDEzMHdSeU00S1lLU2w0OUFRPQp0cnVzdGVkIGNvbW1lbnQ6IHRpbWVzdGFtcDoxNjk5NDQ3NzI0CWZpbGU6UHJlbS5hcHAudGFyLmd6CkdqTU8yNHRObmNublhWZGVVVlZZdXhYNTF5OG1TdE9BdEdYcWRyZnZGZU9sRWpOMkd2YldCWkRhdmtWeFZTNWNyMkFEVEFSSGUzOWhMeTRUQTFUOURBPT0K",
+      "url": "https://github.com/premAI-io/prem-app/releases/download/v0.2.0/Prem_universal.app.tar.gz"
+    },
+    "darwin-x86_64": {
+      "signature": "dW50cnVzdGVkIGNvbW1lbnQ6IHNpZ25hdHVyZSBmcm9tIHRhdXJpIHNlY3JldCBrZXkKUlVTck91dEJzS1kvNjJKRnU2c200a0Y2cy9TRnF6N3M4UmZrU0pRYnVCNjRQUlJLZUpacnpoekM1akl0K1l3VFBxT0hZand1SU1wY0dOb3NRUDEzMHdSeU00S1lLU2w0OUFRPQp0cnVzdGVkIGNvbW1lbnQ6IHRpbWVzdGFtcDoxNjk5NDQ3NzI0CWZpbGU6UHJlbS5hcHAudGFyLmd6CkdqTU8yNHRObmNublhWZGVVVlZZdXhYNTF5OG1TdE9BdEdYcWRyZnZGZU9sRWpOMkd2YldCWkRhdmtWeFZTNWNyMkFEVEFSSGUzOWhMeTRUQTFUOURBPT0K",
+      "url": "https://github.com/premAI-io/prem-app/releases/download/v0.2.0/Prem_universal.app.tar.gz"
+    },
+    "darwin-universal": {
+      "signature": "dW50cnVzdGVkIGNvbW1lbnQ6IHNpZ25hdHVyZSBmcm9tIHRhdXJpIHNlY3JldCBrZXkKUlVTck91dEJzS1kvNjJKRnU2c200a0Y2cy9TRnF6N3M4UmZrU0pRYnVCNjRQUlJLZUpacnpoekM1akl0K1l3VFBxT0hZand1SU1wY0dOb3NRUDEzMHdSeU00S1lLU2w0OUFRPQp0cnVzdGVkIGNvbW1lbnQ6IHRpbWVzdGFtcDoxNjk5NDQ3NzI0CWZpbGU6UHJlbS5hcHAudGFyLmd6CkdqTU8yNHRObmNublhWZGVVVlZZdXhYNTF5OG1TdE9BdEdYcWRyZnZGZU9sRWpOMkd2YldCWkRhdmtWeFZTNWNyMkFEVEFSSGUzOWhMeTRUQTFUOURBPT0K",
+      "url": "https://github.com/premAI-io/prem-app/releases/download/v0.2.0/Prem_universal.app.tar.gz"
     }
   }
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index bf4114d7..130aaf4d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "prem-app",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "prem-app",
-      "version": "0.1.2",
+      "version": "0.2.0",
       "dependencies": {
         "@microsoft/fetch-event-source": "^2.0.1",
         "@tanstack/react-query": "^5.4.3",
diff --git a/package.json b/package.json
index 266216f0..1237fac8 100644
--- a/package.json
+++ b/package.json
@@ -74,5 +74,5 @@
     "tauri": "tauri"
   },
   "type": "module",
-  "version": "0.1.2"
+  "version": "0.2.0"
 }
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index e7f8eb13..b25a45c0 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -457,6 +457,30 @@ dependencies = [
  "crossbeam-utils",
 ]
 
+[[package]]
+name = "crossbeam-deque"
+version = "0.8.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ce6fd6f855243022dcecf8702fef0c297d4338e226845fe067f6341ad9fa0cef"
+dependencies = [
+ "cfg-if",
+ "crossbeam-epoch",
+ "crossbeam-utils",
+]
+
+[[package]]
+name = "crossbeam-epoch"
+version = "0.9.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ae211234986c545741a7dc064309f67ee1e5ad243d0e48335adc0484d960bcc7"
+dependencies = [
+ "autocfg",
+ "cfg-if",
+ "crossbeam-utils",
+ "memoffset",
+ "scopeguard",
+]
+
 [[package]]
 name = "crossbeam-utils"
 version = "0.8.16"
@@ -513,6 +537,16 @@ dependencies = [
  "syn 1.0.109",
 ]
 
+[[package]]
+name = "ctrlc"
+version = "3.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "82e95fbd621905b854affdc67943b043a0fbb6ed7385fd5a25650d19a8a6cfdf"
+dependencies = [
+ "nix",
+ "windows-sys 0.48.0",
+]
+
 [[package]]
 name = "darling"
 version = "0.20.3"
@@ -639,6 +673,12 @@ version = "1.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "56ce8c6da7551ec6c462cbaf3bfbc75131ebbfa1c944aeaa9dab51ca1c5f0c3b"
 
+[[package]]
+name = "either"
+version = "1.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a26ae43d7bcc3b814de94796a5e736d4029efb0ee900c12e2d54c993ad1a1e07"
+
 [[package]]
 name = "embed-resource"
 version = "2.4.0"
@@ -1975,6 +2015,15 @@ version = "0.1.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "72ef4a56884ca558e5ddb05a1d1e7e1bfd9a68d9ed024c21704cc98872dae1bb"
 
+[[package]]
+name = "ntapi"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e8a3895c6391c39d7fe7ebc444a87eb2991b2a0bc718fdabd071eec617fc68e4"
+dependencies = [
+ "winapi",
+]
+
 [[package]]
 name = "nu-ansi-term"
 version = "0.46.0"
@@ -2447,9 +2496,10 @@ checksum = "925383efa346730478fb4838dbe9137d2a47675ad789c546d150a6e1dd4ab31c"
 
 [[package]]
 name = "prem-app"
-version = "0.1.2"
+version = "0.2.0"
 dependencies = [
  "chrono",
+ "ctrlc",
  "futures",
  "log",
  "pretty_env_logger",
@@ -2458,8 +2508,10 @@ dependencies = [
  "serde",
  "serde_json",
  "sys-info",
+ "sysinfo",
  "tauri",
  "tauri-build",
+ "tauri-plugin-store",
  "thiserror",
  "tokio",
 ]
@@ -2647,6 +2699,26 @@ version = "0.5.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f2ff9a1f06a88b01621b7ae906ef0211290d1c8a168a15542486a8f61c0833b9"
 
+[[package]]
+name = "rayon"
+version = "1.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9c27db03db7734835b3f53954b534c91069375ce6ccaa2e065441e07d9b6cdb1"
+dependencies = [
+ "either",
+ "rayon-core",
+]
+
+[[package]]
+name = "rayon-core"
+version = "1.12.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5ce3fb6ad83f861aac485e76e1985cd109d9a3713802152be56c3b1f0e0658ed"
+dependencies = [
+ "crossbeam-deque",
+ "crossbeam-utils",
+]
+
 [[package]]
 name = "redox_syscall"
 version = "0.2.16"
@@ -3402,6 +3474,21 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "sysinfo"
+version = "0.29.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0a18d114d420ada3a891e6bc8e96a2023402203296a47cdd65083377dad18ba5"
+dependencies = [
+ "cfg-if",
+ "core-foundation-sys",
+ "libc",
+ "ntapi",
+ "once_cell",
+ "rayon",
+ "winapi",
+]
+
 [[package]]
 name = "system-configuration"
 version = "0.5.1"
@@ -3641,6 +3728,18 @@ dependencies = [
  "tauri-utils",
 ]
 
+[[package]]
+name = "tauri-plugin-store"
+version = "0.0.0"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v1#8d6045421a553330e9da8b9e1e4405d419c5ea88"
+dependencies = [
+ "log",
+ "serde",
+ "serde_json",
+ "tauri",
+ "thiserror",
+]
+
 [[package]]
 name = "tauri-runtime"
 version = "0.14.1"
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 677800c2..adbc8daf 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -7,12 +7,15 @@
 
 [dependencies]
   chrono = "0.4.31"
+  ctrlc = "3.4.1"
   log = "0.4.20"
   pretty_env_logger = "0.5.0"
   sentry-tauri = "0.2"
   serde_json = "1.0"
   sys-info = "0.9.1"
+  sysinfo = "0.29.10"
   thiserror = "1.0.49"
+  tauri-plugin-store = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 
   [dependencies.futures]
     default-features = false
@@ -44,4 +47,4 @@
   license = ""
   name = "prem-app"
   repository = ""
-  version = "0.1.2"
+  version = "0.2.0"
diff --git a/src-tauri/petals/create_env.sh b/src-tauri/petals/create_env.sh
index b9bc1738..f4b2be0f 100755
--- a/src-tauri/petals/create_env.sh
+++ b/src-tauri/petals/create_env.sh
@@ -1,6 +1,5 @@
 #!/usr/bin/env bash
 prem_appdir="${PREM_APPDIR:-.}"
-requirements="$(dirname "$0")/requirements.txt"
 conda_prefix="$prem_appdir/miniconda"
 
 if test ! -x "$conda_prefix/bin/mamba"; then
@@ -27,7 +26,4 @@ echo "Using Conda at '$conda_prefix'"
 export PREM_PYTHON="$conda_prefix/envs/prem_app/bin/python"
 
 echo "Ensuring env 'prem_app' exists"
-test -x "$PREM_PYTHON" || "$conda_prefix/bin/mamba" create -y -n prem_app python=3.11
-
-echo "Installing requirements"
-"$PREM_PYTHON" -m pip install -r "$requirements"
+test -x "$PREM_PYTHON" || "$conda_prefix/bin/mamba" create -y -n prem_app python=3.11
\ No newline at end of file
diff --git a/src-tauri/petals/run_swarm.sh b/src-tauri/petals/run_swarm.sh
new file mode 100755
index 00000000..b44d183d
--- /dev/null
+++ b/src-tauri/petals/run_swarm.sh
@@ -0,0 +1,20 @@
+#!/usr/bin/env bash
+
+# Usage: ./run_swarm.sh <num_blocks> <public_name> <model>
+#
+# Parameters:
+#   num_blocks: The number of blocks to use.
+#   public_name: The public name to use.
+#   model: The model to use.
+
+prem_python="${PREM_PYTHON:-python}"
+requirements="$(dirname "$0")/requirements.txt"
+
+echo "Installing requirements"
+"$prem_python" -m pip install -r "$requirements"
+
+echo "Running petals"
+"$prem_python" -m petals.cli.run_server \
+    --num_blocks "$1" \
+    --public_name "$2" \
+    "$3"
\ No newline at end of file
diff --git a/src-tauri/src/controller_binaries.rs b/src-tauri/src/controller_binaries.rs
index 8c6eecc5..3c427273 100644
--- a/src-tauri/src/controller_binaries.rs
+++ b/src-tauri/src/controller_binaries.rs
@@ -1,18 +1,30 @@
 // Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
-use crate::download::Downloader;
-use crate::errors::{Context, Result};
-use crate::{Service, SharedState};
-use std::collections::HashMap;
+use crate::{
+    download::Downloader,
+    err,
+    errors::{Context, Result},
+    logerr,
+    swarm::{create_environment, Config},
+    utils, Registry, Service, SharedState,
+};
+
 use std::path::PathBuf;
 use std::time::Duration;
-use sys_info::mem_info;
+use std::{collections::HashMap, sync::Arc};
 
 use futures::future;
+
+use sys_info::mem_info;
+use sysinfo::{Pid, ProcessExt, ProcessRefreshKind, RefreshKind, SystemExt};
+
 use tauri::{AppHandle, Runtime, State, Window};
+use tauri_plugin_store::StoreBuilder;
+
+use tokio::process::{Child, Command};
 use tokio::time::interval;
-use tokio::{fs, process::Command};
+use tokio::{fs, sync::Mutex};
 
 #[tauri::command(async)]
 pub async fn download_service<R: Runtime>(
@@ -49,8 +61,9 @@ pub async fn download_service<R: Runtime>(
 
 #[tauri::command(async)]
 pub async fn start_service(
+    handle: tauri::AppHandle,
     service_id: String,
-    state: State<'_, SharedState>,
+    state: State<'_, Arc<SharedState>>,
     app_handle: AppHandle,
 ) -> Result<()> {
     let service_dir = app_handle
@@ -71,7 +84,7 @@ pub async fn start_service(
     // Check if service is already running
     let running_services_guard = state.running_services.lock().await;
     if running_services_guard.contains_key(&service_id) {
-        Err(format!("Service with `{service_id}` already exist"))?
+        err!("Service with `{service_id}` already exist")
     }
     drop(running_services_guard);
 
@@ -88,6 +101,11 @@ pub async fn start_service(
             )
         })?
         .as_str();
+    let is_petals_model = services_guard
+        .get(&service_id)
+        .with_context(|| format!("service_id {} doesn't exist in registry", service_id))?
+        .petals
+        .unwrap_or_default();
     log::info!("serve_command: {}", serve_command);
     let serve_command_vec: Vec<&str> = serve_command.split_whitespace().collect();
 
@@ -95,7 +113,7 @@ pub async fn start_service(
     let binary_path = PathBuf::from(&service_dir).join(&serve_command_vec[0]);
     log::info!("binary_path: {:?}", binary_path);
     if !binary_path.exists() {
-        Err(format!("invalid binary for `{service_id}`"))?
+        err!("invalid binary for `{service_id}`")
     }
     // Extract the arguments with different delimiters
     let args: Vec<String> = serve_command_vec[1..]
@@ -114,9 +132,20 @@ pub async fn start_service(
         })
         .collect();
     log::info!("args: {:?}", args);
+
+    let config = Config::new();
+    let mut env_vars = HashMap::new();
+    env_vars.insert("PREM_APPDIR".to_string(), config.app_data_dir);
+    env_vars.insert("PREM_PYTHON".to_string(), config.python);
+
+    if is_petals_model {
+        create_environment(handle);
+    }
+
     let child = Command::new(&binary_path)
         .current_dir(service_dir)
         .args(args)
+        .envs(env_vars)
         .stdout(std::process::Stdio::from(
             log_file
                 .try_clone()
@@ -126,31 +155,42 @@ pub async fn start_service(
         .spawn()
         .map_err(|e| format!("Failed to spawn child process: {}", e))?;
 
-    // Check if the service is running calling /v1 endpoint every 500ms
-    let interval_duration = Duration::from_millis(500);
-    let mut interval = interval(interval_duration);
-    loop {
-        interval.tick().await;
-        let base_url = get_base_url(&services_guard[&service_id])?;
-        let url = format!("{}/v1", base_url);
-        let client = reqwest::Client::new();
-        let res = client.get(&url).send().await;
-        match res {
-            Ok(response) => {
-                // If /v1 is not implemented by the service, it will return 400 Bad Request, consider it as success
-                if response.status().is_success()
-                    || response.status() == reqwest::StatusCode::BAD_REQUEST
-                {
-                    let mut running_services_guard = state.running_services.lock().await;
-                    running_services_guard.insert(service_id.clone(), child);
-                    log::info!("Service started: {}", service_id);
-                    break;
-                } else {
-                    log::error!("Service failed to start: {}", service_id);
+    let skip_service_check = services_guard
+        .get(&service_id)
+        .map(|service| service.skip_health_check.unwrap_or(false))
+        .unwrap();
+
+    if skip_service_check {
+        let mut running_services_guard = state.running_services.lock().await;
+        running_services_guard.insert(service_id.clone(), child);
+        log::info!("Service started: {}", service_id);
+    } else {
+        // Check if the service is running calling /v1 endpoint every 500ms
+        let interval_duration = Duration::from_millis(500);
+        let mut interval = interval(interval_duration);
+        loop {
+            interval.tick().await;
+            let base_url = get_base_url(&services_guard[&service_id])?;
+            let url = format!("{}/v1", base_url);
+            let client = reqwest::Client::new();
+            let res = client.get(&url).send().await;
+            match res {
+                Ok(response) => {
+                    // If /v1 is not implemented by the service, it will return 400 Bad Request, consider it as success
+                    if response.status().is_success()
+                        || response.status() == reqwest::StatusCode::BAD_REQUEST
+                    {
+                        let mut running_services_guard = state.running_services.lock().await;
+                        running_services_guard.insert(service_id.clone(), child);
+                        log::info!("Service started: {}", service_id);
+                        break;
+                    } else {
+                        log::error!("Service failed to start: {}", service_id);
+                    }
+                }
+                Err(e) => {
+                    log::error!("Failed to send request: {}", e);
                 }
-            }
-            Err(e) => {
-                log::error!("Failed to send request: {}", e);
             }
         }
     }
@@ -158,32 +198,78 @@ pub async fn start_service(
 }
 
 #[tauri::command(async)]
-pub async fn stop_service(service_id: String, state: State<'_, SharedState>) -> Result<()> {
-    let mut running_services_guard = state.running_services.lock().await;
-    if let Some(mut child) = running_services_guard.remove(&service_id) {
-        match child.kill().await {
-            Ok(_) => {
-                log::info!("Child process killed: {}", service_id);
-            }
-            Err(e) => {
-                log::error!("Failed to kill child process: {}", e);
-            }
-        }
+pub async fn stop_service(service_id: String, state: State<'_, Arc<SharedState>>) -> Result<()> {
+    let running_services = &state.running_services;
+    let services = &state.services;
+    _stop_service(service_id.as_str(), running_services, services).await
+}
+
+async fn _stop_service(
+    service_id: &str,
+    running_services: &Mutex<HashMap<String, Child>>,
+    services: &Mutex<HashMap<String, Service>>,
+) -> Result<()> {
+    log::info!("stopping service service_id = {service_id}");
+    let mut running_services_guard = running_services.lock().await;
+    let Some(mut child) = running_services_guard.remove(service_id) else {
+        err!("Service not running")
+    };
+    // kill the process gracefully using SIGTERM/SIGINT
+    let Some(pid) = child.id() else {
+        err!("Service couldn't be stopped: {}", service_id)
+    };
+    log::info!("service pid = {pid}");
+    let system = sysinfo::System::new_with_specifics(
+        RefreshKind::new().with_processes(ProcessRefreshKind::new()),
+    );
+    let process = system
+        .process(Pid::from(pid as usize))
+        .with_context(|| format!("Process pid({}) invalid", pid))?;
+    log::info!(
+        "terminating service: process_name({}) process_id({})",
+        process.name(),
+        process.pid()
+    );
+    if !process
+        .kill_with(sysinfo::Signal::Term)
+        .with_context(|| format!("Couldn't send terminate signal to process(pid: {}).", pid))?
+    {
+        err!("Failed to kill the process");
     }
-    let mut registry_lock = state.services.lock().await;
-    if let Some(service) = registry_lock.get_mut(&service_id) {
+    let mut registry_lock = services.lock().await;
+    if let Some(service) = registry_lock.get_mut(service_id) {
         service.running = Some(false);
     }
+    // wait for process to properly exit
+    if let Ok(_exit_code) = child.try_wait() {
+        log::info!("service stopped!");
+    } else if let Ok(_exit_code) = child.wait().await {
+        log::info!("service stopped!");
+    }
     Ok(())
 }
 
-pub fn stop_all_services(state: tauri::State<'_, SharedState>) {
+pub fn stop_all_services(state: Arc<SharedState>) {
+    log::info!("Stopping all services");
     tauri::async_runtime::block_on(async move {
-        let services = state.running_services.lock().await;
-        for service_id in services.keys() {
-            _ = stop_service(service_id.clone(), state.clone()).await;
+        let keys = state
+            .running_services
+            .lock()
+            .await
+            .keys()
+            .cloned()
+            .collect::<Vec<String>>();
+        for service_id in keys {
+            logerr!(
+                _stop_service(
+                    service_id.as_str(),
+                    &state.running_services,
+                    &state.services
+                )
+                .await
+            );
         }
-    })
+    });
 }
 
 #[tauri::command(async)]
@@ -213,7 +299,7 @@ pub async fn get_logs_for_service(service_id: String, app_handle: AppHandle) ->
 
 #[tauri::command]
 pub async fn get_services(
-    state: State<'_, SharedState>,
+    state: State<'_, Arc<SharedState>>,
     app_handle: AppHandle,
 ) -> Result<Vec<Service>> {
     let mut services = Vec::new();
@@ -254,7 +340,7 @@ pub async fn get_services(
 #[tauri::command(async)]
 pub async fn get_service_by_id(
     service_id: String,
-    state: State<'_, SharedState>,
+    state: State<'_, Arc<SharedState>>,
     app_handle: AppHandle,
 ) -> Result<Service> {
     let services = state.services.lock().await;
@@ -265,12 +351,15 @@ pub async fn get_service_by_id(
 
 // Dynamic service state
 #[tauri::command(async)]
-pub async fn get_running_services(state: State<'_, SharedState>) -> Result<Vec<String>> {
+pub async fn get_running_services(state: State<'_, Arc<SharedState>>) -> Result<Vec<String>> {
     let services = state.running_services.lock().await;
     return Ok(services.keys().cloned().collect());
 }
 
-pub async fn is_service_running(service_id: &str, state: &State<'_, SharedState>) -> Result<bool> {
+pub async fn is_service_running(
+    service_id: &str,
+    state: &State<'_, Arc<SharedState>>,
+) -> Result<bool> {
     let running_services = state.running_services.lock().await;
     return Ok(running_services.contains_key(service_id));
 }
@@ -279,9 +368,9 @@ pub async fn is_service_downloaded(service: &Service, app_handle: &AppHandle) ->
     let service_dir = app_handle
         .path_resolver()
         .app_data_dir()
-        .expect("failed to resolve app data dir")
+        .with_context(|| "Failed to resolve app data dir")?
         .join("models")
-        .join(&service.id.as_ref().unwrap());
+        .join(service.get_id_ref()?);
     let mut downloaded = true;
     for file in &service.weights_files.clone().unwrap() {
         let file_path = service_dir.join(file);
@@ -304,11 +393,19 @@ pub async fn is_service_downloaded(service: &Service, app_handle: &AppHandle) ->
                 .head(url)
                 .send()
                 .await
-                .map_err(|_| format!("Failed HEAD request: {}", url))
-                .unwrap();
+                .map_err(|_| format!("Failed HEAD request: {}", url))?;
             if response.status().is_success() {
                 if let Some(remote_file_size) = response.headers().get("Content-Length") {
-                    let parsed_size = remote_file_size.to_str().unwrap().parse::<u64>().unwrap();
+                    let parsed_size = remote_file_size
+                        .to_str()
+                        .with_context(|| "Header value remote_file_size not utf-8")?
+                        .parse::<u64>()
+                        .with_context(|| {
+                            format!(
+                                "Failed to parse header-value({:?}) as u64",
+                                remote_file_size.to_str()
+                            )
+                        })?;
                     // println!("Content-Length: {:?}", parsed_size);
                     if file_size_on_disk != parsed_size {
                         downloaded = false;
@@ -359,7 +456,7 @@ pub fn get_base_url(service: &Service) -> Result<String> {
 
 pub async fn update_service_with_dynamic_state(
     service: &mut Service,
-    state: &State<'_, SharedState>,
+    state: &State<'_, Arc<SharedState>>,
     app_handle: &AppHandle,
 ) -> Result<Service> {
     let is_service_downloaded = is_service_downloaded(service, &app_handle).await?;
@@ -367,7 +464,7 @@ pub async fn update_service_with_dynamic_state(
     let has_enough_total_memory = has_enough_total_memory(service).await?;
     let has_enough_storage = has_enough_storage().await?;
     let is_supported = is_supported().await?;
-    let is_service_running = is_service_running(&service.id.as_ref().unwrap(), &state).await?;
+    let is_service_running = is_service_running(service.get_id_ref()?, &state).await?;
     let base_url = get_base_url(service)?;
     service.downloaded = Some(is_service_downloaded);
     service.enough_memory = Some(has_enough_free_memory);
@@ -383,9 +480,9 @@ pub async fn update_service_with_dynamic_state(
 pub async fn get_system_stats() -> Result<HashMap<String, String>> {
     Ok(HashMap::new())
 }
+
 #[tauri::command(async)]
-pub async fn get_service_stats(service_id: String) -> Result<HashMap<String, String>> {
-    log::info!("service_id: {}", service_id);
+pub async fn get_service_stats(_service_id: String) -> Result<HashMap<String, String>> {
     Ok(HashMap::new())
 }
 #[tauri::command(async)]
@@ -394,8 +491,148 @@ pub async fn get_gpu_stats() -> Result<HashMap<String, String>> {
 }
 
 #[tauri::command(async)]
-pub async fn add_service(service: Service, state: State<'_, SharedState>) -> Result<()> {
+pub async fn add_service(service: Service, state: State<'_, Arc<SharedState>>) -> Result<()> {
     let mut services_guard = state.services.lock().await;
-    services_guard.insert(service.id.clone().unwrap(), service.clone());
+    services_guard.insert(service.get_id()?, service);
+    Ok(())
+}
+
+#[tauri::command(async)]
+pub async fn add_registry(
+    registry: Registry,
+    app_handle: AppHandle,
+    state: State<'_, Arc<SharedState>>,
+) -> Result<()> {
+    let store_path = app_handle
+        .path_resolver()
+        .app_data_dir()
+        .with_context(|| "Failed to resolve app data dir")?
+        .join("store.json");
+    let mut store = StoreBuilder::new(app_handle, store_path).build();
+    store.load().with_context(|| "Failed to load store")?;
+    if let Some(registries) = store.get("registries").cloned() {
+        match serde_json::from_value::<Vec<Registry>>(registries) {
+            Ok(mut registries) => {
+                registries.push(registry);
+                store
+                    .insert(
+                        "registries".to_string(),
+                        serde_json::to_value(&registries).unwrap(),
+                    )
+                    .with_context(|| "Failed to insert into store")?;
+                utils::fetch_all_services_manifests(&registries, &state)
+                    .await
+                    .expect("failed to fetch services")
+            }
+            Err(e) => println!("Error unwrapping registries: {:?}", e),
+        }
+    } else {
+        let new_registry = [registry];
+        store
+            .insert(
+                "registries".to_string(),
+                serde_json::to_value(&new_registry).unwrap(),
+            )
+            .with_context(|| "Failed to insert into store")?;
+        utils::fetch_all_services_manifests(&new_registry, &state)
+            .await
+            .expect("failed to fetch services")
+    }
+    store.save().expect("failed to save store");
+    Ok(())
+}
+
+#[tauri::command(async)]
+pub async fn delete_registry(
+    registry: Registry,
+    app_handle: AppHandle,
+    state: State<'_, Arc<SharedState>>,
+) -> Result<()> {
+    let store_path = app_handle
+        .path_resolver()
+        .app_data_dir()
+        .with_context(|| "Failed to resolve app data dir")?
+        .join("store.json");
+    let mut store = StoreBuilder::new(app_handle, store_path).build();
+    store.load().with_context(|| "Failed to load store")?;
+    if let Some(registries) = store.get("registries").cloned() {
+        let mut registries = serde_json::from_value::<Vec<Registry>>(registries)
+            .with_context(|| "Failed to deserialize")?;
+        registries.retain(|r| r.url != registry.url);
+        store
+            .insert(
+                "registries".to_string(),
+                serde_json::to_value(registries).with_context(|| "Failed to serialize")?,
+            )
+            .with_context(|| "Failed to insert into store")?;
+        store.save().with_context(|| "Failed to save store")?;
+
+        // Reset services state and refetch all registries
+        let mut services_guard = state.services.lock().await;
+        services_guard.clear();
+        drop(services_guard);
+        if let Some(registries) = store.get("registries").cloned() {
+            match serde_json::from_value::<Vec<Registry>>(registries) {
+                Ok(registries) => utils::fetch_all_services_manifests(&registries, &state)
+                    .await
+                    .with_context(|| "Failed to fetch services")?,
+                Err(e) => log::error!("Error unwrapping registries: {:?}", e),
+            }
+        } else {
+            println!("No registries found");
+        }
+    }
+    Ok(())
+}
+
+#[tauri::command(async)]
+pub async fn fetch_registries(app_handle: AppHandle) -> Result<Vec<Registry>> {
+    let store_path = app_handle
+        .path_resolver()
+        .app_data_dir()
+        .with_context(|| "Failed to resolve app data dir")?
+        .join("store.json");
+    let mut store = StoreBuilder::new(app_handle, store_path).build();
+    match store.load() {
+        Ok(_) => {
+            if let Some(registries) = store.get("registries").cloned() {
+                match serde_json::from_value::<Vec<Registry>>(registries) {
+                    Ok(registries) => Ok(registries),
+                    Err(e) => {
+                        log::error!("Error unwrapping registries: {:?}", e);
+                        Ok(Vec::new())
+                    }
+                }
+            } else {
+                log::error!("No registries found");
+                Ok(Vec::new())
+            }
+        }
+        Err(e) => {
+            log::error!("Error loading store: {:?}", e);
+            Ok(Vec::new())
+        }
+    }
+}
+
+#[tauri::command(async)]
+pub async fn reset_default_registry(
+    app_handle: AppHandle,
+    state: State<'_, Arc<SharedState>>,
+) -> Result<()> {
+    let store_path = app_handle
+        .path_resolver()
+        .app_data_dir()
+        .with_context(|| "Failed to resolve app data dir")?
+        .join("store.json");
+    let mut store = StoreBuilder::new(app_handle.clone(), store_path).build();
+    store.load().with_context(|| "Failed to load store")?;
+    store
+        .delete("registries")
+        .with_context(|| "Failed to delete registries")?;
+    store.save().with_context(|| "Failed to save store")?;
+    add_registry(Registry::default(), app_handle.clone(), state)
+        .await
+        .with_context(|| "Failed to add default registry")?;
     Ok(())
 }
diff --git a/src-tauri/src/download.rs b/src-tauri/src/download.rs
index ad8210f8..c42bfbd9 100644
--- a/src-tauri/src/download.rs
+++ b/src-tauri/src/download.rs
@@ -1,7 +1,8 @@
 use crate::errors::{Context, Result};
 use std::collections::HashMap;
+use std::sync::Arc;
 
-use crate::{utils, SharedState};
+use crate::{err, utils, SharedState};
 use futures::StreamExt;
 use serde::Serialize;
 use tauri::{Manager, Runtime, Window};
@@ -144,7 +145,7 @@ impl<R: Runtime> Downloader<R> {
         total_file_size: u64,
         size_on_disk: u64,
     ) -> Result<()> {
-        let state = self.window.state::<SharedState>();
+        let state = self.window.state::<Arc<SharedState>>();
         let mut downloading_files_guard = state.downloading_files.lock().await;
         if downloading_files_guard.contains(&output_path.as_ref().to_string()) {
             log::warn!("File already downloading: {}", output_path.as_ref());
@@ -175,11 +176,7 @@ impl<R: Runtime> Downloader<R> {
 
         // Check the status for errors.
         if !res.status().is_success() {
-            Err(format!(
-                "GET Request: ({}): ({})",
-                res.status(),
-                url.as_ref()
-            ))?
+            err!("GET Request: ({}): ({})", res.status(), url.as_ref());
         }
 
         // Prepare the destination directories
@@ -211,7 +208,7 @@ impl<R: Runtime> Downloader<R> {
             // Retrieve chunk.
             let mut chunk = match item {
                 Ok(chunk) => chunk,
-                Err(e) => Err(format!("Error while downloading: {:?}", e))?,
+                Err(e) => err!("Error while downloading: {e:?}"),
             };
             let chunk_size = chunk.len() as u64;
 
diff --git a/src-tauri/src/errors.rs b/src-tauri/src/errors.rs
index a657e7fe..0e37cd0e 100644
--- a/src-tauri/src/errors.rs
+++ b/src-tauri/src/errors.rs
@@ -40,3 +40,34 @@ impl serde::Serialize for Error {
         serializer.serialize_str(self.to_string().as_ref())
     }
 }
+
+#[macro_export]
+macro_rules! err {
+    ($($t:tt)*) => {{
+        Err(format!($($t)*))?
+    }};
+}
+
+#[macro_export]
+macro_rules! logerr {
+    ($ar:expr $(,)+ $($t:tt)+) => {{
+        if let Err(e) = $ar {
+            log::error!("{e:?}");
+            log::error!($($t)*);
+        }
+    }};
+    ($ar:expr) => {{
+        if let Err(e) = $ar {
+            log::error!("{e:?}");
+        }
+    }};
+}
+
+#[macro_export]
+macro_rules! logsome {
+    ($ar:expr, $($t:tt)*) => {{
+        if ($ar).is_none() {
+            log::error!($($t)*);
+        }
+    }};
+}
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 77864a7f..99250cbd 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -7,14 +7,19 @@ mod errors;
 mod swarm;
 mod utils;
 
+use crate::controller_binaries::stop_all_services;
+
+use std::{collections::HashMap, env, ops::Deref, str, sync::Arc};
+
 use sentry_tauri::sentry;
 use serde::{Deserialize, Serialize};
-use std::{collections::HashMap, env, str};
 use tauri::{
     AboutMetadata, CustomMenuItem, Manager, Menu, MenuItem, RunEvent, Submenu, SystemTray,
     SystemTrayEvent, SystemTrayMenu, SystemTrayMenuItem, WindowEvent,
 };
-use tokio::{process::Child, sync::Mutex};
+use tauri_plugin_store::StoreBuilder;
+use tokio::process::Child;
+use tokio::sync::Mutex;
 
 #[derive(Debug, Default)]
 pub struct SharedState {
@@ -24,6 +29,32 @@ pub struct SharedState {
     services: Mutex<HashMap<String, Service>>,
 }
 
+#[derive(Debug, Deserialize, Serialize, Clone)]
+pub struct Registry {
+    url: String,
+}
+
+impl Default for Registry {
+    fn default() -> Self {
+        // Determine the URL based on whether the app is in debug or release mode
+        let url = if cfg!(debug_assertions) {
+            // Debug mode URL
+            "https://raw.githubusercontent.com/premAI-io/prem-registry/dev/manifests.json"
+        } else {
+            // Release mode URL
+            "https://raw.githubusercontent.com/premAI-io/prem-registry/v1/manifests.json"
+        };
+        Registry {
+            url: url.to_string(),
+        }
+    }
+}
+
+#[derive(Debug, Deserialize, Serialize, Clone)]
+pub struct Store {
+    registries: Vec<Registry>,
+}
+
 #[derive(Debug, Deserialize, Serialize, Clone)]
 pub struct Service {
     // Static state from registry manifest
@@ -50,6 +81,9 @@ pub struct Service {
     running_port: Option<u32>,
     #[serde(rename = "serviceType")]
     service_type: Option<String>,
+    petals: Option<bool>,
+    #[serde(rename = "skipHealthCheck")]
+    skip_health_check: Option<bool>,
     version: Option<String>,
     #[serde(rename = "weightsDirectoryUrl")]
     weights_directory_url: Option<String>,
@@ -73,6 +107,22 @@ pub struct Service {
     supported: Option<bool>,
 }
 
+impl Service {
+    fn get_id(&self) -> errors::Result<String> {
+        use errors::Context;
+        self.id
+            .clone()
+            .with_context(|| format!("Service doesn't contain a valid id\n{:#?}", self))
+    }
+    // ref to String is used as it's more generally coerce-able
+    fn get_id_ref(&self) -> errors::Result<&String> {
+        use errors::Context;
+        self.id
+            .as_ref()
+            .with_context(|| format!("Service doesn't contain a valid id\n{:#?}", self))
+    }
+}
+
 #[derive(Debug, Deserialize, Serialize, Clone)]
 struct ModelInfo {
     #[serde(rename = "inferenceTime")]
@@ -91,12 +141,11 @@ struct ModelInfo {
 }
 
 fn main() {
-    // Sentry
     let client = sentry::init((
         "https://b98405fd0e4cc275b505645d293d23a5@o4506111848808448.ingest.sentry.io/4506111925223424",
         sentry::ClientOptions {
             release: sentry::release_name!(),
-            debug: true,
+            debug: false, // this outputs dsn to stdout on sentry init
             ..Default::default()
         },
     ));
@@ -105,8 +154,11 @@ fn main() {
     let _guard = sentry_tauri::minidump::init(&client);
     // Everything after here runs in only the app process
 
+    // TODO: consider directly pushing logs to sentry (sentry-sdk provides
+    // log integration) for release builds
+
     // initialize logger
-    pretty_env_logger::formatted_timed_builder()
+    pretty_env_logger::formatted_builder()
         .format(|buf, record| {
             use std::io::Write;
             writeln!(
@@ -164,11 +216,12 @@ fn main() {
 
     let system_tray = SystemTray::new().with_menu(tray_menu);
 
-    let state = SharedState::default();
-    #[allow(unused_mut)]
-    let mut app = tauri::Builder::default()
+    let state = std::sync::Arc::new(SharedState::default());
+
+    let app = tauri::Builder::default()
         .plugin(sentry_tauri::plugin())
-        .manage(state)
+        .plugin(tauri_plugin_store::Builder::default().build())
+        .manage(state.clone())
         .invoke_handler(tauri::generate_handler![
             controller_binaries::start_service,
             controller_binaries::stop_service,
@@ -182,17 +235,25 @@ fn main() {
             controller_binaries::get_service_stats,
             controller_binaries::get_gpu_stats,
             controller_binaries::add_service,
+            controller_binaries::add_registry,
+            controller_binaries::delete_registry,
+            controller_binaries::fetch_registries,
+            controller_binaries::reset_default_registry,
             swarm::is_swarm_supported,
             swarm::get_username,
             swarm::get_petals_models,
-            swarm::run_swarm_mode,
+            swarm::create_environment,
+            swarm::delete_environment,
+            swarm::run_swarm,
             swarm::stop_swarm_mode,
             swarm::is_swarm_mode_running
         ])
         .menu(menu)
         .on_menu_event(|event| match event.menu_item_id() {
             "quit" => {
-                controller_binaries::stop_all_services(event.window().state());
+                controller_binaries::stop_all_services(
+                    event.window().state::<Arc<SharedState>>().deref().clone(),
+                );
                 event.window().close().unwrap();
             }
             "close" => {
@@ -204,17 +265,25 @@ fn main() {
         .on_system_tray_event(|app, event| match event {
             SystemTrayEvent::MenuItemClick { id, .. } => match id.as_str() {
                 "hide" => {
-                    let window = app.get_window("main").unwrap();
-                    window.hide().unwrap();
+                    let Some(window) = app.get_window("main") else {
+                        log::error!("Couldn't get window from for label 'main'");
+                        return;
+                    };
+                    logerr!(window.hide());
                 }
                 "quit" => {
-                    controller_binaries::stop_all_services(app.state());
+                    controller_binaries::stop_all_services(
+                        app.state::<Arc<SharedState>>().deref().clone(),
+                    );
                     app.exit(0);
                 }
                 "show" => {
-                    let window = app.get_window("main").unwrap();
-                    window.set_focus().unwrap();
-                    window.show().unwrap();
+                    let Some(window) = app.get_window("main") else {
+                        log::error!("Couldn't get window from for label 'main'");
+                        return;
+                    };
+                    logerr!(window.set_focus());
+                    logerr!(window.show());
                 }
                 _ => {}
             },
@@ -222,24 +291,80 @@ fn main() {
         })
         .setup(|app| {
             tauri::async_runtime::block_on(async move {
-                utils::fetch_services_manifests(
-                    "https://raw.githubusercontent.com/premAI-io/prem-registry/dev/manifests.json",
-                    &app.state::<SharedState>(),
-                )
-                .await
-                .expect("Failed to fetch and save services manifests");
+                //Create a store with default registry if doesn't exist
+                let store_path = app
+                    .path_resolver()
+                    .app_data_dir()
+                    .expect("failed to resolve app data dir")
+                    .join("store.json");
+                if !store_path.exists() {
+                    let mut registries: Vec<Registry> = Vec::new();
+                    registries.push(Registry::default());
+                    let mut default_store = HashMap::new();
+                    default_store.insert(
+                        "registries".to_string(),
+                        serde_json::to_value(registries).unwrap(),
+                    );
+                    let store = StoreBuilder::new(app.handle(), store_path.clone())
+                        .defaults(default_store)
+                        .build();
+                    store.save().expect("failed to save store");
+                    log::info!("Store created");
+                }
+                // Fetch all registries
+                let mut store = StoreBuilder::new(app.handle(), store_path.clone()).build();
+                store.load().expect("Failed to load store");
+                if let Some(registries) = store.get("registries").cloned() {
+                    match serde_json::from_value::<Vec<Registry>>(registries) {
+                        Ok(registries) => utils::fetch_all_services_manifests(
+                            &registries,
+                            &app.state::<Arc<SharedState>>().clone(),
+                        )
+                        .await
+                        .expect("failed to fetch services"),
+                        Err(e) => println!("Error unwrapping registries: {:?}", e),
+                    }
+                }
             });
             Ok(())
         })
+        .on_window_event(|ev| {
+            if matches!(ev.event(), WindowEvent::Destroyed) {
+                stop_all_services(ev.window().state::<Arc<SharedState>>().deref().clone());
+            }
+        })
         .build(tauri::generate_context!())
-        .expect("error while running tauri application");
+        .expect("Error while building tauri application");
+
+    {
+        let app_handle = app.handle();
+        let s = state.clone();
+        std::panic::set_hook(Box::new(move |_| {
+            stop_all_services(s.clone());
+            app_handle.exit(-1);
+        }));
+
+        let app_handle = app.handle();
+        let s = state.clone();
+        ctrlc::set_handler(move || {
+            stop_all_services(s.clone());
+            app_handle.exit(-1);
+        })
+        .expect("Error setting Ctrl-C handler");
+    }
 
     app.run(|app_handle, e| match e {
         // Triggered when a window is trying to close
         RunEvent::WindowEvent { label, event, .. } => {
             match event {
                 WindowEvent::CloseRequested { api, .. } => {
-                    app_handle.get_window(&label).unwrap().hide().unwrap();
+                    logsome!(
+                        app_handle.get_window(&label).map(|e| logerr!(
+                            e.hide(),
+                            "Failed to hide window with label({label:?})"
+                        )),
+                        "Failed to get app window with label({label:?})"
+                    );
                     // use the exposed close api, and prevent the event loop to close
                     api.prevent_close();
                 }
@@ -247,5 +372,5 @@ fn main() {
             }
         }
         _ => {}
-    })
+    });
 }
diff --git a/src-tauri/src/swarm.rs b/src-tauri/src/swarm.rs
index c7d6340e..9cb1b184 100644
--- a/src-tauri/src/swarm.rs
+++ b/src-tauri/src/swarm.rs
@@ -1,6 +1,13 @@
 use reqwest::get;
 use serde::Deserialize;
-use std::{collections::HashMap, env, str};
+use std::{
+    collections::HashMap,
+    env,
+    path::PathBuf,
+    str,
+    thread::{self, JoinHandle},
+    time::Duration,
+};
 use tauri::api::process::Command;
 
 #[derive(Deserialize)]
@@ -18,6 +25,36 @@ pub fn is_swarm_supported() -> bool {
     }
 }
 
+pub struct Config {
+    pub app_data_dir: String,
+    pub python: String,
+}
+
+impl Config {
+    pub fn new() -> Self {
+        let mut app_data_dir =
+            tauri::api::path::home_dir().expect("🙈 Failed to get app data directory");
+        app_data_dir.push(".config/prem");
+        let app_data_dir = app_data_dir
+            .to_str()
+            .expect("🙈 Failed to convert app data dir path to str")
+            .to_string();
+
+        let python = PathBuf::from(format!(
+            "{}/miniconda/envs/prem_app/bin/python",
+            app_data_dir
+        ))
+        .to_str()
+        .unwrap_or("python")
+        .to_string();
+
+        Config {
+            app_data_dir,
+            python,
+        }
+    }
+}
+
 #[tauri::command]
 pub fn get_username() -> String {
     let output = Command::new("whoami").output();
@@ -58,76 +95,81 @@ pub async fn get_petals_models() -> Result<Vec<String>, String> {
 
 #[tauri::command]
 pub fn is_swarm_mode_running() -> bool {
-    let output_value = get_swarm_processes();
+    let processes = get_swarm_processes();
 
-    if !output_value.is_empty() {
-        println!(
-            "🏃‍♀️ Processeses running: {}",
-            output_value.replace("\n", " ")
-        );
+    if processes.len() > 0 {
+        println!("🏃‍♀️ Processeses running: {:?}", processes);
         return true;
     }
     return false;
 }
 
-pub fn create_environment(handle: tauri::AppHandle) -> String {
-    // Get the application data directory
-    let app_data_dir = tauri::api::path::home_dir().expect("🙈 Failed to get app data directory");
-    let app_data_dir = app_data_dir.join(".config/prem");
-    let app_data_dir = app_data_dir
-        .to_str()
-        .expect("🙈 Failed to convert app data dir path to str");
-
-    // Get create env path
-    let binding = handle
-        .path_resolver()
-        .resolve_resource("petals")
-        .expect("🙈 Failed to find `create_env.sh`");
-    let petals_path = binding
-        .to_str()
-        .expect("🙈 Failed to convert petals path to str");
-
-    let python = format!("{app_data_dir}/miniconda/envs/prem_app/bin/python");
+#[tauri::command(async)]
+pub fn create_environment(handle: tauri::AppHandle) {
+    println!("🐍 Creating the environment...");
+    let petals_path = get_petals_path(handle);
+    let config = Config::new();
 
-    // Set env variables
     let mut env = HashMap::new();
-    env.insert("PREM_APPDIR".to_string(), app_data_dir.to_string());
-    env.insert("PREM_PYTHON".to_string(), python.clone());
+    env.insert("PREM_APPDIR".to_string(), config.app_data_dir);
+    env.insert("PREM_PYTHON".to_string(), config.python);
 
-    // Run the bash script
     let _ = Command::new("sh")
         .args([format!("{petals_path}/create_env.sh")])
         .envs(env)
         .output()
         .expect("🙈 Failed to create env");
-    python
 }
 
 #[tauri::command(async)]
-pub fn run_swarm_mode(
-    handle: tauri::AppHandle,
-    num_blocks: i32,
-    model: String,
-    public_name: String,
-) {
-    let python: String = create_environment(handle);
-    println!("🚀 Starting the Swarm...");
+pub fn delete_environment(handle: tauri::AppHandle) {
+    println!("❌ Deleting the environment...");
+    let petals_path = get_petals_path(handle);
+    let config = Config::new();
+
+    let mut env = HashMap::new();
+    env.insert("PREM_APPDIR".to_string(), config.app_data_dir);
 
-    let _ = Command::new(&python)
-        .args(&[
-            "-m",
-            "petals.cli.run_server",
-            "--num_blocks",
+    let _ = Command::new("sh")
+        .args([format!("{petals_path}/delete_env.sh")])
+        .envs(env.clone())
+        .output()
+        .expect("🙈 Failed to delete env");
+}
+
+#[tauri::command(async)]
+pub fn run_swarm(handle: tauri::AppHandle, num_blocks: i32, model: String, public_name: String) {
+    let petals_path = get_petals_path(handle.clone());
+    let config = Config::new();
+
+    let mut env = HashMap::new();
+    env.insert("PREM_PYTHON".to_string(), config.python);
+
+    println!("🚀 Starting the Swarm...");
+    let _ = Command::new("sh")
+        .args([
+            format!("{petals_path}/run_swarm.sh").as_str(),
             &num_blocks.to_string(),
-            "--public_name",
             &public_name,
             &model,
         ])
+        .envs(env)
         .spawn()
         .expect("🙈 Failed to run swarm");
 }
 
-pub fn get_swarm_processes() -> String {
+fn get_petals_path(handle: tauri::AppHandle) -> String {
+    let binding = handle
+        .path_resolver()
+        .resolve_resource("petals")
+        .expect("🙈 Failed to find `create_env.sh`");
+    let petals_path = binding
+        .to_str()
+        .expect("🙈 Failed to convert petals path to str");
+    petals_path.to_string()
+}
+
+pub fn get_swarm_processes() -> Vec<u64> {
     // Check if create_env.sh is running
     let output = Command::new("/usr/bin/pgrep")
         .args(&["-f", "create_env.sh|(mamba|conda).*create.*prem_app"])
@@ -141,12 +183,24 @@ pub fn get_swarm_processes() -> String {
 
     // If create_env.sh is running, return an empty string
     if !output_value.is_empty() {
-        return "".to_string();
+        return vec![];
     }
 
+    let config = Config::new();
+    let python_path = PathBuf::from(config.python);
+    let prem_app_env = python_path
+        .parent()
+        .unwrap()
+        .parent()
+        .unwrap()
+        .to_str()
+        .unwrap();
+
+    let regex = format!("https://github.com/bigscience-workshop/petals|{prem_app_env}.*(petals.cli.run_server|multiprocessing.resource_tracker|from multiprocessing.spawn)");
+
     // If create_env.sh is not running, get the processes from petals
     let output = Command::new("/usr/bin/pgrep")
-        .args(&["-f", "https://github.com/bigscience-workshop/petals|petals.cli.run_server|multiprocessing.resource_tracker|from multiprocessing.spawn"])
+        .args(&["-f", &regex])
         .output()
         .map_err(|e| {
             println!("🙈 Failed to execute command: {}", e);
@@ -154,25 +208,53 @@ pub fn get_swarm_processes() -> String {
         });
 
     let output_value = output.unwrap().stdout;
-    output_value
+    let processes: Vec<u64> = output_value
+        .replace("\n", " ")
+        .split(" ")
+        .collect::<Vec<&str>>()
+        .into_iter()
+        .filter_map(|s| s.parse::<u64>().ok())
+        .collect();
+    processes
 }
 
 #[tauri::command]
 pub fn stop_swarm_mode() {
     println!("🛑 Stopping the Swarm...");
-    let processes = get_swarm_processes().replace("\n", " ");
-    println!("🛑 Stopping Processes: {}", processes);
-    let processes = processes.split(" ").collect::<Vec<&str>>();
+    let processes = get_swarm_processes();
+    println!("🛑 Stopping Processes: {:?}", processes);
 
     for process in processes {
-        println!("🛑 Stopping Process: {}", process);
         let _ = Command::new("kill")
-            .args(&[process.to_string()])
-            .output()
-            .map_err(|e| {
-                println!("🙈 Failed to execute command: {}", e);
-                e
-            });
+            .args(["-s", "SIGTERM", &process.to_string()])
+            .spawn()
+            .expect("🙈 Failed to execute kill command with SIGTERM");
+
+        let handle: JoinHandle<_> = thread::spawn(move || {
+            thread::sleep(Duration::from_millis(50));
+            match Command::new("ps")
+                .args(["-p", &process.to_string()])
+                .output()
+            {
+                Ok(output) => match output.status.code() {
+                    Some(0) => true,
+                    _ => false,
+                },
+                Err(e) => {
+                    eprintln!("Error executing ps command: {}", e);
+                    false
+                }
+            }
+        });
+        if handle.join().unwrap() {
+            let _ = Command::new("kill")
+                .args(["-s", "SIGKILL", &process.to_string()])
+                .output()
+                .expect("🙈 Failed to execute kill command with SIGKILL");
+            println!("🛑 Stopping Process with SIGKILL: {}", process);
+        } else {
+            println!("🛑 Stopping Process with SIGTERM: {}", process);
+        }
     }
     println!("🛑 Stopped all the Swarm Processes.");
 }
diff --git a/src-tauri/src/utils.rs b/src-tauri/src/utils.rs
index 55fee848..2a10a545 100644
--- a/src-tauri/src/utils.rs
+++ b/src-tauri/src/utils.rs
@@ -1,51 +1,156 @@
-use crate::errors::Result;
-use crate::{Service, SharedState};
+use crate::errors::{Context, Result};
+use crate::{err, Registry, Service, SharedState};
+use futures::future;
 use reqwest::get;
 use std::collections::HashMap;
-use tauri::State;
+use std::sync::Arc;
 
-pub async fn fetch_services_manifests(url: &str, state: &State<'_, SharedState>) -> Result<()> {
-    let response = get(url).await.expect("Failed to fetch registry");
-    let services = response.json::<Vec<Service>>().await.unwrap();
+pub async fn fetch_all_services_manifests(
+    registries: &[Registry],
+    state: &Arc<SharedState>,
+) -> Result<()> {
+    let mut handlers = vec![];
+    for registry in registries {
+        let handler = async move {
+            if let Err(err) = fetch_services_manifests(registry.url.as_str(), state).await {
+                println!(
+                    "Failed to fetch {} and save services manifests: {}",
+                    registry.url, err
+                );
+            }
+        };
+        handlers.push(handler);
+    }
+    future::join_all(handlers).await;
+    Ok(())
+}
+
+async fn fetch_services_manifests(url: &str, state: &Arc<SharedState>) -> Result<()> {
+    let response = get(url)
+        .await
+        .with_context(|| format!("Couldn't fetch the manifest from {url:?}"))?;
+    let services = response
+        .json::<Vec<Service>>()
+        .await
+        .with_context(|| "Failed to parse response to list of services")?;
     let mut services_guard = state.services.lock().await;
-    let service_ids = services_guard.keys().cloned().collect::<Vec<String>>();
     for service in services {
-        if !service_ids.contains(&service.id.clone().unwrap()) {
-            services_guard.insert(service.id.clone().unwrap(), service);
+        if !service
+            .get_id_ref()
+            .map(|id| services_guard.contains_key(id))
+            .unwrap_or_default()
+        {
+            services_guard.insert(service.get_id()?, service);
         }
     }
     Ok(())
 }
 
-pub fn is_aarch64() -> bool {
+pub const fn is_aarch64() -> bool {
     cfg!(target_arch = "aarch64")
 }
 
-pub fn is_x86_64() -> bool {
+pub const fn is_x86_64() -> bool {
     cfg!(target_arch = "x86_64")
 }
 
+pub const fn is_macos() -> bool {
+    cfg!(target_os = "macos")
+}
+
+pub const fn is_unix() -> bool {
+    cfg!(target_family = "unix")
+}
+
 pub fn get_binary_url(binaries_url: &HashMap<String, Option<String>>) -> Result<String> {
-    let mut binary_url = "".to_string();
-    if is_aarch64() {
-        binary_url = binaries_url
-            .get("aarch64-apple-darwin")
-            .unwrap()
-            .clone()
-            .unwrap_or_else(|| "Unsupported architecture".to_string())
-    } else if is_x86_64() {
-        binary_url = binaries_url
-            .get("x86_64-apple-darwin")
-            .unwrap()
-            .clone()
-            .unwrap_or_else(|| "Unsupported architecture".to_string())
-    }
-    if binary_url == "Unsupported architecture" {
-        binary_url = binaries_url
-            .get("universal-apple-darwin")
-            .unwrap()
-            .clone()
-            .unwrap_or_else(|| Err("Unsupported architecture").unwrap())
-    }
-    Ok(binary_url)
+    if !is_unix() && !is_macos() {
+        err!("Unsupported OS")
+    } else if is_macos() {
+        if is_x86_64() {
+            binaries_url.get("x86_64-apple-darwin").cloned().flatten()
+        } else if is_aarch64() {
+            binaries_url.get("aarch64-apple-darwin").cloned().flatten()
+        } else {
+            err!("Unsupported architecture")
+        }
+        .or_else(|| {
+            binaries_url
+                .get("universal-apple-darwin")
+                .cloned()
+                .flatten()
+        })
+        .with_context(|| "Service not supported on your platform")
+    } else {
+        err!("Unsupported platform")
+    }
+}
+
+#[cfg(all(test, target_os = "macos"))]
+mod tests {
+    use super::get_binary_url;
+    use std::collections::HashMap;
+
+    #[test]
+    fn binary_url_test_universal_only() {
+        let url = get_binary_url(&HashMap::from_iter([(
+            "universal-apple-darwin".to_string(),
+            Some("randome_url.com".to_string()),
+        )]))
+        .unwrap();
+        assert_eq!(url, "randome_url.com");
+    }
+
+    #[test]
+    fn binary_url_test_universal_only_option() {
+        let url = get_binary_url(&HashMap::from_iter([
+            (
+                "universal-apple-darwin".to_string(),
+                Some("randome_url.com".to_string()),
+            ),
+            ("aarch64-apple-darwin".to_string(), None),
+            ("x86_64-apple-darwin".to_string(), None),
+        ]))
+        .unwrap();
+        assert_eq!(url, "randome_url.com");
+    }
+
+    #[test]
+    fn binary_url_test_with_non_universal() {
+        let url = get_binary_url(&HashMap::from_iter([
+            (
+                "universal-apple-darwin".to_string(),
+                Some("randome_url.com//universal".to_string()),
+            ),
+            (
+                "aarch64-apple-darwin".to_string(),
+                Some("randome_url.com//not_universal".to_string()),
+            ),
+            (
+                "x86_64-apple-darwin".to_string(),
+                Some("randome_url.com//not_universal".to_string()),
+            ),
+        ]))
+        .unwrap();
+        assert_eq!(url, "randome_url.com//not_universal");
+    }
+
+    #[test]
+    #[should_panic]
+    fn binary_url_test_empty() {
+        let url = get_binary_url(&HashMap::from_iter([])).unwrap();
+        assert_eq!(url, "randome_url.com");
+    }
+
+    #[test]
+    fn binary_url_all_none() {
+        let err = get_binary_url(&HashMap::from_iter([
+            ("universal-apple-darwin".to_string(), None),
+            ("aarch64-apple-darwin".to_string(), None),
+            ("x86_64-apple-darwin".to_string(), None),
+        ]));
+        assert_eq!(
+            err.err().map(|err| err.to_string()).unwrap_or_default(),
+            "Service not supported on your platform"
+        );
+    }
 }
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index ae5a8a57..af3b2080 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "Prem",
-    "version": "0.1.2"
+    "version": "0.2.0"
   },
   "tauri": {
     "allowlist": {
@@ -27,9 +27,6 @@
     },
     "bundle": {
       "active": true,
-      "resources": [
-        "petals/*"
-      ],
       "icon": [
         "icons/32x32.png",
         "icons/128x128.png",
@@ -38,6 +35,9 @@
         "icons/icon.ico"
       ],
       "identifier": "io.premai.prem-app",
+      "resources": [
+        "petals/*"
+      ],
       "targets": "all"
     },
     "security": {
diff --git a/src/App.tsx b/src/App.tsx
index 93200849..945850dd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -23,6 +23,7 @@ function App() {
         useSettingStore.getState().setIsIP(hostIsIP);
         useSettingStore.getState().setBackendUrl(getBackendUrl());
         useSettingStore.getState().removeAllServiceAsDownloading();
+        useSettingStore.getState().resetSwarm();
 
         // Download progress
         if (isDesktopEnv()) {
diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx
index c7da5ad5..45260e3b 100644
--- a/src/AppRouter.tsx
+++ b/src/AppRouter.tsx
@@ -18,7 +18,7 @@ const AppRouter = () => {
       <Router>
         <Routes>
           <Route path="/" element={<Service />} />
-          <Route path="/prem-chat/:serviceId/:serviceType/:chatId?" element={<PremChat />} />
+          <Route path="/prem-chat/:serviceId/:serviceType/:historyId?" element={<PremChat />} />
           <Route path="/services/:serviceId/:serviceType/detail" element={<ServiceDetail />} />
           <Route path="/settings" element={<Settings />} />
           <Route path="/prem-image/:serviceId/:serviceType/:historyId?" element={<PremImage />} />
diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index e0d70f1c..0159150f 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -2,6 +2,7 @@
 @import url("./documentation.css");
 @import url("./fonts.css");
 @import url("./forms.css");
+@import url("./left-sidebar.css");
 @import url("./markdown.css");
 @import url("./misc.css");
 @import url("./modal.css");
diff --git a/src/assets/css/left-sidebar.css b/src/assets/css/left-sidebar.css
new file mode 100644
index 00000000..6bb3e558
--- /dev/null
+++ b/src/assets/css/left-sidebar.css
@@ -0,0 +1,28 @@
+/* Playground sidebar */
+.left-sidebar {
+  @apply max-md:fixed max-md:z-[11] max-md:w-full md:w-[259px] max-md:p-5 max-md:top-0 max-md:bottom-0 max-md:overflow-hidden flex flex-col md:relative md:pt-7 bg-grey-800 pt-[22px] pb-[10px] px-2;
+}
+
+.left-sidebar li.active {
+  @apply max-md:bg-grey-900;
+}
+
+.left-sidebar__logo {
+  @apply max-md:max-w-[100px] max-md:ml-3;
+}
+
+.left-sidebar__search {
+  @apply max-md:h-[38px];
+}
+
+.left-sidebar li {
+  @apply max-md:px-2;
+}
+
+.left-sidebar li a {
+  @apply max-md:text-[12px];
+}
+
+.left-sidebar li a span {
+  @apply whitespace-nowrap w-[180px] text-ellipsis overflow-hidden;
+}
diff --git a/src/assets/css/prem-chat.css b/src/assets/css/prem-chat.css
index 9c0969b3..107e82a1 100644
--- a/src/assets/css/prem-chat.css
+++ b/src/assets/css/prem-chat.css
@@ -7,26 +7,6 @@
   @apply bg-grey-800 flex-col px-4 flex h-screen w-[260px] max-md:absolute max-md:z-10 right-0 max-md:top-0;
 }
 
-.prem-chat-sidebar .sidebar {
-  @apply max-md:fixed max-md:z-[11] max-md:w-full max-md:p-5 max-md:top-0 max-md:bottom-0 max-md:overflow-hidden max-md:bg-grey-800;
-}
-
-.prem-chat-sidebar .sidebar li.active {
-  @apply max-md:bg-grey-900;
-}
-
-.prem-chat-sidebar .sidebar__logo {
-  @apply max-md:max-w-[100px] max-md:ml-3;
-}
-
-.prem-chat-sidebar .sidebar__search {
-  @apply max-md:h-[38px];
-}
-
-.prem-chat-sidebar .sidebar li a {
-  @apply max-md:text-[12px];
-}
-
 .prem-chat {
   @apply mt-8 border-2 border-grey-400 rounded-md;
 }
@@ -35,25 +15,29 @@
   @apply bg-transparent  cursor-pointer border border-grey-400 text-grey-200 w-full z-10 px-4 py-[6px] appearance-none;
 }
 
-.prem-chat-input input {
-  @apply bg-grey-700  text-white md:text-sm text-[13px] outline-none rounded-[29px] h-[57px] mt-[14px] py-2 md:pl-[33px] md:pr-16 pr-12 pl-4 w-full;
+.autosize-textarea {
+  @apply bg-grey-700 text-white text-sm outline-none rounded-[29px] h-14 py-4 md:pl-[33px] md:pr-16 pr-12 pl-6 w-full min-h-14 max-h-40;
 }
 
-.prem-chat-input input:-webkit-autofill,
-.prem-chat-input input:-webkit-autofill:hover,
-.prem-chat-input input:-webkit-autofill:active,
-.prem-chat-input input:-webkit-autofill:focus {
+.autosize-textarea:-webkit-autofill,
+.autosize-textarea:-webkit-autofill:hover,
+.autosize-textarea:-webkit-autofill:active,
+.autosize-textarea:-webkit-autofill:focus {
   -webkit-text-fill-color: #302f32;
   -webkit-box-shadow: 0 0 0 1000px #302f32 inset;
   transition: background-color 5000s ease-in-out 0s;
 }
 
-.prem-chat-input img {
+.autosize-textarea-container {
+  @apply relative mt-4;
+}
+
+.autosize-textarea-container img {
   @apply bg-primary-light p-2 w-[35px] h-[35px] rounded-full stroke-white;
 }
 
-.prem-chat-input button {
-  @apply absolute md:right-[21px] right-[12px] top-[25px];
+.autosize-textarea-container button {
+  @apply absolute md:right-[21px] right-[12px] bottom-4;
 }
 
 .prem-chat-bottom {
@@ -96,7 +80,7 @@
   @apply !text-white;
 }
 
-.bot-reply > p {
+.bot-reply .markdown-body {
   @apply p-4 w-full text-white;
   max-width: 660px;
   border-radius: 0 10px 10px 10px;
@@ -113,19 +97,11 @@
   @apply flex items-end mb-[40px];
 }
 
-.user-reply p {
-  @apply bg-grey-100 border py-4 px-[22px] ml-auto max-w-[660px]  text-base text-grey-700;
+.user-reply pre {
+  @apply bg-grey-100 border py-4 px-[22px] ml-auto max-w-[660px] font-sans text-sm text-grey-700 whitespace-pre-wrap;
   box-shadow:
     10.4294px 10.4294px 26.0736px rgba(112, 124, 151, 0.05),
     15.6442px 15.6442px 36.5031px rgba(112, 124, 151, 0.05);
   border-radius: 10px 10px 0 10px;
   border-color: rgba(112, 124, 151, 0.25);
 }
-
-.prem-chat-sidebar .sidebar li a span {
-  @apply whitespace-nowrap w-[180px] text-ellipsis overflow-hidden;
-}
-
-.prem-chat-sidebar .sidebar li {
-  @apply max-md:px-2;
-}
diff --git a/src/assets/images/network.png b/src/assets/images/network.png
new file mode 100644
index 00000000..f3310886
Binary files /dev/null and b/src/assets/images/network.png differ
diff --git a/src/controller/abstractServiceController.ts b/src/controller/abstractServiceController.ts
index 98b93e04..8c09d9f0 100644
--- a/src/controller/abstractServiceController.ts
+++ b/src/controller/abstractServiceController.ts
@@ -1,4 +1,5 @@
 import type { Service } from "../modules/service/types";
+import type { Registry } from "../modules/settings/types";
 import type { Interface } from "../shared/helpers/interfaces";
 
 import type { DownloadArgs } from "./serviceController";
@@ -23,6 +24,10 @@ abstract class AbstractServiceController {
   abstract getGPUStats(): Promise<Record<string, string>>;
   abstract getInterfaces(): Promise<Interface[]>;
   abstract addService(service: Service): Promise<void>;
+  abstract addRegistry(registry: Registry): Promise<void>;
+  abstract deleteRegistry(registry: Registry): Promise<void>;
+  abstract fetchRegistries(): Promise<Registry[]>;
+  abstract resetDefaultRegistry(): Promise<void>;
 }
 
 export default AbstractServiceController;
diff --git a/src/controller/binariesController.ts b/src/controller/binariesController.ts
index bccffa7a..46dfd8de 100644
--- a/src/controller/binariesController.ts
+++ b/src/controller/binariesController.ts
@@ -1,4 +1,5 @@
 import { invoke } from "@tauri-apps/api/tauri";
+import type { Registry } from "modules/settings/types";
 
 import type { Service, ServiceBinary } from "../modules/service/types";
 import type { Interface } from "../shared/helpers/interfaces";
@@ -13,10 +14,7 @@ class BinariesController extends AbstractServiceController {
 
   async restart(serviceId: string): Promise<void> {
     await this.stop(serviceId);
-    const services: string[] = await invoke("get_running_services");
-    while (!services.includes(serviceId)) {
-      await this.start(serviceId);
-    }
+    await this.start(serviceId);
   }
 
   async stop(serviceId: string): Promise<void> {
@@ -80,6 +78,22 @@ class BinariesController extends AbstractServiceController {
   async addService(service: Service): Promise<void> {
     await invoke("add_service", { service });
   }
+
+  async addRegistry(registry: Registry): Promise<void> {
+    await invoke("add_registry", { registry });
+  }
+
+  async deleteRegistry(registry: Registry): Promise<void> {
+    await invoke("delete_registry", { registry });
+  }
+
+  async fetchRegistries(): Promise<Registry[]> {
+    return await invoke("fetch_registries");
+  }
+
+  async resetDefaultRegistry(): Promise<void> {
+    return await invoke("reset_default_registry");
+  }
 }
 
 export default BinariesController;
diff --git a/src/controller/dockerController.ts b/src/controller/dockerController.ts
index e1b82fd1..8feb7786 100644
--- a/src/controller/dockerController.ts
+++ b/src/controller/dockerController.ts
@@ -1,3 +1,5 @@
+import type { Registry } from "modules/settings/types";
+
 import downloadServiceStream from "../modules/service/api/downloadServiceStream";
 import type { Service, ServiceDocker } from "../modules/service/types";
 import api from "../shared/api/v1";
@@ -31,6 +33,7 @@ class DockerController extends AbstractServiceController {
     afterSuccess?: () => void;
   }): Promise<void> {
     console.log(`Downloading service ${serviceId}`);
+    useSettingStore.getState().setServiceDownloadProgress(serviceId, "docker", 0);
     await downloadServiceStream(
       serviceId,
       (error) => {
@@ -62,7 +65,7 @@ class DockerController extends AbstractServiceController {
   }
 
   async getServices(): Promise<ServiceDocker[]> {
-    const response = await api().get("v1/services");
+    const response = await api().get("v1/services/");
     return response.data;
   }
 
@@ -76,23 +79,40 @@ class DockerController extends AbstractServiceController {
   }
 
   async getSystemStats(): Promise<Record<string, string>> {
-    const response = await api().get("v1/stats-all");
+    const response = await api().get("v1/stats-all/");
     return response.data;
   }
 
   async getGPUStats(): Promise<Record<string, string>> {
-    const response = await api().get("v1/gpu-stats-all");
+    const response = await api().get("v1/gpu-stats-all/");
     return response.data;
   }
 
   async getInterfaces(): Promise<Interface[]> {
-    const response = await api().get("v1/interfaces");
+    const response = await api().get("v1/interfaces/");
     return response.data;
   }
 
   async addService(service: Service): Promise<void> {
     await api().post("v1/services/", service);
   }
+
+  async addRegistry(registry: Registry): Promise<void> {
+    await api().post(`v1/registries/`, registry);
+  }
+
+  async deleteRegistry(registry: Registry): Promise<void> {
+    await api().delete(`v1/registries/?url=${registry.url}`);
+  }
+
+  async fetchRegistries(): Promise<Registry[]> {
+    const response = await api().get(`v1/registries/`);
+    return response.data;
+  }
+
+  async resetDefaultRegistry(): Promise<void> {
+    throw new Error("Method not implemented.");
+  }
 }
 
 export default DockerController;
diff --git a/src/controller/serviceController.ts b/src/controller/serviceController.ts
index 6989cd92..aaa3a9d6 100644
--- a/src/controller/serviceController.ts
+++ b/src/controller/serviceController.ts
@@ -1,4 +1,5 @@
 import type { Service } from "../modules/service/types";
+import type { Registry } from "../modules/settings/types";
 import type { Interface } from "../shared/helpers/interfaces";
 import useSettingStore from "../shared/store/setting";
 
@@ -33,6 +34,10 @@ interface IServiceController {
   getGPUStats(serviceType: Service["serviceType"]): Promise<any>;
   getInterfaces(serviceType: Service["serviceType"]): Promise<Interface[]>;
   addService(service: Service, serviceType: Service["serviceType"]): Promise<void>;
+  addRegistry(registry: Registry, serviceType: Service["serviceType"]): Promise<void>;
+  deleteRegistry(registry: Registry, serviceType: Service["serviceType"]): Promise<void>;
+  fetchRegistries(serviceType: Service["serviceType"]): Promise<Registry[]>;
+  resetDefaultRegistry(serviceType: Service["serviceType"]): Promise<void>;
 }
 
 class ServiceController implements IServiceController {
@@ -104,7 +109,6 @@ class ServiceController implements IServiceController {
     if (serviceType === "docker") {
       useSettingStore.getState().addServiceAsDownloading(serviceId);
       await this.dockerController.download({ serviceId, afterSuccess });
-      useSettingStore.getState().removeServiceAsDownloading(serviceId);
     } else if (serviceType === "binary") {
       useSettingStore.getState().addServiceAsDownloading(serviceId);
       await this.binariesController.download({
@@ -208,6 +212,40 @@ class ServiceController implements IServiceController {
       await this.binariesController.addService(service);
     }
   }
+
+  async addRegistry(registry: Registry, serviceType: Service["serviceType"]): Promise<void> {
+    if (serviceType === "docker") {
+      await this.dockerController.addRegistry(registry);
+    } else if (serviceType === "binary") {
+      await this.binariesController.addRegistry(registry);
+    }
+  }
+
+  async deleteRegistry(registry: Registry, serviceType: Service["serviceType"]): Promise<void> {
+    if (serviceType === "docker") {
+      await this.dockerController.deleteRegistry(registry);
+    } else if (serviceType === "binary") {
+      await this.binariesController.deleteRegistry(registry);
+    }
+  }
+
+  async fetchRegistries(serviceType: Service["serviceType"]): Promise<Registry[]> {
+    if (serviceType === "docker") {
+      return await this.dockerController.fetchRegistries();
+    } else if (serviceType === "binary") {
+      return await this.binariesController.fetchRegistries();
+    } else {
+      return [];
+    }
+  }
+
+  async resetDefaultRegistry(serviceType: Service["serviceType"]): Promise<void> {
+    if (serviceType === "docker") {
+      return await this.dockerController.resetDefaultRegistry();
+    } else if (serviceType === "binary") {
+      return await this.binariesController.resetDefaultRegistry();
+    }
+  }
 }
 
 export default ServiceController;
diff --git a/src/modules/prem-audio/components/PremAudio.tsx b/src/modules/prem-audio/components/PremAudio.tsx
index 21a703a0..002fe486 100644
--- a/src/modules/prem-audio/components/PremAudio.tsx
+++ b/src/modules/prem-audio/components/PremAudio.tsx
@@ -23,8 +23,8 @@ const PremAudio = () => {
     <PremAudioContainer
       serviceName={service?.name ?? ""}
       historyId={historyId}
-      serviceId={serviceId!}
-      serviceType={serviceType!}
+      serviceId={serviceId ?? ""}
+      serviceType={serviceType ?? "docker"}
     />
   );
 };
diff --git a/src/modules/prem-audio/components/PremAudioContainer.tsx b/src/modules/prem-audio/components/PremAudioContainer.tsx
index 8d9b11c3..c2bf8e04 100644
--- a/src/modules/prem-audio/components/PremAudioContainer.tsx
+++ b/src/modules/prem-audio/components/PremAudioContainer.tsx
@@ -1,6 +1,4 @@
-import clsx from "clsx";
 import { useState } from "react";
-import { useMediaQuery } from "usehooks-ts";
 
 import type { PremAudioContainerProps } from "../types";
 
@@ -16,19 +14,18 @@ const PremAudioContainer = ({
   historyId,
 }: PremAudioContainerProps) => {
   const [rightSidebar, setRightSidebar] = useState(false);
-  const responsiveMatches = useMediaQuery("(max-width: 767px)");
   const [hamburgerMenuOpen, setHamburgerMenu] = useState<boolean>(true);
 
   return (
     <section>
       <div className="md:flex md:h-screen w-full relative">
-        <div
-          className={clsx("prem-chat-sidebar md:relative", {
-            hidden: responsiveMatches && hamburgerMenuOpen,
-          })}
-        >
-          <PremAudioLeftSidebar setHamburgerMenu={setHamburgerMenu} />
-        </div>
+        <PremAudioLeftSidebar
+          hamburgerMenuOpen={hamburgerMenuOpen}
+          setHamburgerMenu={setHamburgerMenu}
+          serviceId={serviceId}
+          serviceType={serviceType}
+          historyId={historyId ?? ""}
+        />
         <div className="flex flex-1">
           <div className="bg-lines bg-grey-900 relative h-full w-full">
             <div className="main-content h-full z-10 overflow-y-auto custom-scroll relative prem-img-services min-h-screen">
diff --git a/src/modules/prem-audio/components/PremAudioLeftSidebar.tsx b/src/modules/prem-audio/components/PremAudioLeftSidebar.tsx
index 76329260..5fd4f2d1 100644
--- a/src/modules/prem-audio/components/PremAudioLeftSidebar.tsx
+++ b/src/modules/prem-audio/components/PremAudioLeftSidebar.tsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { orderBy } from "lodash";
-import { Link, useNavigate, useParams } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import DeleteIcon from "shared/components/DeleteIcon";
 import LeftSidebar from "shared/components/LeftSidebar";
 import NoPrompts from "shared/components/NoPrompts";
@@ -9,9 +9,14 @@ import type { HamburgerMenuProps } from "shared/types";
 import { useMediaQuery } from "usehooks-ts";
 import { shallow } from "zustand/shallow";
 
-const PremAudioLeftSidebar = ({ setHamburgerMenu }: HamburgerMenuProps) => {
+const PremAudioLeftSidebar = ({
+  hamburgerMenuOpen,
+  setHamburgerMenu,
+  serviceId,
+  serviceType,
+  historyId,
+}: HamburgerMenuProps) => {
   const navigate = useNavigate();
-  const { serviceId, serviceType, historyId } = useParams();
   const responsiveMatches = useMediaQuery("(max-width: 767px)");
   const { history, deleteHistory } = usePremAudioStore(
     (state) => ({
@@ -29,7 +34,12 @@ const PremAudioLeftSidebar = ({ setHamburgerMenu }: HamburgerMenuProps) => {
   };
 
   return (
-    <LeftSidebar setHamburgerMenu={setHamburgerMenu}>
+    <LeftSidebar
+      hamburgerMenuOpen={hamburgerMenuOpen}
+      setHamburgerMenu={setHamburgerMenu}
+      serviceId={serviceId}
+      serviceType={serviceType}
+    >
       {history.length === 0 && <NoPrompts text="No Audio" />}
       <div className="mt-10 overflow-y-auto custom-scroll">
         <ul className="md:flex-grow scrollbar-none w-full">
diff --git a/src/modules/prem-chat/components/Header.tsx b/src/modules/prem-chat/components/Header.tsx
index c466cc24..f39c994c 100644
--- a/src/modules/prem-chat/components/Header.tsx
+++ b/src/modules/prem-chat/components/Header.tsx
@@ -1,52 +1,63 @@
 import hamburgerMenu from "assets/images/hamburger-menu.svg";
 import setting from "assets/images/setting.svg";
 import WarningModal from "modules/service/components/WarningModal";
-import { useState } from "react";
+import { type ForwardedRef, forwardRef, useState } from "react";
 import WarningIcon from "shared/components/WarningIcon";
 import type { HeaderProps } from "shared/types";
 
-const Header = ({ setRightSidebar, hamburgerMenuOpen, setHamburgerMenu, title }: HeaderProps) => {
-  const [open, setIsOpen] = useState(false);
+import PetalsBanner from "../../../shared/components/PetalsBanner";
 
-  const closeModal = () => {
-    setIsOpen(false);
-  };
+const Header = forwardRef(
+  (
+    { setRightSidebar, hamburgerMenuOpen, setHamburgerMenu, title, isPetals = false }: HeaderProps,
+    ref: ForwardedRef<HTMLInputElement>,
+  ) => {
+    const [open, setIsOpen] = useState(false);
 
-  const openModal = () => {
-    setIsOpen(true);
-  };
+    const closeModal = () => {
+      setIsOpen(false);
+    };
 
-  return (
-    <>
-      <div className="md:border-b border-light w-full h-[77px] py-3 flex sticky bg-grey-900 z-[11] top-0">
-        <div className="max-md:w-full flex md:justify-center header__center max-md:items-center">
-          <button
-            onClick={() => setHamburgerMenu(!hamburgerMenuOpen)}
-            className="md:hidden ml-5 w-10 h-10"
-          >
-            <img src={hamburgerMenu} alt="msg" width={22} height={22} className="mx-auto" />
-          </button>
-          <h1 className="flex items-center text-white md:text-xl text-md  mx-[18px]">{title}</h1>
-        </div>
-        <div className="md:border-l border-light md:pl-6 flex items-center ml-auto max-w-max w-full md:absolute md:right-0">
-          <button type="button" onClick={openModal} className="share-chat__btn">
-            Share Chat
-          </button>
-          <button onClick={() => setRightSidebar(true)} className="setting__btn" type="button">
-            <img src={setting} alt="msg" width={22} height={22} />
-          </button>
+    const openModal = () => {
+      setIsOpen(true);
+    };
+
+    return (
+      <>
+        {isPetals ? <PetalsBanner /> : null}
+        <div
+          className="md:border-b border-light w-full h-[77px] py-3 flex sticky bg-grey-900 z-[11] top-0"
+          ref={ref}
+        >
+          <div className="max-md:w-full flex md:justify-center header__center max-md:items-center">
+            <button
+              onClick={() => setHamburgerMenu(!hamburgerMenuOpen)}
+              className="md:hidden ml-5 w-10 h-10"
+            >
+              <img src={hamburgerMenu} alt="msg" width={22} height={22} className="mx-auto" />
+            </button>
+            <h1 className="flex items-center text-white md:text-xl text-md  mx-[18px]">{title}</h1>
+          </div>
+          <div className="md:border-l border-light md:pl-6 flex items-center ml-auto max-w-max w-full md:absolute md:right-0">
+            <button type="button" onClick={openModal} className="share-chat__btn">
+              Share Chat
+            </button>
+            <button onClick={() => setRightSidebar(true)} className="setting__btn" type="button">
+              <img src={setting} alt="msg" width={22} height={22} />
+            </button>
+          </div>
         </div>
-      </div>
-      <WarningModal
-        description="Share Chat is not available yet"
-        title="Coming Soon"
-        isOpen={open}
-        onCancel={closeModal}
-        onOk={closeModal}
-        icon={<WarningIcon className="w-32 h-32" />}
-      />
-    </>
-  );
-};
+        <WarningModal
+          description="Share Chat is not available yet"
+          title="Coming Soon"
+          isOpen={open}
+          onCancel={closeModal}
+          onOk={closeModal}
+          icon={<WarningIcon className="w-32 h-32" />}
+        />
+      </>
+    );
+  },
+);
 
 export default Header;
diff --git a/src/modules/prem-chat/components/InputBox.tsx b/src/modules/prem-chat/components/InputBox.tsx
deleted file mode 100644
index e6dc59bc..00000000
--- a/src/modules/prem-chat/components/InputBox.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import Send from "assets/images/send.svg";
-import type { ForwardedRef } from "react";
-import { forwardRef } from "react";
-
-import type { InputBoxProps } from "../types";
-
-const InputBox = forwardRef((props: InputBoxProps, ref: ForwardedRef<HTMLInputElement>) => {
-  const { question, setQuestion, disabled, placeholder } = props;
-  return (
-    <div className="prem-chat-input flex items-center relative">
-      <input
-        autoComplete="off"
-        type="text"
-        name="question"
-        value={question}
-        onChange={(e) => setQuestion(e.target.value)}
-        disabled={disabled}
-        placeholder={placeholder}
-        ref={ref}
-        autoFocus
-      />
-      <button>
-        <img src={Send} alt="Send" />
-      </button>
-    </div>
-  );
-});
-
-export default InputBox;
diff --git a/src/modules/prem-chat/components/PremChat.tsx b/src/modules/prem-chat/components/PremChat.tsx
index 83ec04b9..9859f489 100644
--- a/src/modules/prem-chat/components/PremChat.tsx
+++ b/src/modules/prem-chat/components/PremChat.tsx
@@ -7,8 +7,8 @@ import type { Service } from "../../service/types";
 import PremChatContainer from "./PremChatContainer";
 
 function PremChat() {
-  const { chatId, serviceId, serviceType } = useParams<{
-    chatId: string;
+  const { historyId, serviceId, serviceType } = useParams<{
+    historyId: string;
     serviceId: string;
     serviceType: Service["serviceType"];
   }>();
@@ -21,10 +21,11 @@ function PremChat() {
 
   return (
     <PremChatContainer
-      chatId={chatId}
+      historyId={historyId}
       serviceName={service?.name ?? ""}
       serviceId={serviceId!}
       serviceType={serviceType!}
+      isPetals={service?.petals ?? false}
     />
   );
 }
diff --git a/src/modules/prem-chat/components/PremChatContainer.tsx b/src/modules/prem-chat/components/PremChatContainer.tsx
index 797d5813..6cda7803 100644
--- a/src/modules/prem-chat/components/PremChatContainer.tsx
+++ b/src/modules/prem-chat/components/PremChatContainer.tsx
@@ -1,31 +1,35 @@
-import clsx from "clsx";
+import Send from "assets/images/send.svg";
 import { useEffect, useRef, useState } from "react";
 import BotReply from "shared/components/BotReply";
 import UserReply from "shared/components/UserReply";
 import usePremChatStream from "shared/hooks/usePremChatStream";
 import { useMediaQuery, useWindowSize } from "usehooks-ts";
 
+import Spinner from "../../../shared/components/Spinner";
+import useAutosizeTextArea from "../../../shared/hooks/useAutosizeTextarea";
 import type { Message, PremChatContainerProps } from "../types";
 
 import Header from "./Header";
-import InputBox from "./InputBox";
 import PremChatSidebar from "./PremChatSidebar";
 import RegenerateButton from "./RegenerateButton";
 import RightSidebar from "./RightSidebar";
 
 const PremChatContainer = ({
-  chatId,
+  historyId,
   serviceId,
   serviceType,
   serviceName,
+  isPetals,
 }: PremChatContainerProps) => {
   const model = serviceId;
   const [rightSidebar, setRightSidebar] = useState(false);
   const [hamburgerMenuOpen, setHamburgerMenu] = useState<boolean>(true);
   const chatMessageListRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const { height } = useWindowSize();
   const responsiveMatches = useMediaQuery("(min-width: 768px)");
+  const headerRef = useRef(null);
+  const [headerVisibleHeight, setHeaderVisibleHeight] = useState(0);
 
   const {
     chatMessages,
@@ -38,7 +42,25 @@ const PremChatContainer = ({
     resetPromptTemplate,
     resetChatServiceUrl,
     abort,
-  } = usePremChatStream(serviceId, serviceType, chatId || null);
+  } = usePremChatStream(serviceId, serviceType, historyId || null);
+
+  const handleScroll = () => {
+    if (headerRef.current) {
+      const rect = (headerRef.current as any).getBoundingClientRect();
+      const windowHeight = window.innerHeight;
+      const visibleHeight = Math.min(rect.bottom, windowHeight) - Math.max(rect.top, 0);
+      setHeaderVisibleHeight(visibleHeight);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  useAutosizeTextArea(textAreaRef.current, question);
 
   useEffect(() => {
     if (chatMessageListRef.current) {
@@ -47,8 +69,8 @@ const PremChatContainer = ({
   }, [chatMessages]);
 
   useEffect(() => {
-    if (!isLoading && inputRef.current) {
-      inputRef.current.focus();
+    if (!isLoading && textAreaRef.current) {
+      textAreaRef.current.focus();
     }
   }, [isLoading]);
 
@@ -57,32 +79,48 @@ const PremChatContainer = ({
     return () => {
       abort();
     };
-  }, [abort, chatId]);
+  }, [abort, historyId]);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      onSubmit(e);
+    }
+  };
 
   return (
     <section>
-      <div className="md:flex md:h-screen w-full relative">
-        <div
-          className={clsx("prem-chat-sidebar md:relative", { "max-md:hidden": hamburgerMenuOpen })}
-        >
-          <PremChatSidebar setHamburgerMenu={setHamburgerMenu} />
-        </div>
+      <div className="md:flex w-full relative">
+        <PremChatSidebar
+          hamburgerMenuOpen={hamburgerMenuOpen}
+          setHamburgerMenu={setHamburgerMenu}
+          serviceId={serviceId}
+          serviceType={serviceType}
+          historyId={historyId ?? ""}
+        />
         <div className="flex flex-1 prem-chat-container">
           <div className="bg-lines bg-grey-900 relative h-full w-full">
             <div
-              className="main-content h-full z-10 relative max-h-full overflow-hidden scrollbar-none"
+              className="main-content h-screen z-10 relative overflow-hidden scrollbar-none"
               ref={chatMessageListRef}
             >
               <Header
+                ref={headerRef}
                 hamburgerMenuOpen={hamburgerMenuOpen}
                 setHamburgerMenu={setHamburgerMenu}
                 title={serviceName}
                 setRightSidebar={setRightSidebar}
                 rightSidebar={rightSidebar}
+                isPetals={isPetals}
               />
               <div
-                className="z-10 relative md:mt-[40px] mt-0 flex flex-col prem-chat-body scrollbar-none"
-                style={{ height: height - (responsiveMatches ? 200 : 100) }}
+                className="z-10 relative flex flex-col prem-chat-body scrollbar-none"
+                style={{
+                  height:
+                    height -
+                    headerVisibleHeight -
+                    (responsiveMatches ? (isPetals ? 215 : 160) : 120),
+                }}
               >
                 <div className="md:w-[65%] w-[90%] mx-auto md:mt-8">
                   {chatMessages.map((message: Message, index: number) => (
@@ -97,26 +135,37 @@ const PremChatContainer = ({
                 </div>
               </div>
               <div className="prem-chat-bottom border-transparent">
-                <div className="md:w-[55%] sm:w-[85%] w-[88%] mx-auto max-md:mt-[14px]">
+                <div className="md:w-[55%] sm:w-[85%] w-[88%] mx-auto mt-4">
                   {chatMessages.length > 0 && !isLoading && !isError && (
-                    <div>
-                      <RegenerateButton onRgenerateClick={onRegenerate} />
-                    </div>
+                    <RegenerateButton onRegenerateClick={onRegenerate} />
                   )}
-                  <form className="text-center" onSubmit={onSubmit}>
-                    <InputBox
-                      question={question}
-                      setQuestion={setQuestion}
-                      disabled={isLoading || !model}
-                      ref={inputRef}
-                      placeholder={
-                        isLoading
-                          ? "Fetching response..."
-                          : model
-                          ? `Type a message or type "/" to select a prompt`
-                          : "Please select a model to get started"
-                      }
-                    />
+                  <form onSubmit={onSubmit}>
+                    <div className="autosize-textarea-container">
+                      <textarea
+                        autoComplete="off"
+                        className="autosize-textarea"
+                        onChange={(e) => setQuestion(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        placeholder={
+                          isLoading
+                            ? "Fetching response..."
+                            : model
+                            ? `Type a message or type "/" to select a prompt`
+                            : "Please select a model to get started"
+                        }
+                        ref={textAreaRef}
+                        rows={1}
+                        value={question}
+                        disabled={isLoading || !model}
+                      />
+                      <button>
+                        {isLoading ? (
+                          <Spinner className="h-9 w-5" />
+                        ) : (
+                          <img src={Send} alt="send" />
+                        )}
+                      </button>
+                    </div>
                   </form>
                 </div>
               </div>
diff --git a/src/modules/prem-chat/components/PremChatSidebar.tsx b/src/modules/prem-chat/components/PremChatSidebar.tsx
index a816c36d..a85bff04 100644
--- a/src/modules/prem-chat/components/PremChatSidebar.tsx
+++ b/src/modules/prem-chat/components/PremChatSidebar.tsx
@@ -9,7 +9,7 @@ import clsx from "clsx";
 import orderBy from "lodash/orderBy";
 import WarningModal from "modules/service/components/WarningModal";
 import { useState } from "react";
-import { Link, useNavigate, useParams } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import NoPrompts from "shared/components/NoPrompts";
 import WarningIcon from "shared/components/WarningIcon";
 import usePremChatStore from "shared/store/prem-chat";
@@ -17,9 +17,14 @@ import type { HamburgerMenuProps } from "shared/types";
 import { shallow } from "zustand/shallow";
 
 import LeftSidebar from "../../../shared/components/LeftSidebar";
-import type { Service } from "../../service/types";
 
-const PremChatSidebar = ({ setHamburgerMenu }: HamburgerMenuProps) => {
+const PremChatSidebar = ({
+  hamburgerMenuOpen,
+  setHamburgerMenu,
+  serviceId,
+  serviceType,
+  historyId,
+}: HamburgerMenuProps) => {
   // TODO: shallow will only check for reference equality, not deep equality
   const { history, deleteHistory, clearHistory } = usePremChatStore(
     (state) => ({
@@ -31,18 +36,12 @@ const PremChatSidebar = ({ setHamburgerMenu }: HamburgerMenuProps) => {
   );
 
   const [search, setSearch] = useState("");
-
-  const { chatId, serviceId, serviceType } = useParams<{
-    chatId: string;
-    serviceId: string;
-    serviceType: Service["serviceType"];
-  }>();
   const navigate = useNavigate();
   const [openWarningModal, setIsOpenWarningModal] = useState(false);
 
   const onDeleteClick = (id: string) => {
     deleteHistory(id);
-    if (chatId === id) {
+    if (historyId === id) {
       navigate(`/prem-chat/${serviceId}/${serviceType}`);
     }
   };
@@ -70,7 +69,12 @@ const PremChatSidebar = ({ setHamburgerMenu }: HamburgerMenuProps) => {
 
   return (
     <>
-      <LeftSidebar setHamburgerMenu={setHamburgerMenu}>
+      <LeftSidebar
+        hamburgerMenuOpen={hamburgerMenuOpen}
+        setHamburgerMenu={setHamburgerMenu}
+        serviceId={serviceId}
+        serviceType={serviceType}
+      >
         <div className="flex md:mt-8 mt-6 mb-6 sidebar__search relative">
           <img
             src={searchIcon}
@@ -97,7 +101,7 @@ const PremChatSidebar = ({ setHamburgerMenu }: HamburgerMenuProps) => {
                 <li
                   onClick={() => setHamburgerMenu(true)}
                   key={item.id}
-                  className={clsx({ "bg-grey-900": chatId === item.id })}
+                  className={clsx({ "bg-grey-900": historyId === item.id })}
                 >
                   <Link to={`/prem-chat/${serviceId}/${serviceType}/${item.id}`}>
                     <img src={msg} alt="msg" width={18} height={18} className="mr-3" />
@@ -115,14 +119,14 @@ const PremChatSidebar = ({ setHamburgerMenu }: HamburgerMenuProps) => {
           <div className="border-t border-timberwolf opacity-30 -mx-2 pt-[13px] max-md:hidden"></div>
           {filteredHistory.length > 0 && (
             <li>
-              <Link to={`/prem-chat/${serviceId}`} onClick={onClearClick}>
+              <Link to={`/prem-chat/${serviceId}/${serviceType}`} onClick={onClearClick}>
                 <img src={binRed} alt="bin" className="mr-3 max-w-[20px]" />
                 <span className="text-white">Clear Chat</span>
               </Link>
             </li>
           )}
           <li>
-            <Link to={`/prem-chat/${serviceId}`} onClick={openModal}>
+            <Link to={`/prem-chat/${serviceId}/${serviceType}`} onClick={openModal}>
               <img
                 src={exportData}
                 alt="exportData"
@@ -134,7 +138,7 @@ const PremChatSidebar = ({ setHamburgerMenu }: HamburgerMenuProps) => {
             </Link>
           </li>
           <li>
-            <Link to={`/prem-chat/${serviceId}`} onClick={openModal}>
+            <Link to={`/prem-chat/${serviceId}/${serviceType}`} onClick={openModal}>
               <img
                 src={importData}
                 alt="importData"
diff --git a/src/modules/prem-chat/components/RegenerateButton.tsx b/src/modules/prem-chat/components/RegenerateButton.tsx
index b1e70523..d73f60e3 100644
--- a/src/modules/prem-chat/components/RegenerateButton.tsx
+++ b/src/modules/prem-chat/components/RegenerateButton.tsx
@@ -2,11 +2,11 @@ import regenerate from "assets/images/regenerate.svg";
 
 import type { RegenerateButtonProps } from "../types";
 
-const RegenerateButton = ({ onRgenerateClick }: RegenerateButtonProps) => {
+const RegenerateButton = ({ onRegenerateClick }: RegenerateButtonProps) => {
   return (
     <button
-      className="border mx-auto  flex items-center border-white rounded-md text-white py-[9px] px-[13px]"
-      onClick={onRgenerateClick}
+      className="border mx-auto flex items-center border-white rounded-md text-white py-[9px] px-[13px]"
+      onClick={onRegenerateClick}
     >
       <img width={16} height={16} src={regenerate} alt="regenerate-logo" className="mr-3" />
       Regenerate Response
diff --git a/src/modules/prem-chat/types.ts b/src/modules/prem-chat/types.ts
index fdd2dc51..634d3d1b 100644
--- a/src/modules/prem-chat/types.ts
+++ b/src/modules/prem-chat/types.ts
@@ -48,14 +48,15 @@ export type InputBoxProps = {
 };
 
 export type RegenerateButtonProps = {
-  onRgenerateClick: () => void;
+  onRegenerateClick: () => void;
 };
 
 export type PremChatContainerProps = {
-  chatId: string | undefined;
+  historyId?: string;
   serviceId: string;
   serviceType: Service["serviceType"];
   serviceName: string;
+  isPetals: boolean;
 };
 
 export interface ChatRightSidebarProps extends RightSidebarProps {
diff --git a/src/modules/prem-coder/components/PremCoder.tsx b/src/modules/prem-coder/components/PremCoder.tsx
index 99f301bd..5cd71258 100644
--- a/src/modules/prem-coder/components/PremCoder.tsx
+++ b/src/modules/prem-coder/components/PremCoder.tsx
@@ -1,4 +1,3 @@
-import clsx from "clsx";
 import { useState } from "react";
 import { useParams } from "react-router-dom";
 
@@ -25,11 +24,12 @@ const PremCoder = () => {
   return (
     <section>
       <div className="md:flex md:h-screen w-full relative">
-        <div
-          className={clsx("prem-chat-sidebar md:relative", { "max-md:hidden": hamburgerMenuOpen })}
-        >
-          <LeftSidebar setHamburgerMenu={setHamburgerMenu} />
-        </div>
+        <LeftSidebar
+          hamburgerMenuOpen={hamburgerMenuOpen}
+          setHamburgerMenu={setHamburgerMenu}
+          serviceId={serviceId ?? ""}
+          serviceType={serviceType ?? "docker"}
+        />
         <div className="flex flex-1">
           <div className="bg-lines bg-grey-900 relative h-full w-full">
             <div className="main-content h-full z-10 overflow-y-auto custom-scroll relative prem-img-services min-h-screen">
diff --git a/src/modules/prem-image/components/PremImage.tsx b/src/modules/prem-image/components/PremImage.tsx
index 487786d2..b7f63895 100644
--- a/src/modules/prem-image/components/PremImage.tsx
+++ b/src/modules/prem-image/components/PremImage.tsx
@@ -23,8 +23,8 @@ const PremImage = () => {
     <PremImageContainer
       serviceName={service?.name ?? ""}
       historyId={historyId}
-      serviceId={serviceId!}
-      serviceType={serviceType!}
+      serviceId={serviceId ?? ""}
+      serviceType={serviceType ?? "docker"}
     />
   );
 };
diff --git a/src/modules/prem-image/components/PremImageContainer.tsx b/src/modules/prem-image/components/PremImageContainer.tsx
index 441e0b94..97c64ba3 100644
--- a/src/modules/prem-image/components/PremImageContainer.tsx
+++ b/src/modules/prem-image/components/PremImageContainer.tsx
@@ -64,11 +64,13 @@ const PremImageContainer = ({
   return (
     <section>
       <div className="md:flex md:h-screen w-full relative">
-        <div
-          className={clsx("prem-chat-sidebar md:relative", { "max-md:hidden": hamburgerMenuOpen })}
-        >
-          <PremImageLeftSidebar setHamburgerMenu={setHamburgerMenu} />
-        </div>
+        <PremImageLeftSidebar
+          hamburgerMenuOpen={hamburgerMenuOpen}
+          setHamburgerMenu={setHamburgerMenu}
+          serviceId={serviceId}
+          serviceType={serviceType}
+          historyId={historyId ?? ""}
+        />
         <div className="flex flex-1">
           <div className="bg-lines bg-grey-900 relative h-full w-full">
             <div className="main-content h-full z-10 overflow-y-auto custom-scroll relative prem-img-services min-h-screen">
diff --git a/src/modules/prem-image/components/PremImageLeftSidebar.tsx b/src/modules/prem-image/components/PremImageLeftSidebar.tsx
index 1c266a32..94a43e0b 100644
--- a/src/modules/prem-image/components/PremImageLeftSidebar.tsx
+++ b/src/modules/prem-image/components/PremImageLeftSidebar.tsx
@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { format, parseISO } from "date-fns";
 import { orderBy } from "lodash";
-import { Link, useParams } from "react-router-dom";
+import { Link } from "react-router-dom";
 import NoPrompts from "shared/components/NoPrompts";
 import usePremImageStore from "shared/store/prem-image";
 import { useMediaQuery } from "usehooks-ts";
@@ -10,8 +10,13 @@ import { shallow } from "zustand/shallow";
 import LeftSidebar from "../../../shared/components/LeftSidebar";
 import type { HamburgerMenuProps } from "../../../shared/types";
 
-const PremImageLeftSidebar = ({ setHamburgerMenu }: HamburgerMenuProps) => {
-  const { serviceId, historyId } = useParams();
+const PremImageLeftSidebar = ({
+  hamburgerMenuOpen,
+  setHamburgerMenu,
+  serviceId,
+  serviceType,
+  historyId,
+}: HamburgerMenuProps) => {
   const responsiveMatches = useMediaQuery("(max-width: 767px)");
   const { history } = usePremImageStore(
     (state) => ({
@@ -28,7 +33,12 @@ const PremImageLeftSidebar = ({ setHamburgerMenu }: HamburgerMenuProps) => {
   };
 
   return (
-    <LeftSidebar setHamburgerMenu={setHamburgerMenu}>
+    <LeftSidebar
+      hamburgerMenuOpen={hamburgerMenuOpen}
+      setHamburgerMenu={setHamburgerMenu}
+      serviceId={serviceId}
+      serviceType={serviceType}
+    >
       {history.length === 0 && <NoPrompts text="No Image" />}
       <div className="prem-image-sidebar custom-scroll">
         <ul className="md:flex-grow scrollbar-none w-full">
diff --git a/src/modules/prem-text-audio/components/PremTextAudio.tsx b/src/modules/prem-text-audio/components/PremTextAudio.tsx
index 189d5859..f08e6232 100644
--- a/src/modules/prem-text-audio/components/PremTextAudio.tsx
+++ b/src/modules/prem-text-audio/components/PremTextAudio.tsx
@@ -23,8 +23,8 @@ const PremTextAudio = () => {
     <PremTextAudioContainer
       serviceName={service?.name ?? ""}
       historyId={historyId}
-      serviceId={serviceId!}
-      serviceType={serviceType!}
+      serviceId={serviceId ?? ""}
+      serviceType={serviceType ?? "docker"}
     />
   );
 };
diff --git a/src/modules/prem-text-audio/components/PremTextAudioContainer.tsx b/src/modules/prem-text-audio/components/PremTextAudioContainer.tsx
index 52f2f39f..729dbd8c 100644
--- a/src/modules/prem-text-audio/components/PremTextAudioContainer.tsx
+++ b/src/modules/prem-text-audio/components/PremTextAudioContainer.tsx
@@ -1,4 +1,3 @@
-import clsx from "clsx";
 import { useState } from "react";
 
 import type { PremTextAudioContainerProps } from "../types";
@@ -11,6 +10,7 @@ import PremTextAudioRightSidebar from "./PremTextAudioRightSidebar";
 const PremTextAudioContainer = ({
   serviceName,
   serviceId,
+  serviceType,
   historyId,
 }: PremTextAudioContainerProps) => {
   const [rightSidebar, setRightSidebar] = useState(false);
@@ -19,11 +19,13 @@ const PremTextAudioContainer = ({
   return (
     <section>
       <div className="md:flex md:h-screen w-full relative">
-        <div
-          className={clsx("prem-chat-sidebar md:relative", { "max-md:hidden": hamburgerMenuOpen })}
-        >
-          <PremTextAudioLeftSidebar setHamburgerMenu={setHamburgerMenu} />
-        </div>
+        <PremTextAudioLeftSidebar
+          hamburgerMenuOpen={hamburgerMenuOpen}
+          setHamburgerMenu={setHamburgerMenu}
+          serviceId={serviceId}
+          serviceType={serviceType}
+          historyId={historyId ?? ""}
+        />
         <div className="flex flex-1">
           <div className="bg-lines bg-grey-900 relative h-full w-full">
             <div className="main-content h-full z-10 overflow-y-auto custom-scroll relative prem-img-services min-h-screen">
diff --git a/src/modules/prem-text-audio/components/PremTextAudioLeftSidebar.tsx b/src/modules/prem-text-audio/components/PremTextAudioLeftSidebar.tsx
index de2ee55d..29cfa718 100644
--- a/src/modules/prem-text-audio/components/PremTextAudioLeftSidebar.tsx
+++ b/src/modules/prem-text-audio/components/PremTextAudioLeftSidebar.tsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { orderBy } from "lodash";
-import { Link, useNavigate, useParams } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import DeleteIcon from "shared/components/DeleteIcon";
 import NoPrompts from "shared/components/NoPrompts";
 import usePremTextAudioStore from "shared/store/prem-text-audio";
@@ -9,9 +9,14 @@ import { shallow } from "zustand/shallow";
 
 import LeftSidebar from "../../../shared/components/LeftSidebar";
 
-const PremTextAudioLeftSidebar = ({ setHamburgerMenu }: HamburgerMenuProps) => {
+const PremTextAudioLeftSidebar = ({
+  hamburgerMenuOpen,
+  setHamburgerMenu,
+  serviceId,
+  serviceType,
+  historyId,
+}: HamburgerMenuProps) => {
   const navigate = useNavigate();
-  const { serviceId, serviceType, historyId } = useParams();
   const { history, deleteHistory } = usePremTextAudioStore(
     (state) => ({
       history: state.history,
@@ -28,7 +33,12 @@ const PremTextAudioLeftSidebar = ({ setHamburgerMenu }: HamburgerMenuProps) => {
   };
 
   return (
-    <LeftSidebar setHamburgerMenu={setHamburgerMenu}>
+    <LeftSidebar
+      hamburgerMenuOpen={hamburgerMenuOpen}
+      setHamburgerMenu={setHamburgerMenu}
+      serviceId={serviceId}
+      serviceType={serviceType}
+    >
       {history.length === 0 && <NoPrompts text="No Audio" />}
       <div className="mt-10 overflow-y-auto custom-scroll">
         <ul className="md:flex-grow scrollbar-none w-full">
diff --git a/src/modules/prem-upscaler/components/PremUpscaler.tsx b/src/modules/prem-upscaler/components/PremUpscaler.tsx
index 4f9295dc..abaee078 100644
--- a/src/modules/prem-upscaler/components/PremUpscaler.tsx
+++ b/src/modules/prem-upscaler/components/PremUpscaler.tsx
@@ -23,8 +23,8 @@ const PremUpscaler = () => {
     <PremUpscalerContainer
       serviceName={service?.name ?? ""}
       historyId={historyId}
-      serviceId={serviceId!}
-      serviceType={serviceType!}
+      serviceId={serviceId ?? ""}
+      serviceType={serviceType ?? "docker"}
     />
   );
 };
diff --git a/src/modules/prem-upscaler/components/PremUpscalerContainer.tsx b/src/modules/prem-upscaler/components/PremUpscalerContainer.tsx
index daf9fed4..9511e9c1 100644
--- a/src/modules/prem-upscaler/components/PremUpscalerContainer.tsx
+++ b/src/modules/prem-upscaler/components/PremUpscalerContainer.tsx
@@ -1,7 +1,5 @@
-import clsx from "clsx";
 import { useState } from "react";
 import usePremUpscaler from "shared/hooks/usePremUpscaler";
-import { useMediaQuery } from "usehooks-ts";
 
 import type { PremUpscalerContainerProps } from "../types";
 
@@ -18,20 +16,19 @@ const PremUpscalerContainer = ({
   historyId,
 }: PremUpscalerContainerProps) => {
   const [rightSidebar, setRightSidebar] = useState(false);
-  const responsiveMatches = useMediaQuery("(max-width: 767px)");
   const [hamburgerMenuOpen, setHamburgerMenu] = useState<boolean>(true);
   const { currentHistory } = usePremUpscaler(serviceId!, serviceType!, historyId);
 
   return (
     <section>
       <div className="md:flex md:h-screen w-full relative">
-        <div
-          className={clsx("prem-chat-sidebar md:relative", {
-            hidden: responsiveMatches && hamburgerMenuOpen,
-          })}
-        >
-          <PremUpscalerLeftSidebar setHamburgerMenu={setHamburgerMenu} />
-        </div>
+        <PremUpscalerLeftSidebar
+          hamburgerMenuOpen={hamburgerMenuOpen}
+          setHamburgerMenu={setHamburgerMenu}
+          serviceId={serviceId}
+          serviceType={serviceType}
+          historyId={historyId ?? ""}
+        />
         <div className="flex flex-1">
           <div className="bg-lines bg-grey-900 relative h-full w-full">
             <div className="main-content h-full z-10 overflow-y-auto custom-scroll relative prem-img-services min-h-screen">
diff --git a/src/modules/prem-upscaler/components/PremUpscalerLeftSidebar.tsx b/src/modules/prem-upscaler/components/PremUpscalerLeftSidebar.tsx
index 3758ac88..850f0ac0 100644
--- a/src/modules/prem-upscaler/components/PremUpscalerLeftSidebar.tsx
+++ b/src/modules/prem-upscaler/components/PremUpscalerLeftSidebar.tsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { orderBy } from "lodash";
-import { Link, useNavigate, useParams } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import DeleteIcon from "shared/components/DeleteIcon";
 import NoPrompts from "shared/components/NoPrompts";
 import usePremUpscalerStore from "shared/store/prem-upscaler";
@@ -10,9 +10,14 @@ import { shallow } from "zustand/shallow";
 
 import LeftSidebar from "../../../shared/components/LeftSidebar";
 
-const PremUpscalerLeftSidebar = ({ setHamburgerMenu }: HamburgerMenuProps) => {
+const PremUpscalerLeftSidebar = ({
+  hamburgerMenuOpen,
+  setHamburgerMenu,
+  serviceId,
+  serviceType,
+  historyId,
+}: HamburgerMenuProps) => {
   const navigate = useNavigate();
-  const { serviceId, serviceType, historyId } = useParams();
   const responsiveMatches = useMediaQuery("(max-width: 767px)");
   const { history, deleteHistory } = usePremUpscalerStore(
     (state) => ({
@@ -30,7 +35,12 @@ const PremUpscalerLeftSidebar = ({ setHamburgerMenu }: HamburgerMenuProps) => {
   };
 
   return (
-    <LeftSidebar setHamburgerMenu={setHamburgerMenu}>
+    <LeftSidebar
+      hamburgerMenuOpen={hamburgerMenuOpen}
+      setHamburgerMenu={setHamburgerMenu}
+      serviceId={serviceId}
+      serviceType={serviceType}
+    >
       {history.length === 0 && <NoPrompts text="No Images" />}
       <div className="mt-10 overflow-y-auto custom-scroll">
         <ul className="md:flex-grow scrollbar-none w-full">
diff --git a/src/modules/service-detail/components/ServiceDetail.tsx b/src/modules/service-detail/components/ServiceDetail.tsx
index e5e29647..010bac5b 100644
--- a/src/modules/service-detail/components/ServiceDetail.tsx
+++ b/src/modules/service-detail/components/ServiceDetail.tsx
@@ -26,7 +26,7 @@ const ServiceDetail = () => {
     serviceType: Service["serviceType"];
   }>();
   const navigate = useNavigate();
-  const { data: service, isLoading, isFetching, refetch } = useGetService(serviceId!, serviceType!);
+  const { data: service, isLoading, refetch } = useGetService(serviceId!, serviceType!);
 
   const { data: interfaces } = useInterfaces();
 
@@ -39,8 +39,7 @@ const ServiceDetail = () => {
     navigate("/");
   };
 
-  if (isFetching || isLoading || !service || Object.keys(service ?? {}).length === 0)
-    return <ServiceLoading />;
+  if (isLoading || !service || Object.keys(service ?? {}).length === 0) return <ServiceLoading />;
 
   const status = getServiceStatus(service);
 
diff --git a/src/modules/service/components/Docker.tsx b/src/modules/service/components/Docker.tsx
new file mode 100644
index 00000000..27093389
--- /dev/null
+++ b/src/modules/service/components/Docker.tsx
@@ -0,0 +1,7 @@
+import clsx from "clsx";
+
+const Docker = ({ className }: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  return <sup className={clsx("text-[11px] text-white font-bold", className)}>🐳 DOCKER</sup>;
+};
+
+export default Docker;
diff --git a/src/modules/service/components/Local.tsx b/src/modules/service/components/Local.tsx
new file mode 100644
index 00000000..14f6609b
--- /dev/null
+++ b/src/modules/service/components/Local.tsx
@@ -0,0 +1,7 @@
+import clsx from "clsx";
+
+const Local = ({ className }: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  return <sup className={clsx("text-[11px] text-white font-bold", className)}>🖥️ MY COMPUTER</sup>;
+};
+
+export default Local;
diff --git a/src/modules/service/components/PeerToPeer.tsx b/src/modules/service/components/PeerToPeer.tsx
new file mode 100644
index 00000000..3f283c34
--- /dev/null
+++ b/src/modules/service/components/PeerToPeer.tsx
@@ -0,0 +1,7 @@
+import clsx from "clsx";
+
+const PeerToPeer = ({ className }: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  return <sup className={clsx("text-[11px] text-white font-bold", className)}>🍐 PEER TO PEER</sup>;
+};
+
+export default PeerToPeer;
diff --git a/src/modules/service/components/Petals.tsx b/src/modules/service/components/Petals.tsx
deleted file mode 100644
index e99f76ca..00000000
--- a/src/modules/service/components/Petals.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import clsx from "clsx";
-
-const Petals = ({ className }: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
-  return <sup className={clsx("text-[9px] text-white ml-2", className)}>PETALS</sup>;
-};
-
-export default Petals;
diff --git a/src/modules/service/components/PremNetwork.tsx b/src/modules/service/components/PremNetwork.tsx
new file mode 100644
index 00000000..2912fe88
--- /dev/null
+++ b/src/modules/service/components/PremNetwork.tsx
@@ -0,0 +1,7 @@
+import clsx from "clsx";
+
+const PremNetwork = ({ className }: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  return <sup className={clsx("text-[11px] text-white font-bold", className)}>📡 PREM NETWORK</sup>;
+};
+
+export default PremNetwork;
diff --git a/src/modules/service/components/Service.tsx b/src/modules/service/components/Service.tsx
index 697c4438..5de10c41 100644
--- a/src/modules/service/components/Service.tsx
+++ b/src/modules/service/components/Service.tsx
@@ -29,7 +29,18 @@ const Service = () => {
   const progresses = useSettingStore((state) => state.serviceDownloadsInProgress);
   const { mutate: download } = useDownloadServiceStream();
   const downloadingServices = useSettingStore.getState().downloadingServices;
-  const [filter, setFilter] = useState(new Map<string, boolean>());
+  const [filters, setFilters] = useState(new Map<string, boolean>());
+
+  useEffect(() => {
+    const _apps = apps?.concat({
+      id: "available",
+      name: "Available",
+      playground: false,
+      documentation: "",
+      icon: "https://raw.githubusercontent.com/astrit/css.gg/master/icons/svg/smile-mouth-open.svg",
+    });
+    setAppsAugmented(_apps ?? []);
+  }, [apps]);
 
   useEffect(() => {
     const _apps = apps?.concat({
@@ -43,10 +54,10 @@ const Service = () => {
   }, [apps]);
 
   const filteredApps = useMemo(() => {
-    if (filter.size === 0) return appsAugmented;
-    if (![...filter.values()].includes(true)) return appsAugmented;
-    return appsAugmented?.filter((app) => filter.get(app.id) as boolean);
-  }, [appsAugmented, filter]);
+    if (filters.size === 0) return appsAugmented;
+    if (![...filters.values()].includes(true)) return appsAugmented;
+    return appsAugmented?.filter((app) => filters.get(app.id) as boolean);
+  }, [appsAugmented, filters]);
 
   // Resume service download if in progress
   useEffect(() => {
@@ -78,48 +89,57 @@ const Service = () => {
   }, [Object.keys(progresses).length, isServicesLoading, downloadingServices.length]);
 
   const ServicesComponents = useMemo(() => {
-    return filteredApps?.map((app) => {
-      const filteredServices =
-        services?.filter((service) => {
-          if (app.id === "available") {
-            return checkIfAccessible(getServiceStatus(service));
-          } else {
-            return service?.interfaces?.includes(app.id);
-          }
-        }) ?? [];
-      return (
-        <div key={app.id} className="mt-10">
-          <h3 className="text-grey-300 font-bold text-sm md:text-xl flex md:mb-5 mb-[13px]">
-            {app.name}
-          </h3>
-          <div className="flex gap-[22px] flex-wrap ">
-            {filteredServices
-              .sort((a, b) => (checkIfAccessible(getServiceStatus(a)) ? -1 : 1))
-              .map((service, index) => (
-                <ServiceCard
-                  key={`${service.id}_${index}`}
-                  className={clsx("service-card flex-wrap", {
-                    "services-running": service.running,
-                  })}
-                  service={service}
-                />
-              ))}
+    return filteredApps
+      .filter((app) => {
+        if (filters.get("available")) {
+          return app.id === "available";
+        } else {
+          return app.id !== "available";
+        }
+      })
+      .map((app) => {
+        const filteredServices =
+          services?.filter((service) => {
+            if (app.id === "available") {
+              return checkIfAccessible(getServiceStatus(service));
+            } else {
+              return service?.interfaces?.includes(app.id);
+            }
+          }) ?? [];
+        return (
+          <div key={app.id} className="mt-10">
+            <h3 className="text-grey-300 font-bold text-sm md:text-xl flex md:mb-5 mb-[13px]">
+              {app.name}
+            </h3>
+            <div className="flex gap-[22px] flex-wrap ">
+              {filteredServices
+                .sort((a, b) => (checkIfAccessible(getServiceStatus(a)) ? -1 : 1))
+                .map((service, index) => (
+                  <ServiceCard
+                    key={`${service.id}_${index}`}
+                    className={clsx("service-card flex-wrap", {
+                      "services-running": service.running,
+                    })}
+                    service={service}
+                  />
+                ))}
 
-            {!isServicesLoading && filteredServices.length === 0 && (
-              <div className="text-white opacity-70">No services found</div>
-            )}
-            {isServicesLoading && <div className="text-center text-[#8C8C8C]">Loading...</div>}
-            {isDeveloperMode() && <CustomServiceCard />}
+              {!isServicesLoading && filteredServices.length === 0 && (
+                <div className="text-white opacity-70">No services found</div>
+              )}
+              {isServicesLoading && <div className="text-center text-[#8C8C8C]">Loading...</div>}
+              {isDeveloperMode() && <CustomServiceCard />}
+            </div>
           </div>
-        </div>
-      );
-    });
+        );
+      });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     filteredApps?.length,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     JSON.stringify(progresses),
     isServicesLoading,
+    services,
   ]);
 
   return (
@@ -128,7 +148,7 @@ const Service = () => {
         <h2 className="md:!mt-10 max-md:!mt-4">Dashboard</h2>
       </div>
       {appsAugmented && appsAugmented.length > 0 && (
-        <SearchFilter onFilterChange={setFilter} apps={appsAugmented} />
+        <SearchFilter onFilterChange={setFilters} apps={appsAugmented} />
       )}
       {ServicesComponents}
     </AppContainer>
diff --git a/src/modules/service/components/ServiceActions.tsx b/src/modules/service/components/ServiceActions.tsx
index 2b5aaa59..b52e3560 100644
--- a/src/modules/service/components/ServiceActions.tsx
+++ b/src/modules/service/components/ServiceActions.tsx
@@ -89,8 +89,10 @@ const ServiceActions = ({
           refetch();
           toast.success("Service stopped successfully");
         },
-        onError: () => {
+        onError: (error) => {
+          console.error(error);
           toast.error("Failed to stop service");
+          throw error;
         },
       },
     );
@@ -105,8 +107,10 @@ const ServiceActions = ({
           refetch();
           toast.success("Service restarted successfully");
         },
-        onError: () => {
+        onError: (error) => {
+          console.error(error);
           toast.error("Failed to restart service");
+          throw error;
         },
       },
     );
@@ -208,13 +212,15 @@ const ServiceActions = ({
               <img src={cross} alt="cross" width={22} height={22} className="w-6 h-6" />
             </button>
             <ul className={clsx("dropdown-menu", { "dropdown-active": dropdownOpen })}>
-              <li>
-                <button onClick={onRestart}>Restart</button>
-              </li>
               {status === "running" && isDetailView && (
-                <li>
-                  <button onClick={onStop}>Stop</button>
-                </li>
+                <>
+                  <li>
+                    <button onClick={onRestart}>Restart</button>
+                  </li>
+                  <li>
+                    <button onClick={onStop}>Stop</button>
+                  </li>
+                </>
               )}
               {status === "stopped" && (
                 <li>
diff --git a/src/modules/service/components/ServiceCard.tsx b/src/modules/service/components/ServiceCard.tsx
index 8613e344..618d47c4 100644
--- a/src/modules/service/components/ServiceCard.tsx
+++ b/src/modules/service/components/ServiceCard.tsx
@@ -11,7 +11,10 @@ import useWarningModal from "../hooks/useWarningModal";
 import type { ServiceCardProps } from "../types";
 
 import Beta from "./Beta";
-import Petals from "./Petals";
+import Docker from "./Docker";
+import Local from "./Local";
+import PeerToPeer from "./PeerToPeer";
+import PremNetwork from "./PremNetwork";
 import ServiceActions from "./ServiceActions";
 
 const ServiceCard = ({ className, service }: ServiceCardProps) => {
@@ -56,11 +59,23 @@ const ServiceCard = ({ className, service }: ServiceCardProps) => {
           isWarningModalOpen={isWarningModalOpen}
         />
       </div>
-      <h3>
-        {title}
-        {service.beta && <Beta className="md:-top-2 top-[-5px]" />}
-        {service.petals && <Petals className="md:-top-2 top-[-5px]" />}
-      </h3>
+      <div>
+        <h3>
+          {title}
+          {service.beta && <Beta className="md:-top-2 top-[-5px]" />}
+        </h3>
+        {service.petals ? (
+          <p>
+            <PeerToPeer className="md:top-1 right-1" />
+            <PremNetwork className="md:top-1 left-1" />
+          </p>
+        ) : (
+          <p>
+            <Local className="md:top-1 right-1" />
+            {status === "docker_only" && <Docker className="md:top-1 left-1" />}
+          </p>
+        )}
+      </div>
     </Link>
   );
 };
diff --git a/src/modules/service/components/StoppedServiceState.tsx b/src/modules/service/components/StoppedServiceState.tsx
index 47d29b5b..f0843d7e 100644
--- a/src/modules/service/components/StoppedServiceState.tsx
+++ b/src/modules/service/components/StoppedServiceState.tsx
@@ -21,6 +21,7 @@ const StoppedServiceState = ({
   onOpenClick,
   openDeleteModal,
   setOpenDeleteModal,
+  isDetailView,
 }: ServiceStateProps & DeleteModalProps) => {
   const { mutate: deleteMutate, isPending: isDeletePending } = useDeleteService();
   const { mutateAsync: startMutateAsync, isPending: isStartPending } = useStartService();
@@ -70,12 +71,14 @@ const StoppedServiceState = ({
 
   return (
     <>
-      <PrimaryButton
-        className="!rounded-[14px] !px-5 !py-0 !text-[10px] !h-[30px] flex items-center"
-        onClick={onStart}
-      >
-        Open
-      </PrimaryButton>
+      {isDetailView && (
+        <PrimaryButton
+          className="!rounded-[14px] !px-5 !py-0 !text-[10px] !h-[30px] flex items-center"
+          onClick={onStart}
+        >
+          Open
+        </PrimaryButton>
+      )}
       {openDeleteModal && (
         <WarningModal
           icon={<DeleteIcon />}
diff --git a/src/modules/settings/api/addRegistry.ts b/src/modules/settings/api/addRegistry.ts
deleted file mode 100644
index 8caf6927..00000000
--- a/src/modules/settings/api/addRegistry.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { AxiosResponse } from "axios";
-import type { Message } from "modules/service/types";
-
-import api from "../../../shared/api/v1";
-import type { Registries } from "../types";
-
-const addRegistry = async (data: Registries): Promise<AxiosResponse<Message>> => {
-  return api().post(`v1/registries/`, data);
-};
-
-export default addRegistry;
diff --git a/src/modules/settings/api/deleteRegistry.ts b/src/modules/settings/api/deleteRegistry.ts
deleted file mode 100644
index e7f944fc..00000000
--- a/src/modules/settings/api/deleteRegistry.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { AxiosResponse } from "axios";
-import type { Message } from "modules/service/types";
-
-import api from "../../../shared/api/v1";
-import type { Registries } from "../types";
-
-const deleteRegistry = async (data: Registries): Promise<AxiosResponse<Message>> => {
-  return api().delete(`v1/registries/?url=${data.url}`);
-};
-
-export default deleteRegistry;
diff --git a/src/modules/settings/api/fetchRegistries.ts b/src/modules/settings/api/fetchRegistries.ts
deleted file mode 100644
index ddba66d6..00000000
--- a/src/modules/settings/api/fetchRegistries.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { AxiosResponse } from "axios";
-
-import api from "../../../shared/api/v1";
-import type { Registries } from "../types";
-
-const fetchRegistries = async (): Promise<AxiosResponse<Registries[]>> => {
-  return api().get(`v1/registries/`);
-};
-
-export default fetchRegistries;
diff --git a/src/modules/settings/components/Registries.tsx b/src/modules/settings/components/Registries.tsx
index 22b7a084..3cdad051 100644
--- a/src/modules/settings/components/Registries.tsx
+++ b/src/modules/settings/components/Registries.tsx
@@ -1,79 +1,92 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
 import type { FormEvent } from "react";
 import { useState } from "react";
 import { toast } from "react-toastify";
 import MinusArrow from "shared/components/MinusArrow";
-import PlusArrow from "shared/components/PlusArrow";
 import PrimaryButton from "shared/components/PrimaryButton";
 import Spinner from "shared/components/Spinner";
 
-import addRegistry from "../api/addRegistry";
-import deleteRegistry from "../api/deleteRegistry";
-import fetchRegistries from "../api/fetchRegistries";
+import useAddRegistry from "../../../shared/hooks/useAddRegistry";
+import useDeleteRegistry from "../../../shared/hooks/useDeleteRegistry";
+import useFetchRegistries from "../../../shared/hooks/useFetchRegistries";
+import useResetDefaultRegistry from "../../../shared/hooks/useResetDefaultRegistry";
 
 const Registries = () => {
   const [registryUrl, setRegistryUrl] = useState("");
-
+  const { mutate: addRegistry, isPending: isAddRegistryPending } = useAddRegistry();
+  const { mutate: deleteRegistry } = useDeleteRegistry();
+  const { mutateAsync: resetDefaultRegistry } = useResetDefaultRegistry();
   const {
-    isLoading,
-    data: response,
-    refetch,
-  } = useQuery({ queryKey: ["registries"], queryFn: fetchRegistries });
-
-  const { mutate: mutateAddRegistry, isPending: isPendingAddRegistry } = useMutation({
-    mutationFn: addRegistry,
-  });
-  const { mutate: mutateDeleteRegistry } = useMutation({ mutationFn: deleteRegistry });
-
-  const registries = response?.data || [];
+    data: registries,
+    refetch: refetchRegistries,
+    isLoading: isFetchRegistriesLoading,
+  } = useFetchRegistries();
 
   const onSubmit = (e: FormEvent) => {
     e.preventDefault();
-    mutateAddRegistry(
+    addRegistry(
       { url: registryUrl },
       {
-        onSuccess: () => {
+        onSuccess: async () => {
           setRegistryUrl("");
-          refetch();
-          toast.success("Registry added successfully");
+          await refetchRegistries();
+          toast.success("Registry added successfully", { toastId: "add-registry-success" });
         },
-        onError: () => {
-          toast.error("Something went wrong while adding registry");
+        onError: (err) => {
+          console.error("err", err);
+          toast.error("Something went wrong while adding registry", {
+            toastId: "add-registry-error",
+          });
         },
       },
     );
   };
 
   const handleDelete = (url: string) => {
-    mutateDeleteRegistry(
+    deleteRegistry(
       { url },
       {
-        onSuccess: () => {
-          refetch();
-          toast.success("Registry deleted successfully");
+        onSuccess: async () => {
+          await refetchRegistries();
+          toast.success("Registry deleted successfully", { toastId: "delete-registry-success" });
         },
         onError: () => {
-          toast.error("Something went wrong while deleting registry");
+          toast.error("Something went wrong while deleting registry", {
+            toastId: "delete-registry-error",
+          });
         },
       },
     );
   };
 
+  const handleRegistryDefaultReset = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.preventDefault();
+    try {
+      await resetDefaultRegistry();
+      await refetchRegistries();
+      toast.success("Registry reset successful", { toastId: "delete-reset-success" });
+    } catch (err) {
+      console.error("err", err);
+      toast.error("Something went wrong while resetting registry", {
+        toastId: "delete-reset-error",
+      });
+    }
+  };
+
   return (
     <form className="mt-10" onSubmit={onSubmit}>
-      <div className="flex">
-        <label className="text-grey-300 mr-2 backend-url md:text-lg mt-2">Registries</label>
-        <div className="flex w-full">
+      <div className="flex flex-wrap">
+        <h2 className="text-grey-300 w-1/3 md:text-lg mb-2">Registries</h2>
+        <div className="flex w-full md:w-2/3">
           <div className="text-right w-full">
-            {isLoading && (
+            {isFetchRegistriesLoading && (
               <div className="flex justify-center mb-5">
                 <Spinner className="h-10 w-10" />
               </div>
             )}
 
-            {registries.map((registry, index) => {
+            {registries?.map((registry, index) => {
               return (
-                <div key={index} className="flex">
+                <div key={`${registry.url}_${index}`} className="flex">
                   <input
                     className="form-control mb-4"
                     type="text"
@@ -83,7 +96,7 @@ const Registries = () => {
                   <button
                     className="w-8 ml-4"
                     type="button"
-                    onClick={() => handleDelete(registries[index].url)}
+                    onClick={() => handleDelete(registry.url)}
                   >
                     <MinusArrow />
                   </button>
@@ -98,16 +111,17 @@ const Registries = () => {
                 onChange={(e) => setRegistryUrl(e.target.value)}
                 required
               />
-              <button className="w-8 ml-4" type="button">
-                <PlusArrow />
-              </button>
+              <div className="w-8 ml-4" />
             </div>
           </div>
         </div>
       </div>
       <div className="text-right mt-[44px] mr-[45px]">
-        <PrimaryButton type="submit" disabled={isPendingAddRegistry}>
-          {isPendingAddRegistry ? "Updating..." : "Add Registry"}
+        <PrimaryButton onClick={handleRegistryDefaultReset} className="mr-2">
+          Reset
+        </PrimaryButton>
+        <PrimaryButton type="submit" disabled={isAddRegistryPending}>
+          {isAddRegistryPending ? "Updating..." : "Add Registry"}
         </PrimaryButton>
       </div>
     </form>
diff --git a/src/modules/settings/components/Settings.tsx b/src/modules/settings/components/Settings.tsx
index e13784c3..a88457b7 100644
--- a/src/modules/settings/components/Settings.tsx
+++ b/src/modules/settings/components/Settings.tsx
@@ -6,6 +6,8 @@ import AppContainer from "shared/components/AppContainer";
 import DashboardSidebar from "shared/components/DashboardSidebar";
 import { useLockedBody, useMediaQuery } from "usehooks-ts";
 
+import { isDesktopEnv } from "../../../shared/helpers/utils";
+
 import AdvancedSettings from "./AdvancedSettings";
 import GPUResources from "./GPUResources";
 import SwarmMode from "./SwarmMode";
@@ -50,9 +52,11 @@ const Settings = () => {
         <div className="lg:max-w-[80%] mx-auto settings">
           <AdvancedSettings />
         </div>
-        <div className="lg:max-w-[80%] mx-auto settings">
-          <SwarmMode />
-        </div>
+        {isDesktopEnv() ? (
+          <div className="lg:max-w-[80%] mx-auto settings">
+            <SwarmMode />
+          </div>
+        ) : null}
       </div>
     </AppContainer>
   );
diff --git a/src/modules/settings/components/SwarmMode.tsx b/src/modules/settings/components/SwarmMode.tsx
index ddac8d8a..04469e50 100644
--- a/src/modules/settings/components/SwarmMode.tsx
+++ b/src/modules/settings/components/SwarmMode.tsx
@@ -1,9 +1,12 @@
 /* eslint-disable prettier/prettier */
 import { useState, useEffect } from "react";
 import { Tooltip } from "react-tooltip";
+import DeleteIconNew from "shared/components/DeleteIconNew";
 import Spinner from "shared/components/Spinner";
 import {
   swarmSupported,
+  createEnvironment,
+  deleteEnvironment,
   runSwarmMode,
   checkSwarmModeRunning,
   stopSwarmMode,
@@ -11,7 +14,7 @@ import {
   userName,
 } from "shared/helpers/utils";
 import useSettingStore from "shared/store/setting";
-import { Swarm } from "shared/types";
+import { EnvironmentDeletion, Swarm } from "shared/types";
 
 import PrimaryButton from "../../../shared/components/PrimaryButton";
 
@@ -20,6 +23,7 @@ import SwarmModeModal from "./SwarmModeModal";
 const SwarmMode = () => {
   const swarmMode = useSettingStore((state) => state.swarmMode);
   const [isSwarmSupported, setIsSwarmSupported] = useState(false);
+  const hasEnvironment = useSettingStore((state) => state.environmentDeletion);
   const [numBlocks, setNumBlocks] = useState(3);
   const [modelOptions, setModelOptions] = useState<string[]>([]);
   const [model, setModel] = useState<string>("");
@@ -32,13 +36,8 @@ const SwarmMode = () => {
       if (isRunning) {
         useSettingStore.getState().setSwarmMode(Swarm.Active);
       }
-    }, 500);
-
-    console.log("intervalId", intervalId);
-
-    return () => {
-      clearInterval(intervalId);
-    };
+    }, 1500);
+    return () => clearInterval(intervalId);
   }, []);
 
   useEffect(() => {
@@ -49,6 +48,8 @@ const SwarmMode = () => {
     try {
       e.preventDefault();
       useSettingStore.getState().setSwarmMode(Swarm.Creating);
+      await createEnvironment();
+      useSettingStore.getState().setEnvironmentDeletion(EnvironmentDeletion.Idle);
       const user = await userName();
       const publicName = user + "@premAI";
       await runSwarmMode(numBlocks, model, publicName);
@@ -70,6 +71,16 @@ const SwarmMode = () => {
     }
   };
 
+  const onDeleteClick = async () => {
+    try {
+      useSettingStore.getState().setEnvironmentDeletion(EnvironmentDeletion.Progress);
+      await deleteEnvironment();
+      useSettingStore.getState().setEnvironmentDeletion(EnvironmentDeletion.Completed);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
   useEffect(() => {
     async function fetchData() {
       try {
@@ -103,7 +114,9 @@ const SwarmMode = () => {
   return isSwarmSupported ? (
     <>
       <div className="flex flex-wrap justify-between md:mr-[45px] gap-4">
-        <h2 className="text-grey-300 text-lg backend-url">Prem Network</h2>
+        <h2 className="text-grey-300 text-lg backend-url">
+          Prem Network <span className="ml-2 text-primary text-xs">BETA</span>
+        </h2>
 
         {swarmMode === Swarm.Active ? (
           <>
@@ -111,6 +124,26 @@ const SwarmMode = () => {
           </>
         ) : swarmMode === Swarm.Inactive ? (
           <>
+            {hasEnvironment === EnvironmentDeletion.Idle ? (
+              <div className="ml-auto text-right py-4">
+                <button id="delete" className="px-2" onClick={onDeleteClick}>
+                  <DeleteIconNew />
+                </button>
+
+                <Tooltip anchorSelect="#delete" place="left" className="tooltip">
+                  {<div>Reset to default</div>}
+                </Tooltip>
+              </div>
+            ) : hasEnvironment === EnvironmentDeletion.Progress ? (
+              <>
+                <div id="delete-progress">
+                  <Spinner className="h-10 w-10" />
+                </div>
+                <Tooltip anchorSelect="#delete-progress" place="left" className="tooltip">
+                  {<div>Deleting Prem Network environment</div>}
+                </Tooltip>
+              </>
+            ) : null}
             <form className="flex flex-col w-full gap-y-2">
               <div className="flex flex-wrap items-center justify-between">
                 <span id="model" className="text-grey-200 opacity-70">
@@ -176,7 +209,8 @@ const SwarmMode = () => {
         ) : (
           <div className="flex items-center space-x-4 p-4">
             <span className="text-grey-200 opacity-70 m-1">
-              Please do not close the app we are configuring the Swarm Environment...
+              Please do not close the app as we are configuring your environment for the Prem
+              Network...
             </span>
             <Spinner className="h-10 w-10" />
           </div>
diff --git a/src/modules/settings/components/domain/Domains.tsx b/src/modules/settings/components/domain/Domains.tsx
index 6dceb51f..dd8193cd 100644
--- a/src/modules/settings/components/domain/Domains.tsx
+++ b/src/modules/settings/components/domain/Domains.tsx
@@ -14,8 +14,8 @@ const Domains = () => {
 
   useEffect(() => {
     (async () => {
-      const dnsInfo = await apiDnsd().get("dns/existing");
-      setDomains(dnsInfo.data.map((dnsInfo: { domain: any }) => dnsInfo.domain));
+      const { data } = await apiDnsd().get("dns/existing");
+      setDomains(data?.map((dnsInfo: { domain: any }) => dnsInfo.domain) ?? []);
     })();
   }, []);
 
diff --git a/src/modules/settings/types.ts b/src/modules/settings/types.ts
index a8b51149..5f9d3756 100644
--- a/src/modules/settings/types.ts
+++ b/src/modules/settings/types.ts
@@ -2,6 +2,6 @@ export type Health = {
   status: boolean;
 };
 
-export type Registries = {
+export type Registry = {
   url: string;
 };
diff --git a/src/shared/components/BotReply.tsx b/src/shared/components/BotReply.tsx
index 97d118fd..ef3c9e16 100644
--- a/src/shared/components/BotReply.tsx
+++ b/src/shared/components/BotReply.tsx
@@ -11,9 +11,7 @@ const BotReply = ({ reply }: BotReplyProps) => {
       <span className="bot-reply__icon mr-3">
         <img className="mx-[22px]" src={chatReplay} alt="chatReplay" width={18} height={18} />
       </span>
-      <p>
-        <Markdown>{reply}</Markdown>
-      </p>
+      <Markdown>{reply}</Markdown>
       <CopyToClipboard text={reply}>
         <button className="ml-3 bg-white mt-auto rounded-[12px] h-[38px] min-w-[35px]">
           <img className="mx-auto" src={copy} alt="copy" width={16} height={16} />
diff --git a/src/shared/components/DashboardSidebar.tsx b/src/shared/components/DashboardSidebar.tsx
index 6afe5118..1f950839 100644
--- a/src/shared/components/DashboardSidebar.tsx
+++ b/src/shared/components/DashboardSidebar.tsx
@@ -1,12 +1,17 @@
 import brandLogo from "assets/images/brand-logo.svg";
 
+import useSettingStore from "../store/setting";
+
 import DashboardIcon from "./DashboardIcon";
 import DocumentationIcon from "./DocumentationIcon";
 import NavLinkContainer from "./NavLinkContainer";
 import NavLinkItem from "./NavLinkItem";
+import NetworkIcon from "./NetworkIcon";
 import SettingIcon from "./SettingIcon";
 
 const DashboardSidebar = () => {
+  const newFeature = useSettingStore((state) => state.newFeature);
+
   return (
     <div className="sidebar-main sidebar-toggle">
       <div className="pt-10 flex-col px-2 flex md:h-screen sidebar max-md:px-4">
@@ -19,16 +24,24 @@ const DashboardSidebar = () => {
 
         <NavLinkContainer className="sidebar-last__row max-md:mb-5">
           <div className="border-timberwolf opacity-30 -mx-2 pt-[13px]"></div>
+
+          <NavLinkItem
+            target="_blank"
+            to="https://www.premai.io/prem-network"
+            label="Network"
+            icon={<NetworkIcon />}
+          />
           <NavLinkItem
             target="_blank"
             to="https://dev.premai.io/docs/intro"
-            label="Documentation"
+            label="Devs"
             icon={<DocumentationIcon />}
           />
           <NavLinkItem
             to="/settings"
             label="Settings"
             icon={<SettingIcon className="svg-stroke" />}
+            newFeature={newFeature}
           />
         </NavLinkContainer>
       </div>
diff --git a/src/shared/components/LeftSidebar.tsx b/src/shared/components/LeftSidebar.tsx
index c9030d72..8297d05f 100644
--- a/src/shared/components/LeftSidebar.tsx
+++ b/src/shared/components/LeftSidebar.tsx
@@ -1,28 +1,39 @@
+import clsx from "clsx";
 import { useNavigate } from "react-router-dom";
 
 import leftArrow from "../../assets/images/arrow.svg";
 import cross from "../../assets/images/cross.svg";
 import Logo from "../../assets/images/logo.svg";
+import type { Service } from "../../modules/service/types";
 
 interface LeftSidebarProps {
+  hamburgerMenuOpen: boolean;
   setHamburgerMenu: (value: boolean) => void;
+  serviceId: string;
+  serviceType: Service["serviceType"];
   children?: React.ReactNode;
 }
 
-const LeftSidebar = ({ setHamburgerMenu, children }: LeftSidebarProps) => {
+const LeftSidebar = ({
+  hamburgerMenuOpen,
+  setHamburgerMenu,
+  serviceId,
+  serviceType,
+  children,
+}: LeftSidebarProps) => {
   const navigate = useNavigate();
 
   const onCloseClick = () => {
-    navigate("/");
+    navigate(`/services/${serviceId}/${serviceType}/detail`);
   };
 
   return (
-    <div className="md:pt-7 !bg-grey-800 pt-[22px] pb-[10px] flex-col px-2 flex md:h-screen sidebar md:!w-[259px]">
+    <div className={clsx("sidebar left-sidebar", { "max-md:hidden": hamburgerMenuOpen })}>
       <div className="flex max-md:flex-wrap md:gap-4">
         <button className="mx-2" onClick={onCloseClick}>
           <img src={leftArrow} alt="left-arrow" className="max-md:max-w-[15px]" />
         </button>
-        <img className="sidebar__logo" src={Logo} alt="logo" />
+        <img className="left-sidebar__logo" src={Logo} alt="logo" />
         <button
           onClick={() => setHamburgerMenu(true)}
           className="w-[30px] md:hidden z-[11] fixed right-[14px] top-[24px]"
diff --git a/src/shared/components/NavLinkItem.tsx b/src/shared/components/NavLinkItem.tsx
index df38535b..efe08108 100644
--- a/src/shared/components/NavLinkItem.tsx
+++ b/src/shared/components/NavLinkItem.tsx
@@ -1,21 +1,31 @@
-import { NavLink } from "react-router-dom";
 import "react-tooltip/dist/react-tooltip.css";
+
+import clsx from "clsx";
+import { NavLink } from "react-router-dom";
 import { Tooltip } from "react-tooltip";
 import type { NavLinkItemProps } from "shared/types";
 import { useMediaQuery } from "usehooks-ts";
 
-const NavLinkItem = ({ to, icon, label, target }: NavLinkItemProps) => {
+import useSettingStore from "../store/setting";
+
+const NavLinkItem = ({ to, icon, label, target, newFeature = false }: NavLinkItemProps) => {
   const onlyDesktopShow = useMediaQuery("(min-width: 768px)");
+  const setNewFeature = useSettingStore((state) => state.setNewFeature);
+
   return (
     <li>
       <NavLink
         to={to}
         target={target}
         rel="noopener noreferrer"
-        className={({ isActive }) => (isActive ? "active" : "")}
+        className={({ isActive }) => clsx({ active: isActive }, "relative")}
         data-tooltip-id="sidebar-tooltip"
         data-tooltip-content={label}
+        onClick={() => newFeature && setNewFeature(false)}
       >
+        {newFeature ? (
+          <div className="w-2 h-2 bg-danger rounded-full absolute top-[9px] right-[9px]"></div>
+        ) : null}
         {icon}
         <span>{label}</span>
       </NavLink>
diff --git a/src/shared/components/NetworkIcon.tsx b/src/shared/components/NetworkIcon.tsx
new file mode 100644
index 00000000..c71404c0
--- /dev/null
+++ b/src/shared/components/NetworkIcon.tsx
@@ -0,0 +1,7 @@
+import icon from "../../assets/images/network.png";
+
+const NetworkIcon = () => {
+  return <img src={icon} style={{ height: "25px" }} alt="network-icon" />;
+};
+
+export default NetworkIcon;
diff --git a/src/shared/components/PetalsBanner.tsx b/src/shared/components/PetalsBanner.tsx
new file mode 100644
index 00000000..a1413a6a
--- /dev/null
+++ b/src/shared/components/PetalsBanner.tsx
@@ -0,0 +1,20 @@
+const PetalsBanner = () => {
+  return (
+    <div className="flex items-center bg-primary p-4">
+      <p className="z-10">
+        Feeling slow with the Public Network?{" "}
+        <a
+          href="mailto:hello@premai.io"
+          target="_blank"
+          rel="noreferrer"
+          className="underline font-bold"
+        >
+          Get in Touch
+        </a>{" "}
+        for the Pro Plan!
+      </p>
+    </div>
+  );
+};
+
+export default PetalsBanner;
diff --git a/src/shared/components/UserReply.tsx b/src/shared/components/UserReply.tsx
index f88cb4eb..ea2e375f 100644
--- a/src/shared/components/UserReply.tsx
+++ b/src/shared/components/UserReply.tsx
@@ -4,7 +4,7 @@ import type { UserReplyProps } from "shared/types";
 const UserReply = ({ reply }: UserReplyProps) => {
   return (
     <div className="user-reply">
-      <p>{reply}</p>
+      <pre>{reply}</pre>
       <div className="flex justify-center align-center bg-grey-100 ml-3 rounded-full min-w-[35px] h-[35px]">
         <img src={user} alt="user" width={16} height={16} />
       </div>
diff --git a/src/shared/helpers/utils.ts b/src/shared/helpers/utils.ts
index 14c7558c..2048f545 100644
--- a/src/shared/helpers/utils.ts
+++ b/src/shared/helpers/utils.ts
@@ -70,12 +70,20 @@ export const stopSwarmMode = async () => {
   await invoke("stop_swarm_mode");
 };
 
+export const createEnvironment = async () => {
+  await invoke("create_environment");
+};
+
+export const deleteEnvironment = async () => {
+  await invoke("delete_environment");
+};
+
 export const runSwarmMode = async (numBlocks: number, model: string, publicName: string) => {
   const isSwarmMode = await checkSwarmModeRunning();
   if (isSwarmMode) {
     return;
   }
-  await invoke("run_swarm_mode", { numBlocks, model, publicName });
+  await invoke("run_swarm", { numBlocks, model, publicName });
 };
 
 export const isPackaged = () => {
diff --git a/src/shared/hooks/useAddRegistry.ts b/src/shared/hooks/useAddRegistry.ts
new file mode 100644
index 00000000..d0044ea8
--- /dev/null
+++ b/src/shared/hooks/useAddRegistry.ts
@@ -0,0 +1,21 @@
+import { useMutation } from "@tanstack/react-query";
+
+import ServiceController from "../../controller/serviceController";
+import type { Service } from "../../modules/service/types";
+import type { Registry } from "../../modules/settings/types";
+import { isDesktopEnv } from "../helpers/utils";
+
+const useAddRegistry = () => {
+  const controller = ServiceController.getInstance();
+  let serviceType: Service["serviceType"];
+  if (isDesktopEnv()) {
+    serviceType = "binary";
+  } else {
+    serviceType = "docker";
+  }
+  return useMutation({
+    mutationFn: (registry: Registry) => controller.addRegistry(registry, serviceType),
+  });
+};
+
+export default useAddRegistry;
diff --git a/src/shared/hooks/useAutosizeTextarea.ts b/src/shared/hooks/useAutosizeTextarea.ts
new file mode 100644
index 00000000..2722911e
--- /dev/null
+++ b/src/shared/hooks/useAutosizeTextarea.ts
@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+
+// Updates the height of a <textarea> when the value changes.
+const useAutosizeTextArea = (textAreaRef: HTMLTextAreaElement | null, value: string) => {
+  useEffect(() => {
+    if (textAreaRef) {
+      // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+      textAreaRef.style.height = "0px";
+      const scrollHeight = textAreaRef.scrollHeight;
+
+      // We then set the height directly, outside the render loop
+      // Trying to set this with state or a ref will product an incorrect value.
+      textAreaRef.style.height = scrollHeight + "px";
+    }
+  }, [textAreaRef, value]);
+};
+
+export default useAutosizeTextArea;
diff --git a/src/shared/hooks/useDeleteRegistry.ts b/src/shared/hooks/useDeleteRegistry.ts
new file mode 100644
index 00000000..f7fafb96
--- /dev/null
+++ b/src/shared/hooks/useDeleteRegistry.ts
@@ -0,0 +1,21 @@
+import { useMutation } from "@tanstack/react-query";
+
+import ServiceController from "../../controller/serviceController";
+import type { Service } from "../../modules/service/types";
+import type { Registry } from "../../modules/settings/types";
+import { isDesktopEnv } from "../helpers/utils";
+
+const useDeleteRegistry = () => {
+  const controller = ServiceController.getInstance();
+  let serviceType: Service["serviceType"];
+  if (isDesktopEnv()) {
+    serviceType = "binary";
+  } else {
+    serviceType = "docker";
+  }
+  return useMutation({
+    mutationFn: (registry: Registry) => controller.deleteRegistry(registry, serviceType),
+  });
+};
+
+export default useDeleteRegistry;
diff --git a/src/shared/hooks/useFetchRegistries.ts b/src/shared/hooks/useFetchRegistries.ts
new file mode 100644
index 00000000..458427ab
--- /dev/null
+++ b/src/shared/hooks/useFetchRegistries.ts
@@ -0,0 +1,23 @@
+import { useQuery } from "@tanstack/react-query";
+
+import ServiceController from "../../controller/serviceController";
+import type { Service } from "../../modules/service/types";
+import { isDesktopEnv } from "../helpers/utils";
+
+export const SERVICE_KEY = "fetchRegistries";
+
+const useFetchRegistries = () => {
+  let serviceType: Service["serviceType"];
+  if (isDesktopEnv()) {
+    serviceType = "binary";
+  } else {
+    serviceType = "docker";
+  }
+  const controller = ServiceController.getInstance();
+  return useQuery({
+    queryKey: [SERVICE_KEY],
+    queryFn: () => controller.fetchRegistries(serviceType),
+  });
+};
+
+export default useFetchRegistries;
diff --git a/src/shared/hooks/useGetServices.ts b/src/shared/hooks/useGetServices.ts
index bee04a93..c9792a82 100644
--- a/src/shared/hooks/useGetServices.ts
+++ b/src/shared/hooks/useGetServices.ts
@@ -10,7 +10,6 @@ const useGetServices = () => {
   const controller = ServiceController.getInstance();
   // Here we check the env to determine if we should use the binary or docker service
   // and fetch the services accordingly
-  // TODO: Is it ok?
   let serviceType: Service["serviceType"];
   if (isDesktopEnv()) {
     serviceType = "binary";
diff --git a/src/shared/hooks/useResetDefaultRegistry.ts b/src/shared/hooks/useResetDefaultRegistry.ts
new file mode 100644
index 00000000..023bbe02
--- /dev/null
+++ b/src/shared/hooks/useResetDefaultRegistry.ts
@@ -0,0 +1,20 @@
+import { useMutation } from "@tanstack/react-query";
+
+import ServiceController from "../../controller/serviceController";
+import type { Service } from "../../modules/service/types";
+import { isDesktopEnv } from "../helpers/utils";
+
+const useResetDefaultRegistry = () => {
+  const controller = ServiceController.getInstance();
+  let serviceType: Service["serviceType"];
+  if (isDesktopEnv()) {
+    serviceType = "binary";
+  } else {
+    serviceType = "docker";
+  }
+  return useMutation({
+    mutationFn: () => controller.resetDefaultRegistry(serviceType),
+  });
+};
+
+export default useResetDefaultRegistry;
diff --git a/src/shared/store/setting.ts b/src/shared/store/setting.ts
index a4c297c0..e580659a 100644
--- a/src/shared/store/setting.ts
+++ b/src/shared/store/setting.ts
@@ -1,7 +1,7 @@
 import storage from "shared/helpers/custom-storage";
 import { isIP, isPackaged, isProxyEnabled } from "shared/helpers/utils";
 import type { SettingStore, SwarmInfo } from "shared/types";
-import { Swarm } from "shared/types";
+import { EnvironmentDeletion, Swarm } from "shared/types";
 import { create } from "zustand";
 import { createJSONStorage, devtools, persist } from "zustand/middleware";
 
@@ -86,6 +86,8 @@ const useSettingStore = create<SettingStore>()(
             "removeAllServiceAsDownloading",
           );
         },
+        newFeature: true,
+        setNewFeature: (newFeature: boolean) => set(() => ({ newFeature }), false, "setNewFeature"),
         swarmMode: Swarm.Inactive,
         setSwarmMode: (swarmMode: Swarm) => set(() => ({ swarmMode }), false, "setSwarmMode"),
         swarmInfo: null,
@@ -93,6 +95,19 @@ const useSettingStore = create<SettingStore>()(
           set(() => ({ swarmInfo }), false, "setSwarmInfo"),
         apiKey: null,
         setApiKey: (apiKey: string) => set(() => ({ apiKey }), false, "setApiKey"),
+        environmentDeletion: EnvironmentDeletion.Completed,
+        setEnvironmentDeletion: (environmentDeletion: EnvironmentDeletion) =>
+          set(() => ({ environmentDeletion }), false, "setEnvironmentDeletion"),
+        resetSwarm: () => {
+          set(
+            () => ({
+              swarmInfo: null,
+              swarmMode: Swarm.Inactive,
+            }),
+            false,
+            "resetSwarm",
+          );
+        },
       }),
       {
         name: "setting",
diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts
index dc277775..f7a90dea 100644
--- a/src/shared/types/index.ts
+++ b/src/shared/types/index.ts
@@ -1,5 +1,7 @@
 import type { Message, PremChatHistory } from "modules/prem-chat/types";
 
+import type { Service } from "../../modules/service/types";
+
 export type BotReplyProps = {
   reply: string;
 };
@@ -33,6 +35,7 @@ export type NavLinkItemProps = {
   label: string;
   to: string;
   target?: "_blank";
+  newFeature?: boolean;
 };
 
 export enum Swarm {
@@ -41,6 +44,12 @@ export enum Swarm {
   Active = "active",
 }
 
+export enum EnvironmentDeletion {
+  Idle = "idle",
+  Progress = "progress",
+  Completed = "completed",
+}
+
 export type SwarmInfo = {
   model: string;
   publicName: string;
@@ -108,10 +117,15 @@ export type SettingStore = {
   addServiceAsDownloading: (serviceId: string) => void;
   removeServiceAsDownloading: (serviceId: string) => void;
   removeAllServiceAsDownloading: () => void;
+  newFeature: boolean;
+  setNewFeature: (newFeature: boolean) => void;
   swarmMode: Swarm;
   setSwarmMode: (mode: Swarm) => void;
   swarmInfo: SwarmInfo | null;
   setSwarmInfo: (swarmInfo: SwarmInfo | null) => void;
+  environmentDeletion: EnvironmentDeletion | null;
+  setEnvironmentDeletion: (environmentDeletion: EnvironmentDeletion) => void;
+  resetSwarm: () => void;
   apiKey: string | null;
   setApiKey: (apiKey: string) => void;
 };
@@ -122,10 +136,15 @@ export type HeaderProps = {
   hamburgerMenuOpen: boolean;
   setHamburgerMenu: (value: boolean) => void;
   title: string;
+  isPetals?: boolean;
 };
 
 export type HamburgerMenuProps = {
+  hamburgerMenuOpen: boolean;
   setHamburgerMenu: (value: boolean) => void;
+  serviceId: string;
+  serviceType: Service["serviceType"];
+  historyId: string;
 };
 
 export interface RightSidebarProps {
diff --git a/tailwind.config.js b/tailwind.config.js
index 01287e22..b16824f5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -31,11 +31,15 @@ module.exports = {
       },
       ok: "#2ED291",
       warning: "#F9B96D",
+      danger: "#C91432",
     },
     extend: {
       fontFamily: {
         sans: ["Pretendard", ...defaultTheme.fontFamily.sans],
       },
+      minHeight: {
+        14: "3.5rem",
+      },
     },
   },
 };